Banner updates

wri · Dec 5, 2024 · fa7ec02 · fa7ec02
1 parent 699e0ab
commit fa7ec02
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -37,7 +37,11 @@ const Banner = ({
   }
 
   return (
-    <StyledBanner isButtonRight={isButtonRight} size={size}>
+    <StyledBanner
+      isButtonRight={isButtonRight}
+      size={size}
+      aria-roledescription='Note'
+    >
       <div>
         <BannerHeader>
           {icon}

diff --git a/src/components/Banner/styled.ts b/src/components/Banner/styled.ts
@@ -11,7 +11,8 @@ export const DefaultBanner = styled.div<{
   padding: ${({ size }) =>
     size === 'small' ? '8px 8px 12px 8px' : '8px 12px 12px 12px'};
   display: flex;
-  align-items: flex-start;
+  align-items: ${({ isButtonRight }) =>
+    isButtonRight ? 'center' : 'flex-start'};
   justify-content: ${({ isButtonRight }) =>
     isButtonRight ? 'space-between' : 'flex-start'};
   flex-direction: ${({ isButtonRight }) => (isButtonRight ? 'row' : 'column')};
@@ -24,8 +25,12 @@ export const DefaultBanner = styled.div<{
 
 export const BannerHeader = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
+
+  svg {
+    margin-top: 6px;
+  }
 `
 
 export const BannerTitle = styled.p<{ size: string }>`