Further UI improvements

src/css/_layout.scss

@@ -7,7 +7,6 @@ $max-width: 728px;
 
 [lang="ar"] {
   font-family: "Noto Sans Arabic Regular";
-  font-weight: bold;
 }
 
 html {
@@ -47,6 +46,7 @@ body .root .content .row.title {
   place-content: center;
   text-decoration: none;
   width: 100%;
+  font-size: large;
 }
 
 body .root .content .row.dropdown-row {

src/css/components/Icon.scss

@@ -1,3 +1,7 @@
+.icon {
+  cursor: pointer;
+}
+
 .play.icon, .pause.icon {
   width: 32px;
   height: 22px;
@@ -25,7 +29,7 @@
 .stalled.icon {
   display: inline-block;
   position: relative;
-  left: 7px;
+  left: -26px;
   height: 4px;
 
   div {

src/css/pages/SurahIndex.scss

@@ -9,38 +9,57 @@ ul.body.index {
   overflow: auto;
 
   li.surah {
-    display: flex;
     width: 100%;
     margin-bottom: 10px;
   }
 
   li.surah a {
     display: flex;
+    justify-content: space-between;
     width: 100%;
 
     &:visited, &:active, &:link {
       text-decoration: none;
     }
-  }
 
-  li.surah a .surah.id {
-    text-align: center;
-    width: 25px;
-  }
+    div:first-child {
+      display: flex;
+      flex-direction: row;
+      height: 32px;
 
-  li.surah a .surah.name {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 210px;
-  }
+      span {
+        display: flex;
+        align-items: center;
+      }
 
-  li.surah a .surah.name.transliterated {
-    align-items: end;
-    width: 200px;
+      span.id {
+        flex-direction: row;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        text-align: center;
+        font-weight: bold;
+      }
 
-    @media screen and (max-width: $max-width) {
-      display: none;
+      span.name {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: unset;
+        width: 210px;
+        font-weight: normal;
+      }
+    }
+
+    .transliterated {
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+      justify-content: center;
+      font-weight: normal;
+      @media screen and (max-width: $max-width) {
+        display: none;
+      }
     }
   }
 }
@@ -51,20 +70,30 @@ body .root .content .row.surah.choose-random {
 }
 
 body .root .content.theme.en {
-  ul.body.index a .surah.id {
-    margin-right: 5px;
-  }
-}
-
-body .root .content.theme.ar {
-  ul.body.index {
-    a .surah.id {
-      width: 35px;
-      padding: 1px;
-      margin-left: 8px;
+  ul.body.index li.surah {
+    a div:first-child .id {
+      margin-right: 5px;
     }
   }
 }
 
+body .root .content.theme.ar {
+  font-size: larger;
+  ul.body.index {
+    li.surah {
+      a div:first-child .id {
+        width: 40px;
+        margin-left: 8px;
+      }
+      a div:first-child .name {
+        font-size: large;
+      }
+      .transliterated { display: none; }
+    }
+
+  }
+
+}
+
 @import "themes/moon";
 @import "themes/leaf";

src/css/pages/SurahStream.scss

@@ -46,6 +46,8 @@
 
   .timer {
     display: flex;
+    position: relative;
+    left: 8px;
     justify-content: flex-end;
     width: 40px;
 
@@ -76,11 +78,6 @@
       }
     }
   }
-
-  .row.footer .timer {
-    position: relative;
-    top: 2px;
-  }
 }
 
 @import "themes/moon";

src/css/themes/leaf/components/_Icon.scss

@@ -0,0 +1,24 @@
+.footer {
+  .play.icon {
+    background: unset;
+    g path {
+      fill: $green;
+      stroke: $green;
+      stroke-width: 3px;
+    }
+  }
+
+  .pause.icon {
+    background: unset;
+    g rect {
+      fill: $green;
+      stroke: $green;
+      stroke-width: 1px;
+    }
+  }
+
+  .refresh.icon {
+    background: unset;
+    fill: $green;
+  }
+}

src/css/themes/leaf/pages/_SurahStream.scss

@@ -1,5 +1,6 @@
 .root .content.theme.leaf {
   @import "themes/leaf/colors";
+  @import "themes/leaf/components/Icon";
 
   .row.details {
     color: $green;
@@ -12,8 +13,7 @@
   }
 
   .timer {
-    background-color: $green;
-    color: $white-primary;
+    color: $green;
   }
 
   .row .shape.refresh {
@@ -21,11 +21,11 @@
     fill: $green;
   }
 
-  .row .loading div {
+  .stalled.icon {
     background: $green;
   }
 
-  .svg.sound-on, .svg.sound-off {
+  .sound-on.icon, .svg.sound-off.icon {
     polygon {
       fill: $green;
       stroke-width: 2;

src/css/themes/moon/_layout.scss

@@ -2,7 +2,7 @@
   @import "colors";
 
   .row.title {
-    color: $gold-primary;
+    color: $blue-primary;
   }
 
   .row.dropdown-row .react-select {

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

@@ -5,17 +5,13 @@
     justify-content: center;
   }
 
-  ul.body.index a {
+  ul.body.index li.surah a {
     &:active, &:link, &:visited {
       color: $blue-primary;
     }
 
-    .surah.id {
-      background: $gold-secondary;
-      color: $white-primary;
-      border-radius: 5px;
-      padding: 3px;
-      border: 1px solid $blue-primary;
+    div:first-child .id {
+      color: $gold-secondary;
     }
   }
 

src/js/pages/SurahIndex.tsx

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