feat: add white theme

package.json

@@ -60,16 +60,16 @@
   },
   "devDependencies": {
     "@babel/core": "7.18.10",
-    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.3",
+    "@commitlint/cli": "17.0.3",
+    "@commitlint/config-conventional": "17.0.3",
     "@electron-forge/cli": "6.0.0-beta.65",
     "@electron-forge/maker-deb": "6.0.0-beta.65",
     "@electron-forge/maker-rpm": "6.0.0-beta.65",
     "@electron-forge/maker-squirrel": "6.0.0-beta.65",
     "@electron-forge/maker-zip": "6.0.0-beta.65",
     "@electron-forge/plugin-webpack": "6.0.0-beta.65",
-    "@electron-forge/publisher-github": "^6.0.0-beta.65",
-    "@release-it/conventional-changelog": "^5.0.0",
+    "@electron-forge/publisher-github": "6.0.0-beta.65",
+    "@release-it/conventional-changelog": "5.0.0",
     "@storybook/addon-actions": "6.5.10",
     "@storybook/addon-essentials": "6.5.10",
     "@storybook/addon-interactions": "6.5.10",
@@ -106,7 +106,7 @@
     "jest": "28.1.3",
     "node-loader": "2.0.0",
     "prettier": "2.7.1",
-    "release-it": "^15.3.0",
+    "release-it": "15.3.0",
     "style-loader": "3.3.1",
     "ts-jest": "28.0.8",
     "ts-loader": "9.3.1",

src/app/app.tsx

@@ -7,7 +7,8 @@ import { ThemeType, useSettingsStore } from './storage';
 import { DarkTheme, globalStyles, LightTheme } from './themes';
 
 function App(): JSX.Element {
-  const theme = useSettingsStore((store) => store.type) === ThemeType.Dark ? DarkTheme : LightTheme;
+  const theme =
+    useSettingsStore((store) => store.theme) === ThemeType.Dark ? DarkTheme : LightTheme;
 
   globalStyles();
 

src/app/components/select/select.styled.ts

@@ -50,9 +50,11 @@ export const StyledSelect = styled(ReactSelect, {
     backgroundColor: '$accents0',
   },
   '.react-select__option:hover': {
+    color: '$text',
     backgroundColor: '$accents2',
   },
   '.react-select__option--is-selected': {
+    color: '$text',
     backgroundColor: '$accents1',
   },
 

src/app/pages/header.tsx

@@ -1,34 +1,17 @@
-import { faSquarePlus } from '@fortawesome/free-solid-svg-icons';
+import { faCog, faSquarePlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, styled } from '@nextui-org/react';
+import { Button, Container } from '@nextui-org/react';
 import React from 'react';
 
-// import { useLogsStore } from '../storage';
 import { CreateCollectionModal } from './collections';
-// import { LogsButton, LogsModal } from './logs';
-
-const HeaderWrapper = styled('div', {
-  display: 'flex',
-  flexWrap: 'nowrap',
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden',
-});
+import { UpdateSettingsModal } from './settings';
 
 export const Header: React.FC = () => {
   const [createCollectionModalVisible, setCreateCollectionModalVisible] = React.useState(false);
-  // const [logsModalVisible, setLogsModalVisible] = React.useState(false);
-  // const { newLogsAvailable, markAsReadLogs } = useLogsStore((store) => store);
-
-  // const handleLogsButtonClick = () => {
-  //   setLogsModalVisible(true);
-  //   markAsReadLogs();
-  // };
+  const [updateSettingsModalVisible, setUpdateSettingsModalVisible] = React.useState(false);
 
   return (
-    <HeaderWrapper>
-      {/* <LogsButton badgeVisible={newLogsAvailable} onClick={handleLogsButtonClick} />
-      <Spacer /> */}
+    <Container fluid display="flex" wrap="nowrap" justify="center" alignItems="center">
       <Button
         auto
         bordered
@@ -37,22 +20,40 @@ export const Header: React.FC = () => {
         size="sm"
         icon={<FontAwesomeIcon icon={faSquarePlus} />}
         onClick={() => setCreateCollectionModalVisible(true)}
+        css={{
+          marginLeft: 'auto',
+        }}
       >
         New collection
       </Button>
+      <Button
+        auto
+        light
+        size="xs"
+        color="warning"
+        css={{
+          marginLeft: 'auto',
+          minWidth: 10,
+          color: '$accents9',
+          '&:hover': {
+            color: '$warning',
+            backgroundColor: '$accents0',
+          },
+        }}
+        icon={<FontAwesomeIcon icon={faCog} />}
+        onClick={() => setUpdateSettingsModalVisible(true)}
+      />
       <CreateCollectionModal
         fullScreen
         closeButton
         open={createCollectionModalVisible}
         onClose={() => setCreateCollectionModalVisible(false)}
       />
-      {/* <LogsModal
-        open={logsModalVisible}
+      <UpdateSettingsModal
         closeButton
-        fullScreen
-        scroll
-        onClose={() => setLogsModalVisible(false)}
-      /> */}
-    </HeaderWrapper>
+        open={updateSettingsModalVisible}
+        onClose={() => setUpdateSettingsModalVisible(false)}
+      />
+    </Container>
   );
 };

src/app/pages/settings/forms/index.ts

@@ -0,0 +1 @@
+export * from './settings.form';

src/app/pages/settings/forms/settings.form.tsx

@@ -0,0 +1,58 @@
+import { Container, Dropdown } from '@nextui-org/react';
+import React from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { Settings, ThemeType } from '../../../storage';
+
+export interface SettingsFormProps {
+  id?: string;
+
+  defaultValues?: Partial<Settings>;
+
+  onSubmit: (payload: Settings) => void;
+}
+
+export const SettingsForm: React.FC<SettingsFormProps> = ({
+  onSubmit = () => {},
+  id,
+  defaultValues,
+}) => {
+  const { handleSubmit, control } = useForm<Settings>({ defaultValues });
+
+  return (
+    <form id={id} onSubmit={handleSubmit(onSubmit)}>
+      <Container gap={0} display="flex" direction="column" justify="center">
+        <Controller
+          name="theme"
+          control={control}
+          render={({ field }) => (
+            <Dropdown disableAnimation>
+              <Dropdown.Button
+                bordered
+                borderWeight="light"
+                animated={false}
+                color="gradient"
+                css={{ tt: 'capitalize' }}
+              >
+                {field.value} Theme
+              </Dropdown.Button>
+              <Dropdown.Menu
+                aria-label="theme"
+                color="primary"
+                disallowEmptySelection
+                selectionMode="single"
+                defaultSelectedKeys={defaultValues?.theme}
+                onSelectionChange={(keys) => {
+                  field.onChange(Array.from(keys).join(''));
+                }}
+              >
+                <Dropdown.Item key={ThemeType.Light}>Light</Dropdown.Item>
+                <Dropdown.Item key={ThemeType.Dark}>Dark</Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
+        />
+      </Container>
+    </form>
+  );
+};

src/app/pages/settings/index.ts

@@ -0,0 +1 @@
+export * from './modals';

src/app/pages/settings/modals/index.ts

@@ -0,0 +1 @@
+export * from './update-settings.modal';

src/app/pages/settings/modals/update-settings.modal.tsx

@@ -0,0 +1,50 @@
+import { Button, Modal, ModalProps, Text } from '@nextui-org/react';
+import React from 'react';
+
+import { Settings, useSettingsStore } from '../../../storage';
+import { SettingsForm } from '../forms';
+
+export const UpdateSettingsModal: React.FC<ModalProps> = ({ onClose = () => {}, ...props }) => {
+  const { updateTheme, theme } = useSettingsStore((store) => store);
+
+  const handleSubmit = async (payload: Partial<Settings>) => {
+    if (payload.theme) {
+      await updateTheme(payload.theme);
+    }
+
+    onClose();
+  };
+
+  return (
+    <Modal {...props} onClose={onClose} aria-labelledby="update-settings-modal">
+      <Modal.Header css={{ userSelect: 'none' }}>
+        <Text>Settings</Text>
+      </Modal.Header>
+      <Modal.Body>
+        <SettingsForm
+          id="update-settings-form"
+          defaultValues={{
+            theme,
+          }}
+          onSubmit={handleSubmit}
+        />
+      </Modal.Body>
+      <Modal.Footer>
+        <Button auto bordered borderWeight="light" size="sm" color="error" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          auto
+          bordered
+          borderWeight="light"
+          size="sm"
+          color="gradient"
+          type="submit"
+          form="update-settings-form"
+        >
+          Apply
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};

src/app/storage/interfaces/index.ts

@@ -1,6 +1,4 @@
-export * from './theme.interface';
 export * from './settings.interface';
-export * from './language.interface';
 export * from './collections.interface';
 export * from './environments.interface';
 export * from './logs.interface';

src/app/storage/interfaces/settings.interface.ts

@@ -1,7 +1,17 @@
-import { Language } from './language.interface';
-import { ThemeType } from './theme.interface';
+export enum Language {
+  EN = 'en',
+}
+
+export enum ThemeType {
+  Dark = 'dark',
+  Light = 'light',
+}
 
-export interface SettingsStorage {
-  type: ThemeType;
+export interface Settings {
+  theme: ThemeType;
   language: Language;
 }
+
+export interface SettingsStorage extends Settings {
+  updateTheme: (theme: ThemeType) => void;
+}

src/app/storage/settings.storage.ts

@@ -1,13 +1,23 @@
+/* eslint-disable no-param-reassign */
+
+import { produce } from 'immer';
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
 
 import { Language, SettingsStorage, ThemeType } from './interfaces';
 
 export const useSettingsStore = create(
   persist<SettingsStorage>(
-    () => ({
-      type: ThemeType.Dark,
+    (set) => ({
+      theme: ThemeType.Dark,
       language: Language.EN,
+
+      updateTheme: (theme) =>
+        set(
+          produce<SettingsStorage>((state) => {
+            state.theme = theme;
+          })
+        ),
     }),
     {
       name: 'settings',

src/app/themes/light.ts

@@ -2,4 +2,9 @@ import { createTheme } from '@nextui-org/react';
 
 export const LightTheme = createTheme({
   type: 'light',
+  theme: {
+    colors: {
+      gradient: 'linear-gradient(112deg, $yellow400 -25%, $yellow600 30%, $cyan600 90%)',
+    },
+  },
 });