Replace 'RightArrow' with 'Arrow'

src/css/base/_icon.scss

@@ -55,11 +55,16 @@
   }
 
   .refresh.icon,
-  .right-arrow.icon {
+  .right-arrow.icon,
+  .left-arrow.icon {
     height: 16px;
     width: 16px;
   }
 
+  .left-arrow.icon {
+    transform: rotate(180deg);
+  }
+
   .pause.icon {
     g rect {
       width: 15px;

src/css/main/SurahIndex.scss

@@ -32,7 +32,8 @@ body .root .content.theme {
   footer {
     @media(max-width: $breakpoint-sm) {
       border-top: 1px solid #f2f2f2;
-      .right-arrow {
+      .right-arrow,
+      .left-arrow {
         display: none;
       }
       a {

src/css/themes/blue/base/_icon.scss

@@ -26,7 +26,8 @@
         stroke-width: 2;
       }
     }
-    .right-arrow.icon {
+    .right-arrow.icon,
+    .left-arrow.icon {
       g {
         fill: $secondary-color;
       }

src/css/themes/green/base/_icon.scss

@@ -27,7 +27,8 @@
         fill: $primary-color;
       }
     }
-    .right-arrow.icon {
+    .right-arrow.icon,
+    .left-arrow.icon {
       g {
         fill: $primary-color;
       }

src/js/components/Icon.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import classNames from "classnames";
 
 type Props = {
   onClick: () => void;
@@ -159,9 +160,12 @@ export function StalledIcon() {
   );
 }
 
-export function RightArrow() {
+export function Arrow({ direction }: { direction: string }) {
   return (
-    <svg className="right-arrow icon" viewBox="0 0 512.171 512.171">
+    <svg
+      className={classNames(`${direction}-arrow`, "icon")}
+      viewBox="0 0 512.171 512.171"
+    >
       <g>
         <g>
           <path

src/js/components/SurahIndex/index.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from "react";
 import type { Surah, TLocale } from "Quran";
 import { useTheme } from "~/hooks/useTheme";
 import { formatNumber, TFunction } from "~/lib/t";
-import { RightArrow } from "~/components/Icon";
+import { Arrow } from "~/components/Icon";
 import { Head } from "~/components/Head";
 import { Filter } from "./Filter";
 import classNames from "classnames";
@@ -82,10 +82,15 @@ export function SurahIndex({ locale, surahs, t }: Props) {
           className="flex flex-row items-center no-underline"
           href={`/${locale.name}/random/`}
         >
-          {locale.direction === "ltr" && <RightArrow />}
+          {locale.direction === "ltr" ? (
+            <Arrow direction="right" />
+          ) : (
+            <Arrow direction="left" />
+          )}
           <span
             className={classNames({
               "pl-3": locale.direction === "ltr",
+              "pr-3": locale.direction === "rtl",
             })}
           >
             {t(locale, "ChooseRandomChapter")}