From a5cb68c24a65380c7665285b82e15455022980c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Kapu=C5=9Bciak?= <39658211+kacperkapusciak@users.noreply.github.com> Date: Thu, 19 Dec 2024 10:54:58 +0100 Subject: [PATCH] docs: add State of React Native 2024 banner (#3300) ## Description This PR adds a State of React Native 2024 banner to the top of Gesture Handler documentation. _Fill out the survey now_ button leads to https://survey.stateofreactnative.com/ The banner **will automatically disappear January 8.** ### Desktop image ### Tablet image ### Mobile image ## How to test? ``` cd docs yarn yarn start ``` --- docs/docusaurus.config.js | 6 +- .../theme/AnnouncementBar/Content/index.js | 15 +++-- .../AnnouncementBar/Content/styles.module.css | 58 ++++++++++++++----- docs/src/theme/AnnouncementBar/index.js | 6 +- .../theme/AnnouncementBar/styles.module.css | 14 ++++- docs/static/img/appjs.svg | 1 - .../static/img/state-of-react-native-logo.svg | 5 ++ 7 files changed, 79 insertions(+), 26 deletions(-) delete mode 100644 docs/static/img/appjs.svg create mode 100644 docs/static/img/state-of-react-native-logo.svg diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 6d745a57d1..a7522c2d29 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -99,10 +99,12 @@ const config = { }, ], }, + // State of React Native survey banner announcementBar: { + id: 'state-of-react-native-2024', content: ' ', - backgroundColor: '#03c', - textColor: '#fff', + backgroundColor: '#b1dfd0', + textColor: '#001a72', }, footer: { style: 'light', diff --git a/docs/src/theme/AnnouncementBar/Content/index.js b/docs/src/theme/AnnouncementBar/Content/index.js index f559bb0b08..47b99b8a5a 100644 --- a/docs/src/theme/AnnouncementBar/Content/index.js +++ b/docs/src/theme/AnnouncementBar/Content/index.js @@ -2,23 +2,28 @@ import React from 'react'; import clsx from 'clsx'; import ArrowButton from './ArrowButton'; import styles from './styles.module.css'; +import useBaseUrl from '@docusaurus/useBaseUrl'; export default function AnnouncementBarContent(props) { return (
- App.js Conf 2024 + State of React Native logo + State of React Native 2024

- An Expo & React Native conference in Europe is back, May 22-24 in - Kraków, Poland! + Have a few minutes and want to shape the future of React Native?

- Learn More + Fill out the survey now!
diff --git a/docs/src/theme/AnnouncementBar/Content/styles.module.css b/docs/src/theme/AnnouncementBar/Content/styles.module.css index 1c2b5a3b71..5f1b852b40 100644 --- a/docs/src/theme/AnnouncementBar/Content/styles.module.css +++ b/docs/src/theme/AnnouncementBar/Content/styles.module.css @@ -5,7 +5,14 @@ margin: 0 auto; max-width: 1440px; - padding: 1rem 1.5rem; + padding: 8px 16px; +} + +.logo { + height: 36px; + width: 36px; + margin: auto; + grid-area: logo; } .content a { @@ -15,18 +22,22 @@ .wrapper { display: flex; flex-direction: row; - gap: 1rem; + gap: 8px; align-items: center; justify-content: center; } .headline { font-size: 16px; + grid-area: headline; + text-wrap: nowrap; } p.subText { font-size: 14px; + text-wrap: balance; margin: 0; + grid-area: subText; } a.link { @@ -38,29 +49,36 @@ a.link { flex-direction: row; align-items: center; gap: 6px; - font-size: 12px; + font-size: 14px; padding: 4px 12px; - border: 1px solid var(--swm-off-white); - border-radius: 6px; - background-color: var(--swm-off-white); - transition: 0.2s ease-in-out; + border: 1px solid var(--swm-navy-light-100); + background-color: var(--swm-navy-light-100); + transition: all 0.2s ease-in-out; } .linkTitle { - color: #03c; + color: var(--swm-white); font-weight: 500; + text-wrap: nowrap; + transition: all 0.2s ease-in-out; } .link:hover { - background-color: var(--swm-navy-light-20); - border-color: var(--swm-navy-light-20); + background-color: var(--swm-white); + border-color: var(--swm-navy-light-100); text-decoration: none; } +.link:hover .linkTitle, +.link:hover .linkArrow { + color: var(--swm-navy-light-100); +} + .linkArrow { width: 16px; height: 16px; - color: #03c; + color: var(--swm-white); + transition: all 0.2s ease-in-out; } .linkArrowContainer { @@ -73,8 +91,13 @@ a.link { gap: 12px; } .wrapper { - flex-direction: column; - align-items: flex-start; + display: grid; + grid-template-columns: 50px 1fr; + grid-template-areas: + 'logo headline' + 'logo subText'; + gap: 0; + align-items: center; } } @@ -82,6 +105,13 @@ a.link { .content { flex-direction: column; align-items: flex-start; - padding: 1rem 1.5rem; + padding: 8px 16px; + } +} + +@media screen and (max-width: 450px) { + .link { + width: 100%; + justify-content: center; } } diff --git a/docs/src/theme/AnnouncementBar/index.js b/docs/src/theme/AnnouncementBar/index.js index 246e14bb74..75520cacf3 100644 --- a/docs/src/theme/AnnouncementBar/index.js +++ b/docs/src/theme/AnnouncementBar/index.js @@ -33,10 +33,10 @@ function AnnouncementBar() { return null; } - // hide announcement bar after app.js + // hide announcement bar at the end of the State of React Native survey const today = new Date(); - const endOfAppJS = new Date('2024-05-25T00:00:00.000Z'); - if (today > endOfAppJS) { + const endOfStateOfReactNative = new Date('2025-01-08T00:00:00.000Z'); + if (today > endOfStateOfReactNative) { return null; } diff --git a/docs/src/theme/AnnouncementBar/styles.module.css b/docs/src/theme/AnnouncementBar/styles.module.css index 076a941e4a..8b572dcf95 100644 --- a/docs/src/theme/AnnouncementBar/styles.module.css +++ b/docs/src/theme/AnnouncementBar/styles.module.css @@ -5,7 +5,6 @@ .announcementBar { display: flex; font-size: var(--docusaurus-announcement-bar-font-size); - background-image: url(/static/img/appjs.svg), linear-gradient(#03c, #03c); background-position: 0; background-size: cover; color: var(--swm-off-white); @@ -34,6 +33,11 @@ opacity: 1; } +.announcementBarClose svg g { + stroke: var(--swm-navy-light-100); + stroke-width: 2; +} + .announcementBarContent { flex: 1 1 auto; } @@ -71,3 +75,11 @@ display: none; } } + +@media screen and (max-width: 450px) { + .buttonContainer { + padding-top: 0; + align-items: center; + justify-content: center; + } +} diff --git a/docs/static/img/appjs.svg b/docs/static/img/appjs.svg deleted file mode 100644 index 7cc9145d30..0000000000 --- a/docs/static/img/appjs.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/static/img/state-of-react-native-logo.svg b/docs/static/img/state-of-react-native-logo.svg new file mode 100644 index 0000000000..03ed03ba97 --- /dev/null +++ b/docs/static/img/state-of-react-native-logo.svg @@ -0,0 +1,5 @@ + + + + +