feat: add about button to header

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';
@@ -83,6 +84,24 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
             })}
           >
             <CreateContentPopover />
+            {!isWindowSmallInclusive(window.innerWidth) && (
+              <CWTooltip
+                content="About Common"
+                placement="bottom"
+                renderTrigger={(handleInteraction) => (
+                  <CWButton
+                    buttonType="secondary"
+                    buttonHeight="sm"
+                    label="About"
+                    onClick={() =>
+                      window.open('https://landing.common.xyz', '_blank')
+                    }
+                    onMouseEnter={handleInteraction}
+                    onMouseLeave={handleInteraction}
+                  />
+                )}
+              />
+            )}
             <CWTooltip
               content="Explore communities"
               placement="bottom"

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWTooltip/CWTooltip.scss

@@ -69,14 +69,6 @@
 
     &.tipBottom {
       @include tip(-4px, auto, auto, calc(50% - 8px));
-
-      @include medium {
-        @include tip(-4px, auto, auto, calc(20% - 8px));
-      }
-    }
-
-    &.tipBottomSidebarHidden {
-      @include tip(-4px, auto, auto, calc(20% - 8px / 2));
     }
 
     &.tipLeft {

packages/commonwealth/client/scripts/views/components/component_kit/new_designs/CWTooltip/TooltipContainer.tsx

@@ -1,6 +1,5 @@
 import { Placement } from '@popperjs/core/lib';
 import React, { FC } from 'react';
-import useSidebarStore from 'state/ui/sidebar';
 import { getClasses } from 'views/components/component_kit/helpers';
 import { ComponentType } from 'views/components/component_kit/types';
 
@@ -13,8 +12,6 @@ export const TooltipContainer: FC<ContainerProps> = ({
   placement,
   children,
 }) => {
-  const { menuVisible } = useSidebarStore();
-
   return (
     <div className={getClasses({ placement }, ComponentType.Tooltip)}>
       {children}
@@ -24,7 +21,6 @@ export const TooltipContainer: FC<ContainerProps> = ({
             placement,
             Arrow: true,
             tipTop: placement === 'top',
-            tipBottomSidebarHidden: placement === 'bottom' && !menuVisible,
             tipRight: placement === 'right',
             tipBottom: placement === 'bottom',
             tipLeft: placement === 'left',

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) && (
+          <CWTooltip
+            content="About Common"
+            placement="bottom"
+            renderTrigger={(handleInteraction) => (
+              <CWIconButton
+                iconButtonTheme="neutral"
+                iconName="infoEmpty"
+                onClick={() =>
+                  window.open('https://landing.common.xyz', '_blank')
+                }
+                onMouseEnter={handleInteraction}
+                onMouseLeave={handleInteraction}
+              />
+            )}
+          />
+        )}
       </div>
       <CWDivider />
       <div className="scrollable-community-bar">