Change language dropdown to be similar to the theme dropdown

Not yet perfect but a step in the right direction.
ReflectsLight · Oct 23, 2023 · 3abe18d · 3abe18d
1 parent 84cdd13
commit 3abe18d
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 22 deletions.
diff --git a/src/css/components/Select.scss b/src/css/components/Select.scss
@@ -1,29 +1,68 @@
-.react-select {
-  height: 20px;
-  z-index: 0;
+.root .content.theme {
+  .react-select {
+    height: 20px;
+    z-index: 0;
 
-  .selected-option { cursor: pointer; }
+    .selected-option { cursor: pointer; }
 
-  ul {
-    position: relative;
-    margin: 0;
-    padding: 0;
-    background: #FFF;
-    list-style-type: none;
-    border: 1px solid #CCCCCC;
-    border-radius: 7px;
+    ul {
+      position: relative;
+      margin: 0;
+      padding: 0;
+      background: #FFF;
+      list-style-type: none;
+    }
+
+    ul li {
+      height: 100%;
+      width: 100%;
+      display: block;
+      font-weight: normal;
+      cursor: pointer;
+    }
   }
 
- ul li {
-   height: 100%;
-   width: 100%;
-   display: block;
-   font-weight: normal;
-   &:hover {
-     cursor: pointer;
-     background-color: lighten(#CCCCCC, 15%);
-   }
- }
+  .react-select.language {
+    .selected-option.ar {
+      font-size: large;
+    }
+
+    ul {
+      li {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        font-size: medium;
+        min-height: 35px;
+      }
+
+      li.en {
+        font-family: "Kanit Regular";
+        font-weight: normal;
+      }
+
+      li.ar {
+        display: flex;
+        align-items: flex-start;
+        justify-content: end;
+        line-height: 10px;
+        font-family: "Amiri Quran Regular";
+        font-size: large;
+      }
+    }
+  }
+}
+
+.content.theme.en {
+  .react-select.language {
+    ul li.en { display: none; }
+  }
+}
+
+.content.theme.ar {
+  .react-select.language {
+    ul li.ar { display: none; }
+  }
 }
 
 .react-select.theme {

diff --git a/src/css/themes/blue/components/_Select.scss b/src/css/themes/blue/components/_Select.scss
@@ -23,4 +23,10 @@
   .react-select.theme {
     ul li.blue { display: none; }
   }
+
+  .react-select.language ul {
+    li {
+      color: $blue1;
+    }
+  }
 }
diff --git a/src/css/themes/green.scss b/src/css/themes/green.scss
@@ -5,5 +5,11 @@
 @import "green/components/Icon";
 
 .root .content.theme.green.ar {
+  @import "green/colors";
+
   direction: rtl;
+  .react-select.language {
+    .selected-option { color: $green1; }
+    ul li { color: $green1; }
+  }
 }