Input sufix

masa-finance · Mar 2, 2023 · f4c28b4 · f4c28b4
1 parent b98ab18
commit f4c28b4
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
@@ -3,15 +3,15 @@ interface InputProps extends React.HTMLProps<HTMLInputElement> {
   label?: string;
   required?: boolean;
 }
-export const Input = ({ label, required, ...rest }: InputProps) => {
+export const Input = ({ label, required, className, ...rest }: InputProps) => {
   return (
     <div className="masa-input-container">
       {label && (
         <label className="masa-input-label">
           {label} {required && '*'}
         </label>
       )}
-      <input className="masa-input" {...rest} />
+      <input className={`masa-input ${className}`} {...rest} />
     </div>
   );
 };
diff --git a/src/components/masa-interface/pages/create-soulname/create-soulname.tsx b/src/components/masa-interface/pages/create-soulname/create-soulname.tsx
@@ -159,8 +159,22 @@ export const InterfaceCreateSoulname = (): JSX.Element => {
             label="Domain name"
             required
             onChange={handleChangeSoulname}
-            placeholder="domain.celo"
+            className="transparent"
           />
+
+          <p className="soulname-input-overlay">
+            {soulname ? (
+              <>
+                {soulname}
+                <b>.celo</b>
+              </>
+            ) : (
+              <>
+                domain
+                <b>.celo</b>
+              </>
+            )}
+          </p>
           {soulname !== '' && soulname.length >= 1 ? (
             <p
               className="available-indicator"

diff --git a/src/components/modal/styles.scss b/src/components/modal/styles.scss
@@ -112,6 +112,13 @@
       border: 0.5px solid rgba(0, 0, 0, 0.4);
 
       color: rgba(0, 0, 0, 0.6);
+
+
+      caret-color: black;
+
+      &.transparent {
+        color: transparent;
+      }
     }
   }
 
@@ -182,6 +189,25 @@
         grid-column-gap: 16px;
       }
 
+      .soulname-input-overlay {
+        position: absolute;
+        width: 100%;
+        border-radius: 4px;
+        border-width: 1px;
+
+        font-size: 18px;
+        box-sizing: border-box;
+
+        padding: 1em 1.2em;
+        border: 0.5px solid rgba(0, 0, 0, 0.4);
+
+        color: rgba(0, 0, 0, 0.6);
+
+        margin-top: 48px;
+
+        pointer-events: none;
+      }
+
       .price-estimation {
         font-family: 'Inter';
         font-style: normal;