feat: Update README and theming docs

szuperaz · szuperaz · commit ab01e2fd37eb · 2022-04-04T16:15:31.000+02:00
diff --git a/README.md b/README.md
@@ -54,13 +54,13 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 Run the following command if you are using **Angular 13**:
 
 ```shell
-npm install stream-chat-angular @stream-io/stream-chat-css stream-chat @ngx-translate/core
+npm install stream-chat-angular stream-chat @ngx-translate/core
 ```
 
 Run this command if you are using **Angular 12**:
 
 ```shell
-npm install stream-chat-angular @stream-io/stream-chat-css stream-chat@5 @ngx-translate/core --legacy-peer-deps
+npm install stream-chat-angular stream-chat@5 @ngx-translate/core --legacy-peer-deps
 ```
 
 ## Sample App
diff --git a/docusaurus/docs/Angular/concepts/themeing-and-css.mdx b/docusaurus/docs/Angular/concepts/themeing-and-css.mdx
@@ -9,6 +9,47 @@ import DarkThemeScreenshot from "../assets/dark-theme-screenshot.png";
 import CustomLightThemeScreenshot from "../assets/custom-light-theme-screenshot.png";
 import CustomDarkThemeScreenshot from "../assets/custom-dark-theme-screenshot.png";
 
+## Overriding CSS
+
+To override pre-defined library styles, follow this simple process:
+
+- Import our bundled CSS into your root stylesheet. We maintain a separate repository, [stream-chat-css](https://github.com/GetStream/stream-chat-css), which houses all of the SCSS files for the components.
+
+- Use the browser inspector or view the library code and locate default styles you wish to override
+
+- Add selectors to your local CSS file to override our defaults.
+
+- Add your local CSS selectors after Stream's bundled CSS
+
+- Additionally you can overrive [the following CSS variables](https://github.com/GetStream/stream-chat-css/blob/main/src/styles/_variables.scss) to better customize the chat UI
+
+For example:
+
+```scss
+@import "~stream-chat-angular/src/assets/styles/scss/index.scss";
+
+/* Your CSS here */
+```
+
+OR
+
+```css
+@import "~stream-chat-angular/src/assets/styles/css/index.css";
+
+/* Your CSS here */
+```
+
+## Importing scss Files
+
+As an alternative to importing our entire style sheet (perhaps, due to it's size), there's also the option to easily assemble only
+what you need by importing individual scss files. The imports should happen in your root stylesheet.
+
+:::note
+If not importing our entire bundled CSS, individually importing the SDK's scss files is the better alternative to copy and pasting
+our stylesheets and then customizing that code in your application. The CSS in the library does change occasionally, and you want
+to keep up to date with these to ensure no problems arise by falling behind in important styling updates.
+:::
+
 ## Changing the theme
 
 Our library supports light and dark themes. You can change between the different themes using the `ThemeService`:
@@ -55,34 +96,3 @@ The result:
 **Example 2** - Custom dark theme
 
 <img src={CustomDarkThemeScreenshot} width="900" />
-
-## Overriding CSS
-
-To override pre-defined library styles, follow this simple process:
-
-- Import our bundled CSS into your root stylesheet. We maintain a separate repository, [stream-chat-css](https://github.com/GetStream/stream-chat-css), which houses all of the SCSS files for the components.
-
-- Use the browser inspector or view the library code and locate default styles you wish to override
-
-- Add selectors to your local CSS file to override our defaults.
-
-- Add your local CSS selectors after Stream's bundled CSS
-
-For example:
-
-```scss
-@import "~@stream-io/stream-chat-css/dist/css/index.css";
-
-/* Your CSS here */
-```
-
-## Importing scss Files
-
-As an alternative to importing our entire style sheet (perhaps, due to it's size), there's also the option to easily assemble only
-what you need by importing individual scss files. The imports should happen in your root stylesheet.
-
-:::note
-If not importing our entire bundled CSS, individually importing the SDK's scss files is the better alternative to copy and pasting
-our stylesheets and then customizing that code in your application. The CSS in the library does change occasionally, and you want
-to keep up to date with these to ensure no problems arise by falling behind in important styling updates.
-:::
diff --git a/projects/stream-chat-angular/README.md b/projects/stream-chat-angular/README.md
@@ -30,15 +30,38 @@ The best way to get started is to follow the [Angular Chat Tutorial](https://get
 Stream is free for most side and hobby projects. To qualify, your project/company must have no more than 5 team members and earn less than $10k in monthly revenue.
 For complete pricing and details visit our [Chat Pricing Page](https://getstream.io/chat/pricing/).
 
+## Docs
+
+The [docs](https://getstream.io/chat/docs/sdk/angular/) provide a brief description about the components and services in the library.
+
+The Angular library is created using the [stream-chat-js](https://github.com/getstream/stream-chat-js) library. For the most common use cases our services should give a nice abstraction over this library, however you might need it for more advanced customization, the [documentation](https://getstream.io/chat/docs/js/) is on our website.
+
+## Contributing
+
+We welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our [Contributor License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) first. See our license file for more details.
+
+## We are hiring!
+
+We recently closed a [$38 million Series B funding round](https://techcrunch.com/2021/03/04/stream-raises-38m-as-its-chat-and-activity-feed-apis-power-communications-for-1b-users/) and are actively growing.
+Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.
+
+Check out our current openings and apply via [Stream's website](https://getstream.io/team/#jobs).
+
 ## Installation
 
 ### Install with NPM
 
-```
-npm install stream-chat-angular @stream-io/stream-chat-css stream-chat @ngx-translate/core
+Run the following command if you are using **Angular 13**:
+
+```shell
+npm install stream-chat-angular stream-chat @ngx-translate/core
 ```
 
-**Important note** If you are using **Angular 12** you will need to add `--legacy-peer-deps` flag as `@ngx-translate/core`'s newest version only supports Angular 13.
+Run this command if you are using **Angular 12**:
+
+```shell
+npm install stream-chat-angular stream-chat@5 @ngx-translate/core --legacy-peer-deps
+```
 
 ## Sample App
 
@@ -56,19 +79,28 @@ STREAM_USER_TOKEN=<Your user token>
 
 Run `npm start` and navigate to `http://localhost:4200/`.
 
-## Docs
+## Customization examples
 
-The [docs](https://getstream.io/chat/docs/sdk/angular/) provide a brief description about the components and services in the library.
+This repository includes a sample app that showcases how you can provide your own template for different components within the SDK:
 
-The Angular library is created using the [stream-chat-js](https://github.com/getstream/stream-chat-js) library. For the most common use cases our services should give a nice abstraction over this library, however you might need it for more advanced customization, the [documentation](https://getstream.io/chat/docs/js/) is on our website.
+To run the app:
 
-## Contributing
+Create a file named `.env` in the root directory with the following content:
 
-We welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our [Contributor License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) first. See our license file for more details.
+```
+STREAM_API_KEY=<Your API key>
+STREAM_USER_ID=<Your user ID>
+STREAM_USER_TOKEN=<Your user token>
+```
 
-## We are hiring!
+Run `npm start:customizations-example` and navigate to `http://localhost:4200/`.
 
-We recently closed a [$38 million Series B funding round](https://techcrunch.com/2021/03/04/stream-raises-38m-as-its-chat-and-activity-feed-apis-power-communications-for-1b-users/) and are actively growing.
-Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.
+## Local development
 
-Check out our current openings and apply via [Stream's website](https://getstream.io/team/#jobs).
+Run `npm install` in the root of the project. You can use the `npm run start:dev` command to start the SampleApp with automatic reloading.
+
+A note about the documentation:
+
+- Documentations for Angular services are generated from doc comments in the source files (not under source control)
+- Documentations for inputs and outputs of Angular components are generated from doc comments in the source files (not under source control)
+- Everything else in the documentation is written in `mdx` files located in the `docusaurus` folder
