Infra/new landing page (#1091)

* WIP - new landing page

* Implement CodeSection

* move button styling to index page area only

* declare button style only in index page

* Connect all links

* Fix styling

* remove height from intro cover image

* Update coloss

* update favicon

* Update components page UI and reorganize

* Fix main layout

* Redesign component page API

* Small touchups

* set fixed sidebar with table of content and visuals

* Layout fixes

* Show selected prop

* Move notes out of the component header card

* Minor fixes

* fix showing empty modifiers

* Fix git-stars div

* Update RTL and accessibility

* Update Info section

* Update libraries image size

Author: ethanshar

uilib-docs/src/components/header.js

@@ -2,14 +2,14 @@ import React from 'react';
 import Link from 'gatsby-link';
 
 import './header.scss';
-import logo from '../images/logo.png';
+import logo from '../images/newDesign/headerLogo.svg';
 
 const Header = () => {
   return (
     <div className="header">
       <Link to="/">
         <img className="logo" src={logo} alt="logo"/>
-        <span className="logo-title">RNUILIB</span>
+
       </Link>
 
 

uilib-docs/src/components/header.scss

@@ -1,29 +1,23 @@
-@import "src/styles/constants";
+@import 'src/styles/constants';
 
 .header {
   position: fixed;
+  flex: 1;
   top: 0;
   width: 100%;
   height: $headerHeight;
   display: flex;
   align-items: center;
-  padding: 0px 20px;
+  padding: 0px 11%;
   background: $white;
+  z-index: 100;
+  // box-shadow: 1px 1px 5px rgba($dark10, 0.2);
+  
+  background-color: rgba(white, .15);  
+  backdrop-filter: blur(50px);
 
   .logo {
-    height: 50px;
-    border-radius: 2px;
-    padding: 4px;
-    border: 1px solid $primary;
-    vertical-align: middle;
-  }
-
-  .logo-title {
-    font-size: $text10;
-    color: $primary;
-    letter-spacing: 2px;
-    vertical-align: middle;
-    margin-left: 5px;
+    height: 40px;
   }
 
   .links {
@@ -32,10 +26,14 @@
     justify-content: flex-end;
 
     a {
-      margin-right: 40px;
-      font-size: $text20;
-      color: $primary;
+      font-size: $text40;
+      color: $dark10;
       text-decoration: none;
+      font-weight: 500;
+
+      &:not(:last-child) {
+        margin-right: 40px;
+      }
     }
   }
 }

uilib-docs/src/components/layout.js

@@ -41,18 +41,15 @@ const Layout = ({children, location}) => {
         <meta property="og:description" content={metaDescription} />
         <meta property="twitter:title" content={metaTitle} />
         <meta property="twitter:description" content={metaDescription} />
-        <link
-          rel="canonical"
-          href="https://wix.github.io/react-native-ui-lib/"
-        />
+        <link rel="canonical" href="https://wix.github.io/react-native-ui-lib/" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" integrity="sha512-9+422Bs3A87UkWfp+qV80Nfv9arhbCXKY1rxrF2seorI36mIIstMiuBfyKLF1yH1nnzQkEWq2xrzT4XU3Z+vrA==" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" />
       </Helmet>
       <Header />
       {/* <div className={`main ${!showSidebar ? 'fill' : ''}`}> */}
       <div className={`main`}>
         {showSidebar && <Navbar />}
-        <div className={`content ${showSidebar ? 'with-navbar' : ''}`}>
-          {children}
-        </div>
+        <div className={`content ${showSidebar ? 'with-navbar' : ''}`}>{children}</div>
       </div>
     </div>
   );

uilib-docs/src/components/layout.scss

@@ -1,8 +1,9 @@
-@import "src/styles/constants";
+@import 'src/styles/constants';
 
 .layout {
   display: flex;
   flex-direction: column;
+  align-items: center;
   width: 100%;
   height: 100%;
   padding-top: $headerHeight;
@@ -11,18 +12,18 @@
     display: flex;
     flex: 1;
     height: 100%;
-    border: 20px solid $white;
     border-top: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
+    // overflow-y: auto;
+    // overflow-x: hidden;
+    width: 80%;
+    min-width: 50vw;
   }
 
-  // .fill {
-  //   background: $primary;
-  // }
-
   .content {
+    display: flex;
+    flex: 1;
     width: 100%;
+
     &.with-navbar {
       padding-left: $navbarWidth;
     }

uilib-docs/src/components/navbar/index.scss

@@ -3,12 +3,14 @@
 .navbar {
   position: fixed;
   width: $navbarWidth;
-  height: calc(100% - #{$headerHeight} - 20px);
+  height: calc(100% - #{$headerHeight});
   overflow-y: auto;
   overflow-x: hidden;
   background: $primary;
   padding: 20px;
   border-radius: 2px;
+  box-shadow: 2px 0px 20px 2px rgba($primary, 0.2);
+  margin-top: 20px;
 
   .search {
     position: sticky;
@@ -86,9 +88,13 @@
     border-radius: 10px;
     cursor: pointer;
     transition: all 0.2s;
-    padding: 12px 8px;
     margin-bottom: 2px;
 
+    a {
+      display: block;
+      padding: 12px 8px;
+    }
+
     &:hover > a > .entry {
       color: $yellow20;
     }