From 5f058719db42711d3584aa7e4a5fd948000016d6 Mon Sep 17 00:00:00 2001 From: Jose Manuel Serrano Amaut <a20122128@pucp.pe> Date: Wed, 15 Mar 2023 19:53:18 -0500 Subject: [PATCH] [FEAT]: Add header and footer config. Also improved inheritance of font color and background from Dropzone.color prop --- .../DropzoneFooter/DropzoneFooter.tsx | 2 +- .../DropzoneHeader/DropzoneHeader.tsx | 2 +- .../components/dropzone/Dropzone.scss | 2 +- .../dropzone/useDropzoneClassName.ts | 21 +++++++++++-------- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx index e4709b2..f58a75f 100644 --- a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx +++ b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx @@ -45,7 +45,7 @@ const DropzoneFooter: React.FC<DropzoneFooterProps> = ( } const finalClassName = resetStyles ? className - : addClassName("files-ui-footer files-ui-footer-border-bg-color", className); + : addClassName("files-ui-footer files-ui-footer-border-rd-top-bg-color", className); const finalStyle = resetStyles ? style diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx index d93cb00..b4c4084 100644 --- a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx +++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx @@ -114,7 +114,7 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = ( const finalClassName = resetStyles ? className - : addClassName("files-ui-header files-ui-header-border", className); + : addClassName("files-ui-header files-ui-header-border-rd", className); const finalStyle = resetStyles ? style : { diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss index 84ad391..9482faa 100644 --- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss +++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss @@ -88,7 +88,7 @@ flex-direction: column; align-items: flex-start; justify-content: center; - border-top: 1px dotted grey; + //border-top: 1px dotted grey; //background-color: rgba(128, 128, 128, 0.129); font-family: "Poppins", sans-serif; font-family: inherit; diff --git a/src/files-ui/components/dropzone/useDropzoneClassName.ts b/src/files-ui/components/dropzone/useDropzoneClassName.ts index 67565ef..4137548 100644 --- a/src/files-ui/components/dropzone/useDropzoneClassName.ts +++ b/src/files-ui/components/dropzone/useDropzoneClassName.ts @@ -103,20 +103,23 @@ const makeDynamicDropzoneStyleSheet = ( minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight, }, }; - const footerBorderStyle: DynamicSheetRule = { - className: `files-ui-footer-border-bg-color`, - rules: { - "border-bottom-left-radius": DEFAULT_BORDER_RADIUS, - "border-bottom-right-radius": DEFAULT_BORDER_RADIUS, - backgroundColor: completeAsureColor(color, 0.129) - }, - }; + const headerBorderStyle: DynamicSheetRule = { - className: `files-ui-header-border`, + className: `files-ui-header-border-rd`, rules: { "border-top-left-radius": DEFAULT_BORDER_RADIUS, "border-top-right-radius": DEFAULT_BORDER_RADIUS, }, + }; + const footerBorderStyle: DynamicSheetRule = { + className: `files-ui-footer-border-rd-top-bg-color`, + rules: { + "border-bottom-left-radius": DEFAULT_BORDER_RADIUS, + "border-bottom-right-radius": DEFAULT_BORDER_RADIUS, + backgroundColor: completeAsureColor(color, 0.129), + borderTop: `1px dotted ${completeAsureColor(color)}` + + }, }; const sheetRules: DynamicSheetRule[] = [rootColorBorderStyle]; -- GitLab