Update Filter.tsx

src/css/_base.scss

@@ -66,19 +66,10 @@ body .root .content.theme.rtl {
     h1 {
       font-size: x-large;
     }
-    nav, div {
-      direction: ltr;
-      .react-select.language-select {
-        .active {
-          font-size: larger;
-        }
-      }
-    }
   }
 
   footer {
     font-size: large;
-    flex-direction: row-reverse;
   }
 }
 

src/css/main/SurahIndex.scss

@@ -25,6 +25,9 @@ body .root .content.theme {
     input {
       border-radius: 5px;
     }
+    .surah-index-filter {
+      outline: 0;
+    }
 
     @media(max-width: $breakpoint-sm) {
       a {

src/js/components/SurahIndex/Filter.tsx

@@ -27,7 +27,7 @@ export function Filter({ locale, t, setIndex, surahs }: Props) {
 
   return (
     <input
-      className="p-3 h-4 surah-index-filter"
+      className="p-3 h-2 text-base color-primary surah-index-filter"
       type="text"
       placeholder={t(locale, "filter")}
       onChange={onInput}

src/js/components/SurahIndex/index.tsx

@@ -69,7 +69,7 @@ export function SurahIndex({ appVersion, locale, surahs, t }: Props) {
           </li>
         ))}
       </ul>
-      <footer className="flex flex-row justify-between h-16">
+      <footer className="flex flex-row justify-between mb-5 h-12">
         <a
           className="flex flex-row items-center no-underline"
           href={`/${locale.name}/random/`}
@@ -77,7 +77,6 @@ export function SurahIndex({ appVersion, locale, surahs, t }: Props) {
           {locale.direction === "ltr" && <RightArrow />}
           <span
             className={classNames({
-              "text-base": locale.direction === "rtl",
               "pl-3": locale.direction === "ltr",
             })}
           >
@@ -86,9 +85,6 @@ export function SurahIndex({ appVersion, locale, surahs, t }: Props) {
         </a>
         <Filter t={t} locale={locale} surahs={surahs} setIndex={setIndex} />
       </footer>
-      <span className="appver flex justify-end mb-3 w-full font-mono text-xs font-bold">
-        v{appVersion}
-      </span>
     </div>
   );
 }