Copy-editing of the docs (#1571)

* Copy-editing

* Basic copy-editing

Co-authored-by: Ethan Sharabi <[email protected]>

Author: kgshv

markdowns/foundation/assets.md

@@ -3,8 +3,8 @@ 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.  
-Load assets groups and easily render them with the _Image_ component.
+Assets are a big part of the whole UI system, whether it's an icon, placeholder or an illustration, we use them everywhere.  
+Load groups of assets and easily render them with the _Image_ component.
 
 ```javascript
 import {Assets, Image} from 'react-native-ui-lib';

markdowns/foundation/colors.md

@@ -5,7 +5,7 @@ title: "Colors"
 ---
 
 #### loadColors
-Load set of colors to use in the app.  
+Load a set of colors to be used in the app.  
 These colors will be accessible through the Colors class and as modifiers.
 usage:
 ```javascript
@@ -28,8 +28,8 @@ import {View, Text, Colors} from 'react-native-ui-lib';
 ```
 
 #### loadSchemes
-Load set of scheme colors to support dark/light mode.  
-This features works hand in hand with our modifiers 
+Load a set of scheme colors to support dark/light mode.  
+This feature works hand in hand with our modifiers 
 
 ```js
 Colors.loadSchemes({
@@ -73,11 +73,11 @@ usage:
 import {Colors} from 'react-native-ui-lib';
 
 Colors.getColorTint(Colors.green30, 70); // will return the value of Colors.green70
-Colors.getColorTint('#ff2442, 50); // will return the 5th tint in an autogenerate 8 tints palette based on #ff2442
+Colors.getColorTint('#ff2442', 50); // will return the 5th tint in an autogenerate 8-tints palette based on '#ff2442'
 ```
 
 #### isDark
-returns if a color is considered dark (bright colors will return false)
+returns `true` if a color is considered dark (bright colors will return `false`)
 ```js
 import {Colors} from 'react-native-ui-lib';
 

markdowns/foundation/modifiers.md

@@ -3,14 +3,14 @@ index: 5
 path: "/foundation/modifiers"
 title: "Modifiers"
 ---
-As you probably noticed already, we translate our style presets into modifiers.  
-**Modifiers** will help you create a stunning UI easily and quickly.
+As you have probably noticed already, we translate our style presets into modifiers.  
+**Modifiers** help you create a stunning UI easily and quickly.
 
 **[!IMPORTANT]** <br>
-Make sure to use modifiers only on uilib components, some modifiers can cause issues on Android when used on React Native components directly.
+Make sure to use modifiers only on UILib components, as some modifiers can cause issues on Android when used on React Native components directly.
 
 ## Layout Modifiers
-Use our alignment props to quickly position your view's content without getting confused calculating all these flex rules.
+Use our alignment properties to quickly position the content of your view without getting confused calculating all those flex rules.
 - flex - apply `flex:1` on a view 
 - flex-[value] - When you want to control the flex value
 - flexS - FlexShrink 
@@ -51,7 +51,7 @@ Use our alignment props to quickly position your view's content without getting
 <img src="https://cloud.githubusercontent.com/assets/1780255/24798566/4de91efc-1b9f-11e7-9974-e06e3daa7c63.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798569/50dc99a4-1b9f-11e7-8231-fbcbb139a010.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798571/52766d08-1b9f-11e7-95a3-b2b262e81170.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798572/545b7abe-1b9f-11e7-9098-409ceee6ff22.png" width="160"/> <img src="https://cloud.githubusercontent.com/assets/1780255/24798575/55e3c4f4-1b9f-11e7-998d-7986a038abb6.png" width="160"/>
 
 ## Spacing Modifiers
-It's always important to use your margins and paddings correctly, with modifiers it is simpler to do so.
+It's always important to use your margins and paddings correctly, and that's also easier to do with modifiers:
 
 - padding-[value] - will add padding to all corners (e.g. padding-30 will add 30 pt of padding)
 - paddingL-[value] - Left padding
@@ -81,16 +81,16 @@ It's always important to use your margins and paddings correctly, with modifiers
 <View margin-s5 padding-s2>...</View>
 ```
 ## Position Modifiers
-Use the position modifiers to quickly set an absolute position to your views
+Use the position modifiers to quickly set an absolute position for your views.
 - `abs` will set the absolute position on your View
-- `absL`, `absT`, `absR`, `absB` - set the absolute position and align to Left, Top, Right, Botton side accordingly
+- `absL`, `absT`, `absR`, `absB` - set the absolute position and align to Left, Top, Right, Bottom accordingly
 - `absH` and `absV` - position absolute and stretch horizontally or vertically
 - `absF` will set the absolute position and fill the parent view (similar to StyleSheet.absoluteFillObject)
 
 ## Styling Modifiers
-Last type of modifiers are for styling your components
+The last type of modifiers is for styling your components
 
-- [colorKey] - Controls text components' color
+- [colorKey] - Controls the color of text components
 - background-[colorKey] (or bg-[colorKey]) - Background color 
 
 ```jsx
@@ -99,13 +99,13 @@ Last type of modifiers are for styling your components
 <TouchableOpacity bg-red30/>
 ```
 
-- [typographyKey] - Controls text components' typography
+- [typographyKey] - Controls the typography of text components 
 ```jsx
 <Text text70>...</Text>
 <TextInput text80/>
 ```
 
-- br[borderRadiusKey] - Set the view's border radius (e.g. `br10`, `br20`, .., `br60`)
+- br[borderRadiusKey] - Set the border radius for the view (e.g. `br10`, `br20`, .., `br60`)
 ```jsx
 <View br40>...</View>
 ```
@@ -116,4 +116,4 @@ You can load your own presets and use them as modifiers.
 
 
 
-Check out [this example](/react-native-ui-lib/getting-started/usage) where we use most of these props
+Check out [this example](/react-native-ui-lib/getting-started/usage) where we use most of these props.

markdowns/foundation/style.md

@@ -6,11 +6,11 @@ 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**, **Spacings**, **Shadows**, **Border Radius** and more..
+Our presets include: **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).
 
-You can easily use it anywhere in your code as you would have used any other constant value, or as a component modifier.
+You can easily use it anywhere in your code (as you would use any other constant value), or as a component modifier.
 
 It's also very easy to define your own presets..
 
@@ -32,12 +32,12 @@ Spacings.loadSpacings({
 });
 ```
 
-and so for example, the following line
+For example, the following line
 
 ```jsx
 <Text h1 pink>Hello World</Text>
 ```
 Will generate this text
 <img src="https://cloud.githubusercontent.com/assets/1780255/24792314/296b7ebc-1b86-11e7-8580-9252d1ddf5d9.png" width="250"/>
 
-It will use the _h1_ preset for typography and the _pink_ color value we set to style the Text element. 
+It will use the _h1_ preset for typography and the _pink_ color value we set to style the Text element.

markdowns/foundation/theme-manager.md

@@ -3,12 +3,12 @@ index: 7
 path: "/foundation/theme-manager"
 title: "Theme Manager"
 ---
-Use the `ThemeManager` to set default global behavior for your app. 
+Use `ThemeManager` to set default global behavior for your app.
 
 #### setComponentTheme
 
-Set default props for a component by passing an object or a callback (for dynamic, runtime default props)  
-The default value will be overridden if a prop is being passed to the component instance. (See `setComponentForcedTheme` for that)
+Set default props for a component by passing an object or a callback (for dynamic, runtime default props)
+The default value will be overridden if a prop is being passed to the component instance (see `setComponentForcedTheme` for that).
 
 - `ThemeManager.setComponentTheme(componentName, defaultPropsObject);`
 - `ThemeManager.setComponentTheme(componentName, componentProps => newDefaultPropsObject);`
@@ -28,14 +28,14 @@ ThemeManager.setComponentTheme('Button', (props, context) => {
 
   return {
     // this will apply a different backgroundColor
-    // depends if the Button is an outline or not
+    // depending on whether the Button has an outline or not
     backgroundColor: props.outline ? 'black' : 'green',
   };
 });
 ```
 
 #### setComponentForcedTheme
-Same as `setComponentTheme` only it can't be overridden by props passed to the component. 
+Same as `setComponentTheme`, but can't be overridden by props passed to the component. 
 
 Example
 

markdowns/getting-started/setup.md

@@ -4,13 +4,13 @@ path: "/getting-started/setup"
 title: "Setup"
 ---
 
-## UILib Packages
-Before you start.  
-Starting version 5.12.0 UILib exports individual packages so you can import only what you need.  
+## Before You Start: UILib Packages
+
+Starting with version 5.12.0 UILib exports individual packages so you can import only what you need.  
 
 ### 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. 
+- Quicker setup. Avoid installing peer dependencies and linking native dependencies you don't need. 
 
 ### How does it work?
 ```javascript
@@ -26,10 +26,10 @@ import {KeyboardTrackingView, KeyboardAwareInsetsView, KeyboardRegistry, Keyboar
 First, run `npm install react-native-ui-lib`
 
 ### Peer Dependencies
-If you're planning on using specific components, see **UILib Packages**.  
+If you plan on using specific components, see **UILib Packages** above.
 *For some packages you might still need to install one of the peer dependencies*
 
-If you want it all, install **peer dependencies**
+If you want it all, install **peer dependencies**:
 ```js
 npm i react-native-gesture-handler react-native-reanimated @react-native-community/blur @react-native-community/datetimepicker @react-native-community/netinfo @react-native-picker/picker
 
@@ -38,11 +38,12 @@ cd ios && pod install
 
 
 ## Install Native Dependencies
-If you're planning on using specific components, see **UILib Packages**.  
+If you plan on using specific components, see **UILib Packages**.  
 *For some packages you might still need to install one of the native dependencies*
 
-Some of the components are using the following native dependencies, they are defined as peer dependencies so you can install the version that suit you.  
-It's important to run `cd ios && pod install` if you are using a component that has native dependency 
+Some of the components are using the native dependencies listed below - those are defined as peer dependencies, so you can install the version that suits you.  
+
+> It's important to run `cd ios && pod install` if you are using a component that has a native dependency.
 
 - "react-native-gesture-handler": ">=1.9.0" (mandatory)
 - "react-native-reanimated": ">=1.13.2" (mandatory)
@@ -59,4 +60,4 @@ Our demo app is located [here](https://github.com/wix/react-native-ui-lib/tree/m
 - Install dependencies: `npm install`
 - (for iOS) `cd ios && pod install && cd ..`
 - Start the packager: `npm start`
-- Build the app: `npm run ios` or `npm run android` (or from Xcode or Android Studio)
+- Build the app: `npm run ios` or `npm run android` (or from Xcode or Android Studio).

markdowns/getting-started/usage.md

@@ -6,6 +6,12 @@ title: "Usage"
 This is a quick example of how to use our basic components, modifiers and presets to generate a good looking screen. <br>
 For detailed information please go over the other sections: Style, Modifiers, Components...
 
+<!--
+COPY-EDITOR NOTE 
+
+The renders of the phone screen image I get in both Chrome and in the VSCode Markdown preview show the phone image overlaying the code part and the text above it - please check the layout of the image in the rendered docs.
+-->
+
 <img style="float: right; margin-top: -70px" src="https://cloud.githubusercontent.com/assets/1780255/24791489/f5db80f4-1b82-11e7-8538-5a3388fb4345.png" width=300 />
 
 ```jsx

markdowns/getting-started/v5.md

@@ -7,9 +7,9 @@ title: "v4 -> v5"
 
 ### Presets Updates
 
-- **Typography** - Now provide a full set of typographies in all weights 
+- **Typography** - Now provides a full set of typographies in all weights
 - **Colors**
-- **Spacings** - unified both platforms to the same spacing presets (multiples of 4s)
+- **Spacings** - Unified both platforms to the same spacing presets (multiples of 4s).
 
 --- 
 
@@ -33,7 +33,7 @@ props change:
 Old implementation was deprecated. See new [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js)
 
 #### TextInput
-Component renamed to `TextField` and now enhanced with more form capabilities like validations. <br>
+Component renamed to `TextField` and enhanced with more form capabilities like validations. <br>
 `<TextField placeholder="Enter email" validate="email" errorMessage="Email is invalid" />`
 
 #### RadioGroup
@@ -43,29 +43,29 @@ props change:
 #### Toast
 Implementation had slightly changed, please see [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ToastsScreen.js)
 - `relative` value for `position` prop was removed
-- Blur effect is not part of the component 
+- Blur effect is not part of the component
 
 #### ListItem
-Component not supporting animation out of the box (animatable wrapper was removed)
+Component not supporting animation out of the box (animatable wrapper was removed).
 
 #### LoaderScreen
-Remove `animationProps`.
+Remove `animationProps`
 
 #### Drawer
-Component implementation was completely changed and using `react-native-gesture-handler` as its base infrastructure instead of `react-native-interactable`
+Component implementation was completely changed and is using `react-native-gesture-handler` as its base infrastructure instead of `react-native-interactable`
 Please see [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx)
 
 #### Carousel
 Component API and implementation has changed. 
-Now supports non full-page carousel and better way of rendering Carousel children.
+Now supports non-full-page carousel and a better way of rendering Carousel children.
 
-Please refer our [Docs](https://wix.github.io/react-native-ui-lib/) to learn on the new API.
+Please refer to our [Docs](https://wix.github.io/react-native-ui-lib/) to learn more about the new API.
 
 --- 
 ### Removed Dependencies
 - react-native-interactable
 
-### New Peer Dependencies (those should be installed separately)
+### New Peer Dependencies (these should be installed separately)
 - `react-native-reanimated`
 - `react-native-gesture-handler`
 - `@react-native-community/blur`
@@ -79,4 +79,4 @@ Please refer our [Docs](https://wix.github.io/react-native-ui-lib/) to learn on
 - `Tour`
 - `Notification`
 - `CardItem`
-- `CardSection`
+- `CardSection`

markdowns/getting-started/v6.md

@@ -8,11 +8,11 @@ title: "v5 -> v6"
 ### Presets
 
 #### Colors
-Update colors palette to more accessible ones.  
+The colors of the palette were updated to more accessible ones.
 Renamed dark preset (dark10, dark20, ...) to grey (grey10, grey20, ...)
 
 #### Shadows
-Shadows old presets changed to  Shadows.sh10.top/bottom, Shadows.sh20.top/bottom & Shadows.sh30.top/bottom
+Old shadow presets changed to `Shadows.sh10.top/bottom`, `Shadows.sh20.top/bottom` & `Shadows.sh30.top/bottom`
 
 ### Components
 
@@ -29,7 +29,7 @@ Service was removed
 Component was removed, please use `ChipsInput` instead
 
 #### ThemeManager
-`ThemeManager.setTheme` api was removed
+`ThemeManager.setTheme` API was removed
 
 #### Avatar
 - `isOnline` removed (use badgeProps instead)
@@ -38,7 +38,7 @@ Component was removed, please use `ChipsInput` instead
 #### Badge
 - `animationProps` (please wrap with your own animated view)
 - `testId` (renamed `testID`)
-- `size` will not accept enum 'BADGE_SIZES' anymore, pass number instead  
+- `size` will not accept enum 'BADGE_SIZES' anymore, pass a number instead  
 
 See conversion map
 ```
@@ -52,7 +52,7 @@ large -> 24
 
 #### Card.Image
 - `imageSource` (renamed `source`)
-- `borderRadius` (should be pass to Card component)
+- `borderRadius` (should be passed to the Card component)
 
 #### PanningProviderDirection
 Renamed `PanningDirection`