wix · ethanshar · Mar 20, 2025 · Mar 19, 2025 · Mar 19, 2025 · Mar 19, 2025
diff --git a/docuilib/docusaurus.config.js b/docuilib/docusaurus.config.js
@@ -56,7 +56,6 @@ const darkCodeTheme = themes.dracula;
       ({
         metadata: [
           {name: 'title', content: 'React Native UI Lib'},
-
           {
             name: 'keywords',
             content: 'design system, react native, react, mobile, web, ui library, components library'
@@ -83,68 +82,44 @@ const darkCodeTheme = themes.dracula;
           //... other Algolia params
         },
         navbar: {
-          title: 'RNUILib',
-          hideOnScroll: true,
           logo: {
-            alt: 'RNUILib Logo',
-            src: 'img/logo.png'
+            alt: 'RNUI Logo',
+            src: 'img/logo_rnui.png',
+            width: 139,
+            height: 53
           },
           items: [
             {
               type: 'doc',
               docId: 'getting-started/setup',
               position: 'left',
-              label: 'Guides'
+              label: 'GETTING STARTED'
+            },
+            {
+              type: 'doc',
+              docId: 'foundation/style',
+              position: 'left',
+              label: 'FOUNDATION'
             },
             {
               type: 'doc',
               docId: 'components/basic/View',
               position: 'left',
-              label: 'Components'
+              label: 'COMPONENTS'
             },
-            // {to: '/blog', label: 'Blog', position: 'left'},
             {
               href: 'https://github.com/wix/react-native-ui-lib',
-              label: 'GitHub',
-              position: 'right'
+              position: 'right',
+              html: `
+                <div style="display: flex; align-items: center;">
+                  <span style="margin-right: 6px;">GitHub</span>
+                  <image src="https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/site/externalSmall.png" alt="external link icon" width="17" height="16" />
+                </div>
+              `
             }
           ]
         },
         footer: {
-          style: 'dark',
-          links: [
-            {
-              title: 'Links',
-              items: [
-                {
-                  label: 'Docs',
-                  to: '/docs/getting-started/setup'
-                },
-                {
-                  label: 'GitHub',
-                  href: 'https://github.com/wix/react-native-ui-lib'
-                },
-                {
-                  label: 'Expo-Snack',
-                  href: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android'
-                }
-              ]
-            },
-
-            {
-              title: 'Community',
-              items: [
-                {
-                  label: 'Discord',
-                  href: 'https://discord.gg/2eW4g6Z'
-                },
-                {
-                  label: 'Twitter',
-                  href: 'https://twitter.com/rnuilib'
-                }
-              ]
-            }
-          ],
           copyright: `© 2006-${new Date().getFullYear()} Wix.com, Inc.`
         },
         prism: {

diff --git a/docuilib/sidebars.js b/docuilib/sidebars.js
@@ -30,23 +30,24 @@ const componentsCategories = {
 module.exports = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}]
-
   guidesSidebar: [
     {
       type: 'category',
       label: 'Getting Started',
-      collapsed: false,
+      collapsible: false,
       items: [
         {
           type: 'autogenerated',
           dirName: `getting-started`
         }
       ]
-    },
+    }
+  ],
+  foundationSidebar: [
     {
       type: 'category',
       label: 'Foundation',
-      collapsed: false,
+      collapsible: false,
       items: [
         {
           type: 'autogenerated',
@@ -60,7 +61,6 @@ module.exports = {
       type: 'category',
       label: 'Components',
       collapsible: false,
-      // items: ['Basic', 'Lists', 'Form', 'Overlays', 'Layout', 'Keyboard', 'Incubator'].map(category => {
       items: Object.keys(componentsCategories)
         .sort()
         .map(category => {

diff --git a/docuilib/src/components/CustomLayout.tsx b/docuilib/src/components/CustomLayout.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
 import DocRoot from '@theme/DocRoot';
-import StandWithUkraine from '@site/src/components/StandWithUkraine';
 
 export default function CustomLayout(props) {
   return (
-    <>
-      <StandWithUkraine/>
-      <DocRoot {...props}/>
-    </>
+    <DocRoot {...props}/>
   );
 }
diff --git a/docuilib/src/css/custom.css b/docuilib/src/css/custom.css
@@ -9,14 +9,15 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #5848ff;
-  --ifm-color-primary-dark: #4633E9;
-  --ifm-color-primary-darker: #3220CD;
-  --ifm-color-primary-darkest: #3220CD;
-  --ifm-color-primary-light: #5A48F5;
-  --ifm-color-primary-lighter: #8579FF;
-  --ifm-color-primary-lightest: #B2ABFF;
+  --ifm-color-primary: #1b2430;
+  --ifm-color-primary-dark: #18202b;
+  --ifm-color-primary-darker: #171f29;
+  --ifm-color-primary-darkest: #131922;
+  --ifm-color-primary-light: #1e2835;
+  --ifm-color-primary-lighter: #1f2937;
+  --ifm-color-primary-lightest: #232f3e;
   --ifm-code-font-size: 95%;
+  --ifm-font-color-base: #20303C;
 }
 
 .docusaurus-highlight-code-line {
@@ -30,6 +31,165 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+/** Docusaurus Navbar */
+
+.navbar {
+  height: 86px;
+  padding-top: 26px;
+  padding-bottom: 16px;
+}
+.navbar__logo {
+  position: relative;
+  top: -10px;
+  height: 53px;
+  margin-right: 76px;
+  margin-left: 36px;
+}
+.navbar__inner {
+  align-items: flex-end;
+}
+.navbar__link {
+  padding: 0 10px;
+  margin: 0 16px;
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: 0.3px;
+  line-height: 38px;
+}
+.navbar__link--active {
+  font-weight: 700;
+  border-bottom: 2px solid #20303C;
+}
+
+/* Algolia search input */
+
+.navbarSearchContainer_Bca1 {
+  margin-right: 28px;
+}
+.DocSearch-Button {
+  border-radius: 8px !important;
+  background-color: #F9FAFB !important;
+  border: 1px solid #D2D5DA !important;
+  color: #6E7881 !important;
+  width: 279px;
+  height: 44px !important;
+  padding: 10px 20px !important;
+}
+.DocSearch-Search-Icon {
+  width: 16px !important;
+  height: 16px !important;
+  stroke-width: 3 !important;
+}
+.DocSearch-Button .DocSearch-Search-Icon {
+  color: #4D5963 !important;
+}
+.DocSearch-Button-Placeholder {
+  padding: 0 12px !important;
+}
+.DocSearch-Button-Keys {
+  display: none !important;
+}
+
+/** Docusaurus Menu */
+
+.menu__link--sublist-caret:after, .menu__caret:before {
+  background-size: 20px;
+  filter: invert(0) sepia(0) saturate(0) hue-rotate(0) brightness(0) contrast(100%);
+}
+.menu {
+  margin-left: 24px;
+  margin-right: 24px;
+  margin-bottom: 80px;
+}
+.menu__list .menu__list:has(ul) {
+  padding-left: 0;
+}
+
+.theme-doc-sidebar-item-category:is(.theme-doc-sidebar-item-category-level-1) {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #D2D6D8;
+}
+.menu__list-item-collapsible:has(.menu__link:not(.menu__link--sublist)) a {
+  color: #A6ACB1 !important;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+  margin-top: 24px;
+}
+.menu__list-item-collapsible:has(.menu__link:not(.menu__link--sublist)):hover {
+  background: #FFF;
+}
+.menu__link {
+  color: #20303C;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+.menu__link--active {
+  font-weight: 700;
+}
+
+/** Docusaurus Breadcrumbs */
+
+.breadcrumbs__link {
+  color: #4D5963;
+}
+.breadcrumbs__item--active .breadcrumbs__link {
+  color: #20303C;
+  background-color: #FFF;
+}
+.breadcrumbHomeIcon_YNFT {
+  color: #20303C;
+}
+
+/** Custom Footer */
+
+.footer {
+  border-top: 1px solid #D2D6D8;
+  background-color: #F8F9FA;
+  padding-top: 64px;
+  padding-bottom: 107px;
+  justify-content: center;
+}
+.footer__container {
+  justify-content: center;
+  border-top: 1px solid #D2D6D8;
+  padding-top: 20px;
+  margin-left: 350px;
+  margin-right: 350px;
+}
+.footer__links {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 40px;
+}
+.footer__section {
+  width: 200px;
+}
+.right__section {
+  display: flex;
+  justify-content: end;
+}
+.text__link {
+  margin-right: 24px;
+}
+.icon__link {
+  margin-right: 16px;
+}
+.footer__copyright {
+  color: #6D7280;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 130%;
+}
+
+
+/** Component page tabs */
+
 .main-tabs {
   margin: 40px 0 60px 0;
   border-bottom: 2px solid #F0F2F5;

diff --git a/docuilib/src/pages/index.tsx b/docuilib/src/pages/index.tsx
@@ -5,7 +5,6 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 // import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 // import HomepageFeatures from '../components/HomepageFeatures';
 
-import StandWithUkraine from '../components/StandWithUkraine';
 import MainSection from '../components/MainSection';
 import ComponentsSection from '../components/ComponentsSection';
 import FeaturesSection from '../components/FeaturesSection';
@@ -15,20 +14,17 @@ import LibrariesSection from '../components/LibrariesSection';
 export default function Home(): JSX.Element {
   // const {siteConfig} = useDocusaurusContext();
   return (
-    <>
-      <StandWithUkraine/>
-      <Layout
-        /* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
-      >
-        <main>
-          {/* Note: BrowserOnly allows using `localStorage` in MainSection, otherwise docusaurus build fail */}
-          <BrowserOnly>{() => <MainSection/>}</BrowserOnly>
-          <ComponentsSection/>
-          <FeaturesSection/>
-          <CodeSection/>
-          <LibrariesSection/>
-        </main>
-      </Layout>
-    </>
+    <Layout
+      /* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
+    >
+      <main>
+        {/* Note: BrowserOnly allows using `localStorage` in MainSection, otherwise docusaurus build fail */}
+        <BrowserOnly>{() => <MainSection/>}</BrowserOnly>
+        <ComponentsSection/>
+        <FeaturesSection/>
+        <CodeSection/>
+        <LibrariesSection/>
+      </main>
+    </Layout>
   );
 }