refactor: split form styles and combine components

I think it is better to keep styles close to the
corresponding components. So I splitted the unique
stylesheet.
I also combine select, textarea and input components
into a single one since they share the same logic and
the same styles.

4 files changed, 6 insertions, 5 deletions

diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.tsx b/src/components/Settings/AckeeSelect/AckeeSelect.tsx
index 43110c4..e1a8ed8 100644
--- a/src/components/Settings/AckeeSelect/AckeeSelect.tsx
+++ b/src/components/Settings/AckeeSelect/AckeeSelect.tsx
@@ -1,4 +1,4 @@
-import { Label, Select } from '@components/Form';
+import { Field, Label } from '@components/FormElements';
 import Tooltip from '@components/Tooltip/Tooltip';
 import { LocalStorage } from '@services/local-storage';
 import { useAckeeTracker } from '@utils/providers/ackee';
@@ -67,9 +67,10 @@ const AckeeSelect = () => {
 
   return (
     <div className={styles.wrapper}>
-      <Select
+      <Field
         id="ackee-settings"
         name="ackee-settings"
+        kind="select"
         label={label}
         options={options}
         value={value}
diff --git a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx b/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
index 06f7ac8..6f42f86 100644
--- a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
+++ b/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
@@ -1,4 +1,4 @@
-import { Toggle } from '@components/Form';
+import { Toggle } from '@components/FormElements';
 import { MoonIcon, SunIcon } from '@components/Icons';
 import Spinner from '@components/Spinner/Spinner';
 import { usePrismTheme } from '@utils/providers/prism';
diff --git a/src/components/Settings/ReduceMotion/ReduceMotion.tsx b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
index c7b5775..d0f7980 100644
--- a/src/components/Settings/ReduceMotion/ReduceMotion.tsx
+++ b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
@@ -1,4 +1,4 @@
-import { Toggle } from '@components/Form';
+import { Toggle } from '@components/FormElements';
 import { LocalStorage } from '@services/local-storage';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
diff --git a/src/components/Settings/ThemeToggle/ThemeToggle.tsx b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
index 5b7a34d..77b2797 100644
--- a/src/components/Settings/ThemeToggle/ThemeToggle.tsx
+++ b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
@@ -1,4 +1,4 @@
-import { Toggle } from '@components/Form';
+import { Toggle } from '@components/FormElements';
 import { MoonIcon, SunIcon } from '@components/Icons';
 import Spinner from '@components/Spinner/Spinner';
 import { useTheme } from 'next-themes';