Docs site redesign fixes

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/src/css/custom.css

@@ -1,8 +1,8 @@
 /**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
+* Any CSS included here will be global. The classic template
+* bundles Infima by default. Infima is a CSS framework designed to
+* work well for content-centric websites.
+*/
 
 @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@@ -151,23 +151,32 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   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;
+  display: flex;
+}
+.footer__section__item a {
+  display: flex;
+  align-items: center;
+}
+.footer__section__item span {
+  margin-right: 4px;
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: 0.3px;
+  line-height: 38px;
 }
 .right__section {
   display: flex;
@@ -187,7 +196,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   line-height: 130%;
 }
 
-
 /** Component page tabs */
 
 .main-tabs {

docuilib/src/theme/Footer/index.tsx

@@ -25,35 +25,39 @@ function Footer() {
           </div>
 
           <div className="footer__section">
-            <a
-              href="https://github.com/wix/react-native-ui-lib"
-              target="_blank"
-              rel="noreferrer noopener"
-              aria-label="Open gitHub"
-              className="text__link"
-            >
-              <span>GitHub</span>
-              <img
-                src="https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/site/externalSmall.png"
-                alt="external link icon"
-                width="17"
-                height="16"
-              />
-            </a>
-            <a
-              href="https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android"
-              target="_blank"
-              rel="noreferrer noopener"
-              aria-label="Open expo snack"
-            >
-              <span>Expo-Snack</span>
-              <img
-                src="https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/site/externalSmall.png"
-                alt="external link icon"
-                width="17"
-                height="16"
-              />
-            </a>
+            <div className="footer__section__item">
+              <a
+                href="https://github.com/wix/react-native-ui-lib"
+                target="_blank"
+                rel="noreferrer noopener"
+                aria-label="Open gitHub"
+                className="text__link"
+              >
+                <span>GitHub</span>
+                <img
+                  src="https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/site/externalSmall.png"
+                  alt="external link icon"
+                  width="17"
+                  height="16"
+                />
+              </a>
+            </div>
+            <div className="footer__section__item">
+              <a
+                href="https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android"
+                target="_blank"
+                rel="noreferrer noopener"
+                aria-label="Open expo snack"
+              >
+                <span>Expo-Snack</span>
+                <img
+                  src="https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/site/externalSmall.png"
+                  alt="external link icon"
+                  width="17"
+                  height="16"
+                />
+              </a>
+            </div>
           </div>
 
           <div className="footer__section right__section">