diff --git a/packages/commonwealth/client/assets/img/litepaperGrowlImage.svg b/packages/commonwealth/client/assets/img/litepaperGrowlImage.svg new file mode 100644 index 00000000000..48f4ff633b0 --- /dev/null +++ b/packages/commonwealth/client/assets/img/litepaperGrowlImage.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/commonwealth/client/scripts/views/Sublayout.tsx b/packages/commonwealth/client/scripts/views/Sublayout.tsx index 6de7c482e56..5ab1af5353a 100644 --- a/packages/commonwealth/client/scripts/views/Sublayout.tsx +++ b/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} + { const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore(); - + const { isWindowSmallInclusive } = useBrowserWindow({}); const [shouldHideGrowlPermanently, setShouldHideGrowlPermanently] = useState(false); @@ -55,20 +58,32 @@ export const CWGrowlTemplate = ({ }; return ( - +
{growlImage && }
- + {headerText} - + {bodyText} {buttonLink && ( diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_growl.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_growl.tsx index 49e71bf1d6f..b11b98b786c 100644 --- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_growl.tsx +++ b/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; diff --git a/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx b/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx index 22217596749..ff9eb028d88 100644 --- a/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx +++ b/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 /> ); diff --git a/packages/commonwealth/client/styles/components/component_kit/cw_growl.scss b/packages/commonwealth/client/styles/components/component_kit/cw_growl.scss index 6f652aabcce..abecbd7c889 100644 --- a/packages/commonwealth/client/styles/components/component_kit/cw_growl.scss +++ b/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;