styling

src/features/Web3/components/Input/InputGroup.module.css

@@ -1,82 +1,99 @@
 .inputGroup {
   --height: 50px;
+  --border: var(--border-width) solid var(--border-color);
+  --tokenWidth: 75px;
 
   margin: auto;
-  position: relative;
   margin-top: calc(var(--spacer) / 3);
-  display: flex;
-  flex-direction: column;
   min-height: var(--height);
+  border-radius: var(--border-radius);
+  border: var(--border);
+  overflow: hidden;
+  transition: border-color 0.2s ease-out;
+  position: relative;
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 25rem) {
   .inputGroup {
-    flex-direction: row;
+    display: flex;
+    align-items: center;
+  }
+
+  :global([data-theme='dark']) .inputGroup {
+    border-color: var(--border-color);
   }
 }
 
-.inputWrap {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.inputGroup.focus {
+  /* box-shadow: 0 0 0 1px var(--input-border-focus); */
+  border-color: var(--input-border-focus);
 }
 
 .token {
-  width: 90px;
-  height: var(--height);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: var(--tokenWidth);
+  height: calc(var(--height) - var(--border-width));
   background: var(--box-background-color);
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
-  border-right-color: var(--box-background-color);
+  display: flex;
+  align-items: center;
 }
 
 .inputInput {
   text-align: center;
-  border: var(--border-width) solid var(--border-color);
+  border: 0;
   font-size: var(--font-size-large);
-  padding: 0 calc(var(--spacer) / 4);
-  border-bottom: 0;
+  padding: 0;
+  padding-left: var(--tokenWidth);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  border-bottom: var(--border);
   height: var(--height);
+  width: 100%;
 }
 
-@media (min-width: 40rem) {
+.inputInput:focus {
+  border: 0;
+}
+
+@media (min-width: 25rem) {
+  .token {
+    height: 100%;
+  }
+
   .inputInput {
     border-radius: 0;
-    border-bottom: var(--border-width) solid var(--border-color);
-    width: 70%;
+    border-bottom: 0;
   }
 }
 
-:global([data-theme='dark']) .inputInput {
-  border-color: var(--border-color);
-}
-
 .submit {
+  width: 100%;
   max-width: none;
-  height: calc(var(--height) - calc(var(--border-width) * 2));
+  height: calc(var(--height) - 2px);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border: var(--border-width) solid var(--link-color);
-  padding-top: 0;
-  padding-bottom: 0;
+  border: 0;
+  padding: 0;
+  box-shadow: none;
 }
 
-@media (min-width: 40rem) {
+@media (min-width: 25rem) {
   .submit {
     width: fit-content;
+    padding: 0 calc(var(--spacer) / 1.5);
     border-top-right-radius: var(--border-radius);
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border-left: 0;
+    margin-right: 1px;
   }
 }
 
-/* .submit:disabled {
-  opacity: 0.8;
-  background: var(--text-color-light);
-  color: var(--text-color);
-  border-color: var(--text-color-light);
-} */
+.submit:disabled {
+  background: var(--box-background-color);
+  color: var(--text-color-light);
+  text-shadow: none;
+}

src/features/Web3/components/Input/InputGroup.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement } from 'react'
+import { useState, type ReactElement } from 'react'
 import Input from '@components/Input'
 import { Conversion } from '../Conversion'
 import styles from './InputGroup.module.css'
@@ -14,28 +14,28 @@ export function InputGroup({
   const amount = useStore($amount)
   const selectedToken = useStore($selectedToken)
 
+  const [isFocus, setIsFocus] = useState(false)
+
   function handleChange(newAmount: string) {
     $amount.set(newAmount)
   }
-
   return (
     <>
-      <div className={styles.inputGroup}>
-        <div className={styles.inputWrap}>
-          <div className={styles.token}>
-            <TokenSelect />
-          </div>
-          <Input
-            type="text"
-            inputMode="decimal"
-            pattern="[0-9.]*"
-            value={amount}
-            placeholder="0.00"
-            onChange={(e) => handleChange(e.target.value)}
-            className={styles.inputInput}
-          />
+      <div className={`${styles.inputGroup} ${isFocus ? styles.focus : ''}`}>
+        <div className={styles.token}>
+          <TokenSelect />
         </div>
-
+        <Input
+          type="text"
+          inputMode="decimal"
+          pattern="[0-9.]*"
+          value={amount}
+          placeholder="0.00"
+          onChange={(e) => handleChange(e.target.value)}
+          onFocus={() => setIsFocus(true)}
+          onBlur={() => setIsFocus(false)}
+          className={styles.inputInput}
+        />
         <button
           className={`${styles.submit} btn btn-primary`}
           disabled={isDisabled || !amount || !selectedToken}
@@ -44,6 +44,7 @@ export function InputGroup({
           Preview
         </button>
       </div>
+
       <Conversion />
     </>
   )

src/features/Web3/components/Preview/Preview.module.css

@@ -10,7 +10,7 @@
 .actions button:first-child {
   margin-right: var(--spacer);
   width: 115px;
-  height: 50px;
+  height: 45px;
   padding-top: 0;
   padding-bottom: 0;
 }

src/features/Web3/components/TokenSelect/TokenSelect.css

@@ -11,11 +11,13 @@
 }
 
 .SelectTrigger:hover {
-  background-color: var(--box-background-color);
+  background-color: var(--text-color-dimmed);
 }
 
 .SelectTrigger:focus {
-  box-shadow: 0 0 0 var(--border-width) var(--input-border-focus);
+  background-color: var(--text-color-dimmed);
+
+  /* box-shadow: 0 0 0 var(--border-width) var(--input-border-focus); */
 
   /* border-color: var(--input-border-focus) !important; */
 }

src/styles/_variables.css

@@ -114,7 +114,7 @@
   --input-color-placeholder: var(--text-color-light);
 
   --input-border: var(--border-color);
-  --input-border-focus: var(--brand-cyan);
+  --input-border-focus: var(--link-color);
 
   /* Misc.
   ///////////////////////////////////// */