fix: leaky styling and warnings

Closes #147
This commit is contained in:
enes 2024-08-20 09:23:42 +02:00
parent 2fdaa485da
commit 6a0402a74d
6 changed files with 58 additions and 52 deletions

View File

@ -77,7 +77,6 @@ ul {
} }
.fileItem:hover { .fileItem:hover {
transition: ease 0.2s;
background: #4c82a3; background: #4c82a3;
color: white; color: white;
} }

View File

@ -8,6 +8,39 @@
left: 0; left: 0;
align-items: center; align-items: center;
z-index: 1000; 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 { .actions {
@ -88,13 +121,15 @@
padding: 5px 10px; padding: 5px 10px;
font-size: 16px; font-size: 16px;
width: 100%; 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 { .input:focus {
border: solid 1px rgba(0, 0, 0, 0.15); border: solid 1px rgba(0, 0, 0, 0.15);
outline: none; 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 { .actionsBottom {
@ -105,41 +140,6 @@
align-items: center; 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 { .submitButton {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;

View File

@ -30,7 +30,7 @@ export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
padding: 0 padding: 0
}} }}
/> />
{name ? <label className={styles.username}>{name}</label> : null} {name ? <span className={styles.username}>{name}</span> : null}
</Link> </Link>
) )
} }

View File

@ -915,7 +915,7 @@ export const CreatePage = () => {
</ol> </ol>
<Button variant="contained" onClick={handleUploadButtonClick}> <Button variant="contained" onClick={handleUploadButtonClick}>
<FontAwesomeIcon icon={faUpload} /> <FontAwesomeIcon icon={faUpload} />
Upload new files <span className={styles.uploadFileText}>Upload new files</span>
<input <input
ref={fileInputRef} ref={fileInputRef}
hidden={true} hidden={true}
@ -947,6 +947,7 @@ export const CreatePage = () => {
}} }}
/> />
<Select <Select
name="add-user-role"
aria-label="role" aria-label="role"
value={userRole} value={userRole}
variant="filled" variant="filled"
@ -1113,6 +1114,7 @@ const DisplayUser = ({
/> />
</div> </div>
<Select <Select
name={`change-user-role-${user.pubkey}`}
aria-label="role" aria-label="role"
value={user.role} value={user.role}
variant="outlined" variant="outlined"
@ -1287,6 +1289,7 @@ const SignerRow = ({
/> />
</div> </div>
<Select <Select
name={`change-user-role-${user.pubkey}`}
aria-label="role" aria-label="role"
value={user.role} value={user.role}
variant="outlined" variant="outlined"

View File

@ -56,6 +56,10 @@
} }
} }
.uploadFileText {
margin-left: 12px;
}
.paperGroup { .paperGroup {
border-radius: 4px; border-radius: 4px;
background: white; background: white;

View File

@ -225,11 +225,11 @@ export const HomePage = () => {
type="button" type="button"
aria-label="upload files" aria-label="upload files"
> >
<input {...getInputProps()} /> <input id="file-upload" {...getInputProps()} />
{isDragActive ? ( {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> </button>
<div className={styles.submissions}> <div className={styles.submissions}>