Add custom scrollbar rules, improve CSS

src/css/_layout.scss

@@ -1,5 +1,5 @@
 $black: #454545;
-$max-width: 856px;
+$max-width: 1024px;
 
 html[lang="en"] {
   font-family: "Kanit Regular";
@@ -43,24 +43,32 @@ body .root .content.theme {
       }
     }
 
-    nav {
+    nav, div {
       display: flex;
+      flex-wrap: wrap;
       justify-content: space-between;
-      min-height: 35px;
+    }
 
-      .react-select {
+    nav {
+     .react-select {
         display: flex;
-        justify-content: center;
+        flex-direction: row;
+        align-items: center;
       }
-
       .react-select.theme {
-        min-width: 35px;
+        justify-content: flex-start;
       }
-
       .react-select.language {
+        justify-content: flex-end;
         min-width: 70px;
         text-align: right;
-        li { font-family: "Kanit Regular"; }
+        ul li {
+          align-items: flex-start;
+          font-family: "Kanit Regular";
+        }
+      }
+      .br {
+        width: 100%;
       }
     }
   }
@@ -92,6 +100,10 @@ body .root .content.en {
   h1 {
     font-size: x-large;
   }
+  header {
+    nav, div {
+    }
+  }
 }
 
 body .root .content.ar {

src/css/components/Scrollbar.scss

@@ -0,0 +1,11 @@
+.content.theme {
+  ul.body {
+    scrollbar-width: thin;
+
+    /* Chrome, Edge and Safari */
+    &::-webkit-scrollbar {
+      height: 10px;
+      width: 15px;
+    }
+  }
+}

src/css/components/Select.scss

@@ -4,10 +4,9 @@
     flex-direction: column;
 
     height: 20px;
-    z-index: 1;
+    z-index: 3;
 
     .selected-option {
-      z-index: 2;
       cursor: pointer;
     }
 
@@ -24,13 +23,12 @@
       width: 100%;
       font-weight: normal;
       cursor: pointer;
+      background: #fff;
     }
   }
 
   .react-select.language {
-    display: flex;
-    align-items: flex-end;
-    flex-direction: column-reverse;
+    align-items: flex-start;
 
     .selected-option.ar {
       font-size: large;
@@ -43,7 +41,7 @@
         align-items: center;
         justify-content: center;
         font-size: medium;
-        min-height: 35px;
+        height: 30px;
         min-width: 125px;
       }
 
@@ -54,7 +52,7 @@
 
       li.ar {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: end;
         font-family: "Amiri Quran Regular";
         font-size: large;
@@ -96,8 +94,7 @@
   .react-select.language {
     ul {
       li.en {
-        display: flex;
-        visibility: hidden;
+        display: none;
       }
     }
   }
@@ -105,13 +102,16 @@
 
 .content.theme.ar {
   .react-select.language {
+    .selected-option {
+      line-height: 0;
+    }
     ul {
       li {
+        align-items: center;
         justify-content: flex-end;
       }
       li.ar {
-        display: flex;
-        visibility: hidden;
+        display: none;
       }
     }
   }

src/css/pages/SurahIndex.scss

@@ -1,8 +1,13 @@
 @import "layout";
 @import "components/Select";
 @import "components/Icon";
+@import "components/Scrollbar";
 
 body .root .content.theme {
+  header {
+    height: 12vh;
+  }
+
   ul.body.index {
     li.surah a {
       display: flex;

src/css/pages/SurahStream.scss

@@ -1,6 +1,7 @@
 @import "layout";
 @import "components/Select";
 @import "components/Icon";
+@import "components/Scrollbar";
 
 .root .content.theme {
   ul.body.stream {
@@ -51,6 +52,11 @@
 }
 
 .content.theme.en {
+  header {
+    nav {
+      height: 4vh;
+    }
+  }
   ul.body.stream {
     li { padding: 10px 0 0 0; }
   }

src/css/themes/blue.scss

@@ -3,6 +3,7 @@
 @import "blue/pages/SurahStream";
 @import "blue/components/Select";
 @import "blue/components/Icon";
+@import "blue/components/Scrollbar";
 
 .root .content.theme.blue.ar {
   direction: rtl;

src/css/themes/blue/components/_Scrollbar.scss

@@ -0,0 +1,32 @@
+.content.theme.blue {
+  ul.body {
+    @import "themes/blue/colors";
+    scrollbar-color: $blue1;
+
+    ::-webkit-scrollbar-track {
+      border-radius: 5px;
+      background-color: #FFF;
+    }
+
+    ::-webkit-scrollbar-track:hover {
+      background-color: lighten($blue1, 35%);
+    }
+
+    ::-webkit-scrollbar-track:active {
+      background-color: lighten($blue1, 35%);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: $blue1;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: blue1;
+    }
+
+    ::-webkit-scrollbar-thumb:active {
+      background-color: $blue1;
+    }
+  }
+}

src/css/themes/green.scss

@@ -3,6 +3,7 @@
 @import "green/pages/SurahStream";
 @import "green/components/Select";
 @import "green/components/Icon";
+@import "green/components/Scrollbar";
 
 .root .content.theme.green.ar {
   @import "green/colors";

src/css/themes/green/components/_Scrollbar.scss

@@ -0,0 +1,32 @@
+.content.theme.green {
+  ul.body {
+    @import "themes/green/colors";
+    scrollbar-color: $green1;
+
+    ::-webkit-scrollbar-track {
+      border-radius: 5px;
+      background-color: #FFF;
+    }
+
+    ::-webkit-scrollbar-track:hover {
+      background-color: #FFF;
+    }
+
+    ::-webkit-scrollbar-track:active {
+      background-color: #FFF;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: $green1;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: $green1;
+    }
+
+    ::-webkit-scrollbar-thumb:active {
+      background-color: $green1;
+    }
+  }
+}

src/js/components/Select.tsx

@@ -36,7 +36,7 @@ export function Select({ value, children, onChange, className }: Props) {
       >
         {selectedOption.props.children}
       </span>
-
+      <div className="br" />
       <ul hidden={!open}>
         {children.map((option: JSX.Element, key: number) => {
           return (