docs: readme update

README.md

@@ -14,18 +14,19 @@
 ## Features
 
 - Themer (customization)
+  - Use or create your own theme!
 
 ## Default theme
 
 ![](./docs/images/wp-ui.png)
 
-## 300+ gradients for background
+## Themes and theme configuration
 
-![](./docs/images/gradients.png)
+![](./docs/images/mod-ui.png)
 
-## Export/import configurations
+## 300+ gradients available for the background
 
-![](./docs/images/export-import.png)
+![](./docs/images/gradients.png)
 
 ## Usage
 

RELEASE.md

@@ -2,6 +2,6 @@ Version $VERSION released! 🥳
 
 Changes:
 
-- First release
+- Themes added!
 
 Follow the readme instructions to install the extension

src/page/features/themer/components/import-modal/index.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@page-components/basic/button";
 import { Flex } from "@page-components/basic/flex";
 import { Modal } from "@page-components/basic/modal";
+import { Text } from "@page-components/basic/text";
 import { TextInput } from "@page-components/basic/text-input";
 import { useThemerConfig } from "@page-contexts/themer-config";
 import { useThemerThemes } from "@page-contexts/themer-themes";
@@ -48,6 +49,7 @@ export const ImportModal = ({ open, onRequestClose, onImport }: Props) => {
   return (
     <Modal open={open} onRequestClose={onRequestClose}>
       <Flex direction="column" gap={8}>
+        <Text>Import External Theme</Text>
         <TextInput placeholder="Data here..." value={value} fullWidth onChange={setValue} />
         <Flex gap={8}>
           <Button onClick={() => handleImport(false)} fullWidth>

src/page/features/themer/components/themer-menu/styles.module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 8px;
   padding: 8px;
-  min-width: 250px;
+  min-width: 300px;
   min-height: 300px;
   background-color: rgba(0, 0, 0, 40%);
 }

src/page/features/themer/components/themes-menu/index.tsx

@@ -71,7 +71,7 @@ export function ThemesMenu() {
         <Button fullWidth onClick={() => setTab(0)}>
           <Flex gap={8} align="center">
             <Icon type="paintRoller" size={16} />
-            System
+            Predefined
           </Flex>
         </Button>
         <Button fullWidth onClick={() => setTab(1)}>

src/page/features/themer/components/themes-menu/styles.module.css

@@ -1,7 +1,7 @@
 .container {
   padding: 8px;
-  min-width: 250px;
-  max-width: 250px;
+  min-width: 260px;
+  min-height: 260px;
   height: 300px;
   background-color: rgba(0, 0, 0, 40%);
   overflow: auto;