update the growl design for mobile

hicommonwealth · Nov 20, 2024 · bd2e833 · bd2e833
1 parent 36cbc72
commit bd2e833
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/...wealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss b/...wealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss
@@ -57,6 +57,12 @@
     gap: 1rem;
     cursor: default;
 
+    @include smallInclusive {
+      max-width: 20rem;
+      padding: 0.5rem;
+      gap: 0.3rem;
+    }
+
     .subtitle-text {
       margin-top: -12px;
     }

diff --git a/...nwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx b/...nwealth/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';
@@ -34,7 +35,7 @@ export const CWGrowlTemplate = ({
   blackCloseButton,
 }: CWGrowlTemplateProps) => {
   const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore();
-
+  const { isWindowSmallInclusive } = useBrowserWindow({});
   const [shouldHideGrowlPermanently, setShouldHideGrowlPermanently] =
     useState(false);
 
@@ -57,7 +58,10 @@ export const CWGrowlTemplate = ({
   };
 
   return (
-    <CWGrowl disabled={isDisabled} position="bottom-right">
+    <CWGrowl
+      disabled={isDisabled}
+      position={isWindowSmallInclusive ? 'center' : 'bottom-right'}
+    >
       <div className="CWGrowlTemplate">
         <CWIconButton
           iconName="close"
@@ -67,10 +71,19 @@ export const CWGrowlTemplate = ({
         />
         {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 && (

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
@@ -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/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;