Iterate on rtl design

src/css/main/SurahIndex.scss

@@ -20,6 +20,12 @@ body .root .content.theme {
           display: none;
         }
       }
+
+      @media (hover: hover) {
+        &:hover {
+          background: rgba(220, 220, 220, 0.25);
+        }
+      }
     }
   }
 

src/css/themes/blue.scss

@@ -5,6 +5,10 @@
 .root .content.theme.blue {
   @import "blue/base/colors";
 
+  .color-white {
+    color: $white;
+  }
+
   .color-primary {
     color: $primary-color;
   }

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

@@ -8,12 +8,6 @@
         color: $primary-color;
       }
 
-      @media (hover: hover) {
-        &:hover {
-          background: $accent-color;
-        }
-      }
-
       span.id {
         color: $secondary-color;
       }

src/css/themes/green.scss

@@ -1,6 +1,5 @@
 .root .content.theme.green.rtl {
   @import "green/base/colors";
-
   direction: rtl;
 }
 
@@ -18,6 +17,22 @@
   .color-accent {
     color: $accent-color;
   }
+
+  .color-white {
+    color: #FFF;
+  }
+
+  .background-primary {
+    background: $primary-color;
+  }
+
+  .background-secondary {
+    background: $secondary-color;
+  }
+
+  .background-accent {
+    background: $accent-color;
+  }
 }
 
 @import "green/base";

src/css/themes/green/main/_SurahIndex.scss

@@ -9,11 +9,6 @@
 
     @media (hover: hover) {
       &:hover {
-        background: $primary-color;
-        color: $accent-color;
-        span:first-child {
-          color: $accent-color;
-        }
       }
     }
   }

src/js/components/SurahIndex/index.tsx

@@ -40,20 +40,32 @@ export function SurahIndex({ locale, surahs, t }: Props) {
       </Head>
       <ul className="body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6">
         {index.map((surah, key) => (
-          <li className="flex justify-center surah" key={key}>
+          <li
+            className={classNames("flex justify-center surah", {
+              "w-full": locale.direction === "ltr",
+              "w-11/12": locale.direction === "rtl",
+            })}
+            key={key}
+          >
             <a
               className={classNames(
-                "flex items-center color-primary no-underline rounded w-11/12",
+                "flex items-center color-primary no-underline rounded h-14",
                 {
-                  "h-14": locale.direction === "ltr",
+                  "w-full": locale.direction === "rtl",
-                  "h-10": locale.direction === "rtl",
+                  "w-11/12": locale.direction === "ltr",
                 },
               )}
               href={`/${locale.name}/${surah.roman.slug}/`}
             >
+              {locale.direction === "ltr" ? (
                 <span className="color-secondary font-extrabold w-10 text-center">
                   {formatNumber(locale, surah.id)}
                 </span>
+              ) : (
+                <span className="flex items-center justify-center color-white background-secondary w-8 h-8 p-1 mr-5 ml-5 rounded">
+                  {formatNumber(locale, surah.id)}
+                </span>
+              )}
               <span>{surah.name}</span>
               {locale.direction === "ltr" && (
                 <div className="flex justify-end grow pr-3">