From da94f7cd5d4504ee983ae46c61bc91fcd1431b0e Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 13 Nov 2023 16:38:01 +0300 Subject: [PATCH 01/21] change order of layout tabs --- .../CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx index 581b04d66f..fb51fcc612 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx @@ -60,7 +60,7 @@ const LayoutTabs: FC = (props) => { ]; if (isAuthenticated) { - tabs.splice(1, 0, { + tabs.unshift({ label: getLayoutTabName(LayoutTab.Inbox), value: LayoutTab.Inbox, icon: , From b34e227492d0bbd293fd4c52575b8c1c053e0346 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 13 Nov 2023 16:40:14 +0300 Subject: [PATCH 02/21] change spaces tab text and icon --- src/shared/icons/blocks2.icon.tsx | 35 +++++++++++++++++++ src/shared/icons/index.ts | 1 + .../components/LayoutTabs/LayoutTabs.tsx | 4 +-- .../LayoutTabs/utils/getLayoutTabName.ts | 2 +- 4 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 src/shared/icons/blocks2.icon.tsx diff --git a/src/shared/icons/blocks2.icon.tsx b/src/shared/icons/blocks2.icon.tsx new file mode 100644 index 0000000000..62378bb383 --- /dev/null +++ b/src/shared/icons/blocks2.icon.tsx @@ -0,0 +1,35 @@ +import React, { FC } from "react"; + +interface Blocks2IconProps { + className?: string; +} + +const Blocks2Icon: FC = ({ className }) => { + const color = "currentColor"; + + return ( + + + + + ); +}; + +export default Blocks2Icon; diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts index 47872eacb9..21c9d273dd 100644 --- a/src/shared/icons/index.ts +++ b/src/shared/icons/index.ts @@ -4,6 +4,7 @@ export { default as Avatar2Icon } from "./avatar2.icon"; export { default as Avatar3Icon } from "./avatar3.icon"; export { default as BillingIcon } from "./billing.icon"; export { default as BlocksIcon } from "./blocks.icon"; +export { default as Blocks2Icon } from "./blocks2.icon"; export { default as BoldMarkIcon } from "./boldMark.icon"; export { default as BoldPlusIcon } from "./boldPlus.icon"; export { default as CaretIcon } from "./caret.icon"; diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx index fb51fcc612..85e41f62fb 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx @@ -8,7 +8,7 @@ import { } from "@/pages/Auth/store/selectors"; import { Tab, Tabs } from "@/shared/components"; import { useRoutesContext } from "@/shared/contexts"; -import { Avatar2Icon, BlocksIcon, InboxIcon } from "@/shared/icons"; +import { Avatar2Icon, Blocks2Icon, InboxIcon } from "@/shared/icons"; import { openSidenav } from "@/shared/utils"; import { selectCommonLayoutLastCommonFromFeed } from "@/store/states"; import { LayoutTab } from "../../constants"; @@ -50,7 +50,7 @@ const LayoutTabs: FC = (props) => { { label: getLayoutTabName(LayoutTab.Spaces), value: LayoutTab.Spaces, - icon: , + icon: , }, { label: getLayoutTabName(LayoutTab.Profile), diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/utils/getLayoutTabName.ts b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/utils/getLayoutTabName.ts index c21ca54758..1b53dd4722 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/utils/getLayoutTabName.ts +++ b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/utils/getLayoutTabName.ts @@ -1,7 +1,7 @@ import { LayoutTab } from "../../../constants"; const LAYOUT_TAB_TO_NAME_MAP: Record = { - [LayoutTab.Spaces]: "Feed", + [LayoutTab.Spaces]: "Spaces", [LayoutTab.Inbox]: "Inbox", [LayoutTab.Profile]: "Profile", }; From 7f97f9efe8ab631937b2cfe125aa46b3cbb3fdb7 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 13 Nov 2023 16:52:28 +0300 Subject: [PATCH 03/21] disable header link to common/space back page on mobile --- .../HeaderCommonContent.module.scss | 8 +++++++ .../HeaderCommonContent.tsx | 21 ++++++++++++++----- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss index 4a17e06688..870a1f2430 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss +++ b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss @@ -26,6 +26,7 @@ padding: 0 1.5rem 0 1.375rem; display: flex; align-items: center; + color: inherit; text-decoration: none; overflow: hidden; box-sizing: border-box; @@ -40,6 +41,13 @@ @include tablet { padding-left: 0; padding-right: 0.5rem; + + &:hover { + .commonName { + color: inherit; + text-decoration: none; + } + } } } diff --git a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx index 468a1685b7..ca63d7d3a9 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx +++ b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx @@ -2,6 +2,7 @@ import React, { FC } from "react"; import { NavLink } from "react-router-dom"; import classNames from "classnames"; import { useRoutesContext } from "@/shared/contexts"; +import { useIsTabletView } from "@/shared/hooks/viewport"; import { RightArrowThinIcon, StarIcon } from "@/shared/icons"; import { CommonAvatar, TopNavigationOpenSidenavButton } from "@/shared/ui-kit"; import { getPluralEnding } from "@/shared/utils"; @@ -26,6 +27,19 @@ const HeaderCommonContent: FC = (props) => { showFollowIcon = false, } = props; const { getCommonPageAboutTabPath } = useRoutesContext(); + const isTabletView = useIsTabletView(); + + const ContentWrapper: FC = ({ children }) => + isTabletView ? ( +
{children}
+ ) : ( + + {children} + + ); return (
@@ -33,10 +47,7 @@ const HeaderCommonContent: FC = (props) => { className={styles.openSidenavButton} iconEl={} /> - + = (props) => { {memberCount} member{getPluralEnding(memberCount)}

- + ); }; From dccc80bddb95d7c80bd537a80771bb91813c38e1 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 13 Nov 2023 17:01:00 +0300 Subject: [PATCH 04/21] change sidebar icon in the mobile header --- src/pages/commonFeed/CommonFeed.module.scss | 2 -- src/pages/commonFeed/CommonFeed.tsx | 6 ++-- .../HeaderCommonContent.module.scss | 2 -- .../HeaderCommonContent.tsx | 4 +-- src/shared/icons/index.ts | 1 + src/shared/icons/sidebar.icon.tsx | 35 +++++++++++++++++++ 6 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 src/shared/icons/sidebar.icon.tsx diff --git a/src/pages/commonFeed/CommonFeed.module.scss b/src/pages/commonFeed/CommonFeed.module.scss index 443b1de73d..0d4c0298a2 100644 --- a/src/pages/commonFeed/CommonFeed.module.scss +++ b/src/pages/commonFeed/CommonFeed.module.scss @@ -16,8 +16,6 @@ width: 1.5rem; height: 1.5rem; margin-right: 0.625rem; - transform: rotate(180deg); - color: $c-neutrals-600; } .feedLayout { diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx index 8182a5d33c..34b83793b8 100644 --- a/src/pages/commonFeed/CommonFeed.tsx +++ b/src/pages/commonFeed/CommonFeed.tsx @@ -29,7 +29,7 @@ import { useRoutesContext } from "@/shared/contexts"; import { useAuthorizedModal, useQueryParams } from "@/shared/hooks"; import { useCommonFeedItems, useUserCommonIds } from "@/shared/hooks/useCases"; import { useCommonPinnedFeedItems } from "@/shared/hooks/useCases/useCommonPinnedFeedItems"; -import { RightArrowThinIcon } from "@/shared/icons"; +import { SidebarIcon } from "@/shared/icons"; import { checkIsFeedItemFollowLayoutItem, FeedLayoutItem, @@ -428,7 +428,7 @@ const CommonFeedComponent: FC = (props) => { ) : ( } + iconEl={} /> ); @@ -448,7 +448,7 @@ const CommonFeedComponent: FC = (props) => { <> } + iconEl={} />
diff --git a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss index 870a1f2430..54f01fae06 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss +++ b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss @@ -18,8 +18,6 @@ width: 1.5rem; height: 1.5rem; margin-right: 0.625rem; - transform: rotate(180deg); - color: $c-neutrals-600; } .commonLink { diff --git a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx index ca63d7d3a9..6f35431e1a 100644 --- a/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx +++ b/src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.tsx @@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom"; import classNames from "classnames"; import { useRoutesContext } from "@/shared/contexts"; import { useIsTabletView } from "@/shared/hooks/viewport"; -import { RightArrowThinIcon, StarIcon } from "@/shared/icons"; +import { SidebarIcon, StarIcon } from "@/shared/icons"; import { CommonAvatar, TopNavigationOpenSidenavButton } from "@/shared/ui-kit"; import { getPluralEnding } from "@/shared/utils"; import styles from "./HeaderCommonContent.module.scss"; @@ -45,7 +45,7 @@ const HeaderCommonContent: FC = (props) => {
} + iconEl={} /> = ({ className }) => { + const color = "currentColor"; + + return ( + + + + + + ); +}; + +export default SidebarIcon; From 8b4940cd3870af4a5c1025b1b2685a9e2f0081c1 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 13 Nov 2023 17:23:45 +0300 Subject: [PATCH 05/21] decrease mobile sidenav width to 90% --- .../MultipleSpacesLayout/MultipleSpacesLayout.module.scss | 2 +- src/shared/ui-kit/Sidenav/Sidenav.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss index 64b3e94956..6eee670672 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss @@ -30,7 +30,7 @@ --main-pl: unset; --sb-max-width: 100%; --sb-width: 100%; - --sb-content-width: 100%; + --sb-content-width: 90%; --layout-tabs-height: 4rem; --header-h: 0; } diff --git a/src/shared/ui-kit/Sidenav/Sidenav.tsx b/src/shared/ui-kit/Sidenav/Sidenav.tsx index 827f0a9962..4566d3e121 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.tsx +++ b/src/shared/ui-kit/Sidenav/Sidenav.tsx @@ -71,10 +71,10 @@ const Sidenav: FC = (props) => {
); From 6e49dfb7079298bcc8a3eef9ffaf4d2991714267 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 10:22:48 +0300 Subject: [PATCH 06/21] add background for mobile sidenav --- src/shared/ui-kit/Sidenav/Sidenav.module.scss | 32 +++++++++- src/shared/ui-kit/Sidenav/Sidenav.tsx | 59 +++++++++++-------- 2 files changed, 64 insertions(+), 27 deletions(-) diff --git a/src/shared/ui-kit/Sidenav/Sidenav.module.scss b/src/shared/ui-kit/Sidenav/Sidenav.module.scss index fbe0603aa8..9c9d27852e 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.module.scss +++ b/src/shared/ui-kit/Sidenav/Sidenav.module.scss @@ -1,12 +1,42 @@ @import "../../../constants"; @import "../../../styles/sizes"; +$zIndex: 3; + +.sidenavBackground { + display: none; +} +.sidenavBackgroundOpen { + @include tablet { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zIndex; + display: block; + background-color: $c-gray-5; + opacity: 0.5; + animation: fade var(--sb-transition-duration); + } +} + +@keyframes fade { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.5; + } +} + .sidenav { position: fixed; top: 0; bottom: 0; left: 0; - z-index: 3; + z-index: $zIndex; max-width: var(--sb-max-width); width: var(--sb-width); diff --git a/src/shared/ui-kit/Sidenav/Sidenav.tsx b/src/shared/ui-kit/Sidenav/Sidenav.tsx index 4566d3e121..fcbd7234fd 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.tsx +++ b/src/shared/ui-kit/Sidenav/Sidenav.tsx @@ -49,34 +49,41 @@ const Sidenav: FC = (props) => { }, [isSidenavOpen]); return ( - + + ); }; From 05fcbaf07779793ee6a3a4e8c68ed1055a9c7e44 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 10:27:29 +0300 Subject: [PATCH 07/21] decrease sidenav width of v04 layout --- .../layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss index c4839e3539..21820b7174 100644 --- a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss @@ -27,7 +27,7 @@ @include tablet { --sb-max-width: 100%; --sb-width: 100%; - --sb-content-width: 100%; + --sb-content-width: 90%; --layout-tabs-height: 4rem; } } From 4ac37579d7a33bf92c1635b1bbb24e803b097c9a Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 10:34:10 +0300 Subject: [PATCH 08/21] remove common logo from mobile sidenav v04 --- .../components/SidenavContent/SidenavContent.module.scss | 9 +-------- .../components/SidenavContent/SidenavContent.tsx | 2 +- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss index 81ee25f476..44752c5166 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss @@ -23,14 +23,7 @@ background-color: $c-light-gray-2; @include tablet { - --logo-top-indent: 0; - --logo-right-indent: 0; - --logo-left-indent: 0; - --logo-bottom-indent: 0; - - height: 3.25rem; - align-items: center; - background-color: $c-shades-white; + display: none; } } diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx index bd684e6b20..ac1816bf0e 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx @@ -41,9 +41,9 @@ const SidenavContent: FC = (props) => { logoClassName={styles.commonLogo} logoSrc={commonLogoSrc} /> - {separatorEl} {!isTabletView && ( <> + {separatorEl} {separatorEl} From a7adbccc5c4697b411fb7e86fad942c1940b2ef8 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 10:36:46 +0300 Subject: [PATCH 09/21] remove layout tabs from mobile sidenav v04 --- .../components/SidenavContent/SidenavContent.module.scss | 4 ---- .../components/SidenavContent/SidenavContent.tsx | 8 -------- 2 files changed, 12 deletions(-) diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss index 44752c5166..6c544b882b 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss @@ -49,10 +49,6 @@ margin-top: auto; } -.layoutTabs { - margin-top: auto; -} - .userInfoContentButton { padding: 1rem 0; diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx index ac1816bf0e..881bcc9499 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx @@ -4,7 +4,6 @@ import classNames from "classnames"; import { authentificated, selectUser } from "@/pages/Auth/store/selectors"; import commonLogoSrc from "@/shared/assets/images/logo-sidenav-2.svg"; import { useIsTabletView } from "@/shared/hooks/viewport"; -import { CommonSidenavLayoutTab } from "@/shared/layouts"; import { CommonLogo } from "@/shared/ui-kit"; import { getUserName } from "@/shared/utils"; import { @@ -13,7 +12,6 @@ import { UserInfo, } from "../../../SidenavLayout/components/SidenavContent"; import { useGoToCreateCommon } from "../../hooks"; -import { LayoutTabs } from "../LayoutTabs"; import { Footer, Navigation, Projects } from "./components"; import styles from "./SidenavContent.module.scss"; @@ -49,12 +47,6 @@ const SidenavContent: FC = (props) => { )} - {isTabletView && ( - - )} {!isTabletView && ( <>
From ce2619590aee997c45040efde43381222263e36a Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 10:50:05 +0300 Subject: [PATCH 10/21] decrease item trigger height in projects tree --- .../SidenavContent/components/Projects/Projects.module.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss index c1938dec1e..c54856fec8 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/components/Projects/Projects.module.scss @@ -9,16 +9,12 @@ --item-pl-per-level: 1.25rem; --item-arrow-pl: 0.5rem; - height: 3.375rem; + height: 3rem; border-radius: 0; &:hover { --bg-color: #{$c-pink-hover-feed-cards}; } - - @include tablet { - height: 4rem; - } } .projectsTreeItemTriggerActiveClassName { --bg-color: #{$c-pink-active-feed-cards}; From dfdb75b07d35f3f0d11e6cd8d24f9b61191bec8b Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 10:55:06 +0300 Subject: [PATCH 11/21] change back icon to sidebar icon in v04 feed mobile header --- .../HeaderContent_v04/HeaderContent_v04.module.scss | 2 -- .../components/HeaderContent_v04/HeaderContent_v04.tsx | 4 ++-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss index 7adfd958c3..4a8ea29ac2 100644 --- a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss +++ b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss @@ -57,8 +57,6 @@ width: 1.5rem; height: 1.5rem; margin-right: 0.625rem; - transform: rotate(180deg); - color: $c-neutrals-600; } .image { diff --git a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx index bf4d0ea019..ad7da23405 100644 --- a/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx +++ b/src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx @@ -5,7 +5,7 @@ import { NewStreamButton } from "@/pages/common/components/CommonTabPanels/compo import { useRoutesContext } from "@/shared/contexts"; import { useCommonFollow } from "@/shared/hooks/useCases"; import { useIsTabletView } from "@/shared/hooks/viewport"; -import { RightArrowThinIcon, StarIcon } from "@/shared/icons"; +import { SidebarIcon, StarIcon } from "@/shared/icons"; import { CirclesPermissions, Common, @@ -39,7 +39,7 @@ const HeaderContent_v04: FC = (props) => {
} + iconEl={} /> Date: Tue, 14 Nov 2023 13:42:15 +0300 Subject: [PATCH 12/21] change sidenav width to 87% --- .../layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss | 2 +- .../MultipleSpacesLayout/MultipleSpacesLayout.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss index 21820b7174..6ccf4ac9a9 100644 --- a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss @@ -27,7 +27,7 @@ @include tablet { --sb-max-width: 100%; --sb-width: 100%; - --sb-content-width: 90%; + --sb-content-width: 87%; --layout-tabs-height: 4rem; } } diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss index 6eee670672..6b00334f99 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss @@ -30,7 +30,7 @@ --main-pl: unset; --sb-max-width: 100%; --sb-width: 100%; - --sb-content-width: 90%; + --sb-content-width: 87%; --layout-tabs-height: 4rem; --header-h: 0; } From 38c4a98b5583b082030c0cbc01f508dc5e574376 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 13:51:13 +0300 Subject: [PATCH 13/21] remove duplicated dm button from inbox v04 --- .../inbox/components/HeaderContent_v04/HeaderContent_v04.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx index 1697379141..b024903f9b 100644 --- a/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx +++ b/src/pages/inbox/components/HeaderContent_v04/HeaderContent_v04.tsx @@ -38,10 +38,6 @@ const HeaderContent_v04: FC = (props) => { isMobileVersion={isMobileVersion} ButtonComponent={PlusButton} /> -
); From 13537f94706262c6577b89a9a58a46b1a9273868 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 13:58:58 +0300 Subject: [PATCH 14/21] change mobile sidenav bg --- .../CommonSidenavLayout/CommonSidenavLayout.module.scss | 1 + .../MultipleSpacesLayout/MultipleSpacesLayout.module.scss | 1 + src/shared/ui-kit/Sidenav/Sidenav.module.scss | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss index 6ccf4ac9a9..a9bab75222 100644 --- a/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/CommonSidenavLayout.module.scss @@ -28,6 +28,7 @@ --sb-max-width: 100%; --sb-width: 100%; --sb-content-width: 87%; + --sb-shadow: 0.125rem 0 0.375rem #{$c-sidebar-shadow}; --layout-tabs-height: 4rem; } } diff --git a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss index 6b00334f99..7ab633234d 100644 --- a/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/MultipleSpacesLayout.module.scss @@ -31,6 +31,7 @@ --sb-max-width: 100%; --sb-width: 100%; --sb-content-width: 87%; + --sb-shadow: 0.125rem 0 0.375rem #{$c-sidebar-shadow}; --layout-tabs-height: 4rem; --header-h: 0; } diff --git a/src/shared/ui-kit/Sidenav/Sidenav.module.scss b/src/shared/ui-kit/Sidenav/Sidenav.module.scss index 9c9d27852e..177a3092d9 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.module.scss +++ b/src/shared/ui-kit/Sidenav/Sidenav.module.scss @@ -15,7 +15,7 @@ $zIndex: 3; left: 0; z-index: $zIndex; display: block; - background-color: $c-gray-5; + background-color: $c-shades-white; opacity: 0.5; animation: fade var(--sb-transition-duration); } @@ -42,6 +42,7 @@ $zIndex: 3; @include tablet { right: 0; + backdrop-filter: blur(0.125rem); } @media (prefers-reduced-motion: reduce) { From 48c3040e4f1c0b5c4ddccb94f366759e226d0d91 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 14:05:23 +0300 Subject: [PATCH 15/21] add close sidenav button to v04 --- .../SidenavContent/SidenavContent.module.scss | 5 +++++ .../components/SidenavContent/SidenavContent.tsx | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss index 6c544b882b..143d213365 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.module.scss @@ -37,6 +37,11 @@ } } +.closeIconWrapper { + margin-left: auto; + padding: 1.25rem 1.5rem; +} + .separator { flex-shrink: 0; height: 0.0625rem; diff --git a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx index 881bcc9499..c8c2609f1a 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/SidenavContent/SidenavContent.tsx @@ -3,7 +3,9 @@ import { useSelector } from "react-redux"; import classNames from "classnames"; import { authentificated, selectUser } from "@/pages/Auth/store/selectors"; import commonLogoSrc from "@/shared/assets/images/logo-sidenav-2.svg"; +import { ButtonIcon } from "@/shared/components"; import { useIsTabletView } from "@/shared/hooks/viewport"; +import { Close2Icon } from "@/shared/icons"; import { CommonLogo } from "@/shared/ui-kit"; import { getUserName } from "@/shared/utils"; import { @@ -17,10 +19,11 @@ import styles from "./SidenavContent.module.scss"; interface SidenavContentProps { className?: string; + onClose?: () => void; } const SidenavContent: FC = (props) => { - const { className } = props; + const { className, onClose } = props; const isAuthenticated = useSelector(authentificated()); const user = useSelector(selectUser()); const isTabletView = useIsTabletView(); @@ -39,6 +42,11 @@ const SidenavContent: FC = (props) => { logoClassName={styles.commonLogo} logoSrc={commonLogoSrc} /> + {isTabletView && ( + + + + )} {!isTabletView && ( <> {separatorEl} From 2979a19eeaaf31ae0a85bb4b5a41ad85518a63d3 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 14:38:45 +0300 Subject: [PATCH 16/21] add rootCommonId to last common from feed and change persistence --- src/pages/commonFeed/CommonFeed.tsx | 14 +++++++++++++ src/store/states/commonLayout/types.ts | 29 ++++++++++++++++++-------- src/store/store.tsx | 4 ++-- src/store/transforms.ts | 22 +++++++++++++++++++ 4 files changed, 58 insertions(+), 11 deletions(-) diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx index a852e46048..cef65399b3 100644 --- a/src/pages/commonFeed/CommonFeed.tsx +++ b/src/pages/commonFeed/CommonFeed.tsx @@ -416,6 +416,7 @@ const CommonFeedComponent: FC = (props) => { useEffect(() => { return () => { const common = stateRef.current?.data?.common; + const rootCommon = stateRef.current?.data?.rootCommon; dispatch( commonLayoutActions.setLastCommonFromFeed({ @@ -426,6 +427,19 @@ const CommonFeedComponent: FC = (props) => { image: common.image, isProject: checkIsProject(common), memberCount: common.memberCount, + rootCommon: common.rootCommonId + ? { + id: common.rootCommonId, + data: rootCommon + ? { + name: rootCommon.name, + image: rootCommon.image, + isProject: false, + memberCount: rootCommon.memberCount, + } + : null, + } + : null, } : null, }), diff --git a/src/store/states/commonLayout/types.ts b/src/store/states/commonLayout/types.ts index 64af0fd0a8..fbe4fc9664 100644 --- a/src/store/states/commonLayout/types.ts +++ b/src/store/states/commonLayout/types.ts @@ -1,16 +1,27 @@ import { ProjectsStateItem } from "../projects"; +interface LastCommonFromFeedData { + name: string; + image: string; + isProject: boolean; + memberCount: number; +} + +interface LastCommonFromFeed { + id: string; + data: + | (LastCommonFromFeedData & { + rootCommon: { + id: string; + data: LastCommonFromFeedData | null; + } | null; + }) + | null; +} + export interface CommonLayoutState { currentCommonId: string | null; - lastCommonFromFeed: { - id: string; - data: { - name: string; - image: string; - isProject: boolean; - memberCount: number; - } | null; - } | null; + lastCommonFromFeed: LastCommonFromFeed | null; commons: ProjectsStateItem[]; areCommonsLoading: boolean; areCommonsFetched: boolean; diff --git a/src/store/store.tsx b/src/store/store.tsx index 3ed1582821..3e49c96323 100644 --- a/src/store/store.tsx +++ b/src/store/store.tsx @@ -17,7 +17,7 @@ import createSagaMiddleware from "redux-saga"; import { AppState } from "@/shared/interfaces"; import rootReducer from "./reducer"; import appSagas from "./saga"; -import { inboxTransform } from "./transforms"; +import { inboxTransform, lastCommonFromFeedTransform } from "./transforms"; const persistConfig: PersistConfig = { key: "root", @@ -32,7 +32,7 @@ const persistConfig: PersistConfig = { "multipleSpacesLayout", ], stateReconciler: autoMergeLevel2, - transforms: [inboxTransform], + transforms: [inboxTransform, lastCommonFromFeedTransform], }; const sagaMiddleware = createSagaMiddleware(); diff --git a/src/store/transforms.ts b/src/store/transforms.ts index 98efc666da..11d3e618b8 100644 --- a/src/store/transforms.ts +++ b/src/store/transforms.ts @@ -2,6 +2,7 @@ import { createTransform } from "redux-persist"; import { deserializeFeedLayoutItemWithFollowData } from "@/shared/interfaces"; import { convertObjectDatesToFirestoreTimestamps } from "@/shared/utils"; import { getFeedLayoutItemDateForSorting } from "@/store/states/inbox/utils"; +import { CommonLayoutState } from "./states/commonLayout"; import { InboxItems, InboxState } from "./states/inbox"; export const inboxTransform = createTransform( @@ -43,3 +44,24 @@ export const inboxTransform = createTransform( }), { whitelist: ["inbox"] }, ); + +export const lastCommonFromFeedTransform = createTransform( + (inboundState: CommonLayoutState) => { + const rootCommon = inboundState.lastCommonFromFeed?.data?.rootCommon; + + return { + ...inboundState, + lastCommonFromFeed: rootCommon + ? { + id: rootCommon.id, + data: rootCommon.data && { + ...rootCommon.data, + rootCommon: null, + }, + } + : inboundState.lastCommonFromFeed, + }; + }, + (outboundState: CommonLayoutState) => outboundState, + { whitelist: ["commonLayout"] }, +); From e7260f145912ea1fbee7d42c7943f1710668d6d2 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 15:09:11 +0300 Subject: [PATCH 17/21] use subscription in useUserCommonIds use-case --- src/services/Common.ts | 17 +++++++ src/shared/hooks/useCases/useUserCommonIds.ts | 44 ++++++------------- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/services/Common.ts b/src/services/Common.ts index 7bc06fc7ea..50bd9192f5 100644 --- a/src/services/Common.ts +++ b/src/services/Common.ts @@ -160,6 +160,23 @@ class CommonService { .get() ).docs.map((ref) => ref.ref.path.split("/")[1]); + public subscribeToUserCommonIds = ( + userId: string, + callback: (data: string[]) => void, + ): UnsubscribeFunction => { + const query = firebase + .firestore() + .collectionGroup(SubCollections.Members) + .where("userId", "==", userId); + + return query.onSnapshot((snapshot) => { + const userCommonIds = snapshot.docs.map( + (ref) => ref.ref.path.split("/")[1], + ); + callback(userCommonIds); + }); + }; + public getAllUserCommonMemberInfo = async ( userId: string, ): Promise<(CommonMember & { commonId: string })[]> => { diff --git a/src/shared/hooks/useCases/useUserCommonIds.ts b/src/shared/hooks/useCases/useUserCommonIds.ts index 573e9aff85..5b2fbd0ece 100644 --- a/src/shared/hooks/useCases/useUserCommonIds.ts +++ b/src/shared/hooks/useCases/useUserCommonIds.ts @@ -1,13 +1,11 @@ -import { useCallback, useEffect } from "react"; +import { useEffect } from "react"; import { useSelector } from "react-redux"; import { selectUser } from "@/pages/Auth/store/selectors"; -import { CommonService, Logger } from "@/services"; +import { CommonService } from "@/services"; import { LoadingState } from "@/shared/interfaces"; -import { useIsMounted } from "../useIsMounted"; import { useLoadingState } from "../useLoadingState"; export const useUserCommonIds = (): LoadingState => { - const isMounted = useIsMounted(); const user = useSelector(selectUser()); const userId = user?.uid; const [state, setState] = useLoadingState([], { @@ -15,8 +13,13 @@ export const useUserCommonIds = (): LoadingState => { fetched: !userId, }); - const fetchUserCommonIds = useCallback(async () => { + useEffect(() => { if (!userId) { + setState({ + loading: false, + fetched: true, + data: [], + }); return; } @@ -26,37 +29,18 @@ export const useUserCommonIds = (): LoadingState => { data: [], }); - let userCommonIds: string[] = []; - - try { - userCommonIds = await CommonService.getUserCommonIds(userId); - } catch (error) { - Logger.error(error); - } finally { - if (isMounted()) { + const unsubscribe = CommonService.subscribeToUserCommonIds( + userId, + (userCommonIds) => { setState({ loading: false, fetched: true, data: userCommonIds, }); - } - } - }, [userId]); + }, + ); - const setUserCommonIds = useCallback((ids: string[]) => { - setState({ - loading: false, - fetched: true, - data: ids, - }); - }, []); - - useEffect(() => { - if (userId) { - fetchUserCommonIds(); - } else { - setUserCommonIds([]); - } + return unsubscribe; }, [userId]); return { From 0c2a6953d6f0d58b96299b7cdba752e6e3b3136c Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 15:13:12 +0300 Subject: [PATCH 18/21] add user common ids and create common modal to layout tabs spaces tab --- .../components/LayoutTabs/LayoutTabs.tsx | 77 +++++++++++-------- .../NoCommonsInfo/NoCommonsInfo.module.scss | 6 ++ 2 files changed, 52 insertions(+), 31 deletions(-) diff --git a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx index 85e41f62fb..d698b0fb55 100644 --- a/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx +++ b/src/shared/layouts/CommonSidenavLayout/components/LayoutTabs/LayoutTabs.tsx @@ -8,8 +8,10 @@ import { } from "@/pages/Auth/store/selectors"; import { Tab, Tabs } from "@/shared/components"; import { useRoutesContext } from "@/shared/contexts"; +import { useModal } from "@/shared/hooks"; +import { useUserCommonIds } from "@/shared/hooks/useCases"; import { Avatar2Icon, Blocks2Icon, InboxIcon } from "@/shared/icons"; -import { openSidenav } from "@/shared/utils"; +import { CreateCommonPrompt } from "@/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components"; import { selectCommonLayoutLastCommonFromFeed } from "@/store/states"; import { LayoutTab } from "../../constants"; import { getActiveLayoutTab, getLayoutTabName } from "./utils"; @@ -39,6 +41,12 @@ const LayoutTabs: FC = (props) => { const userStreamsWithNotificationsAmount = useSelector( selectUserStreamsWithNotificationsAmount(), ); + const { data: userCommonIds } = useUserCommonIds(); + const { + isShowing: isCreateCommonPromptOpen, + onOpen: onCreateCommonPromptOpen, + onClose: onCreateCommonPromptClose, + } = useModal(false); const finalUserStreamsWithNotificationsAmount = userStreamsWithNotificationsAmount && userStreamsWithNotificationsAmount > 99 @@ -73,10 +81,12 @@ const LayoutTabs: FC = (props) => { } as CSSProperties; const handleSpacesClick = () => { - if (lastCommonIdFromFeed) { - history.push(getCommonPagePath(lastCommonIdFromFeed.id)); + const commonForRedirectId = lastCommonIdFromFeed?.id || userCommonIds[0]; + + if (commonForRedirectId) { + history.push(getCommonPagePath(commonForRedirectId)); } else { - openSidenav(); + onCreateCommonPromptOpen(); } }; @@ -101,33 +111,38 @@ const LayoutTabs: FC = (props) => { }; return ( - - {tabs.map((tab) => ( - - {tab.icon} - {typeof tab.notificationsAmount === "number" && ( - - {tab.notificationsAmount} - - )} -
- } - includeDefaultMobileStyles={false} - /> - ))} - + <> + + {tabs.map((tab) => ( + + {tab.icon} + {typeof tab.notificationsAmount === "number" && ( + + {tab.notificationsAmount} + + )} + + } + includeDefaultMobileStyles={false} + /> + ))} + + {isCreateCommonPromptOpen && ( + + )} + ); }; diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss index 12cabf9c9b..27e90a2667 100644 --- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss +++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Navigation/components/CreateCommonPrompt/components/NoCommonsInfo/NoCommonsInfo.module.scss @@ -1,3 +1,5 @@ +@import "../../../../../../../../../../../styles/sizes"; + .modal { max-width: 26rem; } @@ -10,4 +12,8 @@ .createCommonButton { margin-left: auto; + + @include tablet { + margin-right: auto; + } } From b600c6c7f6cf80b8c0337f24721593a7b6240394 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 15:44:26 +0300 Subject: [PATCH 19/21] remove prefers-reduced-motion from sidenav --- src/shared/ui-kit/Sidenav/Sidenav.module.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/shared/ui-kit/Sidenav/Sidenav.module.scss b/src/shared/ui-kit/Sidenav/Sidenav.module.scss index 177a3092d9..4eaf31ad8a 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.module.scss +++ b/src/shared/ui-kit/Sidenav/Sidenav.module.scss @@ -44,10 +44,6 @@ $zIndex: 3; right: 0; backdrop-filter: blur(0.125rem); } - - @media (prefers-reduced-motion: reduce) { - --sb-transition-duration: 1ms; - } } .sidenavWithAnimation { display: flex; From 9f547f2a5f51b57c1168b93472b0cc463a507f3e Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 15:45:55 +0300 Subject: [PATCH 20/21] change sidenav bg color --- src/shared/ui-kit/Sidenav/Sidenav.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui-kit/Sidenav/Sidenav.module.scss b/src/shared/ui-kit/Sidenav/Sidenav.module.scss index 4eaf31ad8a..b92898b8e8 100644 --- a/src/shared/ui-kit/Sidenav/Sidenav.module.scss +++ b/src/shared/ui-kit/Sidenav/Sidenav.module.scss @@ -15,7 +15,7 @@ $zIndex: 3; left: 0; z-index: $zIndex; display: block; - background-color: $c-shades-white; + background-color: $c-gray-5; opacity: 0.5; animation: fade var(--sb-transition-duration); } From 15d48f5b2cf279250351c001d20f16a310b1d71e Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 14 Nov 2023 15:55:36 +0300 Subject: [PATCH 21/21] change size and padding of tree item trigger arrow --- .../PlaceholderTreeItem/PlaceholderTreeItem.module.scss | 2 +- .../components/TreeItemTrigger/TreeItemTrigger.module.scss | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss index 9c10d677ce..36c21583b0 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/PlaceholderTreeItem/PlaceholderTreeItem.module.scss @@ -3,7 +3,7 @@ // based on TreeItemTrigger arrow icon button .gap { // {item-arrow-pl} + {arrow-icon-button-pr} + {arrow-icon-button-width} - width: calc(var(--item-arrow-pl) + 0.625rem + 0.375rem); + width: calc(var(--item-arrow-pl) + 1.25rem + 0.5rem); } .image { diff --git a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss index 57d9f17603..933ca60aa0 100644 --- a/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss +++ b/src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItemTrigger/TreeItemTrigger.module.scss @@ -36,13 +36,15 @@ } .arrowIconButton { - padding: 0.75rem 0.625rem 0.75rem var(--item-arrow-pl); + padding: 0.75rem 1.25rem 0.75rem var(--item-arrow-pl); } .arrowIconButtonHidden { visibility: hidden; } .arrowIcon { + width: 0.5rem; + height: 0.625rem; color: $c-neutrals-600; transition: transform 0.2s; }