FCE-987 improve legibility of quick setup (#81)

## Description

As in the title, improves the quick start section.

Author: czerwiukk

docs/react-native/_components/configure-permissions.mdx

@@ -1,11 +1,11 @@
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-Your app must have permissions configured to use the microphone and camera.
+Your app needs to have permissions configured in order to use the microphone and camera.
 
 ### Android
 
-For android you need to ask for certain permissions:
+Permissions below are required to stream audio and video with Fishjam on Android.
 
 - `android.permission.CAMERA`
 - `android.permission.RECORD_AUDIO`
@@ -15,7 +15,7 @@ For android you need to ask for certain permissions:
 
   <TabItem value="expo" label="Expo">
 
-You need to modify `app.json` file and add all permissions:
+Add required permissions to the `app.json` file.
 
 ```json title='app.json'
 {
@@ -36,7 +36,7 @@ You need to modify `app.json` file and add all permissions:
   </TabItem>
   <TabItem value="rn" label="Bare workflow">
 
-You need to modify `AndroidManifest.xml` file, and these lines:
+Add required permissions to the `AndroidManifest.xml` file.
 
 ```xml title='AndroidManifest.xml'
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
@@ -67,8 +67,8 @@ To update default content of permission alert, you can add these settings to `ap
    "ios": {
       ...
       "infoPlist": {
-        "NSCameraUsageDescription": "Your message.",
-        "NSMicrophoneUsageDescription": "Your message"
+        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera.",
+        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone."
       }
     },
   }
@@ -78,14 +78,13 @@ To update default content of permission alert, you can add these settings to `ap
   </TabItem>
   <TabItem value="rn" label="Bare workflow">
 
-You need to make sure that `Info.plist` contains these entries:
+Ensure `Info.plist` contains camera and microphone usage description entries:
 
 ```xml title='Info.plist'
     <key>NSCameraUsageDescription</key>
     <string>Allow $(PRODUCT_NAME) to access your camera.</string>
     <key>NSMicrophoneUsageDescription</key>
-    <string>Allow $(PRODUCT_NAME) to access your microphone</string>
-
+    <string>Allow $(PRODUCT_NAME) to access your microphone.</string>
 ```
 
   </TabItem>

docs/react-native/_components/install-package.mdx

@@ -12,16 +12,16 @@ npm install @fishjam-cloud/react-native-client
 
   <TabItem value="rn" label="Bare workflow">
 
-#### Install Expo dependencies
+### Install Expo dependencies
 
 Follow instructions form official [Expo documentation](https://docs.expo.dev/bare/installing-expo-modules/).
 
-#### Install Fishjam
+### Install Fishjam
 
     ```sh
     npx expo install @fishjam-cloud/react-native-client
     ```
 
   </TabItem>
-    
+
 </Tabs>

docs/react-native/connecting.mdx

@@ -7,12 +7,12 @@ import TabItem from "@theme/TabItem";
 
 # Connecting
 
-How to connect to Fishjam
+This article will guide you through the process of connecting to a Fishjam room.
 
 ## Getting URL and token
 
-In order to connect, you need to retrieve URL (multimedia server address) and token (token that will authenticate you in
-your Room)
+In order to connect, you need to retrieve `FISHJAM_URL` (multimedia server address) and `PEER_TOKEN` (token that will authenticate the peer in
+your Room).
 
 <Tabs groupId="app-type">
 
@@ -35,15 +35,15 @@ const { fishjamUrl, peerToken } = await response.json();
   </TabItem>
   <TabItem value="production" label="Production App">
 
-For production app, you need to implement your own backend service that will provide user with `peerToken`. To do that,
+For production app, you need to implement your own backend service that will provide user with `PEER_TOKEN`. To do that,
 follow our [server setup instructions](/production/server).
 
   </TabItem>
 </Tabs>
 
 ## Connecting
 
-In order to connect, you just need to call [`joinRoom`](/api/mobile/functions/useConnection#joinroom) method with data from previous step:
+In order to connect, call [`joinRoom`](/api/mobile/functions/useConnection#joinroom) method with data from previous step:
 
 ```tsx
 import { useCallback } from "react";
@@ -79,7 +79,7 @@ async function getRoomDetails(roomName: string, peerName: string) {
 
 ## Disconnecting
 
-In order to close connection, you have to call [`leaveRoom`](/api/mobile/functions/useConnection#leaveroom) method.
+In order to close the connection, you have to call [`leaveRoom`](/api/mobile/functions/useConnection#leaveroom) method.
 
 ```tsx
 import { useCallback } from "react";

docs/react-native/installation.mdx

@@ -9,8 +9,6 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx";
 
 # Installation
 
-How to install package in your mobile app
-
 ## Optional: Create new App
 
 <details>

docs/react-native/quick-setup.mdx

@@ -7,32 +7,37 @@ import ConfigurePermissions from "./_components/configure-permissions.mdx";
 
 # Quick Setup
 
-Integrate Fishjam into your React Native application.
+This article is a fast track to integrate Fishjam into your React Native application.  
+It contains all required steps to start streaming video with Fishjam.  
+You can also [see a full example](#full-example) at the end of the article.
 
-## Install the package
+## Prerequisites
+
+In this part, let's focus on all the things you need to prepare to use Fishjam in your project.
+
+### 1. Install the package
 
 <InstallPackage />
 
-## Build native dependencies
+### 2. Build native dependencies
 
 ```bash
 npx expo prebuild
 ```
 
-## Configure App permissions
+### 3. Configure required app permissions
 
 <ConfigurePermissions />
 
-### Get Room Manager URL
-
-Login to [Fishjam Dashboard](https://fishjam.io/app) and get your Room Manager URL.
+### 4. Get Room Manager URL
 
-## TL;DR
-
-Checkout [complete example below:](#full-example)
+Login to [Fishjam Dashboard](https://fishjam.io/app) and get your [Room Manager](/glossary#room-manager) URL.
 
 ## Step by step instructions
 
+Now you are good to jump right into your IDE and integrate Fishjam into your app.
+In few simple steps, you will be able to implement a simple video call functionality.
+
 ### 1. Fetch peer token
 
 Use your room manager URL to fetch peer token to get a new room:

package.json

@@ -16,7 +16,7 @@
     "typecheck": "tsc",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
-    "spellcheck": "mdspell '**/*.md' '**/*.mdx' '!node_modules/**' '!packages/**' --en-us",
+    "spellcheck": "mdspell '**/*.md' '**/*.mdx' '!node_modules/**' '!packages/**' '!docs/api/**' --en-us",
     "spellcheck:report": "yarn spellcheck -r"
   },
   "dependencies": {

src/css/custom.css

@@ -14,7 +14,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.5);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */