Misc UI / layout improvements

The Arabic layout is especially improved. The CSS still needs work,
I think the most tech debt is probably within the css.

src/css/_layout.scss

@@ -1,6 +1,10 @@
 $black: #454545;
 $max-width: 1024px;
 
+* {
+  line-height: 1.5;
+}
+
 html[lang="en"] {
   font-family: "Kanit Regular";
 }
@@ -27,6 +31,7 @@ body .root .content.theme {
   margin: 0 auto;
   height: 100%;
   width: 85%;
+  height: 80%;
   max-width: $max-width;
 
   header {
@@ -37,7 +42,7 @@ body .root .content.theme {
       flex-direction: column;
       font-size: xx-large;
       margin: 0;
-      line-height: 1.5;
+      height: 75px;
       a {
         text-decoration: none;
       }
@@ -50,6 +55,7 @@ body .root .content.theme {
     }
 
     nav {
+      height: 40px;
      .react-select {
         display: flex;
         flex-direction: row;
@@ -59,12 +65,11 @@ body .root .content.theme {
         justify-content: flex-end;
       }
       .react-select.language {
-        justify-content: flex-start;
         min-width: 50px;
         text-align: right;
         ul {
           position:relative;
-          top: 15px;
+          right: 82px;
           li {
             align-items: center;
             font-family: "Kanit Regular";
@@ -95,8 +100,8 @@ body .root .content.theme {
     list-style-type: none;
     padding: 0;
     margin: 0;
-    overflow: auto;
+    overflow: scroll;
-    height: 73%;
+    height: 100%;
   }
 
   footer {
@@ -132,21 +137,14 @@ body .root .content.en {
   }
 }
 
-body .root .content.ar {
+body .root .content.theme.ar {
   header {
     nav, div {
       direction: ltr;
-      .localized-name {
-        display: flex;
-        font-size: x-large;
-        justify-content: flex-end;
-        align-items: flex-end;
-        width: 100%;
-      }
-      .transliterated-name {
-        display: none;
-      }
       .react-select.language {
+        ul {
+          top: 15px;
+        }
         .selected-option.ar {
           font-size: x-large;
           position: relative;

src/css/components/Icon.scss

@@ -101,10 +101,7 @@
   ul.stream span.title {
     .sound-on.icon, .sound-off.icon {
       height: 40px;
-      transform: rotate(180deg);
+      transform: rotate(180deg) translate(0, 3px);
-      g {
-        transform: translate(0px, -28px);
-      }
     }
   }
 

src/css/components/Select.scss

@@ -28,7 +28,8 @@
   }
 
   .react-select.language {
-    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-end;
 
     .selected-option.ar {
       font-size: large;
@@ -103,9 +104,6 @@
 
 .content.theme.ar {
   .react-select.language {
-    .selected-option {
-      line-height: 0;
-    }
     ul {
       li {
         align-items: center;

src/css/pages/SurahIndex.scss

@@ -5,7 +5,6 @@
 
 body .root .content.theme {
   header {
-    height: 115px;
     .react-select.language {
       ul li {
         border-radius: 15px;
@@ -17,47 +16,30 @@ body .root .content.theme {
     li.surah a {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      border-radius: 10px;
       min-height: 45px;
+      width: 98%;
 
       &:visited, &:active, &:link {
         text-decoration: none;
       }
 
-      div:first-child {
+      span.id {
-        display: flex;
+        width: 45px;
-        flex-direction: row;
+        font-weight: bolder;
-        height: 32px;
+        font-size: large;
-
+        text-align: center;
-        span {
-          display: flex;
-          align-items: center;
-        }
-
-        span.id {
-          flex-direction: row;
-          justify-content: center;
-          width: 45px;
-          height: 32px;
-          text-align: center;
-          font-weight: bolder;
-          font-size: large;
-        }
-
-        span.name {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          font-weight: normal;
-        }
       }
 
-      .transliterated {
+      span.name {
-        display: flex;
-        flex-direction: column;
-        align-items: end;
-        justify-content: center;
         font-weight: normal;
+      }
+
+      span.transliterated {
+        display: flex;
+        flex-grow: 1;
+        justify-content: flex-end;
+        padding: 0 10px 0 0;
         @media screen and (max-width: $max-width) {
           display: none;
         }
@@ -90,27 +72,20 @@ body .root .content.theme.ar {
 
   ul.body.index {
     li.surah {
-      min-height: 55px;
       a {
-        align-items: unset;
+        font-family: "Mada Regular";
-        div:first-child {
+        span.id {
-          .id {
+          font-size: x-large;
-            font-size: x-large;
-            font-family: "Kanit Regular";
-            width: 55px;
-            height: 47px;
-          }
-          .name {
-            font-size: x-large;
-          }
         }
-        .transliterated { display: none; }
+        span.name {
+          font-size: x-large;
+        }
+        span.transliterated { display: none; }
       }
     }
   }
 
   footer {
-    height: 40px;
     font-family: "Mada Regular";
     a span {
       padding: 0 7px 0 0;

src/css/pages/SurahStream.scss

@@ -3,11 +3,14 @@
 @import "components/Icon";
 @import "components/Scrollbar";
 
-.root .content.theme {
+body .root .content.theme {
+  height: 75%;
+
   ul.body.stream {
     scrollbar-gutter: stable;
 
     li.ayah {
+      padding: 10px 0 10px 0;
       span.title {
         display: flex;
         align-items: center;
@@ -57,27 +60,38 @@
       height: 30px;
     }
   }
-  ul.body.stream {
-    li { padding: 10px 0 0 0; }
-  }
 }
 
-.content.theme.ar {
+body .root .content.theme.ar {
-  header { }
+  header {
+    nav, div {
+      .localized-name {
+        display: flex;
+        font-size: x-large;
+        justify-content: flex-end;
+        align-items: flex-end;
+        width: 100%;
+        line-height: 1;
+      }
+      .transliterated-name {
+        display: none;
+      }
+    }
+  }
 
   ul.body.stream {
     li.ayah:first-child {
-      span.title {
+      padding: 35px 0 10px 0;
-        padding: 15px 0 20px 0;
-      }
     }
     li.ayah {
+      padding: 20px 0 10px 0;
       span.title {
-        font-size: x-large;
+        font-size: larger;
         height: 0;
-        padding: 35px 0 20px 0;
+        font-family: "Mada Regular";
       }
       p {
+        line-height: 3;
         font-size: x-large;
         font-weight: normal;
       }

src/css/themes/blue/pages/_SurahIndex.scss

@@ -13,10 +13,8 @@
         }
       }
 
-      div:first-child {
+      span.id {
-        .id {
+        color: $gold1;
-          color: $gold1;
-        }
       }
     }
   }
@@ -47,10 +45,10 @@
   @import "themes/blue/colors";
   ul.body.index  {
     li.surah a {
-      div:first-child .id {
+      span.id {
         color: $gold1;
       }
-      div:first-child .name {
+      span.name {
         color: $blue1;
       }
     }

src/js/pages/SurahIndex.tsx

@@ -44,14 +44,11 @@ function SurahIndex({ locale, surahs, t }: Props) {
         {surahs.map((surah, key) => (
           <li className="surah" key={key}>
             <a href={`/${locale}/${surah.slug}/`}>
-              <div>
+              <span className="id">{formatNumber(surah.id, locale)}</span>
-                <span className="id">{formatNumber(surah.id, locale)}</span>
+              <span className="name">{surah.localizedName}</span>
-                <span className="name">{surah.localizedName}</span>
+              <span className="transliterated" lang="en">
-              </div>
-
-              <div className="transliterated" lang="en">
                 {surah.transliteratedName}
-              </div>
+              </span>
             </a>
           </li>
         ))}