fix styles issues

1. fix double lining of text 2. add container around icons
Plant-for-the-Planet-org · Feb 2, 2024 · 18269de · 18269de
1 parent 840da77
commit 18269de
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/temp/VegetationChangeDatabox/Dropdown.tsx b/src/temp/VegetationChangeDatabox/Dropdown.tsx
@@ -60,7 +60,8 @@ const Dropdown = ({ labelIcon, labelTitle, isOpen }: Props) => {
                   option.title === selectedOption.title ? styles.selected : ''
                 }`}
               >
-                {option.icon} {option.title}
+                <div className={styles.optionIcon}>{option.icon}</div>
+                <p>{option.title}</p>
               </li>
             ))}
           </ul>

diff --git a/src/temp/VegetationChangeDatabox/VegetationChangeDatabox.module.scss b/src/temp/VegetationChangeDatabox/VegetationChangeDatabox.module.scss
@@ -34,6 +34,7 @@
         gap: 7px;
         align-items: center;
         justify-content: center;
+        white-space: nowrap;
     }
 
 }
@@ -49,13 +50,21 @@
     background-color: #fff;
     border-radius: 4px;
     font-size: 10px;
-    width: 124px;
+    width: 134px;
 }
 .menuItem {
     display: flex;
     align-items: center;
     padding: 6px 7px;
     gap: 10px;
+    white-space: nowrap;
+    .optionIcon {
+        height: 14px;
+        width: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 .selected {
     border-radius: 4px;
@@ -84,7 +93,7 @@
 }
 @include xsPhoneView {
     .menuButton {
-        width: 121.5px;
+        width: 126.5px;
         height: 21px;
         font-size: 8px;
         padding: 5px 8px;
@@ -97,5 +106,9 @@
     }
     .itemsContainer {
         bottom: 85px;
+        width:118.5px;
+    }
+    .menuItem{
+        gap:4px;
     }
 }