Re-use bg-color for image upload (#263)

BesLogic · Oct 3, 2024 · efb6f54 · efb6f54
1 parent be6064c
commit efb6f54
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/canopeum_frontend/src/components/analytics/ImageUpload.scss b/canopeum_frontend/src/components/analytics/ImageUpload.scss
@@ -0,0 +1,11 @@
+@import '../../App.scss';
+
+.upload-button {
+  background-color: var(--bs-body-bg);
+}
+
+.upload-instruction {
+  background-color: var(--bs-body-bg);
+  border-radius: $border-radius;
+  padding: 0 0.5rem;
+}
diff --git a/canopeum_frontend/src/components/analytics/ImageUpload.tsx b/canopeum_frontend/src/components/analytics/ImageUpload.tsx
@@ -1,4 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions -- custom input label */
+import './ImageUpload.scss'
+
 import type { ChangeEvent, DragEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -51,8 +53,8 @@ const ImageUpload = ({ id, onChange, imageUrl }: Props) => {
         }}
       >
         <img alt='' src={UploadIcon} />
-        <div className='btn btn-outline-primary'>{t('generic.upload')}</div>
-        <div>{t('analytics.image-upload')}</div>
+        <div className='btn btn-outline-primary upload-button'>{t('generic.upload')}</div>
+        <div className='upload-instruction'>{t('analytics.image-upload')}</div>
       </label>
       <input
         accept={supportedFileTypes.join(',')}