From 42bb9bd3279a3682b27541aaf2219dfd8e84b390 Mon Sep 17 00:00:00 2001
From: Robin Andeer <robin.andeer@gmail.com>
Date: Fri, 7 Jul 2023 16:24:02 +0200
Subject: [PATCH] GEN-681 | Update global banner styles (#2714)

<!--
PR title: GRW-123 / Feature / Awesome new thing
-->

## Describe your changes

![Screenshot 2023-07-07 at 13.00.22.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/OgXegTwxM9IeuXHZyw5h/f956960f-b900-4573-a1a0-080a1c82187d/Screenshot%202023-07-07%20at%2013.00.22.png)

- Increase minimum height of notification banner

- Add bottom border to notification banner

<!--
What changes are made?
If there are many changes, a list might be a good format.
If it makes sense, add screenshots and/or screen recordings here.
-->

## Justify why they are needed

- Design updates

## Checklist before requesting a review

- [ ] I have performed a self-review of my code
---
 apps/store/src/components/Banner/Banner.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/store/src/components/Banner/Banner.tsx b/apps/store/src/components/Banner/Banner.tsx
index ff70dff43a..a2a13d820d 100644
--- a/apps/store/src/components/Banner/Banner.tsx
+++ b/apps/store/src/components/Banner/Banner.tsx
@@ -51,6 +51,7 @@ const Icon = ({ variant }: { variant: BannerVariant }) => {
 }
 
 const Wrapper = styled.div<{ variant: BannerVariant }>(({ variant }) => ({
+  minHeight: '3rem',
   display: 'grid',
   // Using grid here to perfect center align banner's content, excluding close button
   gridTemplateAreas: `
@@ -61,6 +62,8 @@ const Wrapper = styled.div<{ variant: BannerVariant }>(({ variant }) => ({
   paddingBlock: theme.space.sm,
   paddingInline: theme.space.md,
   fontSize: theme.fontSizes.xs,
+
+  borderBottom: `0.5px solid ${theme.colors.borderTranslucent1}`,
   ...getVariantStyles(variant),
 
   [mq.lg]: {