Docs/mobie responsive (#1164)

* Change style for header and navbar

* Fix docs introSection to be responsive on mobile

* Add responsive mobile support to RTL&Accessibility section

* Fix responsive for CodeSection

* Fix Libraries Section responsivess

* Fix Info section responsiveness

* minor responsive fixes

* more fixes

Author: ethanshar

uilib-docs/src/components/header.scss

@@ -11,10 +11,10 @@
   padding: 0px 11%;
   background: $white;
   z-index: 100;
-  // box-shadow: 1px 1px 5px rgba($dark10, 0.2);
+  box-shadow: 1px 1px 5px rgba($dark10, 0.2);
 
-  background-color: rgba(white, .15);  
-  backdrop-filter: blur(50px);
+  // background-color: rgba(white, .15);  
+  // backdrop-filter: blur(50px);
 
   .logo {
     height: 40px;

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

@@ -6,27 +6,27 @@
   height: calc(100% - #{$headerHeight});
   overflow-y: auto;
   overflow-x: hidden;
-  background: $primary;
   padding: 20px;
+  padding-top: 0;
   border-radius: 2px;
-  box-shadow: 2px 0px 20px 2px rgba($primary, 0.2);
   margin-top: 20px;
+  border-right: 2px solid $dark80;
 
   .search {
     position: sticky;
+    background-color: $white;
+    border-bottom: 2px solid $secondary;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     padding: 10px;
-    background-color: $secondary;
     box-sizing: border-box;
     margin-bottom: 10px;
     width: 100%;
-    transition: width 0.3s;
-    border-radius: 2px;
     z-index: 10;
     overflow: hidden;
+    transition: width 0.3s;
 
     &:focus-within {
       width: 100%;
@@ -41,7 +41,7 @@
       border: 0;
       padding: 5px;
       background: transparent;
-      background: $dark60;
+      background: $dark80;
       border-radius: 20px;
       display: flex;
       align-items: center;
@@ -100,7 +100,7 @@
     }
 
     .entry {
-      color: $white;
+      color: $dark10;
       font-size: 0.9em;
       font-weight: 500;
       width: 100%;
@@ -114,13 +114,13 @@
     }
 
     .nested {
-      border-left: 1px solid $white;
+      border-left: 1px solid $dark60;
       margin-top: 10px;
       padding-left: 10px;
     }
 
     &.separator {
-      border-bottom: 1px solid $white;
+      border-bottom: 2px solid $dark80;
       width: 100%;
       margin: 8px 0;
       padding: 0;

uilib-docs/src/pages/sections/CodeSection.jsx

@@ -19,7 +19,7 @@ export default () => {
 
   return (
     <div className="code-section">
-      <h2>Effortless App Building Using Our Toolset</h2>
+      <h2 className="headline">Effortless App Building Using Our Toolset</h2>
       <div className="code-example">
         <TabBar onChangeIndex={setSelectedTab} selectedIndex={selectedTab} />
         <Tab {...tabs[selectedTab]} />

uilib-docs/src/pages/sections/CodeSection.scss

@@ -2,10 +2,19 @@
 
 .code-section {
   padding-bottom: 5%;
+
+  .headline {
+    text-align: center;
+  }
+
   .code-example {
     display: flex;
     flex-direction: column;
-    width: 35vw;
+    width: 80vw;
+
+    @include desktop {
+      width: 35vw;
+    }
 
     .view-docs-button {
       margin-top: 40px;
@@ -15,8 +24,13 @@
 
   .tabs {
     display: flex;
-    height: 46px;
     border: 1px solid;
+    height: 32px;
+
+    @include desktop {
+      height: 46px;
+    }
+
     .tab {
       flex: 1;
       display: flex;
@@ -41,7 +55,7 @@
     .code {
       background-color: $black;
       padding: 20px;
-      min-width: 600px;
+      width: 100%;
     }
   }
 }

uilib-docs/src/pages/sections/ComponentsSection.jsx

@@ -7,7 +7,7 @@ export default () => {
   return (
     <div className="components">
       <div className="components-inner">
-        <h2>Build Stunning Apps Using Over 60  Beautiful Components </h2>
+        <h2 className="headline">Build Stunning Apps Using Over 60  Beautiful Components </h2>
         <p>
           Basic components like Button, Avatar and Card and more sophisticated ones like Hints, ColorPicker and Drawer.
         </p>

uilib-docs/src/pages/sections/ComponentsSection.scss

@@ -12,15 +12,23 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
 
     p {
-      width: 40%;
-      min-width: 400px;
+      @include desktop {
+        width: 40%;
+        min-width: 200px;
+      }
     }
   }
 
   img {
     width: 100vw;
     min-width: 400px;
+    margin-top: 20px;
+
+    @include desktop {
+      margin-top: 0;
+    }
   }
 }

uilib-docs/src/pages/sections/InfoSection.scss

@@ -6,9 +6,16 @@
   justify-content: space-between;
   padding: 40px 0;
 
+  & > div:first-child {
+    flex: 1;
+  }
+
   .column {
     margin-right: 20px;
-    min-width: 200px;
+
+    @include desktop {
+      min-width: 200px;
+    }
 
     .title {
       margin: 0;

uilib-docs/src/pages/sections/IntroSection.jsx

@@ -8,25 +8,23 @@ export default () => {
   return (
     <div className="intro">
       <img src={introCover} className="intro-cover" />
-      <div className="intro-inner">
-        <div className="intro-content">
-          <p>
-            <span className="lib-name">RNUI</span> is a UI Toolset & Components Library for React Native
-          </p>
-          <div className="git-stars">
-            <img src={goldStar} />
-            <span className="star-count">2.7k</span>
-          </div>
+      <div className="intro-content">
+        <p>
+          <span className="lib-name">RNUI</span> is a UI Toolset & Components Library for React Native
+        </p>
+        <div className="git-stars">
+          <img src={goldStar} />
+          <span className="star-count">2.8k</span>
+        </div>
 
-          <div className="buttons">
-            <Link to="/getting-started/setup">
-              <button className="dark">View Docs</button>
-            </Link>
+        <div className="buttons">
+          <Link to="/getting-started/setup">
+            <button className="dark">View Docs</button>
+          </Link>
 
-            <a href="https://snack.expo.io/@ethanshar/rnuilib_snack" target="_blank" rel="noopener noreferrer">
-              <button>Expo-Snack Demo</button>
-            </a>
-          </div>
+          <a href="https://snack.expo.io/@ethanshar/rnuilib_snack" target="_blank" rel="noopener noreferrer">
+            <button>Expo-Snack Demo</button>
+          </a>
         </div>
       </div>
     </div>

uilib-docs/src/pages/sections/IntroSection.scss

@@ -1,30 +1,42 @@
 @import 'src/styles/constants';
 .intro {
   position: relative;
-  height: 100vh;
+  height: 75vh;
   width: 100%;
   display: flex;
   justify-content: center;
 
+  @include desktop {
+    height: 100vh;
+  }
+
   .intro-cover {
     position: absolute;
-    width: 100vw;
-  }
+    width: 180vw;
+    right: -10vw;
+    opacity: 0.3;
 
-  .intro-inner {
-    display: flex;
+    @include desktop {
+      width: 100vw;
+      opacity: 1;
+    }
   }
 
   .intro-content {
     position: absolute;
-    top: 20vw;
-    left: 7vw;
+    z-index: 1;
     display: flex;
     flex-direction: column;
-    z-index: 1;
-    width: 40%;
-    justify-content: center;
     align-items: flex-start;
+    top: 15vh;
+    text-align: center;
+
+    @include desktop() {
+      top: 15vw;
+      left: 7vw;
+      width: 40%;
+      text-align: start;
+    }
 
     > p {
       font-size: 3em;
@@ -41,6 +53,11 @@
       align-items: center;
       border: 1px solid;
       border-radius: 2px;
+      align-self: center;
+
+      @include desktop {
+        align-self: flex-start;
+      }
 
       img {
         padding: 0 4px;
@@ -58,9 +75,22 @@
 
     .buttons {
       margin-top: 40px;
+      align-self: center;
+      display: flex;
+      flex-direction: column;
+
+      @include desktop() {
+        align-self: flex-start;
+        flex-direction: row;
+      }
 
       > :first-child {
-        margin-right: 10px;
+        margin-bottom: 10px;
+
+        @include desktop() {
+          margin-right: 10px;
+          margin-bottom: 0;
+        }
       }
     }
   }

uilib-docs/src/pages/sections/LibrariesSection.scss

@@ -5,35 +5,47 @@
   padding: 0 20%;
   height: 250px;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   background-color: $primary;
   color: $white;
 
+  @include desktop {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   .headline {
-    width: 20%;
-    min-width: 400px;
-    align-self: center;
-    margin-right: 40px;
     font-weight: bold;
+    text-align: center;
+    margin-bottom: 40px;
+
+    @include desktop {
+      text-align: start;
+      align-self: center;
+      width: 20%;
+      min-width: 400px;
+      margin-right: 40px;
+      margin-bottom: 0;
+    }
   }
 
   .libraries {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 60%;
-    // border: 1px solid;
+
+    @include desktop {
+      width: 60%;
+    }
 
     .library {
       text-align: center;
       color: $white;
-      margin-left: 40px;
 
       img {
-        max-height: 75px;
-        height: 4vw;
-        min-height: 45px;
+        max-height: 60px;
+        height: 7vw;
         transition: 0.3s all;
       }
 

uilib-docs/src/pages/sections/RtlAndAccessibilitySection.jsx

@@ -8,7 +8,7 @@ export default () => {
   return (
     <div className="rtl-accessibility-section">
       <h2>Full, out-of-the-box support to RTL and Accessibility</h2>
-      <div className="images">
+      <div className="cards">
         <Card image={crossPlatform} title="Cross Platform" description="We got you covered on both platforms" />
         <Card image={accessibility} title="Accessibility" description="Out-of-the-box Accessibility support" />
         <Card image={rtl} title="RTL" description="Everything should be aligned right" />