Brand updates (#174)

* update readme banner * remove announcement and update colors * replace formidable logo in nav * update footer --------- Co-authored-by: Christy Presler <cpresler@users.noreply.github.com>
FormidableLabs · May 2, 2024 · c462c73 · c462c73
1 parent 13d1989
commit c462c73
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 151 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![React Native Owl — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/react-native-owl/main/website/static/images/RNO-Hero.png)](https://formidable.com/open-source/)
+[![React Native Owl](https://oss.nearform.com/api/banner?badge=owl&bg=95dd77&text=react+native+owl)](https://commerce.nearform.com/open-source/react-native-owl/)
 
 `react-native-owl` — Visual regression testing for React Native
 

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -58,11 +58,6 @@ const config = {
         disableSwitch: true,
         respectPrefersColorScheme: false,
       },
-      announcementBar: {
-        id: 'announcement-blogpost',
-        content: `Read the announcement "<strong><a target="_blank" href="/blog/2022/react-native-owl/">We're Building a Visual Regression Testing Library for React Native</a></strong>" in our blog.`,
-        isCloseable: false,
-      },
       navbar: {
         style: 'dark',
         title: 'React Native Owl',
@@ -104,42 +99,23 @@ const config = {
             position: 'right',
           },
           {
-            href: 'https://formidable.com',
-            className: 'header-formidable-link',
-            'aria-label': 'Formidable Website',
+            href: 'https://commerce.nearform.com/',
+            className: 'header-nearform-link',
+            'aria-label': 'Nearform Commerce Website',
             position: 'right',
           },
         ],
       },
       footer: {
         style: 'dark',
-        links: [
-          {
-            title: null,
-            items: [
-              {
-                label: 'Getting Started',
-                to: '/docs/introduction/getting-started',
-              },
-              {
-                label: 'Config File',
-                to: '/docs/introduction/config-file/',
-              },
-              {
-                label: 'CLI',
-                to: '/docs/cli/building-the-app/',
-              },
-              {
-                label: 'Methods',
-                to: '/docs/api/methods/',
-              },
-              {
-                label: 'Matchers',
-                to: '/docs/api/matchers/',
-              },
-            ],
-          },
-        ],
+        logo: {
+          alt: "Nearform logo",
+          src: "images/nearform-logo-white.svg",
+          href: "https://commerce.nearform.com",
+          width: 100,
+          height: 100,
+        },
+        copyright: `Copyright © ${new Date().getFullYear()} Nearform`,
       },
       prism: {
         defaultLanguage: 'javascript',

diff --git a/website/src/components/Hero/styles.module.css b/website/src/components/Hero/styles.module.css
@@ -14,7 +14,7 @@
 
 .hero:after {
   background: inherit;
-  border-bottom: 10px solid var(--brand-orange);
+  border-bottom: 11px solid var(--brand-primary);
   content: '';
   display: block;
   height: 50%;
@@ -69,8 +69,7 @@
 
 .buttons .ctaButton {
   border-radius: 3px;
-  border-color: var(--brand-orange);
-  background-color: var(--brand-orange);
-  color: white;
+  border-color: var(--brand-primary);
+  background-color: var(--brand-primary);
   padding: 0.75rem 1.75rem;
 }
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
@@ -1,5 +1,5 @@
 .feature {
-  background-color: var(--brand-beige);
+  background-color: var(--brand-neutral);
   padding: 2rem;
   margin: 2rem auto;
   text-align: center;

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -6,17 +6,16 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --brand-blue: #1e2852;
-  --brand-orange: #f04d21;
-  --brand-beige: #ebe5da;
+  --brand-blue: #000e38;
+  --brand-primary: #95dd77;
+  --brand-neutral: #f6f8fa;
 
   --ifm-navbar-height: 4.25rem;
 
   --ifm-h3-font-size: 2.2rem;
   --ifm-code-font-size: 95%;
 
-  --ifm-footer-padding-horizontal: 2rem;
-  --ifm-footer-padding-vertical: 3.5rem;
+  --ifm-footer-padding-vertical: 1rem;
 }
 
 html[data-theme='dark'] {
@@ -56,16 +55,16 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
     no-repeat;
 }
 
-.header-formidable-link:hover {
+.header-nearform-link:hover {
   opacity: 0.6;
 }
 
-.header-formidable-link:before {
+.header-nearform-link:before {
   content: '';
-  width: 26px;
-  height: 26px;
+  width: 32px;
+  height: 24px;
   display: flex;
-  background: url("data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 39 50' xmlns='http://www.w3.org/2000/svg' aria-labelledby='header-formidable-logo-icon'%0A%3E%3Ctitle id='header-formidable-logo-icon'%3EFormidable Icon%3C/title%3E%3Cpath d='M33.527 17.493l4.546-7.942c.145-.253.145-.56 0-.814L33.291.398V.38c-.018-.018-.036-.036-.036-.072l-.018-.019c-.018-.018-.036-.054-.054-.072-.018-.018-.055-.036-.073-.054l-.018-.018c-.018-.018-.036-.036-.054-.036 0 0-.018 0-.018-.019-.055-.036-.109-.054-.181-.072h-.019c-.018 0-.054-.018-.072-.018H5.561h-.018c-.019 0-.055 0-.073.018h-.018c-.054.018-.127.036-.181.072 0 0-.018 0-.018.019-.018.018-.037.018-.055.036L5.18.163c-.018.018-.054.036-.072.054-.018.018-.036.054-.055.072l-.018.019C5.017.326 5 .344 5 .38v.018L.11 8.738c-.145.253-.145.56 0 .813l4.673 8.159v26.863c0 .018 0 .054.018.072v.019c.018.054.036.126.072.18 0 0 0 .019.018.019.019.018.019.036.037.054l.018.018c.018.018.036.054.054.072.018.018.054.036.073.055l.018.018c.018.018.036.036.072.036h.018l8.35 4.775c.127.073.272.109.399.109.145 0 .271-.036.398-.109l8.35-4.775h.018c.018-.018.037-.036.073-.036l.018-.018c.018-.019.054-.037.072-.055.018-.018.037-.054.055-.072l.018-.018c.018-.018.036-.036.036-.054 0 0 0-.019.018-.019.036-.054.055-.108.073-.18v-.019c0-.018.018-.054.018-.072v-.018-9.57H32.657c.019 0 .055 0 .073-.018h.018c.054-.018.127-.036.181-.072 0 0 .018 0 .018-.018.018-.018.036-.018.055-.036l.018-.018c.018-.018.054-.036.072-.055.018-.018.036-.036.054-.072l.019-.018c.018-.018.036-.036.036-.072v-.018l4.782-8.34c.144-.253.144-.56 0-.814l-4.456-7.941zm-6.195 7.525H13.983c-.2-.018-.398.054-.561.181l-.019.018-.036.036c-.145.145-.235.344-.235.58v13.386l-6.738 3.853V18.289h24.778l-3.84 6.73zM21.5 43.054L14.762 39.2V27.786l6.738 6.73v8.538zM27.332 8.32H10.85L6.992 1.61H31.19l-3.858 6.711zM10.85 9.95h16.482l3.858 6.73H6.992l3.858-6.73zm21.735 5.898l-3.84-6.712 3.84-6.711 3.84 6.711-3.84 6.712zM5.597 2.424l3.84 6.711-3.84 6.712-3.858-6.712 3.858-6.711zm8.35 45.876l-6.72-3.835 6.72-3.835 6.72 3.835-6.72 3.835zm8.694-14.943l-6.738-6.729h11.43l3.857 6.73h-8.549zm9.944-.814l-3.84-6.71 3.84-6.712 3.84 6.711-3.84 6.711z' fill-rule='nonzero' %3E%3C/path%3E%3C/svg%3E%0A")
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 60 111.98 85.72'%3E%3Cpath class='cls-2' d='m60.18,60.18h11.3l36.71,53.4v-53.4h12.17v75.36h-11.3l-36.71-53.4v53.4h-12.17V60.18Z' stroke-width='0' fill='%23fff'/%3E%3Cpath class='cls-1' d='m126.51,135.54h45.29v11.09h-45.29v-11.09Z' fill='%2300e5a4'/%3E%3C/svg%3E")
     no-repeat;
 }
 
@@ -112,19 +111,16 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 }
 
 /* Footer */
-
-.footer {
-  margin-top: 3rem;
+.footer__bottom.text--center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-@media (max-width: 996px) {
-  .footer {
-    --ifm-footer-padding-horizontal: 2rem;
-  }
+.footer__bottom.text--center a {
+  opacity: 1 !important;
 }
 
-@media (min-width: 1416px) {
-  .footer {
-    margin-top: 5rem;
-  }
+.footer__copyright {
+  color: white;
 }
diff --git a/website/src/theme/AnnouncementBar/styles.module.css b/website/src/theme/AnnouncementBar/styles.module.css
@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   height: var(--docusaurus-announcement-bar-height);
-  background-color: var(--brand-orange);
+  background-color: var(--brand-primary);
   color: var(--ifm-color-white);
 }
 

diff --git a/website/src/theme/Footer/index.tsx b/website/src/theme/Footer/index.tsx
diff --git a/website/src/theme/Footer/styles.module.css b/website/src/theme/Footer/styles.module.css
diff --git a/website/static/images/RNO-Hero.png b/website/static/images/RNO-Hero.png
diff --git a/website/static/images/nearform-logo-white.svg b/website/static/images/nearform-logo-white.svg