improve: left align text in error banner (#86)

* extract page padding to global var Signed-off-by: ryanwolhuter <[email protected]> * left align error messages Signed-off-by: ryanwolhuter <[email protected]> * increase error message padding Signed-off-by: ryanwolhuter <[email protected]> Signed-off-by: ryanwolhuter <[email protected]>
UMAprotocol · Nov 22, 2022 · 5270a01 · 5270a01
1 parent 30e89c4
commit 5270a01
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 5 deletions.
diff --git a/components/Banner/Banner.tsx b/components/Banner/Banner.tsx
@@ -24,7 +24,7 @@ const InnerWrapper = styled.div`
   height: var(--banner-height);
   display: flex;
   align-items: center;
-  padding-left: clamp(10px, 45px, 4vw);
+  padding-left: var(--page-padding);
   @media ${tabletAndUnder} {
     padding: 0;
   }

diff --git a/components/ErrorBanner/ErrorBanner.tsx b/components/ErrorBanner/ErrorBanner.tsx
@@ -39,19 +39,22 @@ const Wrapper = styled.div`
   align-items: center;
   justify-content: center;
   padding-block: 15px;
+  padding-inline: var(--page-padding);
 `;
 
 const ErrorMessageWrapper = styled.div`
+  width: 100%;
+  position: relative;
   display: flex;
   align-items: center;
   gap: 5px;
+  padding-block: 5px;
   &:not(:last-child) {
     margin-bottom: 5px;
   }
 `;
 
 const ErrorMessage = styled.p`
-  max-width: min(75vw, 500px);
   font: var(--text-md);
 
   @media ${mobileAndUnder} {
@@ -69,6 +72,9 @@ const CloseIcon = styled(Close)`
   }
 `;
 const CloseButton = styled.button`
+  position: absolute;
+  top: 8px;
+  right: 0;
   background: transparent;
   fill: var(--white);
 `;
diff --git a/components/GlobalStyle/GlobalStyle.ts b/components/GlobalStyle/GlobalStyle.ts
@@ -255,6 +255,7 @@ a:not([class]) {
     --mobile-banner-height: ${mobileBannerHeight}px;
     --desktop-banner-height: ${desktopBannerHeight}px;
     --page-width: var(--desktop-page-width);
+    --page-padding: clamp(10px, 45px, 4vw);
     --header-height: var(--desktop-header-height);
     --banner-height: var(--desktop-banner-height);
     @media ${tabletAndUnder} {

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -110,7 +110,7 @@ const OuterWrapper = styled.header``;
 const InnerWrapper = styled.div`
   max-width: var(--page-width);
   height: var(--header-height);
-  padding-inline: clamp(10px, 45px, 4vw);
+  padding-inline: var(--page-padding);
   display: flex;
   justify-content: space-between;
   align-items: center;

diff --git a/components/HowItWorks/HowItWorks.tsx b/components/HowItWorks/HowItWorks.tsx
@@ -147,7 +147,7 @@ const OuterWrapper = styled.section`
 `;
 
 const InnerWrapper = styled.div`
-  padding-inline: clamp(10px, 45px, 4vw);
+  padding-inline: var(--page-padding);
   padding-block: 30px;
   max-width: var(--page-width);
   margin-inline: auto;

diff --git a/components/pages/styles.tsx b/components/pages/styles.tsx
@@ -8,7 +8,7 @@ export const PageOuterWrapper = styled.div`
 
 export const PageInnerWrapper = styled.div`
   max-width: var(--page-width);
-  padding-inline: clamp(10px, 45px, 4vw);
+  padding-inline: var(--page-padding);
   padding-block: 45px;
   margin-inline: auto;