chore: improve comment section

I also adjust styles for all forms and primary buttons.

3 files changed, 23 insertions, 4 deletions

diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index bfb009e..fcf8d15 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -17,21 +17,40 @@
 
 .label {
   display: block;
+  color: var(--color-primary-darker);
   font-size: var(--font-size-sm);
   font-variant: small-caps;
   font-weight: 600;
 }
 
 .field {
-  border: fun.convert-px(1) solid var(--color-border);
   width: 100%;
   padding: var(--spacing-2xs) var(--spacing-xs);
+  background: var(--color-bg-tertiary);
+  border: fun.convert-px(2) solid var(--color-border-light);
+  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light);
+  transition: all 0.25s linear 0s;
+
+  &:hover {
+    box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
+      var(--color-shadow-light);
+    transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
+  }
 
   &:focus {
-    border-color: var(--color-primary);
+    background: var(--color-bg);
+    border-color: var(--color-primary-darker);
+    box-shadow: 0 0 0 0 var(--color-shadow);
+    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
+    outline: none;
+    transition: all 0.2s ease-in-out 0s, transform 0.3s ease-out 0s;
   }
 }
 
 .textarea {
   min-height: fun.convert-px(200);
 }
+
+.required {
+  color: var(--color-secondary);
+}
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 2ee214b..16cb854 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -32,7 +32,7 @@ const Input = (
       {label && (
         <label htmlFor={id} className={styles.label}>
           {label}
-          {required && <span> *</span>}
+          {required && <span className={styles.required}> *</span>}
         </label>
       )}
       <input
diff --git a/src/components/Form/TextArea/TextArea.tsx b/src/components/Form/TextArea/TextArea.tsx
index 729ef6d..e1e7e0f 100644
--- a/src/components/Form/TextArea/TextArea.tsx
+++ b/src/components/Form/TextArea/TextArea.tsx
@@ -25,7 +25,7 @@ const TextArea = ({
       {label && (
         <label htmlFor={id} className={styles.label}>
           {label}
-          {required && <span> *</span>}
+          {required && <span className={styles.required}> *</span>}
         </label>
       )}
       <textarea