fix: Code reviews.

Author: zouhir96

src/App.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
 import { DNDLayout } from 'src/components/Layout'
-import { AuthModal, useAuth } from 'src/features/auth'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { AppContentLayout } from './components/Layout'
@@ -22,7 +21,6 @@ export const App = () => {
   const [showOnboarding, setShowOnboarding] = useState(true)
   const { onboardingCompleted, maxVisibleCards, isDNDModeActive, DNDDuration, setDNDDuration } =
     useUserPreferences()
-  const { isAuthModalOpen, closeAuthModal } = useAuth()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -64,8 +62,6 @@ export const App = () => {
         <OnboardingModal showOnboarding={showOnboarding} setShowOnboarding={setShowOnboarding} />
       )}
 
-      {<AuthModal showAuth={isAuthModalOpen} closeModal={closeAuthModal} />}
-
       <div className="layoutLayers hideScrollBar">
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />

src/components/Layout/AppLayout.tsx

@@ -3,16 +3,20 @@ import 'react-contexify/dist/ReactContexify.css'
 import { Outlet } from 'react-router-dom'
 import { BeatLoader } from 'react-spinners'
 import 'src/assets/App.css'
+import { AuthModal, useAuth } from 'src/features/auth'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { Header } from './Header'
 
 export const AppLayout = () => {
+  const { isAuthModalOpen, closeAuthModal } = useAuth()
+
   return (
     <>
       <MarketingBanner />
 
       <div className="App">
         <Header />
+        <AuthModal showAuth={isAuthModalOpen} closeModal={closeAuthModal} />
         <React.Suspense
           fallback={
             <div className="appLoading">

src/features/settings/components/BookmarkSettings/bookmarkSettings.css

@@ -81,52 +81,3 @@
 .btn:hover {
   filter: brightness(85%);
 }
-
-.container {
-  width: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.userCard {
-  width: auto;
-  background-color: var(--placeholder-background-color);
-  padding: 10px;
-  margin: 10px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-}
-.userImage {
-  width: 60px;
-  height: 60px;
-  border-radius: 20%;
-}
-.userInfos {
-  width: auto;
-  margin-left: 10px;
-}
-.userName {
-  font-size: larger;
-  font-weight: 600;
-}
-.userEmail {
-  font-size: medium;
-  margin-top: 6px;
-}
-.actions {
-  margin-left: auto;
-}
-.logoutBtn {
-  font-size: medium;
-  padding: 8px 20px;
-  background-color: #e57373;
-  color: var(--button-text-color);
-  border: 0;
-  border-radius: 20px;
-  font-weight: bold;
-  font-size: 16px;
-  text-align: center;
-  margin-left: 8px;
-}

…/settings/components/ProfileSettings.tsx …s/components/Profile/ProfileSettings.tsxsrc/features/settings/components/ProfileSettings.tsx renamed to src/features/settings/components/Profile/ProfileSettings.tsx src/features/settings/components/ProfileSettings.tsx renamed to src/features/settings/components/Profile/ProfileSettings.tsx

@@ -5,8 +5,8 @@ import { SettingsContentLayout } from 'src/components/Layout/SettingsContentLayo
 import { useAuth, User } from 'src/features/auth'
 import { BookmarkedPost } from 'src/features/bookmarks'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { BookmarkItem } from './BookmarkSettings'
-import './bookmarkSettings/bookmarkSettings.css'
+import { BookmarkItem } from '../BookmarkSettings'
+import './profileSettings.css'
 
 interface UserInfoProps {
   user: User
@@ -84,7 +84,7 @@ export const ProfileSettings = () => {
   }
 
   return (
-    <div className="container">
+    <div className="profile">
       {user != null && <UserInfo user={user} />}
       <SettingsContentLayout
         title="Bookmarks"

src/features/settings/components/Profile/profileSettings.css

@@ -0,0 +1,49 @@
+.profile {
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.profile .userCard {
+  width: auto;
+  background-color: var(--placeholder-background-color);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+}
+.profile .userImage {
+  width: 60px;
+  height: 60px;
+  border-radius: 20%;
+}
+.profile .userInfos {
+  width: auto;
+  margin-left: 10px;
+}
+.profile .userName {
+  font-size: larger;
+  font-weight: 600;
+}
+.profile .userEmail {
+  font-size: medium;
+  margin-top: 6px;
+}
+.profile .actions {
+  margin-left: auto;
+}
+
+.profile .logoutBtn {
+  font-size: medium;
+  padding: 8px 20px;
+  background-color: #e57373;
+  color: var(--button-text-color);
+  border: 0;
+  border-radius: 20px;
+  font-weight: bold;
+  font-size: 16px;
+  text-align: center;
+  margin-left: 8px;
+}

src/features/settings/index.ts

@@ -1,6 +1,6 @@
 export * from './components/BookmarkSettings'
 export * from './components/GeneralSettings'
-export * from './components/ProfileSettings'
+export * from './components/Profile/ProfileSettings'
 export * from './components/SearchEngineSettings'
 export * from './components/SourceSettings'
 export * from './components/TopicSettings'