From f4c28b445df0b4c66b1e40ba62eaea32458b809f Mon Sep 17 00:00:00 2001
From: hide-on-bush-x <hideonbushx123@gmail.com>
Date: Thu, 2 Mar 2023 10:22:34 -0300
Subject: [PATCH] Input sufix

---
 src/components/input/input.tsx                |  4 +--
 .../pages/create-soulname/create-soulname.tsx | 16 +++++++++++-
 src/components/modal/styles.scss              | 26 +++++++++++++++++++
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index eb6413f1..191608fa 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -3,7 +3,7 @@ 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 && (
@@ -11,7 +11,7 @@ export const Input = ({ label, required, ...rest }: InputProps) => {
           {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
index 3aed9559..73a43ab1 100644
--- 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
index e4ebb0a3..35560efe 100644
--- 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;