Skip to content

Commit

Permalink
Merge pull request #547 from gladly-team/spicer/current-shop-users-promo
Browse files Browse the repository at this point in the history 
Fixed the styling of our promo
  • Loading branch information
@spicermatthews
spicermatthews authored Nov 18, 2023
2 parents 000d6b0 + 98ccf94 commit 378079a
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 56 deletions.
8 changes: 4 additions & 4 deletions src/components/promos/November2023NoShopUser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const contStyles = {
marginLeft: 'auto',
marginRight: 'auto',
width: 700,
marginTop: 20,
marginBottom: 0,
marginTop: 60,
marginBottom: 20,
zIndex: 100000,
}

Expand Down Expand Up @@ -78,15 +78,15 @@ const November2023NoShopUser = ({ user }) => {
</IconButton>

<Typography
variant="h4"
variant="h6"
gutterBottom
align="center"
style={{ marginTop: 20 }}
>
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"
Expand Down
34 changes: 17 additions & 17 deletions src/components/promos/November2023ShopUser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ const contStyles = {
position: 'relative',
marginLeft: 'auto',
marginRight: 'auto',
width: 700,
marginTop: 40,
width: 750,
marginTop: 10,
marginBottom: 20,
zIndex: 100000,
}
Expand Down Expand Up @@ -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
Expand All @@ -163,23 +163,23 @@ const November2023ShopUser = ({ user }) => {
target="_blank"
rel="noreferrer"
>
<img src={LegoLogo} width="100" alt="" />
<img src={LegoLogo} alt="Lego" />
</a>
<a
className={styles.hoverable}
href={`${baseUrl}&c=5483936&UUID=${user.userId}&url=https://www.walmart.com/`}
target="_blank"
rel="noreferrer"
>
<img src={WalmartLogo} width="100" alt="" />
<img src={WalmartLogo} alt="Walmart" />
</a>
<a
className={styles.hoverable}
href={`${baseUrl}&c=5481985&UUID=${user.userId}&url=https://www.sephora.com/`}
target="_blank"
rel="noreferrer"
>
<img src={SephoraLogo} width="100" alt="" />
<img src={SephoraLogo} alt="Sephora" />
</a>
</Box>
)}
Expand All @@ -192,23 +192,23 @@ const November2023ShopUser = ({ user }) => {
target="_blank"
rel="noreferrer"
>
<img src={UltraBeautyLogo} width="100" alt="" />
<img src={UltraBeautyLogo} alt="Ulta" />
</a>
<a
className={styles.hoverable}
href={`${baseUrl}&c=144406&UUID=${user.userId}&url=https://www.thriftbooks.com/`}
target="_blank"
rel="noreferrer"
>
<img src={ThriftBooksLogo} width="100" alt="" />
<img src={ThriftBooksLogo} alt="Thriftbooks" />
</a>
<a
className={styles.hoverable}
href={`${baseUrl}&c=5480737&UUID=${user.userId}&url=https://oldnavy.gap.com/`}
target="_blank"
rel="noreferrer"
>
<img src={OldNavyLogo} width="100" alt="" />
<img src={OldNavyLogo} alt="Oldnavy" />
</a>
</Box>
)}
Expand All @@ -221,23 +221,23 @@ const November2023ShopUser = ({ user }) => {
target="_blank"
rel="noreferrer"
>
<img src={KiwicoLogo} width="100" alt="" />
<img src={KiwicoLogo} alt="Kiwico" />
</a>
<a
className={styles.hoverable}
href={`${baseUrl}&c=5481855&UUID=${user.userId}&url=https://www.samsung.com/`}
target="_blank"
rel="noreferrer"
>
<img src={SamsungLogo} width="100" alt="" />
<img src={SamsungLogo} alt="Samsung" />
</a>{' '}
<a
className={styles.hoverable}
href={`${baseUrl}&c=5482453&UUID=${user.userId}&url=https://www.sonos.com/`}
target="_blank"
rel="noreferrer"
>
<img src={SonosLogo} width="100" alt="" />
<img src={SonosLogo} alt="Sonos" />
</a>{' '}
</Box>
)}
Expand All @@ -250,23 +250,23 @@ const November2023ShopUser = ({ user }) => {
target="_blank"
rel="noreferrer"
>
<img src={MacysLogo} width="100" alt="" />
<img src={MacysLogo} alt="Macys" />
</a>{' '}
<a
className={styles.hoverable}
href={`${baseUrl}&c=5482649&UUID=${user.userId}&url=https://www.microsoft.com/`}
target="_blank"
rel="noreferrer"
>
<img src={MicrosoftLogo} width="100" alt="" />
<img src={MicrosoftLogo} alt="Microsoft" />
</a>
<a
className={styles.hoverable}
href={`${baseUrl}&c=5484304&UUID=${user.userId}&url=https://shop.zulily.com/`}
target="_blank"
rel="noreferrer"
>
<img src={ZulilyLogo} width="100" alt="" />
<img src={ZulilyLogo} alt="Zulily" />
</a>
</Box>
)}
Expand Down
23 changes: 14 additions & 9 deletions src/components/promos/November2023ShopUser.module.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
width: 81px;
height: 81px;
border: 3px solid #ccc;
margin-bottom: -5px;
}
33 changes: 7 additions & 26 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,7 @@ const useStyles = makeStyles((theme) => ({
justifyContent: 'center',
minWidth: 500,
maxWidth: 800,
marginTop: '60px',
},
searchBar: {
position: 'relative',
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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} />
Expand Down

1 comment on commit 378079a

@vercel
Copy link

@vercel vercel bot commented on 378079a Nov 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

tab-web – ./

tab-web-gladly-team.vercel.app
dev-tab-web.vercel.app
tab-web-git-master-gladly-team.vercel.app
tab-web.vercel.app

Please sign in to comment.