From 52e9ce5403d5f2cfc654773933dae85e4bc3821f Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Tue, 8 Oct 2024 22:26:01 +0500 Subject: [PATCH 01/19] feat: started editing sidebar and icons --- components/SideBar.js | 214 +++++++++++++++++++++++++++++++------- components/image.png | Bin 0 -> 3378 bytes public/about.svg | 3 + public/account.svg | 3 + public/create-project.svg | 3 + public/logout.svg | 3 + public/notes.svg | 3 + public/projects.svg | 3 + public/themes.svg | 4 + public/users.svg | 3 + public/version.svg | 4 +- 11 files changed, 203 insertions(+), 40 deletions(-) create mode 100644 components/image.png create mode 100644 public/about.svg create mode 100644 public/account.svg create mode 100644 public/create-project.svg create mode 100644 public/logout.svg create mode 100644 public/notes.svg create mode 100644 public/projects.svg create mode 100644 public/themes.svg create mode 100644 public/users.svg diff --git a/components/SideBar.js b/components/SideBar.js index ae2b16449..8dc08db7a 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -23,12 +23,18 @@ import { useCurrentUser } from 'lib/UserContext' import Localization from 'public/localization.svg' import VersionLogo from 'public/version.svg' -import Notepad from 'public/notepad.svg' import Burger from 'public/burger.svg' import Close from 'public/close.svg' import Camera from 'public/camera.svg' import User from 'public/user.svg' +import Account from 'public/account.svg' +import Projects from 'public/projects.svg' +import CreateProject from 'public/create-project.svg' +import Notes from 'public/notes.svg' +import Users from 'public/users.svg' +import About from 'public/about.svg' + function SideBar({ setIsOpenSideBar, access }) { const { user } = useCurrentUser() const { t } = useTranslation(['projects', 'users']) @@ -65,7 +71,7 @@ function SideBar({ setIsOpenSideBar, access }) { (!open ? ( ) : ( - + ))} e.stopPropagation()} > -
-
+
+
openModal('avatarSelector')} @@ -92,42 +98,176 @@ function SideBar({ setIsOpenSideBar, access }) {
-
{user?.login}
-
{user?.email}
+
+ {user?.login} +
+
{user?.email}
-
-
- -
-
- +
+
+
+ + + { + closeModal() + setIsOpenSideBar(false) + close() + }} + > +
+ +
+ {'Account'} + + + + + + + { + closeModal() + setIsOpenSideBar(false) + close() + }} + > +
+ +
+ {'Projects'} + + + + + + + { + closeModal() + setIsOpenSideBar(false) + close() + }} + > +
+ +
+ {'Create Project'} + + + + + +
openModal('notepad')} + > +
+ +
+ + setModalsSidebarState((prev) => ({ + ...prev, + notepad: value, + })) + } + > + +
- {t('Language')} -
- - + - -
openModal('aboutVersion')} + {user?.is_admin && ( + + + { + closeModal() + setIsOpenSideBar(false) + close() + }} + > +
+ +
+ + {t('users:UserManagement')} + + + + + )} + + + +
+
+ -
- +
+
+ +
+ {t('Language')}
- -
- + + + +
openModal('aboutVersion')} + > +
+ +
+ {'About'} +
+ + +
openModal('aboutVersion')} + > +
+ +
+ +
+ + + + +
+ {/* */} + {/* + - )} + )} */}
-
+ {/*
-
+
*/}
diff --git a/components/image.png b/components/image.png new file mode 100644 index 0000000000000000000000000000000000000000..3b306c23629ca0e0773e5b8bba160dc169294725 GIT binary patch literal 3378 zcmcInWmFRY+ohyyLqI@~?iwLoV{9M@f`G&Tr8cEUcMDTSh?F8QKt+(0?viwr$Ph<& z4GBR?UcR5-kN4;M<39J?^PKzVInTN0T=WBD7y~UQEeQz;gMmK8?3zQa5lKyXJ$YYG zJ-Q}RUo#k(q+;au=Cz7o9ttzdGIy^1m@H1!ys|8G{;EDP!Tb{dc*Im}MjF|D zM-*coP4Uzs1EzhS3v4THA@zV)%z%NW*MPc_LbfX)G5A&$sIO1?GCa_A|5Vj2A2&z* zh6^iB4?H0rAFru(;J@uO4I}7P@o9_7Sg9@=4;o{np*PqzhGhnrJC?Z+S5F~Q zEA+ou@i|4#6xP>gGV-YFv$C?9TU(2z05P{fF~axXtXxV-O1_54=O+O-={-f}^D(S0YBVf~ zg)`^R($|;dQo(&m9DXYUfSG!aw{lJ0n#o=>wS%E{wlO_Uf|;(uPPt>E`470twBfT~ z5GjxDz9+M%>cUspNu<{SsIjEAq!xI z(lO}7JlDN*!$O^iugt%8IK?pzRrKUN>Gu98F8H{n*EtEmnNuZxI@9F)kwBYJusBjR z+*ksFA}1TH+H&aOfmV)Apx9?*U+4Hl;oq zjPmT<3ubEkoFl2jLOrC90w!!FFB{M#L*X$R0t!b9mKGFf^8h?K4`+0i&KAPYPxi7x zpBdQ@-Hw`x=DkFEW)2Cxw9STiTRb;l8(+!Pwxd&?{Ksh*?am3M#iU7m-j)^@rw!L3 z8Nn1wr)Qp#Eywkt=B>ZD21kCU0h4KpJS0xbLXlRSaw~oWw;yb`l5#Xc>-VQTAaYYv zQBb*C3)xCub3N`{)pvdNc~xmfmJ#z-FF)9{y`mqf_TQeeREZvLR?|rx`;?eOLHkFV z*s%3&g?t3_AS$P-UXuMC<e%3TlN%Y(Gsd8KVCWo+nkD>cba!!xS1Jb^s6mB))lOvcRHul*g$#t6MZIGSzPQmF0 zITho8)aAG_GVwF&XX2pg%N-VlNgD?TnT8{n8a5Vwms72pCz*3{Oh<{ngpFnExg}WX z?p^V64j&F0tK5S08?#Xj;pYKO?`39a%E4I{Jj|*uGDP`RuCs!oEx7Abf!eM0EdN?p zW<>9+pVtYl$fnld z_;p2BXfl_jMpJ-2!|-w{BnLL?XkMmnj9Bo8h2VK0vHdS$ci7HG{0q6*6H7->Mh`1V zjA<17^7+E%M0yeMtHcf08>U3rLQ|7LcA?+a^5d(4iO(tq$blDS%dMu6o{t0Muliab z8A4%g_}D3_fZF(JPM*Bd=p zzxmrILQ2x}?__4b)AvN$cAcXm6Fr0x<xVQwsXeZtb=^;KZk%$_$e9y#Uqt-q z{;iG()$#QR-Vw}6|9wGl;OHvlk_;nV%PD9)yqjA!VN?IpfZ@$2Yy@u+x~55_P>=u zJN^A;6CoID9Cv7kkcq{g?MeL8$Zvti-MBiO|0U7U6Y%ddRTu-I%ZI^-1wDp4X{yjP z_S<3&_=&I~fO>Z``eSN>RzE@v?k3Jk{{8K>1D#*PP-IbI&%b=VZ>z7cxV@7}MJKah z9f=K^``CoupiN-DfJ0UCKW^rQ#dP`pl~iAF3}v_(1HVuj-!)lz35<%;XmrBH9xoXG zy7F1f+i&xhj$#a3WMEWbNAvtXDRT)-9*IxRez)SW#0$jk#{<&0m5+s8DUjNYTXTdl zjdK8N&D;3U{4@PQIb_^WrDPZB*&MnocQc8 zkX8E=9(`>Zy|cP)7$Fr1wUUh6ReOzGQZE#vQ@*IO(d2n(v$!@Z<-mQd{xXJZwD1x~FZN>f4Wbr+0j17~HS0*jY7>fl6p}Myhn>41tS4 zPcG|nr~PjR-4xU-LL{C!xZp_GXz>xT=@NdHf-g##nPU@#gphdyw^4c7IPO-cpc}*Z zrHv(TH7 V-KW0byyhHI8~%e;5qCGT0m=*VTdh@8mK1tRE3};{p$heS$a$al)H!IG98G!s#9YC8-IDI~yfORA?lQ@)Tu<5S$`rv31X+nK z$#?qCFK@T>XVRvugiDX~XFwK}^yYksRiaERJqEeG;tDlpjqqL&b>ajih>7934f{T$ zCxHqqAXd5*N1VI^ao5Coa(S}z3ko~!F51eg;)9dR(Npx5(KW~ch$pY6NX;4YXZ zjR6sFhDQ4p)`3aBFdh+PdPk2Ccb4@dW4e^d*nAjcjG2t*66>4t6Hmo)A>#^^%D7I9 zJlaW~=VxwtX4_znr&)cH(Zz07yxJe9y95p4hh}v=R`QaQ4X%lQm?Id;?q7jK>?GlA zFO#DIy+1*4N`9HnKRQRM?E&U2))#rzgr^4`q7XgS=wjeJLOqmA5aq+tG*34l8wyai>yL rezsd;@OF%`&3iEWzf}RU!YfkVfXfD#)Ryh*o + + diff --git a/public/account.svg b/public/account.svg new file mode 100644 index 000000000..883c7f4dd --- /dev/null +++ b/public/account.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/create-project.svg b/public/create-project.svg new file mode 100644 index 000000000..13506baf4 --- /dev/null +++ b/public/create-project.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/logout.svg b/public/logout.svg new file mode 100644 index 000000000..5889eb2ac --- /dev/null +++ b/public/logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/notes.svg b/public/notes.svg new file mode 100644 index 000000000..224ad7344 --- /dev/null +++ b/public/notes.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/projects.svg b/public/projects.svg new file mode 100644 index 000000000..2624405db --- /dev/null +++ b/public/projects.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/themes.svg b/public/themes.svg new file mode 100644 index 000000000..713a623df --- /dev/null +++ b/public/themes.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/users.svg b/public/users.svg new file mode 100644 index 000000000..60f7c915c --- /dev/null +++ b/public/users.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/version.svg b/public/version.svg index 0b0c3237d..ca6b14273 100644 --- a/public/version.svg +++ b/public/version.svg @@ -1,3 +1 @@ - - - + From 6a1852001c7c48044754a2371504a1e9d8e79e4a Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Wed, 9 Oct 2024 14:19:47 +0500 Subject: [PATCH 02/19] feat: adjusted last icons and made theme switcher and signout btns --- components/SideBar.js | 38 ++++++++++++++++++++------------------ components/SignOut.js | 22 +++++++++++++++------- public/logout.svg | 4 ++-- public/version.svg | 5 +---- 4 files changed, 38 insertions(+), 31 deletions(-) diff --git a/components/SideBar.js b/components/SideBar.js index 6c2725a4e..f221a75f8 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -144,23 +144,25 @@ function SideBar({ setIsOpenSideBar, access }) { - - - { - closeModal() - setIsOpenSideBar(false) - close() - }} - > -
- -
- {'Create Project'} - - - + {user?.is_admin && ( + + + { + closeModal() + setIsOpenSideBar(false) + close() + }} + > +
+ +
+ {'Create Project'} + + + + )}
- +
{t('Language')}
diff --git a/components/SignOut.js b/components/SignOut.js index 090ff3ecf..32efffbe7 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -8,6 +8,8 @@ import ButtonLoading from './ButtonLoading' import useSupabaseClient from 'utils/supabaseClient' +import LogOut from 'public/logout.svg' + export default function SignOut() { const supabaseClient = useSupabaseClient() const [loading, setLoading] = useState(false) @@ -28,12 +30,18 @@ export default function SignOut() { } return ( - - {t('users:SignOut')} - + // + // {t('users:SignOut')} + // +
+
+ +
+

{t('users:SignOut')}

+
) } diff --git a/public/logout.svg b/public/logout.svg index 5889eb2ac..738666894 100644 --- a/public/logout.svg +++ b/public/logout.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/version.svg b/public/version.svg index 35afbb37b..303ec7ac7 100644 --- a/public/version.svg +++ b/public/version.svg @@ -1,4 +1 @@ - - - - + From c1d16abfe9448ab1c2521a0aa0ca1a6564fb3ac2 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Fri, 11 Oct 2024 15:28:34 +0500 Subject: [PATCH 03/19] feat: changed modals and added about modal with sidebar --- components/AboutVersion.js | 16 +++--- components/ModalInSideBar.js | 25 ++++---- components/SideBar.js | 104 ++++++++++------------------------ components/SignOut.js | 19 +++---- public/locales/en/common.json | 7 ++- public/locales/es/common.json | 7 ++- public/locales/ru/common.json | 7 ++- public/themes.svg | 4 +- 8 files changed, 79 insertions(+), 110 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 4ee62b4a7..807ad665f 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -88,15 +88,15 @@ function AboutVersion({ isStartPage = false }) {
{modalsSidebarState.aboutVersion && (
e.stopPropagation()} > -
-

- {t('Version')} {packageJson.version} +

+

+ {t('Version')}

- + {showAllUpdates ? fullAboutVersion : currentAboutVersion} -
+
-
{children}
+
+ {children} +
)} diff --git a/components/SideBar.js b/components/SideBar.js index f221a75f8..28087fe86 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -1,4 +1,4 @@ -import { Fragment } from 'react' +import { Fragment, useState } from 'react' import Link from 'next/link' @@ -26,7 +26,6 @@ import VersionLogo from 'public/version.svg' import Burger from 'public/burger.svg' import Close from 'public/close.svg' import Camera from 'public/camera.svg' -import User from 'public/user.svg' import Account from 'public/account.svg' import Projects from 'public/projects.svg' @@ -37,8 +36,9 @@ import About from 'public/about.svg' function SideBar({ setIsOpenSideBar, access }) { const { user } = useCurrentUser() - const { t } = useTranslation(['projects', 'users']) + const { t } = useTranslation(['common', 'projects', 'users']) const [modalsSidebarState, setModalsSidebarState] = useRecoilState(modalsSidebar) + const [showAbout, setShowAbout] = useState(false) const openModal = (modalType) => { setModalsSidebarState((prevModals) => ({ @@ -75,6 +75,7 @@ function SideBar({ setIsOpenSideBar, access }) { ))} setShowAbout(false)} as={Fragment} appear={true} show={open} @@ -86,7 +87,7 @@ function SideBar({ setIsOpenSideBar, access }) { onClick={(e) => e.stopPropagation()} >
-
+
openModal('avatarSelector')} @@ -116,12 +117,13 @@ function SideBar({ setIsOpenSideBar, access }) { closeModal() setIsOpenSideBar(false) close() + setShowAbout(false) }} >
- {'Account'} + {t('Account')} @@ -134,12 +136,13 @@ function SideBar({ setIsOpenSideBar, access }) { closeModal() setIsOpenSideBar(false) close() + setShowAbout(false) }} >
- {'Projects'} + {t('Projects')} @@ -153,12 +156,15 @@ function SideBar({ setIsOpenSideBar, access }) { closeModal() setIsOpenSideBar(false) close() + setShowAbout(false) }} >
- {'Create Project'} + + {t('CreateProject')} + @@ -171,7 +177,10 @@ function SideBar({ setIsOpenSideBar, access }) { >
openModal('notepad')} + onClick={() => { + openModal('notepad') + setShowAbout(false) + }} >
@@ -184,6 +193,7 @@ function SideBar({ setIsOpenSideBar, access }) { notepad: value, })) } + label={t('personalNotes')} > @@ -199,6 +209,7 @@ function SideBar({ setIsOpenSideBar, access }) { closeModal() setIsOpenSideBar(false) close() + setShowAbout(false) }} >
@@ -234,12 +245,18 @@ function SideBar({ setIsOpenSideBar, access }) { >
openModal('aboutVersion')} + onClick={() => setShowAbout((prev) => !prev)} >
- {'About'} + +

{t('About')}

+
openModal('aboutVersion')} + onClick={() => { + openModal('aboutVersion') + setShowAbout(false) + }} >
@@ -265,70 +285,8 @@ function SideBar({ setIsOpenSideBar, access }) {
- {/* */} - {/* - - -
openModal('notepad')} - > -
- -
- - setModalsSidebarState((prev) => ({ ...prev, notepad: value })) - } - > - - -
- - {user?.is_admin && ( - - - { - closeModal() - setIsOpenSideBar(false) - close() - }} - > -
- -
- - {t('users:UserManagement')} - - - - - )} */}
- {/*
- -
{ - setModalsSidebarState((prev) => ({ - ...prev, - aboutVersion: false, - })) - setIsOpenSideBar((prev) => !prev) - close() - }} - > - -
-
*/}
diff --git a/components/SignOut.js b/components/SignOut.js index 32efffbe7..d7f521b96 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -4,8 +4,6 @@ import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' -import ButtonLoading from './ButtonLoading' - import useSupabaseClient from 'utils/supabaseClient' import LogOut from 'public/logout.svg' @@ -30,18 +28,17 @@ export default function SignOut() { } return ( - // - // {t('users:SignOut')} - // -
+
+ ) } diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 1ef531166..a3a46741d 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -185,5 +185,10 @@ "WordExist": "Duplicated word exists:", "WrongResource": "Wrong resource", "Yes": "Yes", - "Symbols": "Symbols" + "Symbols": "Symbols", + "Account": "Account", + "Projects": "Projects", + "CreateProject": "Create project", + "About": "About", + "Language": "Language" } diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 69d30411b..9f311340d 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -185,5 +185,10 @@ "WordExist": "Duplicated word exists:", "WrongResource": "Wrong resource", "Yes": "Yes", - "Symbols": "Símbolos" + "Symbols": "Símbolos", + "Account": "Cuenta", + "Projects": "Proyectos", + "CreateProject": "Crear un proyecto", + "About": "Sobre el proyecto", + "Language": "Idioma" } diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json index c6db1cb46..c92f5b13c 100644 --- a/public/locales/ru/common.json +++ b/public/locales/ru/common.json @@ -185,5 +185,10 @@ "WordExist": "Такое слово уже существует:", "WrongResource": "Ошибка загрузки ресурса", "Yes": "Да", - "Symbols": "Символы" + "Symbols": "Символы", + "Account": "Аккаунт", + "Projects": "Проекты", + "CreateProject": "Создать проект", + "About": "О проекте", + "Language": "Язык" } diff --git a/public/themes.svg b/public/themes.svg index 78e53efd0..77b1615d3 100644 --- a/public/themes.svg +++ b/public/themes.svg @@ -1,4 +1,4 @@ - - + + From 3e018437e1a2d7bdc58c9b96cce6be5cc4f358f3 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sat, 12 Oct 2024 00:06:19 +0500 Subject: [PATCH 04/19] feat: made simple functions to expand on hover --- components/AboutVersion.js | 2 +- components/ModalInSideBar.js | 4 +++- components/SideBar.js | 36 ++++++++++++++++++++++++++---------- components/SignOut.js | 2 +- components/ThemeSwitcher.js | 4 ++-- 5 files changed, 33 insertions(+), 15 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 807ad665f..8d4dc72c6 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -83,7 +83,7 @@ function AboutVersion({ isStartPage = false }) { return ( <> -
+
{t('Version')} {packageJson.version}
{modalsSidebarState.aboutVersion && ( diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js index a5f50f3e1..0b34bf6b7 100644 --- a/components/ModalInSideBar.js +++ b/components/ModalInSideBar.js @@ -3,7 +3,9 @@ import Close from 'public/close.svg' function ModalInSideBar({ isOpen, setIsOpen, children, label }) { return ( <> -
{label}
+
+ {label} +
{isOpen && (
{ setModalsSidebarState((prevModals) => ({ @@ -69,7 +70,7 @@ function SideBar({ setIsOpenSideBar, access }) { > {access && (!open ? ( - + ) : ( ))} @@ -78,16 +79,23 @@ function SideBar({ setIsOpenSideBar, access }) { afterLeave={() => setShowAbout(false)} as={Fragment} appear={true} - show={open} + show={showSidebar} enter="transition-opacity duration-200" leave="transition-opacity duration-200" > e.stopPropagation()} + onMouseEnter={() => setIsOpenSideBar(true)} + onMouseLeave={() => { + setIsOpenSideBar(false) + closeModal() + close() + setShowAbout(false) + }} >
-
+
openModal('avatarSelector')} @@ -123,7 +131,9 @@ function SideBar({ setIsOpenSideBar, access }) {
- {t('Account')} + + {t('Account')} + @@ -142,7 +152,9 @@ function SideBar({ setIsOpenSideBar, access }) {
- {t('Projects')} + + {t('Projects')} + @@ -162,7 +174,7 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('CreateProject')} @@ -215,7 +227,7 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('users:UserManagement')} @@ -234,9 +246,13 @@ function SideBar({ setIsOpenSideBar, access }) {
- {t('Language')} + + {t('Language')} + +
+
+
-
-

{t('users:SignOut')}

+

{t('users:SignOut')}

) } diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index d108300b1..b52e687d7 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -69,10 +69,10 @@ const ThemeSwitcher = () => {
-

{t('ChooseTheme')}

+

{t('ChooseTheme')}

From 83f97566d54f34fc56a3c6e59c3e1361e60f41e9 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Mon, 14 Oct 2024 02:15:31 +0500 Subject: [PATCH 05/19] feat: resetted to without hover --- components/AboutVersion.js | 2 +- components/ModalInSideBar.js | 4 +-- components/SideBar.js | 51 ++++++++++++++++-------------------- components/SignOut.js | 2 +- components/ThemeSwitcher.js | 6 ++--- 5 files changed, 29 insertions(+), 36 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 8d4dc72c6..807ad665f 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -83,7 +83,7 @@ function AboutVersion({ isStartPage = false }) { return ( <> -
+
{t('Version')} {packageJson.version}
{modalsSidebarState.aboutVersion && ( diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js index 0b34bf6b7..a5f50f3e1 100644 --- a/components/ModalInSideBar.js +++ b/components/ModalInSideBar.js @@ -3,9 +3,7 @@ import Close from 'public/close.svg' function ModalInSideBar({ isOpen, setIsOpen, children, label }) { return ( <> -
- {label} -
+
{label}
{isOpen && (
{access && (!open ? ( - + ) : ( - + ))} setShowAbout(false)} as={Fragment} - appear={true} - show={showSidebar} + appear={open} + show={open} enter="transition-opacity duration-200" leave="transition-opacity duration-200" > e.stopPropagation()} - onMouseEnter={() => setIsOpenSideBar(true)} - onMouseLeave={() => { - setIsOpenSideBar(false) - closeModal() - close() - setShowAbout(false) - }} + // onMouseEnter={() => setIsOpenSideBar(true)} + // onMouseLeave={() => { + // setIsOpenSideBar(false) + // closeModal() + // close() + // setShowAbout(false) + // }} >
-
+
openModal('avatarSelector')} @@ -131,9 +131,7 @@ function SideBar({ setIsOpenSideBar, access }) {
- - {t('Account')} - + {t('Account')} @@ -152,9 +150,7 @@ function SideBar({ setIsOpenSideBar, access }) {
- - {t('Projects')} - + {t('Projects')} @@ -174,7 +170,7 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('CreateProject')} @@ -227,7 +223,7 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('users:UserManagement')} @@ -246,14 +242,11 @@ function SideBar({ setIsOpenSideBar, access }) {
- - {t('Language')} - -
-
- + {t('Language')}
+ +
+
+
-

{t('users:SignOut')}

+

{t('users:SignOut')}

) } diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index b52e687d7..7661c1b15 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -34,7 +34,7 @@ const ThemeSwitcher = () => { const [currentTheme, setCurrentTheme] = useState(theme || 'default') const [hoverTheme, setHoverTheme] = useState(false) const timeoutRef = useRef(null) - const { t } = useTranslation('common') + const { t } = useTranslation() useEffect(() => { setCurrentTheme(theme) @@ -69,10 +69,10 @@ const ThemeSwitcher = () => {
-

{t('ChooseTheme')}

+

{t('ChooseTheme')}

From 1e3b0da50e0564c48f949a2d3f6e37de7f753d5d Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Wed, 16 Oct 2024 13:43:06 +0500 Subject: [PATCH 06/19] feat: fixed modals in mobile --- components/AboutVersion.js | 8 +- components/Account.js | 46 ++------- components/AppBar.js | 2 +- components/ModalInSideBar.js | 14 ++- components/ProjectCreate.js | 4 +- components/SideBar.js | 158 +++++++++++++++++++++++++------ components/SignOut.js | 4 +- components/SwitchLocalization.js | 14 ++- components/ThemeSwitcher.js | 15 ++- 9 files changed, 175 insertions(+), 90 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 807ad665f..3d7d30a0c 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -16,7 +16,7 @@ import updatesES from '../public/updateVersionInfo/updates_es.md' import Close from 'public/close.svg' -function AboutVersion({ isStartPage = false }) { +function AboutVersion({ isStartPage = false, collapsed }) { const aboutVersion = { en: updatesEN, ru: updatesRU, @@ -83,15 +83,15 @@ function AboutVersion({ isStartPage = false }) { return ( <> -
+
{t('Version')} {packageJson.version}
{modalsSidebarState.aboutVersion && (
e.stopPropagation()} > -
+

{t('Version')}

diff --git a/components/Account.js b/components/Account.js index ac0ee9124..69111acf5 100644 --- a/components/Account.js +++ b/components/Account.js @@ -49,7 +49,12 @@ function Account() {
{user?.id && ( <> - + {tabs .filter((el) => el !== 'projects:CreateProject') @@ -128,45 +133,6 @@ function Account() { )}
- {user?.is_admin && ( - setOpenInternalMenu(false)} - hideCloseButton={openInternalMenu} - btnPositionHeight="bottom-[15vh]" - mainHeight="h-[15vh]" - > - - - - -
setOpenInternalMenu(true)} - > - {t('project-edit:CreateNewProject')} -
- - - - - - )} - - {openInternalMenu && ( -
-
- -
- -
- )} ) } diff --git a/components/AppBar.js b/components/AppBar.js index 8191953b5..e1088ecc9 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -52,7 +52,7 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js index a5f50f3e1..c166da1f6 100644 --- a/components/ModalInSideBar.js +++ b/components/ModalInSideBar.js @@ -1,16 +1,22 @@ import Close from 'public/close.svg' -function ModalInSideBar({ isOpen, setIsOpen, children, label }) { +function ModalInSideBar({ isOpen, setIsOpen, children, label, collapsed }) { return ( <> -
{label}
+
+ {label} +
{isOpen && (
e.stopPropagation()} > -
+

{label}

diff --git a/components/ProjectCreate.js b/components/ProjectCreate.js index 63c436b83..9070cb9cb 100644 --- a/components/ProjectCreate.js +++ b/components/ProjectCreate.js @@ -198,9 +198,9 @@ function ProjectCreate() { resourcesUrl={resourcesUrl} setResourcesUrl={setResourcesUrl} /> -
+
{ setModalsSidebarState((prevModals) => ({ @@ -57,6 +64,21 @@ function SideBar({ setIsOpenSideBar, access }) { }) } + useEffect(() => { + const checkScreenSize = () => { + setIsLargeScreen(window.innerWidth > 1024) + } + + checkScreenSize() + window.addEventListener('resize', checkScreenSize) + + return () => window.removeEventListener('resize', checkScreenSize) + }, []) + + useEffect(() => { + setIsOpen(isLargeScreen) + }, [isLargeScreen]) + return ( {({ open, close }) => ( @@ -70,32 +92,47 @@ function SideBar({ setIsOpenSideBar, access }) { > {access && (!open ? ( - + ) : ( - + ))} setShowAbout(false)} + afterLeave={() => { + setShowAbout(false) + + setShowCreate(false) + }} as={Fragment} appear={open} - show={open} + show={isLargeScreen || open} enter="transition-opacity duration-200" leave="transition-opacity duration-200" > e.stopPropagation()} - // onMouseEnter={() => setIsOpenSideBar(true)} - // onMouseLeave={() => { - // setIsOpenSideBar(false) - // closeModal() - // close() - // setShowAbout(false) - // }} + onMouseEnter={() => { + setCollapsed(false) + + setIsOpenSideBar(true) + }} + onMouseLeave={() => { + setCollapsed(true) + closeModal() + close() + setIsOpenSideBar(false) + setShowAbout(false) + }} > -
-
+
+
openModal('avatarSelector')} @@ -115,10 +152,10 @@ function SideBar({ setIsOpenSideBar, access }) {
-
+
- + { @@ -131,7 +168,11 @@ function SideBar({ setIsOpenSideBar, access }) {
- {t('Account')} + + {t('Account')} + @@ -150,13 +191,17 @@ function SideBar({ setIsOpenSideBar, access }) {
- {t('Projects')} + + {t('Projects')} + {user?.is_admin && ( - +
- + {t('CreateProject')} @@ -178,6 +225,34 @@ function SideBar({ setIsOpenSideBar, access }) { )} + {user?.is_admin && ( + +
{ + setShowCreate((prev) => !prev) + openModal() + }} + > +
+ +
+ + + +
+ + )} + @@ -223,14 +299,16 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('users:UserManagement')} )} - +
- {t('Language')} + + {t('Language')} +
- +
setShowAbout((prev) => !prev)} + onClick={() => { + setShowAbout((prev) => !prev) + openModal() + }} >
@@ -263,8 +346,14 @@ function SideBar({ setIsOpenSideBar, access }) { setIsOpen={setShowAbout} isOpen={showAbout} label={t('About')} + collapsed={collapsed} > -

{t('About')}

+
+

+ About +

+
+
@@ -284,7 +373,7 @@ function SideBar({ setIsOpenSideBar, access }) {
- +
@@ -293,7 +382,7 @@ function SideBar({ setIsOpenSideBar, access }) { disabled className="flex items-center justify-between gap-2 cursor-default" > - +
@@ -304,6 +393,15 @@ function SideBar({ setIsOpenSideBar, access }) { )} + + {/*
+
+ +
+ +
*/}
) } diff --git a/components/SignOut.js b/components/SignOut.js index d7f521b96..85cc3af7b 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -8,7 +8,7 @@ import useSupabaseClient from 'utils/supabaseClient' import LogOut from 'public/logout.svg' -export default function SignOut() { +export default function SignOut({ collapsed }) { const supabaseClient = useSupabaseClient() const [loading, setLoading] = useState(false) const { t } = useTranslation('users') @@ -38,7 +38,7 @@ export default function SignOut() {
-

{t('users:SignOut')}

+

{t('users:SignOut')}

) } diff --git a/components/SwitchLocalization.js b/components/SwitchLocalization.js index 0deb3c5d7..ee82b498c 100644 --- a/components/SwitchLocalization.js +++ b/components/SwitchLocalization.js @@ -5,7 +5,7 @@ import i18nextConfig from 'next-i18next.config' import { Menu } from '@headlessui/react' -function SwitchLocalization() { +function SwitchLocalization({ collapsed }) { const { locale, asPath, push } = useRouter() const { t } = useTranslation('common') const supportedLngs = i18nextConfig.i18n.locales @@ -13,7 +13,11 @@ function SwitchLocalization() { const sortedLngs = [locale, ...supportedLngs.filter((lng) => lng !== locale)] return ( -
+
{t(locale.toUpperCase())} - +
{sortedLngs.map((loc) => ( { +const ThemeSwitcher = ({ collapsed }) => { const theme = useGetTheme() const [currentTheme, setCurrentTheme] = useState(theme || 'default') const [hoverTheme, setHoverTheme] = useState(false) const timeoutRef = useRef(null) + const [openSwitcher, setOpenSwitcher] = useState(true) const { t } = useTranslation() useEffect(() => { @@ -60,8 +61,14 @@ const ThemeSwitcher = () => { setHoverTheme(null) }, []) + useEffect(() => { + setOpenSwitcher(true) + if (collapsed) console.log('collapsed') + if (!collapsed) console.log('not collapsed') + }, [collapsed]) + return ( - + {({ open }) => ( <> @@ -69,12 +76,12 @@ const ThemeSwitcher = () => {
-

{t('ChooseTheme')}

+

{t('ChooseTheme')}

From c2843ce2f834fb9cd49f6732a893133ae2b82250 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Wed, 16 Oct 2024 15:33:50 +0500 Subject: [PATCH 07/19] feat: finished task --- components/AboutProject.js | 68 ++++++++++++++++++++++++++++++++++++ components/ModalInSideBar.js | 13 +++++-- components/SideBar.js | 23 ++++++------ components/ThemeSwitcher.js | 4 ++- pages/account/index.js | 2 ++ public/locales/en/about.json | 20 +++++++++++ public/locales/es/about.json | 20 +++++++++++ public/locales/ru/about.json | 20 +++++++++++ 8 files changed, 153 insertions(+), 17 deletions(-) create mode 100644 components/AboutProject.js create mode 100644 public/locales/en/about.json create mode 100644 public/locales/es/about.json create mode 100644 public/locales/ru/about.json diff --git a/components/AboutProject.js b/components/AboutProject.js new file mode 100644 index 000000000..da27f7ff3 --- /dev/null +++ b/components/AboutProject.js @@ -0,0 +1,68 @@ +import { useTranslation } from 'next-i18next' + +import Feedback from './StartPage/Feedback' + +const paragraphs = [ + { + p: 'P1', + }, + { + p: 'P2', + }, + { + p: 'P3', + }, + { + p: 'P4', + }, + { + p: 'P5', + }, + { + p: 'Ul1', + ul: ['Li1', 'Li2', 'Li3'], + }, + { + p: 'P6', + }, + { + p: 'Ul2', + ul: ['Li1', 'Li2'], + }, + { + p: 'P7', + }, + { + p: 'P8', + }, +] + +function AboutProject() { + const { t } = useTranslation(['start-page', 'about', 'common']) + + return ( + <> +
+

{t('common:About')}

+
+ {paragraphs.map((item) => { + if (!item.ul) { + return

{t(`about:${item.p}`)}

+ } + + return ( +
    + {item.ul.map((listItem) => ( +
  • {t(`about:${item.p}:${listItem}`)}
    • + ))} +
+ ) + })} +
+
+ + + ) +} + +export default AboutProject diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js index c166da1f6..bfafda2d6 100644 --- a/components/ModalInSideBar.js +++ b/components/ModalInSideBar.js @@ -1,6 +1,13 @@ import Close from 'public/close.svg' -function ModalInSideBar({ isOpen, setIsOpen, children, label, collapsed }) { +function ModalInSideBar({ + isOpen, + setIsOpen, + children, + modalTitle, + buttonTitle, + collapsed, +}) { return ( <>
- {label} + {buttonTitle}
{isOpen && ( @@ -18,7 +25,7 @@ function ModalInSideBar({ isOpen, setIsOpen, children, label, collapsed }) { >

- {label} + {modalTitle}

-
- -
*/} ) } diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index 666f926e3..8025e0609 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -34,7 +34,6 @@ const ThemeSwitcher = ({ collapsed }) => { const [currentTheme, setCurrentTheme] = useState(theme || 'default') const [hoverTheme, setHoverTheme] = useState(false) const timeoutRef = useRef(null) - const [openSwitcher, setOpenSwitcher] = useState(true) const { t } = useTranslation() useEffect(() => { @@ -61,14 +60,8 @@ const ThemeSwitcher = ({ collapsed }) => { setHoverTheme(null) }, []) - useEffect(() => { - setOpenSwitcher(true) - if (collapsed) console.log('collapsed') - if (!collapsed) console.log('not collapsed') - }, [collapsed]) - return ( - + {({ open }) => ( <> diff --git a/oce.json b/oce.json index 34cc9a0c4..e1fffb5ab 100644 --- a/oce.json +++ b/oce.json @@ -1,5 +1,5 @@ { - "version": "0.24.1", + "version": "0.25.0", "date": "2024-10-14", "dependencies": [ "npm/@texttree/notepad-rcl", diff --git a/package.json b/package.json index 7dce09d99..dbf5dad00 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "level", - "version": "0.24.1", + "version": "0.25.0", "license": "MIT", "author": { "name": "Glokas" diff --git a/public/updateVersionInfo/updates_en.md b/public/updateVersionInfo/updates_en.md index 4e5146a22..df6a6211f 100644 --- a/public/updateVersionInfo/updates_en.md +++ b/public/updateVersionInfo/updates_en.md @@ -1,3 +1,9 @@ +# Version 0.25.0 +## Date: 10/17/2024 + +### **Changed:** +- sidebar + # Version 0.24.1 ## Date: 10/14/2024 @@ -208,7 +214,7 @@ ## Date: 09/18/2023 ### **Added:** -- loading status for clicking on the internal link +- loading status for clicking on the internal link - link to the ready-made books reading mode in account # Version 0.5.0 diff --git a/public/updateVersionInfo/updates_es.md b/public/updateVersionInfo/updates_es.md index 8c71299cf..eb9255abe 100644 --- a/public/updateVersionInfo/updates_es.md +++ b/public/updateVersionInfo/updates_es.md @@ -1,3 +1,9 @@ +# Versión 0.25.0 +## Date: 10/17/2024 + +### **Modificado:** +- barra lateral + # Versión 0.24.1 ## Fecha: 10/14/2024 @@ -147,7 +153,7 @@ - búsqueda agregada por notas - notas: error en el menú contextual corregido - lista de notas: un clic en un elemento del árbol abre una nota/carpeta, dos clics abren el árbol completo y tres clics comienzan a cambiar el nombre -- se corrigió la visualización del alfabeto al agregar y eliminar palabras +- se corrigió la visualización del alfabeto al agregar y eliminar palabras - se corrigió la visualización de la lista de diccionario en ausencia de palabras filtro ### **Añadido:** diff --git a/public/updateVersionInfo/updates_ru.md b/public/updateVersionInfo/updates_ru.md index 0950f5809..0d03c5c55 100644 --- a/public/updateVersionInfo/updates_ru.md +++ b/public/updateVersionInfo/updates_ru.md @@ -1,3 +1,9 @@ +# Версия 0.25.0 +## Date: 17.10.2024 + +### **Изменено** +- сайдбар + # Версия 0.24.1 ## Дата: 14.10.2024 From dc3a1406cb2ec489d18a03ed1dd126799f46409c Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Fri, 18 Oct 2024 04:16:03 +0500 Subject: [PATCH 09/19] feat: fixed on comments --- components/AboutVersion.js | 4 +- components/AppBar.js | 2 +- components/SideBar.js | 90 ++++++++++++++----- components/SignOut.js | 4 +- components/ThemeSwitcher.js | 10 ++- pages/projects/[code]/index.js | 2 + .../[book]/[chapter]/[step]/index.js | 2 + pages/users/index.js | 7 +- public/about.svg | 4 +- public/account.svg | 5 +- public/create-project.svg | 4 +- public/localization.svg | 5 +- public/logout.svg | 4 +- public/notes.svg | 4 +- public/projects.svg | 4 +- public/themes.svg | 6 +- public/users.svg | 7 +- public/version.svg | 5 +- 18 files changed, 117 insertions(+), 52 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 3d7d30a0c..7fa7bac9a 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -110,10 +110,10 @@ function AboutVersion({ isStartPage = false, collapsed }) { {showAllUpdates ? fullAboutVersion : currentAboutVersion} -
+
diff --git a/components/AppBar.js b/components/AppBar.js index f4214704e..b244c4077 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -54,7 +54,7 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
diff --git a/components/SideBar.js b/components/SideBar.js index 6d4b353aa..afac76d84 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -109,8 +109,8 @@ function SideBar({ setIsOpenSideBar, access }) { leave="transition-opacity duration-200" > e.stopPropagation()} onMouseEnter={() => { @@ -126,10 +126,14 @@ function SideBar({ setIsOpenSideBar, access }) { setShowAbout(false) }} > -
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
)} - +
+
+ +
+
-
- +
+
{t('Language')} @@ -342,8 +378,12 @@ function SideBar({ setIsOpenSideBar, access }) { openModal() }} > -
- +
+
-
- +
+
diff --git a/components/SignOut.js b/components/SignOut.js index 85cc3af7b..4a03c3a92 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -35,8 +35,8 @@ export default function SignOut({ collapsed }) { loading ? 'opacity-70' : '' }`} > -
- +
+

{t('users:SignOut')}

diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index 8025e0609..1f4bacb4e 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -66,8 +66,10 @@ const ThemeSwitcher = ({ collapsed }) => { <>
-
- +
+

{t('ChooseTheme')}

@@ -78,7 +80,9 @@ const ThemeSwitcher = ({ collapsed }) => { /> {themes.map((theme) => (
diff --git a/pages/projects/[code]/index.js b/pages/projects/[code]/index.js index a5bbecd55..d5c8259fa 100644 --- a/pages/projects/[code]/index.js +++ b/pages/projects/[code]/index.js @@ -23,6 +23,8 @@ export async function getServerSideProps({ locale }) { 'chapters', 'book-properties', 'users', + 'about', + 'start-page', ])), }, } diff --git a/pages/translate/[project]/[book]/[chapter]/[step]/index.js b/pages/translate/[project]/[book]/[chapter]/[step]/index.js index 87e46dcd3..3d2197cac 100644 --- a/pages/translate/[project]/[book]/[chapter]/[step]/index.js +++ b/pages/translate/[project]/[book]/[chapter]/[step]/index.js @@ -331,6 +331,8 @@ export async function getServerSideProps({ locale, params }) { 'users', 'error', 'aquifer', + 'about', + 'start-page', ])), last_step: steps.data.sorting, }, diff --git a/pages/users/index.js b/pages/users/index.js index 53653ad06..63381a62c 100644 --- a/pages/users/index.js +++ b/pages/users/index.js @@ -30,7 +30,12 @@ export default function UsersPage() { export async function getStaticProps({ locale }) { return { props: { - ...(await serverSideTranslations(locale, ['users', 'common'])), + ...(await serverSideTranslations(locale, [ + 'users', + 'common', + 'about', + 'start-page', + ])), }, } } diff --git a/public/about.svg b/public/about.svg index 0da5f6a00..e2bde7d75 100644 --- a/public/about.svg +++ b/public/about.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/account.svg b/public/account.svg index 883c7f4dd..1b6998eec 100644 --- a/public/account.svg +++ b/public/account.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/public/create-project.svg b/public/create-project.svg index 13506baf4..3b0077685 100644 --- a/public/create-project.svg +++ b/public/create-project.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/localization.svg b/public/localization.svg index d1a202705..1e46f2685 100644 --- a/public/localization.svg +++ b/public/localization.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/public/logout.svg b/public/logout.svg index 738666894..e63abf2e9 100644 --- a/public/logout.svg +++ b/public/logout.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/notes.svg b/public/notes.svg index 224ad7344..f9b0f375e 100644 --- a/public/notes.svg +++ b/public/notes.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/projects.svg b/public/projects.svg index 2624405db..af12832f3 100644 --- a/public/projects.svg +++ b/public/projects.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/themes.svg b/public/themes.svg index 77b1615d3..6697d8fa5 100644 --- a/public/themes.svg +++ b/public/themes.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/public/users.svg b/public/users.svg index 60f7c915c..bdaef21ff 100644 --- a/public/users.svg +++ b/public/users.svg @@ -1,3 +1,6 @@ - - + + + + + diff --git a/public/version.svg b/public/version.svg index 303ec7ac7..24a4fe412 100644 --- a/public/version.svg +++ b/public/version.svg @@ -1 +1,4 @@ - + + + + From 80d4807d7da8e1d3b3b83e4d85de1abf15f8fdf7 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sat, 19 Oct 2024 02:05:43 +0500 Subject: [PATCH 10/19] feat: fixed backdrop, mobile close align, modals, logo align --- components/AboutVersion.js | 4 +- components/AppBar.js | 11 +++-- components/Layout.js | 2 +- components/ModalInSideBar.js | 6 +-- components/SideBar.js | 86 ++++++++++++++++++++++------------- components/SignOut.js | 6 ++- components/ThemeSwitcher.js | 10 ++-- public/about.svg | 4 +- public/account.svg | 5 +- public/create-project.svg | 4 +- public/locales/en/common.json | 4 +- public/locales/es/common.json | 4 +- public/locales/ru/common.json | 4 +- public/localization.svg | 5 +- public/logout.svg | 4 +- public/notes.svg | 4 +- public/projects.svg | 4 +- public/users.svg | 7 +-- public/version.svg | 5 +- 19 files changed, 93 insertions(+), 86 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 7fa7bac9a..08745a7dc 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -92,11 +92,11 @@ function AboutVersion({ isStartPage = false, collapsed }) { onClick={(e) => e.stopPropagation()} >
-

+

{t('Version')}

diff --git a/components/SideBar.js b/components/SideBar.js index afac76d84..9277fc85c 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -35,18 +35,21 @@ import CreateProject from 'public/create-project.svg' import Notes from 'public/notes.svg' import Users from 'public/users.svg' import About from 'public/about.svg' +import { useRouter } from 'next/router' function SideBar({ setIsOpenSideBar, access }) { const { user } = useCurrentUser() const { t } = useTranslation(['common', 'projects', 'users', 'start-page']) const [modalsSidebarState, setModalsSidebarState] = useRecoilState(modalsSidebar) + const [collapsed, setCollapsed] = useState(true) const [isLargeScreen, setIsLargeScreen] = useState(false) const [isOpen, setIsOpen] = useState(false) - const [showAbout, setShowAbout] = useState(false) const [showCreate, setShowCreate] = useState(false) + const router = useRouter() + const openModal = (modalType) => { setModalsSidebarState((prevModals) => ({ aboutVersion: modalType === 'aboutVersion' ? !prevModals.aboutVersion : false, @@ -87,7 +90,7 @@ function SideBar({ setIsOpenSideBar, access }) { closeModal() setIsOpenSideBar((prev) => !prev) }} - className="z-30" + className="z-20" > {access && (!open ? ( @@ -109,7 +112,7 @@ function SideBar({ setIsOpenSideBar, access }) { leave="transition-opacity duration-200" > e.stopPropagation()} @@ -127,12 +130,12 @@ function SideBar({ setIsOpenSideBar, access }) { }} >
@@ -159,7 +162,14 @@ function SideBar({ setIsOpenSideBar, access }) {
- + -
- +
+
- + -
+
{user?.is_admin && ( - + -
+
-
+
-
+
{user?.is_admin && ( - + -
+
)}
-
+
-
+
@@ -352,9 +376,9 @@ function SideBar({ setIsOpenSideBar, access }) { className="flex items-center justify-between gap-2 cursor-default" >
-
+
@@ -378,9 +402,9 @@ function SideBar({ setIsOpenSideBar, access }) { openModal() }} > -
+
@@ -409,9 +433,9 @@ function SideBar({ setIsOpenSideBar, access }) { setShowAbout(false) }} > -
+
diff --git a/components/SignOut.js b/components/SignOut.js index 4a03c3a92..c935650be 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -35,8 +35,10 @@ export default function SignOut({ collapsed }) { loading ? 'opacity-70' : '' }`} > -
- +
+

{t('users:SignOut')}

diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index 1f4bacb4e..0c957e575 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -64,12 +64,14 @@ const ThemeSwitcher = ({ collapsed }) => { {({ open }) => ( <> - +
- +

{t('ChooseTheme')}

diff --git a/public/about.svg b/public/about.svg index e2bde7d75..0da5f6a00 100644 --- a/public/about.svg +++ b/public/about.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/account.svg b/public/account.svg index 1b6998eec..7bb5f2911 100644 --- a/public/account.svg +++ b/public/account.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/public/create-project.svg b/public/create-project.svg index 3b0077685..898f2fc98 100644 --- a/public/create-project.svg +++ b/public/create-project.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a3a46741d..b4c5421c3 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -139,8 +139,8 @@ "Settings": "Settings", "SettingsEdit": "Edit settings", "ShowAll": "Show all", - "ShowAllUpdates": "Show all updates", - "ShowCurrUpdates": "Show current updates", + "ShowAllUpdates": "Version history", + "ShowCurrUpdates": "Latest version", "SomeTranslatorsNotFinish": "Some translators are still working on the previous step. You will now be automatically redirected.", "Start": "Start", "Step": "Step", diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 9f311340d..dd28c5359 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -139,8 +139,8 @@ "Settings": "Settings", "SettingsEdit": "Edit settings", "ShowAll": "Show all", - "ShowAllUpdates": "Mostrar todas las actualizaciones", - "ShowCurrUpdates": "Mostrar actualizaciones actuales", + "ShowAllUpdates": "Historial de versiones", + "ShowCurrUpdates": "Última versión", "SomeTranslatorsNotFinish": "Algunos traductores todavía están trabajando en el paso anterior. Ahora serás redirigido automáticamente.", "Start": "Start", "Step": "Step", diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json index c92f5b13c..58b93ea20 100644 --- a/public/locales/ru/common.json +++ b/public/locales/ru/common.json @@ -139,8 +139,8 @@ "Settings": "Настройки", "SettingsEdit": "Редактировать настройки", "ShowAll": "Показать все", - "ShowAllUpdates": "Показать все изменения", - "ShowCurrUpdates": "Показать последние обновления", + "ShowAllUpdates": "История версий", + "ShowCurrUpdates": "Последняя версия", "SomeTranslatorsNotFinish": "Некоторые переводчики все еще работают на предыдущем шаге. Теперь вы будете автоматически перенаправлены.", "Start": "Начать", "Step": "Шаг", diff --git a/public/localization.svg b/public/localization.svg index 1e46f2685..5671b4bb2 100644 --- a/public/localization.svg +++ b/public/localization.svg @@ -1,4 +1 @@ - - - - + diff --git a/public/logout.svg b/public/logout.svg index e63abf2e9..ef601c395 100644 --- a/public/logout.svg +++ b/public/logout.svg @@ -1,3 +1 @@ - - - + diff --git a/public/notes.svg b/public/notes.svg index f9b0f375e..ccee454d8 100644 --- a/public/notes.svg +++ b/public/notes.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/public/projects.svg b/public/projects.svg index af12832f3..134458b98 100644 --- a/public/projects.svg +++ b/public/projects.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/public/users.svg b/public/users.svg index bdaef21ff..aacf6b08e 100644 --- a/public/users.svg +++ b/public/users.svg @@ -1,6 +1 @@ - - - - - - + \ No newline at end of file diff --git a/public/version.svg b/public/version.svg index 24a4fe412..303ec7ac7 100644 --- a/public/version.svg +++ b/public/version.svg @@ -1,4 +1 @@ - - - - + From 7a71f0bb186d9c6e3f66468c1e74bf9b442db4d0 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sat, 19 Oct 2024 19:25:21 +0500 Subject: [PATCH 11/19] feat: fixed appbar, started inactive state --- components/AboutVersion.js | 2 +- components/Account.js | 8 +-- components/AppBar.js | 4 +- components/ModalInSideBar.js | 2 +- components/SideBar.js | 105 ++++++++++++++----------------- components/SignOut.js | 4 +- components/SwitchLocalization.js | 2 +- components/ThemeSwitcher.js | 10 +-- public/account.svg | 2 +- public/create-project.svg | 2 +- public/notes.svg | 2 +- public/projects.svg | 2 +- public/themes.svg | 6 +- public/users.svg | 2 +- 14 files changed, 71 insertions(+), 82 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 08745a7dc..301ff7197 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -88,7 +88,7 @@ function AboutVersion({ isStartPage = false, collapsed }) {
{modalsSidebarState.aboutVersion && (
e.stopPropagation()} >
diff --git a/components/Account.js b/components/Account.js index 69111acf5..f31851530 100644 --- a/components/Account.js +++ b/components/Account.js @@ -8,12 +8,9 @@ import { Menu, Tab } from '@headlessui/react' import ProjectCreate from './ProjectCreate' import Projects from './Projects' -import MobileMenu from './Panel/UI/MobileMenu' import { useCurrentUser } from 'lib/UserContext' -import Plus from 'public/plus.svg' - const sizeTabs = { 1: 'w-1/6', 2: 'w-full lg:w-3/6', @@ -27,7 +24,6 @@ function Account() { const [selectedTab, setSelectedTab] = useState(0) const { user, loading } = useCurrentUser() const router = useRouter() - const [openInternalMenu, setOpenInternalMenu] = useState(false) const { t } = useTranslation(['users', 'project-edit']) @@ -43,6 +39,10 @@ function Account() { } }, [router]) + useEffect(() => { + router.push(`?tab=${selectedTab}`, undefined, { shallow: true }) + }, [selectedTab]) + const tabs = ['Account', 'projects:Projects', 'projects:CreateProject'] return ( <> diff --git a/components/AppBar.js b/components/AppBar.js index 94e35c4fb..dc12f19b7 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -46,7 +46,7 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) { }, [supabase, user]) const logoLink = useMemo(() => { - return !user?.id ? '/' : access ? '/account' : '/agreements' + return !user?.id ? '/' : access ? '/account?tab=0' : '/agreements' }, [access, user]) return ( @@ -56,7 +56,7 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js index 8abdc707c..6cc104fc8 100644 --- a/components/ModalInSideBar.js +++ b/components/ModalInSideBar.js @@ -20,7 +20,7 @@ function ModalInSideBar({ {isOpen && (
e.stopPropagation()} >
diff --git a/components/SideBar.js b/components/SideBar.js index 9277fc85c..a1b730d29 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -113,7 +113,7 @@ function SideBar({ setIsOpenSideBar, access }) { > e.stopPropagation()} onMouseEnter={() => { @@ -130,13 +130,11 @@ function SideBar({ setIsOpenSideBar, access }) { }} >
-
+
-
- +
+
-
- +
+
@@ -241,12 +236,8 @@ function SideBar({ setIsOpenSideBar, access }) { setShowAbout(false) }} > -
- +
+
@@ -273,12 +264,8 @@ function SideBar({ setIsOpenSideBar, access }) { openModal() }} > -
- +
+
-
- +
+
-
- +
+
)} -
+
-
+
-
+
-
+
-
+
-
+
diff --git a/components/SwitchLocalization.js b/components/SwitchLocalization.js index ee82b498c..1ed2bfae1 100644 --- a/components/SwitchLocalization.js +++ b/components/SwitchLocalization.js @@ -20,7 +20,7 @@ function SwitchLocalization({ collapsed }) { > e.stopPropagation()} > {t(locale.toUpperCase())} diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index 0c957e575..74677c965 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -65,13 +65,13 @@ const ThemeSwitcher = ({ collapsed }) => { {({ open }) => ( <>
-
- +
+

{t('ChooseTheme')}

@@ -82,7 +82,7 @@ const ThemeSwitcher = ({ collapsed }) => { /> diff --git a/public/account.svg b/public/account.svg index 7bb5f2911..d1c6fe548 100644 --- a/public/account.svg +++ b/public/account.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/public/create-project.svg b/public/create-project.svg index 898f2fc98..7cafa3f43 100644 --- a/public/create-project.svg +++ b/public/create-project.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/public/notes.svg b/public/notes.svg index ccee454d8..47f16fbc9 100644 --- a/public/notes.svg +++ b/public/notes.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/public/projects.svg b/public/projects.svg index 134458b98..51a430950 100644 --- a/public/projects.svg +++ b/public/projects.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/public/themes.svg b/public/themes.svg index 6697d8fa5..78e53efd0 100644 --- a/public/themes.svg +++ b/public/themes.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/public/users.svg b/public/users.svg index aacf6b08e..eb2ba59e6 100644 --- a/public/users.svg +++ b/public/users.svg @@ -1 +1 @@ - \ No newline at end of file + From 377353316b729ff90ba623e7747a601276f11378 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sun, 20 Oct 2024 13:09:25 +0500 Subject: [PATCH 12/19] feat: fixed on comments --- components/SideBar.js | 82 ++++++++++++++++++++++++-------- components/StartPage/Feedback.js | 2 +- 2 files changed, 64 insertions(+), 20 deletions(-) diff --git a/components/SideBar.js b/components/SideBar.js index a1b730d29..db65bb679 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -164,7 +164,7 @@ function SideBar({ setIsOpenSideBar, access }) { as="div" disabled className={`py-3 px-4 ${ - router.query.tab !== '0' ? 'opacity-70' : 'bg-th-secondary-50' + router.query?.tab !== '0' ? 'opacity-70' : 'bg-th-secondary-200' }`} > @@ -178,7 +178,13 @@ function SideBar({ setIsOpenSideBar, access }) { }} >
- +
@@ -207,7 +213,13 @@ function SideBar({ setIsOpenSideBar, access }) { }} >
- +
@@ -237,7 +251,13 @@ function SideBar({ setIsOpenSideBar, access }) { }} >
- +
- +
- +
@@ -335,7 +369,13 @@ function SideBar({ setIsOpenSideBar, access }) { }} >
- +
@@ -424,9 +466,11 @@ function SideBar({ setIsOpenSideBar, access }) { >
diff --git a/components/StartPage/Feedback.js b/components/StartPage/Feedback.js index 1526ab1ae..493b4282e 100644 --- a/components/StartPage/Feedback.js +++ b/components/StartPage/Feedback.js @@ -44,7 +44,7 @@ function Feedback({ t, onClose }) { return (
-

{t('ConnectWithUs')}

+

{t('ConnectWithUs')}

e.stopPropagation()}> {!isSent ? ( From 7f0858e0a335f855ce215b94bd78a9cb90e6527f Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Tue, 22 Oct 2024 00:52:47 +0500 Subject: [PATCH 13/19] feat: fixed on comments, width, ternary classes --- components/AppBar.js | 6 +- components/ModalInSideBar.js | 4 +- components/SideBar.js | 80 ++++++++---------- components/SignOut.js | 6 +- components/StartPage/Feedback.js | 2 +- components/SwitchLocalization.js | 4 +- components/ThemeSwitcher.js | 27 +++--- components/image.png | Bin 3378 -> 0 bytes pages/agreements.js | 10 ++- .../[code]/books/[bookid]/[chapterid].js | 2 + pages/projects/[code]/books/[bookid]/index.js | 8 +- pages/projects/[code]/books/read.js | 9 +- pages/projects/[code]/edit/index.js | 2 + .../[book]/[chapter]/[step]/[translator].js | 9 +- .../[book]/[chapter]/[step]/intro.js | 8 +- pages/users/[id].js | 7 +- pages/users/create.js | 7 +- public/locales/en/common.json | 2 +- public/locales/es/common.json | 2 +- public/locales/ru/common.json | 2 +- public/themes.svg | 4 +- public/version.svg | 2 +- 22 files changed, 120 insertions(+), 83 deletions(-) delete mode 100644 components/image.png diff --git a/components/AppBar.js b/components/AppBar.js index dc12f19b7..605d54255 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -50,10 +50,12 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) { }, [access, user]) return ( -
+
isOpenSideBar && setIsOpenSideBar(false)}>
- + {!['/user-agreement', '/confession-steps', 'agreements'].includes( + router.pathname + ) && }
{buttonTitle} @@ -20,7 +20,7 @@ function ModalInSideBar({ {isOpen && (
e.stopPropagation()} >
diff --git a/components/SideBar.js b/components/SideBar.js index db65bb679..25c32a064 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -1,6 +1,7 @@ import { Fragment, useEffect, useState } from 'react' import Link from 'next/link' +import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' @@ -35,7 +36,6 @@ import CreateProject from 'public/create-project.svg' import Notes from 'public/notes.svg' import Users from 'public/users.svg' import About from 'public/about.svg' -import { useRouter } from 'next/router' function SideBar({ setIsOpenSideBar, access }) { const { user } = useCurrentUser() @@ -48,6 +48,8 @@ function SideBar({ setIsOpenSideBar, access }) { const [showAbout, setShowAbout] = useState(false) const [showCreate, setShowCreate] = useState(false) + const collapsedSideBar = collapsed ? 'lg:hidden' : '' + const router = useRouter() const openModal = (modalType) => { @@ -112,8 +114,8 @@ function SideBar({ setIsOpenSideBar, access }) { leave="transition-opacity duration-200" > e.stopPropagation()} onMouseEnter={() => { @@ -129,11 +131,9 @@ function SideBar({ setIsOpenSideBar, access }) { setShowAbout(false) }} > -
+
@@ -181,14 +181,12 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('Account')} @@ -216,14 +214,12 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('Projects')} @@ -254,14 +250,12 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('CreateProject')} @@ -274,7 +268,7 @@ function SideBar({ setIsOpenSideBar, access }) { as="div" disabled className={`flex px-4 py-3 items-center justify-between gap-2 cursor-default md:hidden ${ - !showCreate && 'opacity-70' + !showCreate ? 'opacity-70' : '' }`} >
@@ -326,8 +320,8 @@ function SideBar({ setIsOpenSideBar, access }) {
@@ -372,14 +366,12 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('users:UserManagement')} @@ -401,14 +393,12 @@ function SideBar({ setIsOpenSideBar, access }) {
- - {t('Language')} - + {t('Language')}
@@ -430,10 +420,8 @@ function SideBar({ setIsOpenSideBar, access }) {
diff --git a/components/SignOut.js b/components/SignOut.js index c3b56e524..b4700f913 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -37,10 +37,12 @@ export default function SignOut({ collapsed }) { >
-

{t('users:SignOut')}

+

{t('users:SignOut')}

) } diff --git a/components/StartPage/Feedback.js b/components/StartPage/Feedback.js index 493b4282e..9dbd119fa 100644 --- a/components/StartPage/Feedback.js +++ b/components/StartPage/Feedback.js @@ -84,7 +84,7 @@ function Feedback({ t, onClose }) { {t('users:Send')} diff --git a/components/SwitchLocalization.js b/components/SwitchLocalization.js index 1ed2bfae1..3013a7adc 100644 --- a/components/SwitchLocalization.js +++ b/components/SwitchLocalization.js @@ -15,7 +15,7 @@ function SwitchLocalization({ collapsed }) { return (
@@ -27,7 +27,7 @@ function SwitchLocalization({ collapsed }) {
diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index 74677c965..01a7f68d3 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -1,7 +1,8 @@ -import { Disclosure } from '@headlessui/react' import { useCallback, useEffect, useRef, useState } from 'react' -import { useTranslation } from 'react-i18next' + import { useGetTheme } from 'utils/hooks' +import { Disclosure } from '@headlessui/react' +import { useTranslation } from 'react-i18next' import Theme from 'public/themes.svg' import ArrowDown from 'public/arrow-down.svg' @@ -64,26 +65,26 @@ const ThemeSwitcher = ({ collapsed }) => { {({ open }) => ( <> - +
- +
-

{t('ChooseTheme')}

+

{t('ChooseTheme')}

 {themes.map((theme) => ( @@ -92,7 +93,7 @@ const ThemeSwitcher = ({ collapsed }) => { onClick={() => switchTheme(theme.name)} onMouseOver={() => handleMouseOver(theme.name)} onMouseLeave={handleMouseLeave} - className={`half-circle w-10 h-10 rotate-45 cursor-pointer ${ + className={`half-circle w-8 h-8 rotate-45 cursor-pointer ${ currentTheme === theme.name ? `border-th-secondary-10 border-2 outline outline-3 ${theme.outline}` : '' diff --git a/components/image.png b/components/image.png deleted file mode 100644 index 3b306c23629ca0e0773e5b8bba160dc169294725..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3378 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 rezsd;@OF%`&3iEWzf}RU!YfkVfXfD#)Ryh*o push(agreement.link)} >
- - + + diff --git a/public/version.svg b/public/version.svg index 303ec7ac7..b2f13e833 100644 --- a/public/version.svg +++ b/public/version.svg @@ -1 +1 @@ - + From 776ef1f43b6faf17acda2b734dfffd6f85887f8c Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Tue, 22 Oct 2024 01:15:47 +0500 Subject: [PATCH 14/19] feat: modals dont close, dealeted blur --- components/AboutVersion.js | 7 ++++--- components/Modal.js | 2 +- components/SideBar.js | 28 ++++++++++++++++++++++++---- components/SwitchLocalization.js | 2 +- 4 files changed, 30 insertions(+), 9 deletions(-) diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 301ff7197..72d5488db 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -16,7 +16,7 @@ import updatesES from '../public/updateVersionInfo/updates_es.md' import Close from 'public/close.svg' -function AboutVersion({ isStartPage = false, collapsed }) { +function AboutVersion({ isStartPage = false, collapsed, onClose }) { const aboutVersion = { en: updatesEN, ru: updatesRU, @@ -97,12 +97,13 @@ function AboutVersion({ isStartPage = false, collapsed }) {

diff --git a/components/Modal.js b/components/Modal.js index 268adaf67..810f6fd27 100644 --- a/components/Modal.js +++ b/components/Modal.js @@ -30,7 +30,7 @@ function Modal({ className={classNames.main} onClose={() => !handleCloseDisabled && closeHandle()} > -
+
{ + if ( + modalsSidebarState.notepad || + modalsSidebarState.aboutVersion || + modalsSidebarState.avatarSelector || + showAbout + ) { + return + } setCollapsed(true) closeModal() close() @@ -327,12 +335,14 @@ function SideBar({ setIsOpenSideBar, access }) {
+ setIsOpen={(value) => { setModalsSidebarState((prev) => ({ ...prev, notepad: value, })) - } + setCollapsed(!value) + setIsOpenSideBar(value) + }} modalTitle={t('personalNotes')} buttonTitle={t('personalNotes')} collapsed={collapsed} @@ -425,7 +435,11 @@ function SideBar({ setIsOpenSideBar, access }) { />
{ + setShowAbout(value) + setCollapsed(!value) + setIsOpenSideBar(value) + }} isOpen={showAbout} buttonTitle={t('About')} modalTitle={'LEVEL'} @@ -459,7 +473,13 @@ function SideBar({ setIsOpenSideBar, access }) { }`} />
- + { + setCollapsed(!value) + setIsOpenSideBar(value) + }} + collapsed={collapsed} + />
diff --git a/components/SwitchLocalization.js b/components/SwitchLocalization.js index 3013a7adc..92c0b7f0c 100644 --- a/components/SwitchLocalization.js +++ b/components/SwitchLocalization.js @@ -38,7 +38,7 @@ 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" + 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" >
{t(loc.toUpperCase())} From 6941211b79cf254f5eda2375246e58afeb7eb84a Mon Sep 17 00:00:00 2001 From: valyukhov Date: Tue, 22 Oct 2024 03:14:30 +0300 Subject: [PATCH 15/19] feat: hange icons --- components/AboutVersion.js | 8 ++- components/ModalInSideBar.js | 6 +- components/SideBar.js | 118 ++++++++++++++++++++--------------- components/SignOut.js | 19 ++++-- components/ThemeSwitcher.js | 23 +++++-- components/image.png | Bin 3378 -> 0 bytes public/about.svg | 4 +- public/account.svg | 5 +- public/notes.svg | 4 +- public/themes.svg | 4 +- public/version.svg | 5 +- 11 files changed, 126 insertions(+), 70 deletions(-) delete mode 100644 components/image.png diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 301ff7197..efb3a31cb 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -83,7 +83,13 @@ function AboutVersion({ isStartPage = false, collapsed }) { return ( <> -
+
{t('Version')} {packageJson.version}
{modalsSidebarState.aboutVersion && ( diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js index 6cc104fc8..7ab053055 100644 --- a/components/ModalInSideBar.js +++ b/components/ModalInSideBar.js @@ -11,9 +11,9 @@ function ModalInSideBar({ return ( <>
{buttonTitle}
diff --git a/components/SideBar.js b/components/SideBar.js index db65bb679..18d7194e5 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -113,7 +113,7 @@ function SideBar({ setIsOpenSideBar, access }) { > e.stopPropagation()} onMouseEnter={() => { @@ -163,9 +163,9 @@ function SideBar({ setIsOpenSideBar, access }) { -
+
{t('Account')} @@ -198,9 +202,9 @@ function SideBar({ setIsOpenSideBar, access }) { -
+
{t('Projects')} @@ -234,11 +242,11 @@ function SideBar({ setIsOpenSideBar, access }) { -
+
{t('CreateProject')} @@ -288,8 +300,8 @@ function SideBar({ setIsOpenSideBar, access }) {
@@ -309,11 +321,11 @@ function SideBar({ setIsOpenSideBar, access }) {
-
+
@@ -352,11 +364,11 @@ function SideBar({ setIsOpenSideBar, access }) {
{t('users:UserManagement')} @@ -396,17 +412,21 @@ function SideBar({ setIsOpenSideBar, access }) {
- + {t('Language')}
@@ -416,9 +436,9 @@ function SideBar({ setIsOpenSideBar, access }) {
-
+
@@ -451,11 +471,11 @@ function SideBar({ setIsOpenSideBar, access }) {
-
+
@@ -480,7 +500,7 @@ function SideBar({ setIsOpenSideBar, access }) { diff --git a/components/SignOut.js b/components/SignOut.js index c3b56e524..2d19f3d24 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -35,12 +35,19 @@ export default function SignOut({ collapsed }) { loading ? 'opacity-70' : '' }`} > -
- -
-

{t('users:SignOut')}

+ + +

+ {t('users:SignOut')} +

) } diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index 74677c965..784e97923 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -66,14 +66,29 @@ const ThemeSwitcher = ({ collapsed }) => { <>
- +
-

{t('ChooseTheme')}

+

+ {t('ChooseTheme')} +

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 rezsd;@OF%`&3iEWzf}RU!YfkVfXfD#)Ryh*o - + + diff --git a/public/account.svg b/public/account.svg index d1c6fe548..862832b26 100644 --- a/public/account.svg +++ b/public/account.svg @@ -1 +1,4 @@ - + + + + diff --git a/public/notes.svg b/public/notes.svg index 47f16fbc9..05390123f 100644 --- a/public/notes.svg +++ b/public/notes.svg @@ -1 +1,3 @@ - + + + diff --git a/public/themes.svg b/public/themes.svg index 78e53efd0..0f16eb872 100644 --- a/public/themes.svg +++ b/public/themes.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/version.svg b/public/version.svg index 303ec7ac7..26fc57d2f 100644 --- a/public/version.svg +++ b/public/version.svg @@ -1 +1,4 @@ - + + + + From 5d00d75fe5b312decf694cca1f1adaf4aea31e69 Mon Sep 17 00:00:00 2001 From: valyukhov Date: Tue, 22 Oct 2024 15:26:59 +0300 Subject: [PATCH 16/19] feat: :children_crossing: improve hover menu --- components/AboutVersion.js | 2 +- components/ModalInSideBar.js | 2 +- components/SideBar.js | 72 +++++++++++++++++--------------- components/SignOut.js | 4 +- components/SwitchLocalization.js | 14 ++++--- components/ThemeSwitcher.js | 38 +++++++++-------- components/Workspace.js | 4 +- public/notepad.svg | 1 - public/notes.svg | 2 +- 9 files changed, 76 insertions(+), 63 deletions(-) delete mode 100644 public/notepad.svg diff --git a/components/AboutVersion.js b/components/AboutVersion.js index efb3a31cb..9aeed5c58 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -87,7 +87,7 @@ function AboutVersion({ isStartPage = false, collapsed }) { className={`${collapsed && 'lg:hidden'} ${ modalsSidebarState.aboutVersion ? 'text-th-text-primary' - : 'text-th-secondary-300 group-hover:text-th-text-primary' + : 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary' }`} > {t('Version')} {packageJson.version} diff --git a/components/ModalInSideBar.js b/components/ModalInSideBar.js index 7ab053055..c94a22cd6 100644 --- a/components/ModalInSideBar.js +++ b/components/ModalInSideBar.js @@ -12,7 +12,7 @@ function ModalInSideBar({ <>
{buttonTitle} diff --git a/components/SideBar.js b/components/SideBar.js index 18d7194e5..aa19f7bc0 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -37,6 +37,11 @@ import Users from 'public/users.svg' import About from 'public/about.svg' import { useRouter } from 'next/router' +const activeIconClass = + 'stroke-th-text-primary lg:stroke-th-secondary-300 group-hover:stroke-th-text-primary' +const activeTextClass = + 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary' + function SideBar({ setIsOpenSideBar, access }) { const { user } = useCurrentUser() const { t } = useTranslation(['common', 'projects', 'users', 'start-page']) @@ -44,7 +49,6 @@ function SideBar({ setIsOpenSideBar, access }) { const [collapsed, setCollapsed] = useState(true) const [isLargeScreen, setIsLargeScreen] = useState(false) - const [isOpen, setIsOpen] = useState(false) const [showAbout, setShowAbout] = useState(false) const [showCreate, setShowCreate] = useState(false) @@ -77,10 +81,6 @@ function SideBar({ setIsOpenSideBar, access }) { return () => window.removeEventListener('resize', checkScreenSize) }, []) - useEffect(() => { - setIsOpen(isLargeScreen) - }, [isLargeScreen]) - return ( {({ open, close }) => ( @@ -133,7 +133,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`relative flex flex-col gap-2 cursor-default border shadow-md border-th-secondary-300 bg-th-secondary-10 sm:rounded-2xl lg:h-screen lg:rounded-none`} >
@@ -182,7 +182,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`w-4 ml-0.5 ${ router.query?.tab === '0' ? 'stroke-th-text-primary' - : 'stroke-th-secondary-300 group-hover:stroke-th-text-primary' + : activeIconClass }`} />
@@ -190,7 +190,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`${collapsed && 'lg:hidden'} ${ router.query?.tab === '0' ? 'text-th-text-primary' - : 'text-th-secondary-300 group-hover:text-th-text-primary' + : activeTextClass }`} > {t('Account')} @@ -221,7 +221,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`w-5 ${ router.query?.tab === '1' ? 'stroke-th-text-primary' - : 'stroke-th-secondary-300 group-hover:stroke-th-text-primary' + : activeIconClass }`} />
@@ -229,7 +229,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`${collapsed && 'lg:hidden'} ${ router.query?.tab === '1' ? 'text-th-text-primary' - : 'text-th-secondary-300 group-hover:text-th-text-primary' + : activeTextClass }`} > {t('Projects')} @@ -263,7 +263,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`w-5 h-5 ${ router.query?.tab === '2' ? 'stroke-th-text-primary' - : 'stroke-th-secondary-300 group-hover:stroke-th-text-primary' + : activeIconClass }`} />
@@ -271,7 +271,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`${collapsed && 'lg:hidden'} ${ router.query?.tab === '2' ? 'text-th-text-primary' - : 'text-th-secondary-300 group-hover:text-th-text-primary' + : activeTextClass }`} > {t('CreateProject')} @@ -299,9 +299,7 @@ function SideBar({ setIsOpenSideBar, access }) {
@@ -339,7 +337,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`w-5 h-5 ${ modalsSidebarState.notepad ? 'stroke-th-text-primary' - : 'stroke-th-secondary-300 group-hover:stroke-th-primary-300' + : 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary' }`} />
@@ -385,19 +383,29 @@ function SideBar({ setIsOpenSideBar, access }) { className={`w-5 ${ router.pathname === '/users' ? 'stroke-th-text-primary' - : 'stroke-th-secondary-300 group-hover:stroke-th-primary-300' + : activeIconClass }`} />
- - {t('users:UserManagement')} - + + {t('users:UserManagement')} + +
@@ -412,20 +420,20 @@ function SideBar({ setIsOpenSideBar, access }) {
{t('Language')} @@ -450,9 +458,7 @@ function SideBar({ setIsOpenSideBar, access }) {
@@ -489,7 +495,7 @@ function SideBar({ setIsOpenSideBar, access }) { className={`w-5 h-5 ${ modalsSidebarState.aboutVersion ? 'stroke-th-text-primary' - : 'stroke-th-secondary-300 group-hover:stroke-th-text-primary' + : activeIconClass } ${collapsed && 'opacity-70'}`} />
@@ -500,7 +506,7 @@ function SideBar({ setIsOpenSideBar, access }) { diff --git a/components/SignOut.js b/components/SignOut.js index 2d19f3d24..a59825bd7 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -36,13 +36,13 @@ export default function SignOut({ collapsed }) { }`} >

diff --git a/components/SwitchLocalization.js b/components/SwitchLocalization.js index 1ed2bfae1..616bda344 100644 --- a/components/SwitchLocalization.js +++ b/components/SwitchLocalization.js @@ -16,17 +16,17 @@ function SwitchLocalization({ collapsed }) {

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" + className="cursor-pointer px-4 py-2 last:rounded-b-2xl first:rounded-t-2xl hover:opacity-70" > -
+
{t(loc.toUpperCase())}
diff --git a/components/ThemeSwitcher.js b/components/ThemeSwitcher.js index 784e97923..ddcf652a3 100644 --- a/components/ThemeSwitcher.js +++ b/components/ThemeSwitcher.js @@ -65,37 +65,41 @@ const ThemeSwitcher = ({ collapsed }) => { {({ open }) => ( <>

{t('ChooseTheme')}

+ const icons = { - personalNotes: , + personalNotes: , teamNotes: , dictionary: , retelling: , diff --git a/public/notepad.svg b/public/notepad.svg deleted file mode 100644 index b3975273f..000000000 --- a/public/notepad.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/notes.svg b/public/notes.svg index 05390123f..c5f327aa1 100644 --- a/public/notes.svg +++ b/public/notes.svg @@ -1,3 +1,3 @@ - + From ec94a0d5e2cb9ddf5c3027184bd38fe65151b78a Mon Sep 17 00:00:00 2001 From: valyukhov Date: Tue, 22 Oct 2024 16:05:42 +0300 Subject: [PATCH 17/19] refactor: :recycle: added hideSidebar option --- components/AppBar.js | 10 ++++++++-- components/Layout.js | 8 ++++++-- pages/404.js | 2 ++ pages/_app.js | 27 ++++++++++++++------------- pages/agreements.js | 1 + pages/confession-steps.js | 1 + pages/user-agreement.js | 2 +- 7 files changed, 33 insertions(+), 18 deletions(-) diff --git a/components/AppBar.js b/components/AppBar.js index dc12f19b7..c80ee7cca 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -17,7 +17,11 @@ import LevelLogo from 'public/level-logo.svg' import Down from 'public/arrow-down.svg' import User from 'public/user.svg' -export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) { +export default function AppBar({ + setIsOpenSideBar, + isOpenSideBar, + isHideSidebar = false, +}) { const [showFullAppbar, setShowFullAppbar] = useState(false) const [isStepPage, setIsStepPage] = useState(false) const [access, setAccess] = useState(false) @@ -53,7 +57,9 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
isOpenSideBar && setIsOpenSideBar(false)}>
- + {!isHideSidebar && ( + + )}
- +
setIsOpenSideBar(false)}> { + if (Component.layoutType === 'empty') { + return + } + + const layoutProps = { + backgroundColor: Component.backgroundColor ?? 'bg-th-secondary-100', + isHideSidebar: Component.layoutType === 'hideSidebar', + } + return ( - - -
- -
- - + + + ) } return ( -
- - - -
+
{renderContent()}
 ) diff --git a/pages/agreements.js b/pages/agreements.js index 303779357..c8b270ece 100644 --- a/pages/agreements.js +++ b/pages/agreements.js @@ -73,6 +73,7 @@ export default function Agreements() {
) } +Agreements.layoutType = 'hideSidebar' Agreements.backgroundColor = 'bg-th-secondary-100' diff --git a/pages/confession-steps.js b/pages/confession-steps.js index 6c2a300e2..d0d4e5ece 100644 --- a/pages/confession-steps.js +++ b/pages/confession-steps.js @@ -129,6 +129,7 @@ export default function ConfessionSteps() {
) } +ConfessionSteps.layoutType = 'hideSidebar' export async function getStaticProps({ locale }) { return { diff --git a/pages/user-agreement.js b/pages/user-agreement.js index 702868500..d86c12599 100644 --- a/pages/user-agreement.js +++ b/pages/user-agreement.js @@ -63,7 +63,7 @@ export default function UserAgreement() {
) } - +UserAgreement.layoutType = 'hideSidebar' export async function getStaticProps({ locale }) { return { props: { From 6f6b75c0846bd5245893979aa5fab886066ddf42 Mon Sep 17 00:00:00 2001 From: valyukhov Date: Tue, 22 Oct 2024 16:52:37 +0300 Subject: [PATCH 18/19] refactor: :recycle: delete layout param --- components/Account.js | 1 + components/AppBar.js | 18 ++++++++------- components/Layout.js | 8 ++----- components/ModalInSideBar.js | 6 +++-- components/SideBar.js | 39 ++++++++++++++++---------------- components/SignOut.js | 4 ++-- components/SwitchLocalization.js | 2 +- pages/404.js | 2 -- pages/_app.js | 1 - pages/agreements.js | 1 - pages/confession-steps.js | 1 - pages/user-agreement.js | 1 - 12 files changed, 40 insertions(+), 44 deletions(-) diff --git a/components/Account.js b/components/Account.js index f31851530..6a628d81b 100644 --- a/components/Account.js +++ b/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'] diff --git a/components/AppBar.js b/components/AppBar.js index bc351cb0a..4d01c9339 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -17,11 +17,7 @@ import LevelLogo from 'public/level-logo.svg' import Down from 'public/arrow-down.svg' import User from 'public/user.svg' -export default function AppBar({ - setIsOpenSideBar, - isOpenSideBar, - isHideSidebar = false, -}) { +export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) { const [showFullAppbar, setShowFullAppbar] = useState(false) const [isStepPage, setIsStepPage] = useState(false) const [access, setAccess] = useState(false) @@ -57,9 +53,15 @@ export default function AppBar({
isOpenSideBar && setIsOpenSideBar(false)}>
- {!['/user-agreement', '/confession-steps', 'agreements'].includes( - router.pathname - ) && } + {![ + '/user-agreement', + '/confession-steps', + '/agreements', + '/404', + '/privacy-policy', + ].includes(router.pathname) && ( + + )}
- +
setIsOpenSideBar(false)}>
- {buttonTitle} + {buttonTitle}
{isOpen && ( diff --git a/components/SideBar.js b/components/SideBar.js index 4be7799cb..53ef8e2d1 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -195,7 +195,7 @@ function SideBar({ setIsOpenSideBar, access }) { />
- - {t('CreateProject')} - + + {t('CreateProject')} + +
@@ -393,22 +401,17 @@ function SideBar({ setIsOpenSideBar, access }) { className={`w-5 ${ router.pathname === '/users' ? 'stroke-th-text-primary' - : activeIconClass }`} />
{t('Language')} diff --git a/components/SignOut.js b/components/SignOut.js index 034e3b03f..ec86f7a44 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -37,13 +37,13 @@ export default function SignOut({ collapsed }) { >

{t('users:SignOut')} diff --git a/components/SwitchLocalization.js b/components/SwitchLocalization.js index 8d9eb47a9..676c8a007 100644 --- a/components/SwitchLocalization.js +++ b/components/SwitchLocalization.js @@ -15,7 +15,7 @@ function SwitchLocalization({ collapsed }) { return (

diff --git a/pages/404.js b/pages/404.js index 55fca726e..d1d374c45 100644 --- a/pages/404.js +++ b/pages/404.js @@ -26,8 +26,6 @@ export default function PageNotFound() { ) } -PageNotFound.layoutType = 'hideSidebar' - PageNotFound.backgroundColor = 'bg-th-primary-100' export async function getStaticProps({ locale }) { diff --git a/pages/_app.js b/pages/_app.js index 6598231a2..39fa5f403 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -23,7 +23,6 @@ function MyApp({ Component, pageProps }) { const layoutProps = { backgroundColor: Component.backgroundColor ?? 'bg-th-secondary-100', - isHideSidebar: Component.layoutType === 'hideSidebar', } return ( diff --git a/pages/agreements.js b/pages/agreements.js index e1f6331e1..823473e34 100644 --- a/pages/agreements.js +++ b/pages/agreements.js @@ -73,7 +73,6 @@ export default function Agreements() {
) } -Agreements.layoutType = 'hideSidebar' Agreements.backgroundColor = 'bg-th-secondary-100' diff --git a/pages/confession-steps.js b/pages/confession-steps.js index d0d4e5ece..6c2a300e2 100644 --- a/pages/confession-steps.js +++ b/pages/confession-steps.js @@ -129,7 +129,6 @@ export default function ConfessionSteps() {
) } -ConfessionSteps.layoutType = 'hideSidebar' export async function getStaticProps({ locale }) { return { diff --git a/pages/user-agreement.js b/pages/user-agreement.js index d86c12599..7331b05d8 100644 --- a/pages/user-agreement.js +++ b/pages/user-agreement.js @@ -63,7 +63,6 @@ export default function UserAgreement() {
) } -UserAgreement.layoutType = 'hideSidebar' export async function getStaticProps({ locale }) { return { props: { From fade80541a1568c49e83fb7f6540e615f7e36f6c Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Tue, 22 Oct 2024 21:48:59 +0500 Subject: [PATCH 19/19] feat: feedback comp fix, close sidebar on backdrop click, minor fixes --- components/AppBar.js | 8 ++++++-- components/Layout.js | 4 +++- components/SideBar.js | 16 ++++++++++++---- components/StartPage/Feedback.js | 26 +++++++++++++++++++++++--- components/SwitchLocalization.js | 4 ++-- public/locales/en/users.json | 2 +- public/locales/es/users.json | 2 +- public/locales/ru/users.json | 2 +- 8 files changed, 49 insertions(+), 15 deletions(-) diff --git a/components/AppBar.js b/components/AppBar.js index 4d01c9339..2cd0229bb 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -60,11 +60,15 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) { '/404', '/privacy-policy', ].includes(router.pathname) && ( - + )}
diff --git a/components/Layout.js b/components/Layout.js index c095ef02d..428285832 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -48,7 +48,9 @@ function Layout({ backgroundColor, children }) {
-
{children}
+
+ {children} +
diff --git a/components/SideBar.js b/components/SideBar.js index 53ef8e2d1..c3e235188 100644 --- a/components/SideBar.js +++ b/components/SideBar.js @@ -42,7 +42,7 @@ const activeIconClass = const activeTextClass = 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary' -function SideBar({ setIsOpenSideBar, access }) { +function SideBar({ setIsOpenSideBar, access, isOpenSideBar }) { const { user } = useCurrentUser() const { t } = useTranslation(['common', 'projects', 'users', 'start-page']) const [modalsSidebarState, setModalsSidebarState] = useRecoilState(modalsSidebar) @@ -83,6 +83,14 @@ function SideBar({ setIsOpenSideBar, access }) { return () => window.removeEventListener('resize', checkScreenSize) }, []) + useEffect(() => { + if (!isOpenSideBar) { + setCollapsed(true) + closeModal() + setShowAbout(false) + } + }, [isOpenSideBar]) + return ( {({ open, close }) => ( @@ -114,8 +122,8 @@ function SideBar({ setIsOpenSideBar, access }) { leave="transition-opacity duration-200" > e.stopPropagation()} onMouseEnter={() => { @@ -424,7 +432,7 @@ function SideBar({ setIsOpenSideBar, access }) { )} -
+
diff --git a/components/StartPage/Feedback.js b/components/StartPage/Feedback.js index 9dbd119fa..4acd6fe08 100644 --- a/components/StartPage/Feedback.js +++ b/components/StartPage/Feedback.js @@ -1,5 +1,7 @@ import { useState } from 'react' +import { useRouter } from 'next/router' + import { toast, Toaster } from 'react-hot-toast' import axios from 'axios' @@ -11,6 +13,8 @@ function Feedback({ t, onClose }) { const [isError, setIsError] = useState(false) const [isSaving, setIsSaving] = useState(false) const [isSent, setIsSent] = useState(false) + const router = useRouter() + const isStartPage = router.asPath === '/' const handleChange = (e) => { setFeedback({ ...feedback, [e.target.name]: e.target.value }) @@ -44,7 +48,19 @@ function Feedback({ t, onClose }) { return (
-

{t('ConnectWithUs')}

+ {isStartPage ? ( +

{t('ConnectWithUs')}

+ ) : ( + !isSent && ( +

+ {t('ConnectWithUs')} +

+ ) + )}
e.stopPropagation()}> {!isSent ? ( @@ -84,7 +100,9 @@ function Feedback({ t, onClose }) { {t('users:Send')} @@ -96,7 +114,9 @@ function Feedback({ t, onClose }) {

{t('users:YourMessageSentThankYou')}