docs: fix State of React Native 2024 banner styles (#3302)

There was a **change request** from our design team considering the mobile styles of the State of React Native 2024 banner. ps. CSS is hard ## Before <img width="429" alt="image" src="https://github.com/user-attachments/assets/15894131-e39c-4586-8528-3e6fd8efa89b" /> ## After <img width="435" alt="image" src="https://github.com/user-attachments/assets/e1cb00c8-05fb-4e79-97d3-d9cd4d18eeda" />
software-mansion · Dec 20, 2024 · d6f877e · d6f877e
1 parent 82c4e4a
commit d6f877e
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 119 deletions.
diff --git a/docs/src/theme/AnnouncementBar/Content/index.js b/docs/src/theme/AnnouncementBar/Content/index.js
@@ -3,21 +3,21 @@ import clsx from 'clsx';
 import ArrowButton from './ArrowButton';
 import styles from './styles.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
 
 export default function AnnouncementBarContent(props) {
+  const { isCloseable, close } = props;
   return (
     <div className={clsx(styles.content, props.className)}>
-      <div className={styles.wrapper}>
-        <img
-          className={styles.logo}
-          src={useBaseUrl('/img/state-of-react-native-logo.svg')}
-          alt="State of React Native logo"
-        />
-        <strong className={styles.headline}>State of React Native 2024</strong>
-        <p className={styles.subText}>
-          Have a few minutes and want to shape the future of React Native?
-        </p>
-      </div>
+      <img
+        className={styles.logo}
+        src={useBaseUrl('/img/state-of-react-native-logo.svg')}
+        alt="State of React Native logo"
+      />
+      <strong className={styles.headline}>State of React Native 2024</strong>
+      <p className={styles.subText}>
+        Have a few minutes and want to shape the future of React Native?
+      </p>
       <a
         className={styles.link}
         href="https://survey.stateofreactnative.com/"
@@ -28,6 +28,9 @@ export default function AnnouncementBarContent(props) {
           <ArrowButton className={styles.linkArrow} />
         </div>
       </a>
+      {isCloseable && (
+        <AnnouncementBarCloseButton onClick={close} className={styles.close} />
+      )}
     </div>
   );
 }
diff --git a/docs/src/theme/AnnouncementBar/Content/styles.module.css b/docs/src/theme/AnnouncementBar/Content/styles.module.css
@@ -1,8 +1,11 @@
 .content {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto auto 1fr auto;
+  grid-template-areas: 'logo headline subText link close';
   align-items: center;
-  justify-content: space-between;
+  gap: 8px;
   margin: 0 auto;
+  width: 100%;
   max-width: 1440px;
 
   padding: 8px 16px;
@@ -11,26 +14,17 @@
 .logo {
   height: 36px;
   width: 36px;
-  margin: auto;
   grid-area: logo;
 }
 
 .content a {
   color: inherit;
 }
 
-.wrapper {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-}
-
 .headline {
   font-size: 16px;
-  grid-area: headline;
   text-wrap: nowrap;
+  grid-area: headline;
 }
 
 p.subText {
@@ -48,12 +42,18 @@ a.link {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
   gap: 6px;
   font-size: 14px;
   padding: 4px 12px;
   border: 1px solid var(--swm-navy-light-100);
   background-color: var(--swm-navy-light-100);
-  transition: all 0.2s ease-in-out;
+  transition:
+    border 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
+  grid-area: link;
+  margin-left: auto;
+  margin-right: 64px;
 }
 
 .linkTitle {
@@ -86,32 +86,44 @@ a.link {
   align-items: center;
 }
 
-@media screen and (max-width: 996px) {
+.close {
+  opacity: 1;
+  grid-area: close;
+}
+
+.close svg g {
+  stroke: var(--swm-navy-light-100);
+  stroke-width: 2;
+}
+
+@media screen and (max-width: 1200px) {
   .content {
-    gap: 12px;
-  }
-  .wrapper {
-    display: grid;
-    grid-template-columns: 50px 1fr;
+    grid-template-columns: auto 1fr 1fr auto;
     grid-template-areas:
-      'logo headline'
-      'logo subText';
-    gap: 0;
-    align-items: center;
+      'logo headline link close'
+      'logo subText link close';
+  }
+  .link {
+    margin: auto;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 600px) {
   .content {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 8px 16px;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'logo headline close'
+      'logo subText  close'
+      'link link link';
   }
-}
-
-@media screen and (max-width: 450px) {
   .link {
-    width: 100%;
-    justify-content: center;
+    margin: 0;
+  }
+  .logo {
+    margin-bottom: auto;
+  }
+  .close {
+    padding: 8px !important;
+    margin-bottom: auto;
   }
 }
diff --git a/docs/src/theme/AnnouncementBar/index.js b/docs/src/theme/AnnouncementBar/index.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useThemeConfig } from '@docusaurus/theme-common';
 import { useAnnouncementBar } from '@docusaurus/theme-common/internal';
-import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
 import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import styles from './styles.module.css';
@@ -48,16 +47,11 @@ function AnnouncementBar() {
           className={styles.announcementBar}
           style={{ backgroundColor, color: textColor }}
           role="banner">
-          {isCloseable && <div className={styles.announcementBarPlaceholder} />}
-          <AnnouncementBarContent className={styles.announcementBarContent} />
-          {isCloseable && (
-            <div className={styles.buttonContainer}>
-              <AnnouncementBarCloseButton
-                onClick={close}
-                className={styles.announcementBarClose}
-              />
-            </div>
-          )}
+          <AnnouncementBarContent
+            className={styles.announcementBarContent}
+            isCloseable={isCloseable}
+            close={close}
+          />
         </div>
       )}
     </BrowserOnly>

diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css
@@ -13,73 +13,8 @@
   z-index: 10;
 }
 
-.announcementBarAdornment {
-  height: 500px;
-  width: 500px;
-  position: absolute;
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-.announcementBarPlaceholder {
-  flex: 0 0 30px;
-  margin: 0 25px;
-}
-
-.announcementBarClose {
-  flex: 0 0 30px;
-  margin: 0 25px;
-  align-self: stretch;
-  opacity: 1;
-}
-
-.announcementBarClose svg g {
-  stroke: var(--swm-navy-light-100);
-  stroke-width: 2;
-}
-
-.announcementBarContent {
-  flex: 1 1 auto;
-}
-
-.buttonContainer {
-  display: flex;
-  justify-content: center;
-  padding-right: 1rem;
-}
-
 @media print {
   .announcementBar {
     display: none;
   }
 }
-
-@media screen and (max-width: 996px) {
-  .announcementBarClose {
-    margin: 0;
-  }
-  .announcementBarPlaceholder {
-    display: none;
-  }
-}
-@media screen and (max-width: 768px) {
-  .buttonContainer {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    padding-top: 1rem;
-  }
-}
-@media screen and (max-width: 600px) {
-  .announcementBarRightAdornment {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .buttonContainer {
-    padding-top: 0;
-    align-items: center;
-    justify-content: center;
-  }
-}