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 {
@ -19,7 +52,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
grid-gap: 15px; 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; max-width: 750px;
&.expanded { &.expanded {
@ -73,7 +106,7 @@
.textInput { .textInput {
height: 100px; height: 100px;
background: rgba(0,0,0,0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
border: solid 2px #4c82a3; border: solid 2px #4c82a3;
display: flex; display: flex;
@ -84,17 +117,19 @@
.input { .input {
border-radius: 4px; border-radius: 4px;
border: solid 1px rgba(0,0,0,0.15); border: solid 1px rgba(0, 0, 0, 0.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;
@ -172,18 +172,18 @@ button:active {
font-size: 12px; font-size: 12px;
padding: 5px 10px; padding: 5px 10px;
border-radius: 3px; border-radius: 3px;
background: rgba(0,0,0,0.1); background: rgba(0, 0, 0, 0.1);
color: rgba(0,0,0,0.5); color: rgba(0, 0, 0, 0.5);
} }
.paginationButton:hover { .paginationButton:hover {
background: #447592; background: #447592;
color: rgba(255,255,255,0.5); color: rgba(255, 255, 255, 0.5);
} }
.paginationButtonDone { .paginationButtonDone {
background: #5e8eab; background: #5e8eab;
color: rgb(255,255,255); color: rgb(255, 255, 255);
} }
.paginationButtonCurrent { .paginationButtonCurrent {
@ -204,7 +204,7 @@ button:active {
background: white; background: white;
color: #434343; color: #434343;
padding: 5px 30px; 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; position: absolute;
top: -25px; top: -25px;
} }

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