Merge pull request #9979 from hicommonwealth/release/v1.7.4-x

Release/v1.7.4-2

packages/commonwealth/client/scripts/views/Sublayout.tsx

@@ -8,6 +8,7 @@ import app from 'state';
 import useSidebarStore from 'state/ui/sidebar';
 import { SublayoutHeader } from 'views/components/SublayoutHeader';
 import { Sidebar } from 'views/components/sidebar';
+import litepaperGrowlImage from '../../assets/img/litepaperGrowlImage.svg';
 import useNecessaryEffect from '../hooks/useNecessaryEffect';
 import useStickyHeader from '../hooks/useStickyHeader';
 import { useAuthModalStore, useWelcomeOnboardModal } from '../state/ui/modals';
@@ -17,6 +18,7 @@ import { AdminOnboardingSlider } from './components/AdminOnboardingSlider';
 import { Breadcrumbs } from './components/Breadcrumbs';
 import MobileNavigation from './components/MobileNavigation';
 import AuthButtons from './components/SublayoutHeader/AuthButtons';
+import { CWGrowlTemplate } from './components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate';
 import { UserTrainingSlider } from './components/UserTrainingSlider';
 import CollapsableSidebarButton from './components/sidebar/CollapsableSidebarButton';
 import { AuthModal, AuthModalType } from './modals/AuthModal';
@@ -173,6 +175,16 @@ const Sublayout = ({ children, isInsideCommunity }: SublayoutProps) => {
             )}
             {children}
           </div>
+          <CWGrowlTemplate
+            headerText="Common Protocol Litepaper"
+            bodyText="We’re building programmable communities, bringing together app, protocol, and agents to enable
+            DAOs in ways we only dreamed of!"
+            buttonText="Learn more"
+            buttonLink="https://x.com/dillchen/status/1859286283090264241"
+            growlImage={litepaperGrowlImage}
+            growlType="litepaper"
+            blackCloseButton
+          />
         </div>
         <WelcomeOnboardModal
           isOpen={isWelcomeOnboardModalOpen}

packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss

@@ -27,6 +27,10 @@
     &.noGrowlImage {
       margin-right: 10px;
     }
+
+    &.blackCloseButton {
+      color: $black;
+    }
   }
 
   .img {
@@ -53,6 +57,12 @@
     gap: 1rem;
     cursor: default;
 
+    @include smallInclusive {
+      max-width: 20rem;
+      padding: 0.5rem;
+      gap: 0.3rem;
+    }
+
     .subtitle-text {
       margin-top: -12px;
     }

packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx

@@ -1,3 +1,4 @@
+import useBrowserWindow from 'client/scripts/hooks/useBrowserWindow';
 import React, { useState } from 'react';
 import useGrowlStore from 'state/ui/growl';
 import { CWCheckbox } from 'views/components/component_kit/cw_checkbox';
@@ -17,6 +18,7 @@ interface CWGrowlTemplateProps {
   growlImage?: string;
   extraText?: string;
   growlType: string;
+  blackCloseButton?: boolean;
 }
 
 //CWGrowlTemplate should be placed in Sublayout.tsx when used for general announcements
@@ -30,9 +32,10 @@ export const CWGrowlTemplate = ({
   growlImage,
   extraText,
   growlType,
+  blackCloseButton,
 }: CWGrowlTemplateProps) => {
   const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore();
-
+  const { isWindowSmallInclusive } = useBrowserWindow({});
   const [shouldHideGrowlPermanently, setShouldHideGrowlPermanently] =
     useState(false);
 
@@ -55,20 +58,32 @@ export const CWGrowlTemplate = ({
   };
 
   return (
-    <CWGrowl disabled={isDisabled} position="bottom-right">
+    <CWGrowl
+      disabled={isDisabled}
+      position={isWindowSmallInclusive ? 'center' : 'bottom-right'}
+    >
       <div className="CWGrowlTemplate">
         <CWIconButton
           iconName="close"
           iconSize="medium"
-          className={`closeButton ${!growlImage ? 'noGrowlImage' : ''}`}
+          className={`closeButton ${!growlImage ? 'noGrowlImage' : ''} ${blackCloseButton ? 'blackCloseButton' : ''}`}
           onClick={handleExit}
         />
         {growlImage && <img src={growlImage} alt="" className="img" />}
         <div className="container">
-          <CWText type="h2" fontWeight="bold" isCentered>
+          <CWText
+            type={isWindowSmallInclusive ? 'h4' : 'h2'}
+            fontWeight="bold"
+            isCentered
+          >
             {headerText}
           </CWText>
-          <CWText type="b1" fontWeight="medium" isCentered className="body">
+          <CWText
+            type={isWindowSmallInclusive ? 'b2' : 'b1'}
+            fontWeight="medium"
+            isCentered
+            className="body"
+          >
             {bodyText}
           </CWText>
           {buttonLink && (

packages/commonwealth/client/scripts/views/components/component_kit/cw_growl.tsx

@@ -6,7 +6,7 @@ import { CWCard } from './cw_card';
 import { getClasses } from './helpers';
 import { ComponentType } from './types';
 
-type GrowlPosition = 'bottom-left' | 'bottom-right';
+type GrowlPosition = 'bottom-left' | 'bottom-right' | 'center';
 
 type GrowlAttrs = {
   className?: string;

packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx

@@ -403,6 +403,7 @@ const DiscussionsPage = ({ topicName }: DiscussionsPageProps) => {
                     bodyText="'Overview' page has been merged with the 'All' page"
                     buttonText="test"
                     growlType="discussion"
+                    blackCloseButton
                   />
                 </>
               );

packages/commonwealth/client/styles/components/component_kit/cw_growl.scss

@@ -8,9 +8,9 @@ $growl-outside-right-padding: 32px; // accounts for scrollbar width
   bottom: $growl-outside-bottom-padding;
   display: flex;
   position: fixed;
-
+  max-width: 400px;
   @include smallInclusive {
-    max-width: 400px;
+    max-width: 320px;
     max-height: 100%;
   }
 
@@ -21,6 +21,13 @@ $growl-outside-right-padding: 32px; // accounts for scrollbar width
   &.bottom-right {
     right: $growl-outside-right-padding;
   }
+  &.center {
+    top: 50%;
+    left: 48%;
+    transform: translate(-50%, -50%);
+    bottom: auto;
+    right: auto;
+  }
 
   .growl-card.Card {
     padding: 0;