feat(create-page): new create page design #153
@ -83,7 +83,6 @@ li {
|
||||
}
|
||||
|
||||
.fileItem:hover {
|
||||
transition: ease 0.2s;
|
||||
background: #4c82a3;
|
||||
color: white;
|
||||
}
|
||||
|
@ -8,6 +8,39 @@
|
||||
left: 0;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
|
||||
button {
|
||||
transition: ease 0.2s;
|
||||
width: auto;
|
||||
border-radius: 4px;
|
||||
outline: unset;
|
||||
border: unset;
|
||||
background: unset;
|
||||
color: #ffffff;
|
||||
background: #4c82a3;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: unset;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #5e8eab;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background: #447592;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@ -19,7 +52,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-gap: 15px;
|
||||
box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
|
||||
box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
|
||||
max-width: 750px;
|
||||
|
||||
&.expanded {
|
||||
@ -73,7 +106,7 @@
|
||||
|
||||
.textInput {
|
||||
height: 100px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
border: solid 2px #4c82a3;
|
||||
display: flex;
|
||||
@ -84,17 +117,19 @@
|
||||
|
||||
.input {
|
||||
border-radius: 4px;
|
||||
border: solid 1px rgba(0,0,0,0.15);
|
||||
border: solid 1px rgba(0, 0, 0, 0.15);
|
||||
padding: 5px 10px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%),
|
||||
linear-gradient(white, white);
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border: solid 1px rgba(0,0,0,0.15);
|
||||
border: solid 1px rgba(0, 0, 0, 0.15);
|
||||
outline: none;
|
||||
background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 100%),
|
||||
linear-gradient(white, white);
|
||||
}
|
||||
|
||||
.actionsBottom {
|
||||
@ -105,41 +140,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: ease 0.2s;
|
||||
width: auto;
|
||||
border-radius: 4px;
|
||||
outline: unset;
|
||||
border: unset;
|
||||
background: unset;
|
||||
color: #ffffff;
|
||||
background: #4c82a3;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: unset;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transition: ease 0.2s;
|
||||
background: #5e8eab;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transition: ease 0.2s;
|
||||
background: #447592;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.submitButton {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
@ -172,18 +172,18 @@ button:active {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
color: rgba(0,0,0,0.5);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.paginationButton:hover {
|
||||
background: #447592;
|
||||
color: rgba(255,255,255,0.5);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.paginationButtonDone {
|
||||
background: #5e8eab;
|
||||
color: rgb(255,255,255);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.paginationButtonCurrent {
|
||||
@ -204,7 +204,7 @@ button:active {
|
||||
background: white;
|
||||
color: #434343;
|
||||
padding: 5px 30px;
|
||||
box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
|
||||
box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
}
|
||||
|
@ -30,7 +30,7 @@ export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
|
||||
padding: 0
|
||||
}}
|
||||
/>
|
||||
{name ? <label className={styles.username}>{name}</label> : null}
|
||||
{name ? <span className={styles.username}>{name}</span> : null}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
@ -915,7 +915,7 @@ export const CreatePage = () => {
|
||||
</ol>
|
||||
<Button variant="contained" onClick={handleUploadButtonClick}>
|
||||
<FontAwesomeIcon icon={faUpload} />
|
||||
Upload new files
|
||||
<span className={styles.uploadFileText}>Upload new files</span>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
hidden={true}
|
||||
@ -947,6 +947,7 @@ export const CreatePage = () => {
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
name="add-user-role"
|
||||
aria-label="role"
|
||||
value={userRole}
|
||||
variant="filled"
|
||||
@ -1113,6 +1114,7 @@ const DisplayUser = ({
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
name={`change-user-role-${user.pubkey}`}
|
||||
aria-label="role"
|
||||
value={user.role}
|
||||
variant="outlined"
|
||||
@ -1287,6 +1289,7 @@ const SignerRow = ({
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
name={`change-user-role-${user.pubkey}`}
|
||||
aria-label="role"
|
||||
value={user.role}
|
||||
variant="outlined"
|
||||
|
@ -56,6 +56,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.uploadFileText {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.paperGroup {
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
|
@ -225,11 +225,11 @@ export const HomePage = () => {
|
||||
type="button"
|
||||
aria-label="upload files"
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<input id="file-upload" {...getInputProps()} />
|
||||
{isDragActive ? (
|
||||
<p>Drop the files here ...</p>
|
||||
<label htmlFor="file-upload">Drop the files here ...</label>
|
||||
) : (
|
||||
<p>Click or drag files to upload!</p>
|
||||
<label htmlFor="file-upload">Click or drag files to upload!</label>
|
||||
)}
|
||||
</button>
|
||||
<div className={styles.submissions}>
|
||||
|
Loading…
Reference in New Issue
Block a user