Merge pull request #128 from Lodestone-Team/inputfield

removed overlap of text and icon in input box & refactored input-base
Lodestone-Team · Feb 7, 2023 · 262dbf3 · 262dbf3
2 parents 67904b8 + c8cccf8
commit 262dbf3
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 40 deletions.
diff --git a/src/components/Atoms/Config/InputBox.tsx b/src/components/Atoms/Config/InputBox.tsx
@@ -36,7 +36,6 @@ export default function InputBox({
   required,
   maxLength = 1024,
   error: errorProp,
-  removeArrows,
   disabled = false,
   canRead = true,
   isLoading: isLoadingProp = false,
@@ -57,7 +56,6 @@ export default function InputBox({
   required?: boolean;
   maxLength?: number;
   error?: string;
-  removeArrows?: boolean;
   disabled?: boolean;
   canRead?: boolean;
   isLoading?: boolean;
@@ -240,9 +238,7 @@ export default function InputBox({
         id={id}
       >
         <div
-          className={`pointer-events-none absolute top-0 right-0 flex h-full flex-row items-center justify-end py-1.5 ${
-            !removeArrows && type === 'number' ? 'pl-3 pr-9' : 'px-3'
-          }`}
+          className={`pointer-events-none absolute top-0 right-0 flex h-full flex-row items-center justify-end py-1.5 px-3`}
         >
           <div className="pointer-events-auto flex flex-row gap-2">
             {showIcons && icons}
@@ -253,10 +249,11 @@ export default function InputBox({
           placeholder={placeholder}
           onChange={onChange}
           maxLength={maxLength}
-          className={`input-base w-full ${
-            errorText ? 'border-error' : 'border-normal'
+          style={{ paddingRight: `${icons.length * 1.5 + 0.75}rem` }} //0.75, 2.25, 3.75
+          className={`input-shape input-background input-outlines input-text-style w-full ${
+            errorText ? 'input-border-error' : 'input-border-normal'
           }
-            ${removeArrows && 'noSpin'}`}
+           `}
           onBlur={() => {
             setValue(value.trim());
           }}

diff --git a/src/components/Atoms/Config/SelectBox.tsx b/src/components/Atoms/Config/SelectBox.tsx
@@ -125,12 +125,12 @@ export default function SelectBox({
         >
           <Listbox.Button
             className={clsx(
-              'input-base group min-h-[1em] w-full py-1.5 px-3',
+              'input-outlines input-text-style group min-h-[1em] w-full rounded py-1.5 px-3',
               'enabled:hover:outline-white/30',
               'enabled:ui-open:bg-gray-700 enabled:ui-open:active:bg-gray-850',
               'enabled:ui-not-open:bg-gray-850 enabled:ui-not-open:hover:bg-gray-700',
               'enabled:ui-not-open:active:bg-gray-850 enabled:ui-not-open:active:outline-white/30',
-              errorText ? 'border-error' : 'border-normal'
+              errorText ? 'input-border-error' : 'input-border-normal'
             )}
           >
             {value}
@@ -152,7 +152,7 @@ export default function SelectBox({
           >
             <Listbox.Options
               className={clsx(
-                'input-base absolute z-40 mt-2 max-h-60 w-full overflow-auto p-0 py-1',
+                'input-outlines input-text-style absolute z-40 mt-2 max-h-60 w-full overflow-auto rounded p-0 py-1',
                 'bg-gray-850 outline-gray-550 drop-shadow-md focus-visible:ring-blue-faded/50'
               )}
             >

diff --git a/src/components/Atoms/Form/ComboField.tsx b/src/components/Atoms/Form/ComboField.tsx
@@ -121,12 +121,12 @@ export default function ComboField(props: ComboFieldProps) {
             <>
               <Combobox.Input
                 className={clsx(
-                  'input-base group min-h-[1em] w-full py-1.5 px-3',
+                  'input-outlines input-text-style group min-h-[1em] w-full rounded py-1.5 px-3',
                   'enabled:hover:outline-white/30 enabled:ui-not-open:hover:bg-gray-700',
                   'enabled:ui-open:bg-gray-700 enabled:ui-open:active:bg-gray-850 ',
                   'enabled:ui-not-open:bg-gray-850  enabled:ui-not-open:active:bg-gray-850',
                   'enabled:ui-not-open:active:outline-white/30',
-                  errorText ? 'border-error' : 'border-normal',
+                  errorText ? 'input-border-error' : 'input-border-normal',
                   selectedValue ? 'text-gray-300' : 'text-gray-500'
                 )}
                 onChange={(event) => setQuery(event.target.value)}
@@ -150,7 +150,7 @@ export default function ComboField(props: ComboFieldProps) {
               >
                 <Combobox.Options
                   className={clsx(
-                    'input-base absolute z-40 mt-2 w-full rounded-md',
+                    'input-shape input-outlines input-text-style  absolute z-40 mt-2 w-full rounded-md',
                     'bg-gray-850 p-0 outline-gray-550 drop-shadow-md focus-visible:ring-blue-faded/50'
                   )}
                 >

diff --git a/src/components/Atoms/Form/InputField.tsx b/src/components/Atoms/Form/InputField.tsx
@@ -27,8 +27,8 @@ export default function InputField(props: InputFieldProps) {
       )}
       <div className="mt-1">
         <input
-          className={`input-base w-full ${
-            errorText ? 'border-error' : 'border-normal'
+          className={`input-shape input-background input-outlines input-text-style w-full ${
+            errorText ? 'input-border-error' : 'input-border-normal'
           }`}
           type={type}
           value={field.value}

diff --git a/src/components/Atoms/Form/RadioField.tsx b/src/components/Atoms/Form/RadioField.tsx
@@ -59,8 +59,10 @@ export default function RadioField(props: RadioFieldProps) {
         >
           {loadingVisual ? (
             <div
-              className={`input-base disabled w-full overflow-clip rounded-none p-0 first:rounded-l-md last:rounded-r-md ${
-                isError ? 'border-error' : 'border-normal'
+              className={`input-background input-outlines input-text-style disabled w-full overflow-clip rounded-none p-0 first:rounded-l-md last:rounded-r-md ui-disabled:text-white/50 ui-not-disabled:text-gray-300 ${
+                isError
+                  ? 'input-border-error ui-not-disabled:focus-visible:ring-red-faded/30'
+                  : 'input-border-normal ui-not-disabled:focus-visible:ring-blue-faded/50'
               }`}
             >
               <span className="block h-full w-full select-none bg-gray-800 py-1.5 px-3 text-center text-white/50">
@@ -72,9 +74,12 @@ export default function RadioField(props: RadioFieldProps) {
               <RadioGroup.Option
                 value={option}
                 key={option}
-                className={`input-base w-full overflow-clip rounded-none p-0 first:rounded-l-md last:rounded-r-md
-              ${disabledVisual ? 'disabled' : 'enabled cursor-pointer'}
-              ${isError ? 'border-error' : 'border-normal'}`}
+                className={`input-background input-outlines input-text-style w-full overflow-clip rounded-none p-0 first:rounded-l-md last:rounded-r-md ui-disabled:text-white/50 ui-not-disabled:cursor-pointer ui-not-disabled:text-gray-300
+              ${
+                isError
+                  ? 'input-border-error ui-not-disabled:focus-visible:ring-red-faded/30'
+                  : 'input-border-normal ui-not-disabled:focus-visible:ring-blue-faded/50'
+              }`}
               >
                 {({ checked }) => (
                   <span

diff --git a/src/components/Atoms/Form/SelectField.tsx b/src/components/Atoms/Form/SelectField.tsx
@@ -120,12 +120,12 @@ export default function SelectField<T extends string | object>(
         >
           <Listbox.Button
             className={clsx(
-              'input-base group min-h-[1em] w-full py-1.5 px-3',
+              'input-outlines input-text-style group min-h-[1em] w-full rounded py-1.5 px-3',
               'enabled:hover:outline-white/30 enabled:ui-not-open:hover:bg-gray-700',
               'enabled:ui-open:bg-gray-700 enabled:ui-open:active:bg-gray-850 ',
               'enabled:ui-not-open:bg-gray-850  enabled:ui-not-open:active:bg-gray-850',
               'enabled:ui-not-open:active:outline-white/30',
-              errorText ? 'border-error' : 'border-normal',
+              errorText ? 'input-border-error' : 'input-border-normal',
               selectedValue ? 'text-gray-300' : 'text-gray-500'
             )}
           >
@@ -150,7 +150,7 @@ export default function SelectField<T extends string | object>(
           >
             <Listbox.Options
               className={clsx(
-                'input-base absolute z-40 mt-2 max-h-60 w-full overflow-auto p-0 py-1',
+                'input-outlines input-text-style absolute z-40 mt-2 max-h-60 w-full overflow-auto rounded p-0 py-1',
                 'bg-gray-850 outline-gray-550 drop-shadow-md focus-visible:ring-blue-faded/50'
               )}
             >

diff --git a/src/globals.css b/src/globals.css
@@ -47,33 +47,30 @@ body {
    * update: lol we can use the headlessui plugin
    */
 
-  .input-base {
-    @apply appearance-none rounded bg-gray-900 py-2 px-2.5 text-left font-medium leading-snug tracking-tight outline outline-1 placeholder:text-white/30 focus-visible:ring-4  enabled:text-gray-300 disabled:bg-gray-800 disabled:text-white/50;
+  .input-shape{
+    @apply rounded py-2 px-2.5
   }
 
-  .input-base.disabled {
-    @apply bg-gray-800 text-white/50;
+  .input-background{
+    @apply bg-gray-900 disabled:bg-gray-800;
   }
 
-  .input-base.border-normal {
-    @apply outline-gray-faded/30 invalid:outline-red invalid:focus-visible:outline-red enabled:focus-visible:ring-blue-faded/50;
-  }
-
-  .input-base.border-error {
-    @apply outline-red focus-visible:outline-red enabled:focus-visible:ring-red-faded/30;
+  .input-outlines{
+    @apply outline outline-1 focus-visible:ring-4;
   }
 
-  .input-base.enabled {
-    @apply text-gray-300;
+  .input-text-style{
+    @apply text-left font-medium leading-snug tracking-tight placeholder:text-white/30 enabled:text-gray-300 disabled:text-white/50;
   }
 
-  .input-base.enabled.border-normal {
-    @apply focus-visible:ring-blue-faded/50;
+  .input-border-normal {
+    @apply outline-gray-faded/30 invalid:outline-red invalid:focus-visible:outline-red enabled:focus-visible:ring-blue-faded/50;
   }
 
-  .input-base.enabled.border-error {
-    @apply focus-visible:ring-red-faded/30;
+  .input-border-error {
+    @apply outline-red focus-visible:outline-red enabled:focus-visible:ring-red-faded/30;
   }
+
 }
 
 @layer utilities {