Merge pull request #324 from amplimindcc/323-add-styling-to-upload-bu…

…tton style upload button
amplimindcc · Jun 10, 2024 · 5b4058a · 5b4058a
2 parents e270bf7 + 6e02c8a
commit 5b4058a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/pages/Commit/components/LocalizedFileInput.css b/src/pages/Commit/components/LocalizedFileInput.css
@@ -1,5 +1,12 @@
 .localized-file-input-span {
+    margin-left: 7px;
+}
 
-    margin-left: 7px;
+.custom-file-input button.button {
+    background-color: #2d656f;
+}
 
-}
+.custom-file-input button.button:hover {
+    background-color: #06f87f;
+    color: #002339;
+}

diff --git a/src/pages/Commit/components/LocalizedFileInput.scss b/src/pages/Commit/components/LocalizedFileInput.scss
@@ -2,4 +2,13 @@
 
 .localized-file-input-span {
     margin-left: 7px;
+}
+
+.custom-file-input button.button {
+    background-color: $amplimind-accent-light-blue;
+}
+
+.custom-file-input button.button:hover {
+    background-color: $amplimind-accent-green;
+    color: $amplimind-accent-dark-blue;
 }
diff --git a/src/pages/Commit/components/LocalizedFileInput.tsx b/src/pages/Commit/components/LocalizedFileInput.tsx
@@ -63,7 +63,7 @@ const LocalizedFileInput: React.FC<LocalizedFileInputProps> = ({ onChange, accep
                 data-testid="fileUpload"
             />
             <label htmlFor='fileInput' className='custom-file-input'>
-                <button type="button">
+                <button className="button" type="button">
                     {t('browse')}
                 </button>
             </label>