fix ui

arikama · May 15, 2024 · 14cdc43 · 14cdc43
1 parent 7f8bd86
commit 14cdc43
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 49 deletions.
diff --git a/__tests__/components/app_nav.test.tsx b/__tests__/components/app_nav.test.tsx
@@ -43,13 +43,13 @@ describe('AppNav', () => {
       </AuthContext.Provider>
     )
 
-    const koranNav = await screen.findByText('Koran')
+    const koranNav = await screen.findByText('koran')
 
     expect(koranNav).toBeInTheDocument()
     expect(await userEvent.click(koranNav))
     expect(pushMock).toBeCalledWith('/')
 
-    const bookmarkNav = await screen.findByText('Bookmark')
+    const bookmarkNav = await screen.findByText('bookmark')
 
     expect(bookmarkNav).toBeInTheDocument()
     expect(await userEvent.click(bookmarkNav))
@@ -79,13 +79,13 @@ describe('AppNav', () => {
       </AuthContext.Provider>
     )
 
-    const koranNav = await screen.findByText('Koran')
+    const koranNav = await screen.findByText('koran')
 
     expect(koranNav).toBeInTheDocument()
     expect(await userEvent.click(koranNav))
     expect(pushMock).toBeCalledWith('/')
 
-    const bookmarkNav = await screen.findByText('Bookmark')
+    const bookmarkNav = await screen.findByText('bookmark')
 
     expect(bookmarkNav).toBeInTheDocument()
     expect(await userEvent.click(bookmarkNav))

diff --git a/__tests__/components/login_button.test.tsx b/__tests__/components/login_button.test.tsx
@@ -36,7 +36,7 @@ describe('LoginButton', () => {
       </AuthContext.Provider>
     )
 
-    const loginButton = screen.getByText('Login')
+    const loginButton = screen.getByText('login')
     expect(loginButton).toBeInTheDocument()
 
     await userEvent.click(loginButton)

diff --git a/__tests__/pages/app.test.tsx b/__tests__/pages/app.test.tsx
@@ -12,8 +12,8 @@ describe("App", () => {
     render(
       <App />
     )
-    expect(screen.getByText("Koran")).toBeInTheDocument()
-    expect(screen.getByText("Bookmark")).toBeInTheDocument()
-    expect(screen.getByText("Login")).toBeInTheDocument()
+    expect(screen.getByText("koran")).toBeInTheDocument()
+    expect(screen.getByText("bookmark")).toBeInTheDocument()
+    expect(screen.getByText("login")).toBeInTheDocument()
   })
 })
diff --git a/__tests__/pages/bookmark.test.tsx b/__tests__/pages/bookmark.test.tsx
@@ -77,7 +77,7 @@ describe("BookmarkPage", () => {
     expect(await screen.findByText("1:1:verse")).toBeInTheDocument()
     expect(await screen.findByText("1:1:translation")).toBeInTheDocument()
 
-    const nextButton = await screen.findByText("Next")
+    const nextButton = await screen.findByText("next")
     await userEvent.click(nextButton)
 
     expect(await screen.findByText("1:2")).toBeInTheDocument()

diff --git a/__tests__/pages/favs.test.tsx b/__tests__/pages/favs.test.tsx
@@ -72,8 +72,8 @@ describe('FavsPage', () => {
       )
     })
 
-    expect(await screen.findByText("hide verse")).toBeInTheDocument()
-    expect(await screen.findByText("hide translation")).toBeInTheDocument()
+    expect(await screen.findByText("📖")).toBeInTheDocument()
+    expect(await screen.findByText("☪️")).toBeInTheDocument()
 
     expect(await screen.findByText("1:1")).toBeInTheDocument()
     expect(await screen.findByText("verse 1:1")).toBeInTheDocument()
@@ -84,18 +84,18 @@ describe('FavsPage', () => {
     expect(await screen.findByText("translation 1:2")).toBeInTheDocument()
 
     await act(async () => {
-      await userEvent.click(await screen.findByText("hide verse"))
+      await userEvent.click(await screen.findByText("📖"))
     })
 
-    expect(screen.queryByText("verse 1:1")).not.toBeInTheDocument()
-    expect(screen.queryByText("verse 1:2")).not.toBeInTheDocument()
+    expect(screen.queryByText("☪️ 1:1")).not.toBeInTheDocument()
+    expect(screen.queryByText("☪️ 1:2")).not.toBeInTheDocument()
 
     await act(async () => {
-      await userEvent.click(await screen.findByText("hide translation"))
+      await userEvent.click(await screen.findByText("☪️"))
     })
 
-    expect(screen.queryByText("translation 1:1")).not.toBeInTheDocument()
-    expect(screen.queryByText("translation 1:2")).not.toBeInTheDocument()
+    expect(screen.queryByText("📖 1:1")).not.toBeInTheDocument()
+    expect(screen.queryByText("📖 1:2")).not.toBeInTheDocument()
 
     await act(async () => {
       await userEvent.click(await screen.findByText("1:1"))

diff --git a/__tests__/pages/profile.test.tsx b/__tests__/pages/profile.test.tsx
@@ -66,7 +66,7 @@ describe('ProfilePage', () => {
     expect(await screen.findByText('Amir')).toBeInTheDocument()
     expect(await screen.findByText('[email protected]')).toBeInTheDocument()
 
-    const logoutButton = await screen.findByText('Logout')
+    const logoutButton = await screen.findByText('logout')
     expect(logoutButton).toBeInTheDocument()
 
     await userEvent.click(logoutButton)

diff --git a/__tests__/pages/surahs/[id].test.tsx b/__tests__/pages/surahs/[id].test.tsx
@@ -68,7 +68,7 @@ describe('SurahPage', () => {
       </AuthContext.Provider>
     )
 
-    await userEvent.click((await screen.findAllByText('favorite'))[0])
+    await userEvent.click((await screen.findAllByText('🩶'))[0])
     await userEvent.click((await screen.findAllByText('❤️'))[0])
   })
 })
diff --git a/src/components/login_button.tsx b/src/components/login_button.tsx
@@ -36,7 +36,7 @@ export const LoginButton = () => {
 
   const Login = () => {
     return (
-      <Button onClick={googleLogin}>Login</Button>
+      <Button onClick={googleLogin}>login</Button>
     )
   }
 

diff --git a/src/components/show_hide_button.tsx b/src/components/show_hide_button.tsx
@@ -1,15 +1,16 @@
 import { Button } from "./button"
 
 export const ShowHideButton = (props: {
-  what: string
+  show: string
+  hide: string
   isHiding: boolean
   onClick: () => void
 }) => {
   return (
     <Button
       onClick={props.onClick}
     >
-      {props.isHiding ? "show" : "hide"}&nbsp;{props.what}
+      {props.isHiding ? props.show : props.hide}
     </Button>
   )
 }
diff --git a/src/pages/favs.tsx b/src/pages/favs.tsx
@@ -88,7 +88,8 @@ export default function FavsPage() {
   const renderShowHideVerse = () => {
     return (
       <ShowHideButton
-        what="verse"
+        show='🛐'
+        hide='☪️'
         isHiding={favSettings.hideVerse}
         onClick={() => {
           updateFavSettings({
@@ -103,7 +104,8 @@ export default function FavsPage() {
   const renderShowHideTranslation = () => {
     return (
       <ShowHideButton
-        what="translation"
+        show="📕"
+        hide="📖"
         isHiding={favSettings.hideTranslation}
         onClick={() => {
           updateFavSettings({

diff --git a/src/pages/surahs/[id].tsx b/src/pages/surahs/[id].tsx
@@ -55,15 +55,16 @@ export default function SurahPage(props: { surah: Surah }) {
           textDecoration: isFav ? undefined : "underline"
         }}
       >
-        {!favSet.has(surahVerse) ? "favorite" : <div style={{ fontSize: `${FONT.FONT_SIZE_S}` }}>❤️</div>}
+        {!favSet.has(surahVerse) ? "🩶" : "❤️"}
       </Button>
     )
   }
 
   const renderShowHideVerse = () => {
     return (
       <ShowHideButton
-        what="verse"
+        show='🛐'
+        hide='☪️'
         isHiding={surahSettings.hideVerse}
         onClick={() => {
           updateSurahSettings({
@@ -78,7 +79,8 @@ export default function SurahPage(props: { surah: Surah }) {
   const renderShowHideTranslation = () => {
     return (
       <ShowHideButton
-        what="translation"
+        show="📕"
+        hide="📖"
         isHiding={surahSettings.hideTranslation}
         onClick={() => {
           updateSurahSettings({
@@ -128,6 +130,8 @@ export default function SurahPage(props: { surah: Surah }) {
               {`${props.surah.surahId}:${verse.verseId}`}
             </div>
             <div>
+              {renderShowHideVerse()}
+              {renderShowHideTranslation()}
               {
                 authContext.isLoggedIn() ?
                   renderFav(`${props.surah.surahId}:${verse.verseId}`)
@@ -190,27 +194,6 @@ export default function SurahPage(props: { surah: Surah }) {
     )
   }
 
-  const renderUserActions = () => {
-    return (
-      <div
-        style={{
-          fontSize: FONT.FONT_SIZE_S,
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-end"
-          }}
-        >
-          {renderShowHideVerse()}
-          {renderShowHideTranslation()}
-        </div>
-        <Break />
-      </div>
-    )
-  }
-
   return (
     <>
       <Head>
@@ -223,7 +206,6 @@ export default function SurahPage(props: { surah: Surah }) {
           paddingRight: `${DIMENSIONS.SZ_6}px`
         }}
       >
-        {renderUserActions()}
         {renderVerses()}
       </div>
     </>