update docs font style, remove link to wiki and update markdown pages

Author: ethanshar

markdowns/foundation/assets.md

@@ -3,10 +3,10 @@ index: 6
 path: "/foundation/assets"
 title: "Assets"
 ---
-Assets are big part of the whole UI system, whether it's an icon, placeholder or an illustration, we use them everywhere. <br>
+Assets are big part of the whole UI system, whether it's an icon, placeholder or an illustration, we use them everywhere.  
 Load assets groups and easily render them with the _Image_ component.
 
-```jsx
+```javascript
 import {Assets, Image} from 'react-native-ui-lib';
 
 Assets.loadAssetsGroup('icons', {
@@ -25,6 +25,10 @@ Assets.loadAssetsGroup('illustrations.emptyStates.', {
   noContacts: require('noContacts.png'),
 });
 
+```
+
+And use them like this
+```jsx
 // Use them with the Image component (our Image component)
 <Image assetName="icon1"/> // default assetGroup is "icons"
 <Image assetName="emptyCart" assetGroup="illustrations.placeholders"/>

markdowns/foundation/modifiers.md

@@ -3,7 +3,7 @@ index: 5
 path: "/foundation/modifiers"
 title: "Modifiers"
 ---
-As you probably noticed already, we translate our style presets into modifiers.
+As you probably noticed already, we translate our style presets into modifiers.  
 **Modifiers** will help you create a stunning UI easily and quickly.
 
 **[!IMPORTANT]** <br>

markdowns/foundation/style.md

@@ -6,7 +6,7 @@ title: "Style"
 The base foundation of each UI component is its style.
 We use basic style presets to define the rules and the style guide we follow.
 
-Our presets includes: **Colors**, **Typography**, **Shadows**, **Border Radius** and more..
+Our presets includes: **Colors**, **Typography**, **Spacings**, **Shadows**, **Border Radius** and more..
 
 The UILib already comes with a set of predefined constants and [presets](https://github.com/wix/react-native-ui-lib/tree/master/src/style).
 
@@ -15,7 +15,7 @@ You can easily use it anywhere in your code as you would have used any other con
 It's also very easy to define your own presets..
 
 ```jsx
-import {Typography, Colors} from 'react-native-ui-lib';
+import {Typography, Colors, Spacings} from 'react-native-ui-lib';
 
 Colors.loadColors({
   pink: '#FF69B4',
@@ -26,6 +26,10 @@ Typography.loadTypographies({
   h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
   h2: {fontSize: 46, fontWeight: '300', lineHeight: 64},
 });
+
+Spacings.loadSpacings({
+  page: isSmallScreen ? 16 : 20
+});
 ```
 
 and so for example, the following line

markdowns/foundation/theme-manager.md

@@ -26,7 +26,9 @@ ThemeManager.setComponentTheme('Text', {
 ThemeManager.setComponentTheme('Button', (props, context) => {
 
   return {
-    backgroundColor: props.outline ? 'black' : 'green' , // this will apply a different backgroundColor depends if the Button is an outline or not
+    // this will apply a different backgroundColor
+    // depends if the Button is an outline or not
+    backgroundColor: props.outline ? 'black' : 'green',
   };
 });
 ```

markdowns/getting-started/setup.md

@@ -8,12 +8,12 @@ title: "Setup"
 Before you start.  
 Starting version 5.12.0 UILib exports individual packages so you can import only what you need.  
 
-**Why packages are important?**
+### Why packages are important?
 - Smaller bundle size. By importing only the components you need, your bundle size will be reduced to the files that were imported.
 - Quicker setup. Avoid installing peer dependencies and linking native depdencies that you don't need. 
 
-**How does it work?**
-```
+### How does it work?
+```javascript
 import View from 'react-native-ui-lib/view';
 import Text from 'react-native-ui-lib/text';
 import {KeyboardTrackingView, KeyboardAwareInsetsView, KeyboardRegistry, KeyboardAccessoryView, KeyboardUtils} from 'react-native-ui-lib/keyboard';
@@ -26,7 +26,7 @@ import {KeyboardTrackingView, KeyboardAwareInsetsView, KeyboardRegistry, Keyboar
 First, run `npm install react-native-ui-lib`
 
 ### Peer Dependencies
-:information_source: If you're planning on using speicific components, see **UILib Packages**.  
+If you're planning on using specific components, see **UILib Packages**.  
 *For some packages you might still need to install one of the peer dependencies*
 
 If you want it all, install **peer dependencies**
@@ -38,7 +38,7 @@ cd ios && pod install
 
 
 ## Install Native Dependencies (must)
-:information_source: If you're planning on using speicific components, see **UILib Packages**.  
+If you're planning on using speicific components, see **UILib Packages**.  
 *For some packages you might still need to install one of the native dependencies*
 
 Some of the components are using these native dependencies, they are defined as peer dependencies so you can install the version that suit you.  
@@ -54,11 +54,10 @@ It's important to run `cd ios && pod install` if you are using a component that
 
 ## Demo App
 
-Our demo app is located [here](https://github.com/wix/react-native-ui-lib/tree/master/demo).
-
-To run it:
+Our demo app is located [here](https://github.com/wix/react-native-ui-lib/tree/master/demo). To run it:
 
-- install dependencies: `npm install`
+- Clone the repo
+- Install dependencies: `npm install`
 - (for iOS) `cd ios && pod install && cd ..`
-- start the packager: `npm start`
-- run: `npm run ios` or `npm run android` (or within Xcode or Android Studio)
+- Start the packager: `npm start`
+- Build the app: `npm run ios` or `npm run android` (or from Xcode or Android Studio)

uilib-docs/src/components/header.js

@@ -18,9 +18,6 @@ const Header = () => {
         <a target="_blank" href="https://github.com/wix/react-native-ui-lib">
           GitHub
         </a>
-        <a target="_blank" href="https://github.com/wix/react-native-ui-lib/wiki">
-          Uncyclo
-        </a>
       </div>
     </div>
   );

uilib-docs/src/styles/components.scss

@@ -1,13 +1,13 @@
 h1 {
-  font-weight: 400;
+  font-weight: 500;
 }
 
 h2 {
   font-weight: 500;
 }
 
 h3 {
-  font-weight: 500;
+  font-weight: 600;
 }
 
 h4 {
@@ -21,3 +21,7 @@ h5 {
 p {
   font-size: $text30;
 }
+
+strong {
+  font-weight: 600;
+}

uilib-docs/src/styles/global.scss

@@ -1,4 +1,5 @@
 @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');
 @import "src/styles/constants";
 @import "src/styles/components";
 
@@ -7,7 +8,8 @@ body {
   width: 100%;
   height: 100%;
   margin: 0;
-  font-family: Montserrat, Geneva, sans-serif;
+  // font-family: Montserrat, Geneva, sans-serif;
+  font-family: Poppins, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 

uilib-docs/src/templates/markdown.scss

@@ -21,20 +21,25 @@
     border-radius: 4px;
     padding: 16px;
     max-width: 60vw;
+    box-shadow: 2px 2px 2px $dark60;
 
     code {
       background: transparent;
       color: $dark10;
+      padding: 0;
     }
   }
 
   code {
     font-size: 16px;
+    line-height: 1.3;
     display: inline;
     word-break: break-word;
     width: 100%;
     background: $dark70;
     color: $primary;
+    padding: 6px 10px;
+    border-radius: 4px;
   }
 
   li {