From 25d61525b30ebc929a71318c4536e51f2a3a5ac7 Mon Sep 17 00:00:00 2001
From: DaneEveritt <dane@daneeveritt.com>
Date: Sat, 2 Jul 2022 17:24:24 -0400
Subject: [PATCH] Update new input styling

---
 .../components/elements/inputs/InputField.tsx | 27 +++++++++++++++++--
 .../components/elements/inputs/index.ts       | 14 ++++++++--
 .../elements/inputs/styles.module.css         | 12 ++++++---
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/resources/scripts/components/elements/inputs/InputField.tsx b/resources/scripts/components/elements/inputs/InputField.tsx
index 19015c0ab..c3dfc3ccd 100644
--- a/resources/scripts/components/elements/inputs/InputField.tsx
+++ b/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;
diff --git a/resources/scripts/components/elements/inputs/index.ts b/resources/scripts/components/elements/inputs/index.ts
index e2e4443b1..b961b0764 100644
--- a/resources/scripts/components/elements/inputs/index.ts
+++ b/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';
diff --git a/resources/scripts/components/elements/inputs/styles.module.css b/resources/scripts/components/elements/inputs/styles.module.css
index c57cb0bbe..a58454925 100644
--- a/resources/scripts/components/elements/inputs/styles.module.css
+++ b/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;
     }
 }