From bd2e833372e4faaa3dd6d02a8e938a334bbb11a8 Mon Sep 17 00:00:00 2001
From: KaleemNeslit <kaleem.neslit@gmail.com>
Date: Mon, 18 Nov 2024 20:22:09 +0500
Subject: [PATCH] update the growl design for mobile

---
 .../GrowlTemplate/CWGrowlTemplate.scss        |  6 ++++++
 .../GrowlTemplate/CWGrowlTemplate.tsx         | 21 +++++++++++++++----
 .../components/component_kit/cw_growl.tsx     |  2 +-
 .../components/component_kit/cw_growl.scss    | 11 ++++++++--
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss
index 64836d4d1e6..74c433cccf2 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss
+++ b/packages/commonwealth/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/packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx
index db17bfe62df..aff6c59f0cd 100644
--- a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx
+++ b/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';
@@ -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
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/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;