Update new input styling

Author: DaneEveritt

resources/scripts/components/elements/inputs/InputField.tsx

@@ -2,6 +2,29 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styles from './styles.module.css';
 
-export default forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(({ className, ...props }, ref) => (
-    <input ref={ref} className={classNames('form-input', styles.text_input, className)} {...props} />
+enum Variant {
+    Normal,
+    Snug,
+    Loose,
+}
+
+interface InputFieldProps extends React.ComponentProps<'input'> {
+    variant?: Variant;
+}
+
+const Component = forwardRef<HTMLInputElement, InputFieldProps>(({ className, variant, ...props }, ref) => (
+    <input
+        ref={ref}
+        className={classNames(
+            'form-input',
+            styles.text_input,
+            { [styles.loose]: variant === Variant.Loose },
+            className
+        )}
+        {...props}
+    />
 ));
+
+const InputField = Object.assign(Component, { Variants: Variant });
+
+export default InputField;

resources/scripts/components/elements/inputs/index.ts

@@ -1,3 +1,13 @@
-export { default as Checkbox } from './Checkbox';
-export { default as InputField } from './InputField';
+import Checkbox from '@/components/elements/inputs/Checkbox';
+import InputField from '@/components/elements/inputs/InputField';
+
+const Input = Object.assign(
+    {},
+    {
+        Text: InputField,
+        Checkbox: Checkbox,
+    }
+);
+
+export { Input };
 export { default as styles } from './styles.module.css';

resources/scripts/components/elements/inputs/styles.module.css

@@ -12,10 +12,14 @@
 }
 
 .text_input {
-    @apply transition-all duration-75;
-    @apply bg-neutral-800 border-neutral-600 rounded px-4 py-2 outline-none;
+    @apply transition-shadow duration-75;
+    @apply w-full bg-neutral-800 rounded px-4 py-2 outline-none border-0;
 
-    &:focus {
-        @apply border-blue-600 ring-2 ring-blue-500;
+    &:focus, &:active {
+        @apply ring-4 ring-blue-300 ring-opacity-75;
+    }
+
+    &.loose {
+        @apply px-6 py-3;
     }
 }