From 2457a9f8ac71dde7d5792e7d9f896fd659729239 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 11 Dec 2024 16:59:30 +0000 Subject: [PATCH 1/8] feat: add about button to header Closes: #10227 Co-Authored-By: Dillon Chen --- .../DesktopHeader/DesktopHeader.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx index a4fcd07802c..520fca99832 100644 --- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx +++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx @@ -83,6 +83,21 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => { })} > + ( + + window.open('https://landing.common.xyz', '_blank') + } + onMouseEnter={handleInteraction} + onMouseLeave={handleInteraction} + /> + )} + /> Date: Wed, 11 Dec 2024 17:56:41 +0000 Subject: [PATCH 2/8] refactor: change About button from icon to text Co-Authored-By: Dillon Chen --- .../SublayoutHeader/DesktopHeader/DesktopHeader.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx index 520fca99832..90d3300cd71 100644 --- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx +++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx @@ -7,6 +7,7 @@ import KnockNotifications from 'views/components/KnockNotifications'; import { CWDivider } from 'views/components/component_kit/cw_divider'; import { CWIconButton } from 'views/components/component_kit/cw_icon_button'; import { isWindowSmallInclusive } from 'views/components/component_kit/helpers'; +import { CWButton } from 'views/components/component_kit/new_designs/CWButton'; import { CWSearchBar } from 'views/components/component_kit/new_designs/CWSearchBar'; import { CWTooltip } from 'views/components/component_kit/new_designs/CWTooltip'; import { CreateContentPopover } from 'views/menus/CreateContentMenu'; @@ -87,9 +88,10 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => { content="About Common" placement="bottom" renderTrigger={(handleInteraction) => ( - window.open('https://landing.common.xyz', '_blank') } From c5a8a08cafaedf45cadecab39fec647fc14d7955 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 11 Dec 2024 18:26:03 +0000 Subject: [PATCH 3/8] refactor: remove redundant tooltip from About button Co-Authored-By: Dillon Chen --- .../DesktopHeader/DesktopHeader.tsx | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx index 90d3300cd71..0a96fb6f5c5 100644 --- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx +++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx @@ -84,21 +84,13 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => { })} > - ( - - window.open('https://landing.common.xyz', '_blank') - } - onMouseEnter={handleInteraction} - onMouseLeave={handleInteraction} - /> - )} + + window.open('https://landing.common.xyz', '_blank') + } /> Date: Thu, 12 Dec 2024 03:12:57 +0000 Subject: [PATCH 4/8] fix: standardize tooltip positioning and restore About Common tooltip - Remove sidebar-dependent positioning from tooltips - Standardize tooltip arrow positioning using calc(50% - 8px) - Add About Common tooltip to About button with bottom placement - Ensure consistent tooltip alignment across header buttons Co-Authored-By: Dillon Chen --- .../DesktopHeader/DesktopHeader.tsx | 22 +++++++++++++------ .../new_designs/CWTooltip/CWTooltip.scss | 8 ------- .../CWTooltip/TooltipContainer.tsx | 4 ---- 3 files changed, 15 insertions(+), 19 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx index 0a96fb6f5c5..90d3300cd71 100644 --- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx +++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx @@ -84,13 +84,21 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => { })} > - - window.open('https://landing.common.xyz', '_blank') - } + ( + + window.open('https://landing.common.xyz', '_blank') + } + onMouseEnter={handleInteraction} + onMouseLeave={handleInteraction} + /> + )} /> = ({ placement, children, }) => { - const { menuVisible } = useSidebarStore(); - return (
{children} @@ -24,7 +21,6 @@ export const TooltipContainer: FC = ({ placement, Arrow: true, tipTop: placement === 'top', - tipBottomSidebarHidden: placement === 'bottom' && !menuVisible, tipRight: placement === 'right', tipBottom: placement === 'bottom', tipLeft: placement === 'left', From c9747d0f90ba7288142ab5467074d3f04ce4324d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 14:36:32 +0000 Subject: [PATCH 5/8] feat: hide About button on small and medium screens Co-Authored-By: Dillon Chen --- .../DesktopHeader/DesktopHeader.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx index 90d3300cd71..38b81a1b4d7 100644 --- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx +++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx @@ -84,22 +84,24 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => { })} > - ( - - window.open('https://landing.common.xyz', '_blank') - } - onMouseEnter={handleInteraction} - onMouseLeave={handleInteraction} - /> - )} - /> + {!isWindowSmallInclusive() && ( + ( + + window.open('https://landing.common.xyz', '_blank') + } + onMouseEnter={handleInteraction} + onMouseLeave={handleInteraction} + /> + )} + /> + )} Date: Fri, 13 Dec 2024 14:44:32 +0000 Subject: [PATCH 6/8] fix: add missing width parameter to isWindowSmallInclusive Co-Authored-By: Dillon Chen --- .../components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx index 38b81a1b4d7..c5f1478c132 100644 --- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx +++ b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx @@ -84,7 +84,7 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => { })} > - {!isWindowSmallInclusive() && ( + {!isWindowSmallInclusive(window.innerWidth) && ( Date: Thu, 19 Dec 2024 17:59:03 +0000 Subject: [PATCH 7/8] feat: add About Common icon to sidebar Co-Authored-By: israel@common.xyz --- .../components/sidebar/sidebar_section.scss | 7 ++++++ .../components/sidebar/sidebar_section.tsx | 23 +++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss index 822c666bc2e..b4d4e7990bc 100644 --- a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss +++ b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss @@ -140,3 +140,10 @@ fill: transparent; } } + +.about-icon-container { + position: fixed; + bottom: 16px; + left: 16px; + z-index: 10; +} diff --git a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx index 262b9138f7a..2fe7ca18980 100644 --- a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx +++ b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx @@ -5,14 +5,36 @@ import './sidebar_section.scss'; import { isNotUndefined } from 'helpers/typeGuards'; import useSidebarStore from 'state/ui/sidebar'; +import { CWIconButton } from '../component_kit/cw_icon_button'; import { CWIcon } from '../component_kit/cw_icons/cw_icon'; import { CWText } from '../component_kit/cw_text'; +import { CWTooltip } from '../component_kit/new_designs/CWTooltip'; import type { SectionGroupAttrs, SidebarSectionAttrs, SubSectionAttrs, } from './types'; +const AboutIcon = () => { + return ( +
+ ( + window.open('https://landing.common.xyz', '_blank')} + onMouseEnter={handleInteraction} + onMouseLeave={handleInteraction} + /> + )} + /> +
+ ); +}; + const SubSection = (props: SubSectionAttrs) => { const { isActive, isUpdated, isVisible, onClick, rightIcon, rowIcon, title } = props; @@ -226,6 +248,7 @@ export const SidebarSectionGroup = (props: SidebarSectionAttrs) => {
)} {extraComponents} + ); }; From b1cb8f87be969f79dd37f88c7f06e9af9f131579 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 19 Dec 2024 19:14:48 +0000 Subject: [PATCH 8/8] refactor: move About icon to quick switcher and show on small screens only Co-Authored-By: israel@common.xyz --- .../sidebar/sidebar_quick_switcher.tsx | 19 +++++++++++++++ .../components/sidebar/sidebar_section.scss | 7 ------ .../components/sidebar/sidebar_section.tsx | 23 ------------------- 3 files changed, 19 insertions(+), 30 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_quick_switcher.tsx b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_quick_switcher.tsx index 849cce38499..4a9d093aee4 100644 --- a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_quick_switcher.tsx +++ b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_quick_switcher.tsx @@ -6,6 +6,8 @@ import useUserStore from 'state/ui/user'; import { CWCommunityAvatar } from '../component_kit/cw_community_avatar'; import { CWDivider } from '../component_kit/cw_divider'; import { CWIconButton } from '../component_kit/cw_icon_button'; +import { isWindowSmallInclusive } from '../component_kit/helpers'; +import { CWTooltip } from '../component_kit/new_designs/CWTooltip'; import './sidebar_quick_switcher.scss'; export const SidebarQuickSwitcher = ({ @@ -40,6 +42,23 @@ export const SidebarQuickSwitcher = ({ setMenu({ name: 'exploreCommunities' }); }} /> + {isWindowSmallInclusive(window.innerWidth) && ( + ( + + window.open('https://landing.common.xyz', '_blank') + } + onMouseEnter={handleInteraction} + onMouseLeave={handleInteraction} + /> + )} + /> + )}
diff --git a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss index b4d4e7990bc..822c666bc2e 100644 --- a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss +++ b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.scss @@ -140,10 +140,3 @@ fill: transparent; } } - -.about-icon-container { - position: fixed; - bottom: 16px; - left: 16px; - z-index: 10; -} diff --git a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx index 2fe7ca18980..262b9138f7a 100644 --- a/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx +++ b/packages/commonwealth/client/scripts/views/components/sidebar/sidebar_section.tsx @@ -5,36 +5,14 @@ import './sidebar_section.scss'; import { isNotUndefined } from 'helpers/typeGuards'; import useSidebarStore from 'state/ui/sidebar'; -import { CWIconButton } from '../component_kit/cw_icon_button'; import { CWIcon } from '../component_kit/cw_icons/cw_icon'; import { CWText } from '../component_kit/cw_text'; -import { CWTooltip } from '../component_kit/new_designs/CWTooltip'; import type { SectionGroupAttrs, SidebarSectionAttrs, SubSectionAttrs, } from './types'; -const AboutIcon = () => { - return ( -
- ( - window.open('https://landing.common.xyz', '_blank')} - onMouseEnter={handleInteraction} - onMouseLeave={handleInteraction} - /> - )} - /> -
- ); -}; - const SubSection = (props: SubSectionAttrs) => { const { isActive, isUpdated, isVisible, onClick, rightIcon, rowIcon, title } = props; @@ -248,7 +226,6 @@ export const SidebarSectionGroup = (props: SidebarSectionAttrs) => {
)} {extraComponents} - ); };