Merge pull request #13371 from TylerAPfledderer/fix/DismissableBanner-layout

corwintines · web-flow · commit 9ebe79f99f43 · 2024-07-10T10:16:45.000-06:00
fix(Banners): fix child positioning in DismissableBanner
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -2,8 +2,10 @@
 
     :root {
         --font-inter: 'Inter', sans-serif;
+        --font-mono: "IBM Plex Mono", Courier, monospace;
     }
 
 </style>
 
-<link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+<link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+<link rel="preload" href="/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
diff --git a/public/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf b/public/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf
diff --git a/src/components/BannerNotification/DismissableBanner.stories.tsx b/src/components/BannerNotification/DismissableBanner.stories.tsx
diff --git a/src/components/Banners/BannerNotification.tsx b/src/components/Banners/BannerNotification.tsx
diff --git a/src/components/Banners/BugBountyBanner/index.tsx b/src/components/Banners/BugBountyBanner/index.tsx
@@ -3,7 +3,7 @@ import React from "react"
 import { Center, Text } from "@chakra-ui/react"
 
 // Components
-import BannerNotification from "@/components/BannerNotification"
+import BannerNotification from "@/components/Banners/BannerNotification"
 
 const BugBountyBanner = () => (
   <BannerNotification shouldShow>
diff --git a/src/components/Banners/DismissableBanner/index.tsx b/src/components/Banners/DismissableBanner/index.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"
 import { Center, CloseButton } from "@chakra-ui/react"
 
 // Components
-import BannerNotification from "@/components/BannerNotification"
+import BannerNotification from "../BannerNotification"
 
 // Interface
 export type DismissableBannerProps = {
@@ -28,9 +28,9 @@ const DismissableBanner = ({
   }
 
   return (
-    <BannerNotification shouldShow={show}>
-      <Center paddingEnd={8}>{children}</Center>
-      <CloseButton onClick={onClose} aria-label="Close Banner" />
+    <BannerNotification shouldShow={show} gap='8'>
+      <Center marginInlineStart='auto'>{children}</Center>
+      <CloseButton marginInlineStart='auto' onClick={onClose} aria-label="Close Banner" />
     </BannerNotification>
   )
 }
diff --git a/src/components/Banners/UpgradeBannerNotification.tsx b/src/components/Banners/UpgradeBannerNotification.tsx
@@ -1,8 +1,9 @@
 import { Box } from "@chakra-ui/react"
 
+import Emoji from "../Emoji"
+import InlineLink from "../Link"
+
 import BannerNotification from "./BannerNotification"
-import Emoji from "./Emoji"
-import InlineLink from "./Link"
 
 const UpgradeBannerNotification = () => (
   <BannerNotification shouldShow>
diff --git a/src/layouts/Docs.tsx b/src/layouts/Docs.tsx
@@ -16,7 +16,7 @@ import {
 import { ChildOnlyProp } from "@/lib/types"
 import type { DocsFrontmatter, MdPageContent } from "@/lib/interfaces"
 
-import BannerNotification from "@/components/BannerNotification"
+import BannerNotification from "@/components/Banners/BannerNotification"
 import { ButtonLink } from "@/components/Buttons"
 import CallToContribute from "@/components/CallToContribute"
 import Card from "@/components/Card"
diff --git a/src/layouts/UseCases.tsx b/src/layouts/UseCases.tsx
@@ -14,7 +14,7 @@ import {
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, UseCasesFrontmatter } from "@/lib/interfaces"
 
-import BannerNotification from "@/components/BannerNotification"
+import BannerNotification from "@/components/Banners/BannerNotification"
 import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
 import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -14,7 +14,6 @@ import "../styles/global.css"
 
 import { useLocaleDirection } from "@/hooks/useLocaleDirection"
 import { BaseLayout } from "@/layouts/BaseLayout"
-import { mono } from "@/lib/fonts"
 
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   useEffect(() => {
@@ -40,7 +39,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
         {`
           :root {
             --font-inter: Inter, sans-serif;
-            --font-mono: ${mono.style.fontFamily};
+            --font-mono: "IBM Plex Mono", Courier, monospace;
           }
         `}
       </style>
diff --git a/src/pages/wallets/find-wallet.tsx b/src/pages/wallets/find-wallet.tsx
@@ -15,7 +15,7 @@ import {
 
 import type { BasePageProps, ChildOnlyProp, Lang, Wallet } from "@/lib/types"
 
-import BannerNotification from "@/components/BannerNotification"
+import BannerNotification from "@/components/Banners/BannerNotification"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { MobileFiltersMenu } from "@/components/FindWallet/MobileFiltersMenu"
 import WalletFilterPersona from "@/components/FindWallet/WalletFilterPersona"
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -9,7 +9,7 @@
   src: url(/fonts/inter/cyrillic-ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
     U+FE2E-FE2F;
-}
+  }
 /* cyrillic */
 @font-face {
   font-family: "Inter";
@@ -36,7 +36,7 @@
   font-display: swap;
   src: url(/fonts/inter/greek.woff2) format("woff2");
   unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
-    U+03A3-03FF;
+  U+03A3-03FF;
 }
 /* vietnamese */
 @font-face {
@@ -46,7 +46,7 @@
   font-display: swap;
   src: url(/fonts/inter/vietnamese.woff2) format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+  U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
     U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@@ -58,7 +58,7 @@
   src: url(/fonts/inter/latin-ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
     U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
+  }
 /* latin */
 @font-face {
   font-family: "Inter";
@@ -67,8 +67,8 @@
   font-display: swap;
   src: url(/fonts/inter/latin.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
-    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+  U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
 @font-face {
@@ -78,7 +78,7 @@
   font-display: swap;
   src: url(/fonts/inter/cyrillic-ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
+  U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
@@ -106,7 +106,7 @@
   font-display: swap;
   src: url(/fonts/inter/greek.woff2) format("woff2");
   unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
-    U+03A3-03FF;
+  U+03A3-03FF;
 }
 /* vietnamese */
 @font-face {
@@ -118,16 +118,16 @@
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
     U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
     U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
+  }
+  /* latin-ext */
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url(/fonts/inter/latin-ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
-    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
@@ -137,6 +137,49 @@
   font-display: swap;
   src: url(/fonts/inter/latin.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
-    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+  U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* css imported from https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400 */
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
+/* vietnamese */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,10 @@`
`2`	`2`
`3`	`3`	`:root {`
`4`	`4`	`--font-inter: 'Inter', sans-serif;`
	`5`	`+ --font-mono: "IBM Plex Mono", Courier, monospace;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`</style>`
`8`	`9`
`9`		`-<link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />`
	`10`	`+<link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />`
	`11`	`+<link rel="preload" href="/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"`
`3`	`3`	`import { Center, CloseButton } from "@chakra-ui/react"`
`4`	`4`
`5`	`5`	`// Components`
`6`		`-import BannerNotification from "@/components/BannerNotification"`
	`6`	`+import BannerNotification from "../BannerNotification"`
`7`	`7`
`8`	`8`	`// Interface`
`9`	`9`	`export type DismissableBannerProps = {`
`@@ -28,9 +28,9 @@ const DismissableBanner = ({`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`return (`
`31`		`- <BannerNotification shouldShow={show}>`
`32`		`- <Center paddingEnd={8}>{children}</Center>`
`33`		`- <CloseButton onClick={onClose} aria-label="Close Banner" />`
	`31`	`+ <BannerNotification shouldShow={show} gap='8'>`
	`32`	`+ <Center marginInlineStart='auto'>{children}</Center>`
	`33`	`+ <CloseButton marginInlineStart='auto' onClick={onClose} aria-label="Close Banner" />`
`34`	`34`	`</BannerNotification>`
`35`	`35`	`)`
`36`	`36`	`}`