Fix icons valyukhov

components/AboutVersion.js

@@ -83,7 +83,13 @@ function AboutVersion({ isStartPage = false, collapsed, onClose }) {
 
   return (
     <>
-      <div className={`hover:opacity-70 ${collapsed && 'lg:hidden'}`}>
+      <div
+        className={`${collapsed && 'lg:hidden'} ${
+          modalsSidebarState.aboutVersion
+            ? 'text-th-text-primary'
+            : 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary'
+        }`}
+      >
         {t('Version')} {packageJson.version}
       </div>
       {modalsSidebarState.aboutVersion && (

components/Account.js

@@ -41,6 +41,7 @@ function Account() {
 
   useEffect(() => {
     router.push(`?tab=${selectedTab}`, undefined, { shallow: true })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTab])
 
   const tabs = ['Account', 'projects:Projects', 'projects:CreateProject']

components/AppBar.js

@@ -53,9 +53,15 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
     <div className="bg-th-primary-100 sticky top-0 z-30">
       <div className="appbar" onClick={() => isOpenSideBar && setIsOpenSideBar(false)}>
         <div className="relative md:static flex items-center h-10 md:justify-start md:gap-7">
-          {!['/user-agreement', '/confession-steps', 'agreements'].includes(
-            router.pathname
-          ) && <SideBar setIsOpenSideBar={setIsOpenSideBar} access={access} />}
+          {![
+            '/user-agreement',
+            '/confession-steps',
+            '/agreements',
+            '/404',
+            '/privacy-policy',
+          ].includes(router.pathname) && (
+            <SideBar setIsOpenSideBar={setIsOpenSideBar} access={access} />
+          )}
           <div
             className={`flex justify-center w-full  ${
               access && !isStepPage ? 'lg:-ml-4 xl:-ml-6' : ''

components/ModalInSideBar.js

@@ -11,11 +11,13 @@ function ModalInSideBar({
   return (
     <>
       <div
-        className={`cursor-pointer text-th-text-primary hover:opacity-70 ${
-          collapsed ? 'lg:hidden' : ''
-        }`}
+        className={`overflow-hidden ${
+          collapsed ? 'lg:w-0' : 'lg:w-auto'
+        } cursor-pointer ${
+          isOpen ? 'text-th-text-primary' : 'lg:text-th-secondary-300'
+        } group-hover:text-th-text-primary ${collapsed ? 'lg:hidden' : ''}`}
       >
-        {buttonTitle}
+        <span className="whitespace-nowrap">{buttonTitle}</span>
       </div>
 
       {isOpen && (

components/SignOut.js

@@ -35,14 +35,19 @@ export default function SignOut({ collapsed }) {
         loading ? 'opacity-70' : ''
       }`}
     >
-      <div className="stroke-th-text-primary">
-        <LogOut
-          className={`w-5 h-4 ${
-            collapsed ? 'stroke-gray-500' : 'stroke-th-text-primary'
-          }`}
-        />
-      </div>
-      <p className={collapsed ? 'lg:hidden' : ''}>{t('users:SignOut')}</p>
+      <LogOut
+        className={`w-5 stroke-th-text-primary lg:stroke-th-secondary-300 group-hover:stroke-th-text-primary group-hover:opacity-70 ${
+          collapsed ? 'opacity-70' : ''
+        }`}
+      />
+
+      <p
+        className={`opacity-70 lg:text-th-secondary-300 ${
+          collapsed ? 'lg:hidden' : ''
+        } group-hover:text-th-text-primary group-hover:opacity-70`}
+      >
+        {t('users:SignOut')}
+      </p>
     </button>
   )
 }

components/SwitchLocalization.js

@@ -16,11 +16,11 @@ function SwitchLocalization({ collapsed }) {
     <div
       className={`relative max-w-min text-xs lg:text-sm font-bold ${
         collapsed ? 'lg:hidden' : ''
-      }`}
+      } z-10`}
     >
       <Menu>
         <Menu.Button
-          className="px-4 py-1 text-sm bg-th-secondary-100 rounded-[9rem] hover:opacity-70"
+          className="px-4 py-1 text-sm bg-th-text-primary rounded-[9rem] text-th-secondary-10"
           onClick={(e) => e.stopPropagation()}
         >
           {t(locale.toUpperCase())}
@@ -38,9 +38,13 @@ function SwitchLocalization({ collapsed }) {
                 onClick={(e) => {
                   push(asPath, undefined, { locale: loc })
                 }}
-                className="cursor-pointer px-4 py-2 hover:bg-th-primary-100-hover-backgroung last:rounded-b-2xl first:rounded-t-2xl hover:opacity-70 z-40"
+                className="cursor-pointer px-4 py-2 last:rounded-b-2xl first:rounded-t-2xl hover:opacity-70"
               >
-                <div className={`${locale === loc ? 'text-th-secondary-300' : ''}`}>
+                <div
+                  className={`${
+                    locale === loc ? 'text-th-secondary-10' : 'text-th-secondary-300'
+                  }`}
+                >
                   {t(loc.toUpperCase())}
                 </div>
               </Menu.Item>

components/ThemeSwitcher.js

@@ -65,23 +65,42 @@ const ThemeSwitcher = ({ collapsed }) => {
     <Disclosure as="div">
       {({ open }) => (
         <>
-          <Disclosure.Button className="group flex justify-between items-center w-full px-4">
+          <Disclosure.Button
+            className={`group flex justify-between items-center w-full px-4 hover:bg-th-secondary-200 
+  ${!collapsed && !open ? 'opacity-70' : ''}`}
+          >
             <div className="flex gap-2 items-center">
               <div className="py-4">
                 <Theme
-                  className={`w-5 h-5 ${
-                    collapsed ? 'stroke-th-text-primary' : 'stroke-gray-500'
-                  }`}
+                  className={`w-5 h-5 
+    ${collapsed ? 'stroke-th-text-primary lg:stroke-th-secondary-300' : ''} 
+    ${
+      !collapsed
+        ? open
+          ? 'stroke-th-text-primary'
+          : 'stroke-th-secondary-300 group-hover:stroke-th-text-primary'
+        : ''
+    }`}
                 />
               </div>
-              <p className={collapsed ? 'lg:hidden' : ''}>{t('ChooseTheme')}</p>
+              <p
+                className={`${collapsed ? 'lg:hidden' : ''} 
+      ${
+        !open
+          ? 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary'
+          : 'text-th-text-primary'
+      }`}
+              >
+                {t('ChooseTheme')}
+              </p>
             </div>
             <ArrowDown
-              className={`w-5 h-5 transition-all duration-150 ${
-                open ? 'rotate-180' : ''
-              } ${collapsed ? 'lg:hidden' : ''}`}
+              className={`w-5 h-5 transition-all duration-150 
+    ${open ? 'rotate-180' : ''} 
+    ${collapsed ? 'lg:hidden' : ''}`}
             />
           </Disclosure.Button>
+
           <Disclosure.Panel
             className={`flex space-x-2 box-border mx-1 pl-4 my-4 ${
               collapsed ? 'lg:hidden' : ''

components/Workspace.js

@@ -12,7 +12,7 @@ import { inactiveState } from './state/atoms'
 
 import Dict from 'public/dictionary.svg'
 import TeamNote from 'public/team-note.svg'
-import Notepad from 'public/notepad.svg'
+import Notepad from 'public/notes.svg'
 import Retelling from 'public/audio.svg'
 import Pencil from 'public/editor-pencil.svg'
 import Info from 'public/info.svg'
@@ -29,7 +29,7 @@ const sizes = {
 const translateIcon = <Pencil className="w-5 inline" />
 
 const icons = {
-  personalNotes: <Notepad className="w-5 inline" />,
+  personalNotes: <Notepad className="w-[14px] inline" />,
   teamNotes: <TeamNote className="w-5 inline" />,
   dictionary: <Dict className="w-5 inline" />,
   retelling: <Retelling className="w-5 inline" />,

pages/_app.js

@@ -16,26 +16,26 @@ function MyApp({ Component, pageProps }) {
   const isIntranet = process.env.NEXT_PUBLIC_INTRANET ?? false
   const supabaseClient = useSupabaseClient()
   useGetTheme()
-  if (Component.layoutType == 'empty') {
+  const renderContent = () => {
+    if (Component.layoutType === 'empty') {
+      return <Component {...pageProps} />
+    }
+
+    const layoutProps = {
+      backgroundColor: Component.backgroundColor ?? 'bg-th-secondary-100',
+    }
+
     return (
-      <UserContextProvider supabaseClient={supabaseClient}>
-        <RecoilRoot>
-          <main className={isIntranet ? roboto.className : ''}>
-            <Component {...pageProps} />
-          </main>
-        </RecoilRoot>
-      </UserContextProvider>
+      <Layout {...layoutProps}>
+        <Component {...pageProps} />
+      </Layout>
     )
   }
 
   return (
     <UserContextProvider supabaseClient={supabaseClient}>
       <RecoilRoot>
-        <main className={isIntranet ? roboto.className : ''}>
-          <Layout backgroundColor={Component.backgroundColor ?? 'bg-th-secondary-100'}>
-            <Component {...pageProps} />
-          </Layout>
-        </main>
+        <main className={isIntranet ? roboto.className : ''}>{renderContent()}</main>
       </RecoilRoot>
     </UserContextProvider>
   )

pages/user-agreement.js

@@ -63,7 +63,6 @@ export default function UserAgreement() {
     </div>
   )
 }
-
 export async function getStaticProps({ locale }) {
   return {
     props: {