fix surah ui

arikama · May 15, 2024 · 96a5f1c · 96a5f1c
1 parent 14cdc43
commit 96a5f1c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/src/pages/bookmark.tsx b/src/pages/bookmark.tsx
@@ -226,7 +226,6 @@ export default function BookmarkPage() {
       </Head>
       <div
         style={{
-          fontSize: FONT.FONT_SIZE_S,
           display: "flex",
           justifyContent: "space-between"
         }}

diff --git a/src/pages/favs.tsx b/src/pages/favs.tsx
@@ -68,19 +68,12 @@ export default function FavsPage() {
     return (
       <div
         style={{
-          fontSize: FONT.FONT_SIZE_S,
+          display: "flex",
+          justifyContent: "flex-end"
         }}
       >
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-end"
-          }}
-        >
-          {renderShowHideVerse()}
-          {renderShowHideTranslation()}
-        </div>
-        <Break />
+        {renderShowHideVerse()}
+        {renderShowHideTranslation()}
       </div>
     )
   }
@@ -125,9 +118,6 @@ export default function FavsPage() {
         onClick={() => {
           router.push(`/surahs/${parsed.surah}#${parsed.verse}`)
         }}
-        style={{
-          fontSize: FONT.FONT_SIZE_S,
-        }}
       >
         {surahVerse}
       </Button>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -90,7 +90,6 @@ const IndexPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (pro
         style={{
           display: "flex",
           justifyContent: "space-between",
-          fontSize: FONT.FONT_SIZE_S
         }}
       >
         {

diff --git a/src/pages/surahs/[id].tsx b/src/pages/surahs/[id].tsx
@@ -123,15 +123,12 @@ export default function SurahPage(props: { surah: Surah }) {
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
-              fontSize: FONT.FONT_SIZE_S
             }}
           >
             <div>
               {`${props.surah.surahId}:${verse.verseId}`}
             </div>
             <div>
-              {renderShowHideVerse()}
-              {renderShowHideTranslation()}
               {
                 authContext.isLoggedIn() ?
                   renderFav(`${props.surah.surahId}:${verse.verseId}`)
@@ -178,18 +175,25 @@ export default function SurahPage(props: { surah: Surah }) {
     return (
       <div
         style={{
-          fontSize: FONT.FONT_SIZE_S
+          display: "flex",
+          justifyContent: "space-between"
         }}
       >
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-between"
-          }}
-        >
-          {renderButtons()}
-        </div>
-        <Break />
+        {renderButtons()}
+      </div>
+    )
+  }
+
+  const renderUserActions = () => {
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end"
+        }}
+      >
+        {renderShowHideVerse()}
+        {renderShowHideTranslation()}
       </div>
     )
   }
@@ -206,6 +210,7 @@ export default function SurahPage(props: { surah: Surah }) {
           paddingRight: `${DIMENSIONS.SZ_6}px`
         }}
       >
+        {renderUserActions()}
         {renderVerses()}
       </div>
     </>