From 98ccf94b3b4feebff632bb5dd7af04eb6a0300c3 Mon Sep 17 00:00:00 2001
From: Spicer Matthews <github@cloudmanic.com>
Date: Sat, 18 Nov 2023 11:13:29 -0800
Subject: [PATCH] Fixed the styling of our promo

---
 .../promos/November2023NoShopUser.js          |  8 ++---
 src/components/promos/November2023ShopUser.js | 34 +++++++++----------
 .../promos/November2023ShopUser.module.css    | 23 ++++++++-----
 src/pages/index.js                            | 33 ++++--------------
 4 files changed, 42 insertions(+), 56 deletions(-)

diff --git a/src/components/promos/November2023NoShopUser.js b/src/components/promos/November2023NoShopUser.js
index 599d2104..3913f58e 100644
--- a/src/components/promos/November2023NoShopUser.js
+++ b/src/components/promos/November2023NoShopUser.js
@@ -16,8 +16,8 @@ const contStyles = {
   marginLeft: 'auto',
   marginRight: 'auto',
   width: 700,
-  marginTop: 20,
-  marginBottom: 0,
+  marginTop: 60,
+  marginBottom: 20,
   zIndex: 100000,
 }
 
@@ -78,7 +78,7 @@ const November2023NoShopUser = ({ user }) => {
               </IconButton>
 
               <Typography
-                variant="h4"
+                variant="h6"
                 gutterBottom
                 align="center"
                 style={{ marginTop: 20 }}
@@ -86,7 +86,7 @@ const November2023NoShopUser = ({ user }) => {
                 Win $100 by Giving Back during Black Friday and Cyber Monday
               </Typography>
 
-              <Typography variant="body1" gutterBottom align="center">
+              <Typography variant="body2" gutterBottom align="center">
                 Double your impact when you shop this holiday season with{' '}
                 <a
                   href="http://shop.gladly.io"
diff --git a/src/components/promos/November2023ShopUser.js b/src/components/promos/November2023ShopUser.js
index 4ba946f1..d9c816da 100644
--- a/src/components/promos/November2023ShopUser.js
+++ b/src/components/promos/November2023ShopUser.js
@@ -31,8 +31,8 @@ const contStyles = {
   position: 'relative',
   marginLeft: 'auto',
   marginRight: 'auto',
-  width: 700,
-  marginTop: 40,
+  width: 750,
+  marginTop: 10,
   marginBottom: 20,
   zIndex: 100000,
 }
@@ -132,15 +132,15 @@ const November2023ShopUser = ({ user }) => {
               </IconButton>
 
               <Typography
-                variant="h4"
+                variant="h5"
                 gutterBottom
                 align="center"
                 style={{ marginTop: 20 }}
               >
-                Give back during your <br /> Holiday Shopping
+                Give back during your Holiday Shopping
               </Typography>
 
-              <Typography variant="body1" gutterBottom align="center">
+              <Typography variant="body2" gutterBottom align="center">
                 Raise money for {user.cause.nameForShop || 'Charity'} when you
                 shop these Black Friday deals–you can earn up to 10% back! As a
                 bonus for activating an offer, you’ll be entered into a drawing
@@ -163,7 +163,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={LegoLogo} width="100" alt="" />
+                    <img src={LegoLogo} alt="Lego" />
                   </a>
                   <a
                     className={styles.hoverable}
@@ -171,7 +171,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={WalmartLogo} width="100" alt="" />
+                    <img src={WalmartLogo} alt="Walmart" />
                   </a>
                   <a
                     className={styles.hoverable}
@@ -179,7 +179,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={SephoraLogo} width="100" alt="" />
+                    <img src={SephoraLogo} alt="Sephora" />
                   </a>
                 </Box>
               )}
@@ -192,7 +192,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={UltraBeautyLogo} width="100" alt="" />
+                    <img src={UltraBeautyLogo} alt="Ulta" />
                   </a>
                   <a
                     className={styles.hoverable}
@@ -200,7 +200,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={ThriftBooksLogo} width="100" alt="" />
+                    <img src={ThriftBooksLogo} alt="Thriftbooks" />
                   </a>
                   <a
                     className={styles.hoverable}
@@ -208,7 +208,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={OldNavyLogo} width="100" alt="" />
+                    <img src={OldNavyLogo} alt="Oldnavy" />
                   </a>
                 </Box>
               )}
@@ -221,7 +221,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={KiwicoLogo} width="100" alt="" />
+                    <img src={KiwicoLogo} alt="Kiwico" />
                   </a>
                   <a
                     className={styles.hoverable}
@@ -229,7 +229,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={SamsungLogo} width="100" alt="" />
+                    <img src={SamsungLogo} alt="Samsung" />
                   </a>{' '}
                   <a
                     className={styles.hoverable}
@@ -237,7 +237,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={SonosLogo} width="100" alt="" />
+                    <img src={SonosLogo} alt="Sonos" />
                   </a>{' '}
                 </Box>
               )}
@@ -250,7 +250,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={MacysLogo} width="100" alt="" />
+                    <img src={MacysLogo} alt="Macys" />
                   </a>{' '}
                   <a
                     className={styles.hoverable}
@@ -258,7 +258,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={MicrosoftLogo} width="100" alt="" />
+                    <img src={MicrosoftLogo} alt="Microsoft" />
                   </a>
                   <a
                     className={styles.hoverable}
@@ -266,7 +266,7 @@ const November2023ShopUser = ({ user }) => {
                     target="_blank"
                     rel="noreferrer"
                   >
-                    <img src={ZulilyLogo} width="100" alt="" />
+                    <img src={ZulilyLogo} alt="Zulily" />
                   </a>
                 </Box>
               )}
diff --git a/src/components/promos/November2023ShopUser.module.css b/src/components/promos/November2023ShopUser.module.css
index 78024419..cc69dec7 100644
--- a/src/components/promos/November2023ShopUser.module.css
+++ b/src/components/promos/November2023ShopUser.module.css
@@ -1,13 +1,18 @@
 .hoverable {
-    border: 1px solid transparent;
-    transition: 0.3s;
-    width: 100px;
-    height: 100px;
+  border: 1px solid transparent;
+  transition: 0.3s;
+  width: 75px;
+  height: 75px;
+}
+
+.hoverable img {
+  width: 75px;
+  height: 75px;
 }
 
 .hoverable:hover {
-    width: 106px;
-    height: 106px;
-    border: 3px solid #ccc; 
-    margin-bottom: -5px;
-}
\ No newline at end of file
+  width: 81px;
+  height: 81px;
+  border: 3px solid #ccc;
+  margin-bottom: -5px;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index ec1661e5..720be29d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -254,6 +254,7 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'center',
     minWidth: 500,
     maxWidth: 800,
+    marginTop: '60px',
   },
   searchBar: {
     position: 'relative',
@@ -643,23 +644,6 @@ const Index = ({ data: fallbackData, userAgent }) => {
     }
   }, [showYahooPrompt, interactedWithSFACNotification, features, searches])
 
-  // Figure out margin of search
-  const [searchMargin, setSearchMargin] = useState(0)
-
-  useEffect(() => {
-    if (!user) {
-      return
-    }
-
-    if (!user.shopSignupTimestamp) {
-      if (
-        !localStorageMgr.getItem(getNotifDismissKey('november-2023-no-shop'))
-      ) {
-        setSearchMargin(-160)
-      }
-    }
-  }, [user])
-
   // set the causeId in local storage for tab ads
   useEffect(() => {
     localStorageMgr.setItem(STORAGE_NEW_USER_CAUSE_ID, causeId)
@@ -1132,19 +1116,16 @@ const Index = ({ data: fallbackData, userAgent }) => {
             ) : null}
           </div>
 
-          {/* November No Shop User 2023 Promo */}
-          {user.userId && !user.shopSignupTimestamp && (
-            <November2023NoShopUser user={user} />
-          )}
-
-          <div
-            className={classes.centerContainer}
-            style={{ marginTop: searchMargin }}
-          >
+          <div className={classes.centerContainer}>
             <div className={classes.searchBarContainer}>
               {/* Prime day 2023 Promo */}
               {/* {user.userId && notif && <PrimeDay2023 user={user} />} */}
 
+              {/* November No Shop User 2023 Promo */}
+              {user.userId && !user.shopSignupTimestamp && (
+                <November2023NoShopUser user={user} />
+              )}
+
               {/* November Shop User 2023 Promo */}
               {user.userId && user.shopSignupTimestamp && (
                 <November2023ShopUser user={user} />