💄(react) improve FileUploader style

Based on recent QA feedbacks we needed to do small changes to the style
of the FileUploader.
This commit is contained in:
Nathan Vasse
2023-09-07 11:20:04 +02:00
committed by NathanVss
parent 6257dd9cbc
commit d36e31448e
7 changed files with 13 additions and 6 deletions

View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
improve FileUploader style

View File

@@ -40,7 +40,7 @@ export const FileUploaderMulti = forwardRef<
<span>{formatBytes(file.size)}</span>
<Button
color="tertiary"
size="small"
size="nano"
aria-label={t(
"components.forms.file_uploader.delete_file_name",
{

View File

@@ -93,13 +93,14 @@
font-size: var(--c--components--forms-fileuploader--file-text-size);
font-weight: var(--c--components--forms-fileuploader--file-text-weight);
color: var(--c--components--forms-fileuploader--file-text-color);
height: 2.5rem;
padding: 0 .75rem;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
&__name {
padding: 0.5rem;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
@@ -112,6 +113,7 @@
font-size: var(--c--components--forms-fileuploader--file-specs-size);
color: var(--c--components--forms-fileuploader--file-specs-color);
flex-shrink: 0;
gap: 0.5rem;
.material-icons {
font-size: 1rem;

View File

@@ -4,7 +4,7 @@ export const tokens = (defaults: DefaultTokens) => ({
"background-color": "white",
"border-color": defaults.theme.colors["greyscale-300"],
"border-radius": "0.5rem",
"border-width": "1px",
"border-width": "2px",
"border-style": "dotted",
"background-color--active": defaults.theme.colors["primary-100"],
color: defaults.theme.colors["greyscale-900"],

View File

@@ -160,7 +160,7 @@
--c--components--forms-fileuploader--background-color: white;
--c--components--forms-fileuploader--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-fileuploader--border-radius: 0.5rem;
--c--components--forms-fileuploader--border-width: 1px;
--c--components--forms-fileuploader--border-width: 2px;
--c--components--forms-fileuploader--border-style: dotted;
--c--components--forms-fileuploader--background-color--active: var(--c--theme--colors--primary-100);
--c--components--forms-fileuploader--color: var(--c--theme--colors--greyscale-900);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long