fix: leaky styling and warnings

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

View File

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

View File

@ -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 {
@ -88,13 +121,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);
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;

View File

@ -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>
)
}

View File

@ -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"

View File

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

View File

@ -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}>