Change file drop zone styles closer to HDS

City-of-Helsinki · Sep 2, 2024 · dd673c7 · dd673c7
1 parent 22925c8
commit dd673c7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/frontend/src/common/components/FileDropZone.tsx b/frontend/src/common/components/FileDropZone.tsx
@@ -1,3 +1,4 @@
+import {IconUpload} from "hds-react";
 import React, {useEffect} from "react";
 
 interface FileDropZoneProps {
@@ -95,7 +96,12 @@ export default function FileDropZone({
     return (
         <>
             <div className="file-drop-zone">
-                <div className="file-drop-zone-helptext">{helpText ?? "Pudota tiedostot tähän."}</div>
+                <div className="file-drop-zone-helptext">
+                    <div>
+                        <IconUpload />
+                        {helpText ?? "Pudota tiedostot tähän."}
+                    </div>
+                </div>
             </div>
         </>
     );

diff --git a/frontend/src/styles/components/_FileDropZone.sass b/frontend/src/styles/components/_FileDropZone.sass
@@ -12,21 +12,24 @@
   bottom: 0
   width: auto
   height: auto
-  background: rgba($color-white, 0.90)
-  border: 2px dotted rgba($color-coat-of-arms, 0.90)
+  background: rgba($color-white, 1)
+  border: 2px dotted rgba($color-coat-of-arms, 1)
   &.is-dragging-over-drop-zone
-    background: rgba($color-bus-light, 0.95)
+    background: rgba($color-bus-light, 1)
     border-color: rgba($color-coat-of-arms, 1)
   transition: all 200ms ease-in-out
 
 .file-drop-zone-helptext
+  & > div
+    display: flex
+    align-items: center
+    gap: $spacing-layout-2-xs
   display: grid
   place-items: center
   top: 0%
   bottom: 30%
   position: sticky
   font-size: 28px
-  font-weight: 700
   height: 250px
   pointer-events: none
   color: $color-coat-of-arms