docs: fix links to the theming documentation (#2026)

MartinCupela · web-flow · commit eacd75749e21 · 2023-06-09T13:38:25.000+02:00
diff --git a/docusaurus/docs/React/components/contexts/chat-context.mdx b/docusaurus/docs/React/components/contexts/chat-context.mdx
@@ -109,7 +109,7 @@ Deprecated and to be removed in a future major release. Use the `customStyles` p
 
 ### themeVersion
 
-Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../guides/theming/css-and-theming.mdx).
+Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../theming/introduction.mdx).
 
 |   Type         |  Default  |
 | -------------- | --------- |
diff --git a/docusaurus/docs/React/components/contexts/component-context.mdx b/docusaurus/docs/React/components/contexts/component-context.mdx
@@ -295,7 +295,7 @@ Custom UI component to display the header of a `Thread`.
 
 ### ThreadInput
 
-Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
 | Type | Default |
 | --------- | ------------------------------------------------------------------------------------------------------------------ |
diff --git a/docusaurus/docs/React/components/core-components/channel.mdx b/docusaurus/docs/React/components/core-components/channel.mdx
@@ -546,7 +546,7 @@ Custom UI component to display the header of a `Thread`.
 
 ### ThreadInput
 
-Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
 | Type      | Default                                                                                                                                                                                               |
 |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
diff --git a/docusaurus/docs/React/components/core-components/thread.mdx b/docusaurus/docs/React/components/core-components/thread.mdx
@@ -180,7 +180,7 @@ If true, displays the thread at 100% width of its parent container, useful for m
 
 ### Input
 
-Custom thread input UI component used to override the optional `Input` value stored in `ComponentContext` or the default. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom thread input UI component used to override the optional `Input` value stored in `ComponentContext` or the default. For  the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
 | Type      | Default                                                                                                                                                                                               |
 |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
diff --git a/docusaurus/docs/React/components/message-components/attachment.mdx b/docusaurus/docs/React/components/message-components/attachment.mdx
@@ -111,7 +111,7 @@ The following section details how the width and height of images and videos uplo
 
 #### Maximum size
 
-You can control the maximum width and height of images and videos with the [`--str-chat__attachment-max-width`](../../guides/theming/css-and-theming.mdx) CSS variable (available only in [theme-v2](../../guides/theming/css-and-theming.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
+You can control the maximum width and height of images and videos with the [`--str-chat__attachment-max-width`](../../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
 
 If you set an invalid value to the variable, you'll see a warning on the browser's console:
 
@@ -125,7 +125,7 @@ For example if an image has `max-width` and `max-height` set to `300px` and the
 
 #### Aspect ratio
 
-The following description is applicable for [theme-v2](../../guides/theming/css-and-theming.mdx).
+The following description is applicable for [theme-v2](../../theming/introduction.mdx).
 
 The SDK will try to display images and videos with their original aspect ratio, however this isn't always guaranteed (in those cases a cropped image will be displayed). Three notable exceptions are:
 
diff --git a/docusaurus/docs/React/components/utility-components/channel-search.mdx b/docusaurus/docs/React/components/utility-components/channel-search.mdx
@@ -49,7 +49,7 @@ The `ChannelSearch` component renders 2 components:
 1. the search input
 2. the search results list
 
-If opted in the use of [theme version 2](../../guides/theming/css-and-theming.mdx), the `ChannelSearch` will render a more complex search input component called [`SearchBar`](./#searchbar-component). Otherwise, the [`SearchInput`](./#searchinput-component) is rendered.
+If opted in the use of [theme version 2](../../theming/introduction.mdx), the `ChannelSearch` will render a more complex search input component called [`SearchBar`](./#searchbar-component). Otherwise, the [`SearchInput`](./#searchinput-component) is rendered.
 
 ### Search input vs.SearchResults state
 
@@ -158,7 +158,7 @@ The `ChannelSearch` offers possibility to keep the search results open meanwhile
 
 ### AppMenu
 
-Application menu / drop-down to be displayed  when clicked on [`MenuIcon`](./#menuicon). Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is only available with the use of the [theming v2](../../guides/theming/css-and-theming.mdx).  No default component is provided by the SDK. The library does not provide any CSS for `AppMenu`. Consult the customization tutorial on how to [add AppMenu to your application](../../guides/customization/channel-search.mdx/#adding-menu). The component is passed a prop `close`, which is a function that can be called to hide the app menu (e.g. on menu item selection).
+Application menu / drop-down to be displayed  when clicked on [`MenuIcon`](./#menuicon). Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is only available with the use of the [theming v2](../../theming/introduction.mdx).  No default component is provided by the SDK. The library does not provide any CSS for `AppMenu`. Consult the customization tutorial on how to [add AppMenu to your application](../../guides/customization/channel-search.mdx/#adding-menu). The component is passed a prop `close`, which is a function that can be called to hide the app menu (e.g. on menu item selection).
 
 | Type                  | Default     |
 |-----------------------|-------------|
diff --git a/docusaurus/docs/React/guides/theming/css-and-theming.mdx b/docusaurus/docs/React/guides/theming/css-and-theming.mdx
@@ -10,7 +10,7 @@ import Theming2 from '../../assets/Theming2.png';
 import Theming3 from '../../assets/Theming3.png';
 
 :::caution
-This page contains information about the old theming system (v1) of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](./css-and-theming.mdx).
+This page contains information about the old theming system (v1) of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](../../theming/introduction.mdx).
 :::
 
 While the components in the React Chat library come with basic styling, the look and feel can easily be adjusted to fit
diff --git a/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx b/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx
@@ -18,7 +18,7 @@ import EmptyChannelList from '../assets/theme-v2-empty-channel-list.png';
 import EmptyMessageList from '../assets/theme-v2-empty-message-list.png';
 import ScrollToBottomButton from '../assets/theme-v2-scroll-to-bottom-button-theme-v1.png';
 
-The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../guides/theming/css-and-theming.mdx) brought with `@stream-io/stream-chat-css@3.0.0`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
+The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../theming/introduction.mdx) brought with `@stream-io/stream-chat-css@3.0.0`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
 
 We have tried to introduce as few breaking changes as possible. We have not removed classes but rather added new ones that are exclusively used with the theming V2 stylesheet. Also, where possible, V1 and V2 components have been introduced for backwards compatibility (the V1 components are used unless opted into theme version 2).
 

-Original file line number
+Diff line change
 import EmptyMessageList from '../assets/theme-v2-empty-message-list.png';
 import ScrollToBottomButton from '../assets/theme-v2-scroll-to-bottom-button-theme-v1.png';
 -The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../guides/theming/css-and-theming.mdx) brought with `@stream-io/[email protected]`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
 +The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../theming/introduction.mdx) brought with `@stream-io/[email protected]`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
 We have tried to introduce as few breaking changes as possible. We have not removed classes but rather added new ones that are exclusively used with the theming V2 stylesheet. Also, where possible, V1 and V2 components have been introduced for backwards compatibility (the V1 components are used unless opted into theme version 2).