Update docs to reflect 2.4 changes

Author: CodeDoctorDE

docs/src/content/docs/docs/v2/area.png

@@ -5,7 +5,6 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 import {Monitor, Plus, TextT, Faders, Folder, Stack, SignOut, SignIn, Trash, Export, PlusCircle, Door, DotsThreeVertical} from "@phosphor-icons/react";
 import logo from '/public/img/logo.svg';
 
-
 ## Introduction
 
 ![Area](area.png)

docs/src/content/docs/docs/v2/areas.mdx

@@ -2,12 +2,31 @@
 title: Color picker
 ---
 
-![Color picker](color_picker.png)
+Colors can be selected by using two methods: The color toolbar and the color picker overlay.
 
-* Open, save the dialog to access it in other documents
-* Reset the palette for the default material palette
-* Add, remove and edit the name of the palette
-* Add new colors by clicking on the plus button in the bottom
-* Edit the colors by long clicking on the color
+To update the color palette, read the [pack documentation](/docs/v2/pack).
 
-You can access the color picker on the view tool by clicking on the color button.
+## Color toolbar
+
+![Color toolbar](color_toolbar.png)
+
+If this is enabled in the settings, a color toolbar will be shown when a colorable tool is selected. This toolbar allows you to quickly select a color from a predefined set of colors. Click on the plus icon to select a custom color.
+
+## Color picker overlay
+
+![Color picker overlay](color_picker_overlay.png)
+
+This overlay can be opened by clicking on a property tile that is colorable, for example inside the properties panel of the pen tool. Click on a color to select it. Click on the custom button to open the custom color picker.
+
+If you want to delete a color from the palette, right click on it (or long press on touch devices) and select delete.
+
+### Custom color picker
+
+![Custom color picker](color_picker.png)
+
+Here you can select any color you want. On the left you can see a color wheel. Under it you can select the brightness of the color.
+Note: if you choose a darker color on the bottom, the wheel selection gets less precise.
+
+Under the brightness slider you can see a preview of the selected color. You can also enter a hex code to select a color. It is specified as `#RRGGBB`, where `RR` is the red value, `GG` is the green value, and `BB` is the blue value in hexadecimal notation.
+
+On the right you can see the red, green and blue values that make up the color. These values can be changed by dragging the sliders or by entering a value between 0 and 255. Pin the color to add it to the color palette.

docs/src/content/docs/docs/v2/color_picker.md

@@ -46,7 +46,7 @@ To start working on the app, you have two options:
 <Tabs syncKey="platform">
   <TabItem label="Desktop">
 
-    ![Welcome screen](welcome_screen_desktop.png)
+    ![Welcome screen](@assets/img/main.png)
     The top of the screen holds the update banner, a link to this documentation, and the <Gear className="inline-icon"/> Settings button. Finally, to the right of the <Gear className="inline-icon"/> Settings button, you have a drop-down menu for controlling when the update banner will appear (always/never/on updates).
 
     The Files section is the main area to the left. Here, you can do the following operations:
@@ -64,15 +64,16 @@ To start working on the app, you have two options:
 
     When opening Butterfly on a mobile device, you will be presented with a screen like this:
     ![Welcome screen first part](welcome_screen_mobile_1.png)
-    The top of the screen holds the update banner. Below it, you can find a link to this documentation, the <Gear className="inline-icon"/> Settings button, and a drop-down menu for controlling when the update banner will appear (always/never/on updates).
+    The top of the screen you will see the release name and a link to the release notes and documentation.
 
-    Below those, you can find the Quickstart section with the templates available in the current location. For a fresh install, this includes the Light and Dark templates.
+    Below those, you can find the Quickstart section with the templates available in the current location. For a fresh install, this includes the Light and Dark templates. Below the templates, you will see your recent files.
 
-    Scrolling down, you will see the Files section:
+    Clicking on the files tab at the bottom will bring you to the file list:
     \
     ![Welcome screen second part](welcome_screen_mobile_2.png)
     Here, you can do the following operations:
     - Select the display type (<GridFour className="inline-icon"/> Grid or <List className="inline-icon"/> List)
+    - Reloading the file list
     - Select the [source storage](../storage) of the files
     - Sort the display order of the files
     - Add a folder, file, template, or import files by clicking the <Plus className="inline-icon"/> plus sign

docs/src/content/docs/docs/v2/color_picker.png

@@ -2,26 +2,29 @@
 title: Pack
 ---
 
-:::caution[Upcoming changes]
-
-In-document packs will be deprecated soon. In the meantime, it is recommended to save your packs globally to ensure a smooth transition to future releases.
-
-See [this issue](https://github.com/LinwoodDev/Butterfly/issues/805) for details.
-
-:::
-
 A pack is a collection of components that can be used in the stamp tool. You can create your own pack or import an existing one. For this click on the top left corner and click on "Packs".
 
+Packs are saved globally, so you can use them in any document. If you want to share the pack in a document, you can bundle it with the document.
+
 ## Properties
 
-Name | Description
----: | :---
-Name | The name of the pack
-Author | The author of the pack
-Description | A description of the pack
+|        Name | Description               |
+| ----------: | :------------------------ |
+|        Name | The name of the pack      |
+|      Author | The author of the pack    |
+|     Version | The version of the pack   |
+| Description | A description of the pack |
 
 ### Components
 
 Components are a way to save elements that you use often. You can create your own components or import an existing one using packs.
 
 Use the components navigator page to paste components into your notes.
+
+## Styles
+
+Styles are used to customize the appearance of the text. The paragraph styles can be used to format a whole paragraph (like a heading), while the text styles can be used to format only a part of the text (like a bold word).
+
+## Palettes
+
+The color palettes can be used to quickly select colors for the colorable tools. You will see a color picker overlay (like mentioned in the [color picker documentation](/docs/v2/color_picker)) when you edit a color picker.