feat(admin-ui): Implements redesign of public pages (#3504)

* redesign public pages

* rm build files

* fix size of button

packages/admin-ui/ui/src/components/molecules/input-signin/index.tsx

@@ -24,7 +24,6 @@ const SigninInput = React.forwardRef(
       placeholder,
       name,
       key,
-      required,
       onChange,
       onFocus,
       className,
@@ -52,20 +51,17 @@ const SigninInput = React.forwardRef(
     return (
       <div
         className={clsx(
-          "mb-xsmall rounded-rounded h-[48px] w-[320px] overflow-hidden border last:mb-0",
+          "rounded-rounded h-[40px] w-[280px] overflow-hidden border",
           "bg-grey-5 inter-base-regular placeholder:text-grey-40",
           "focus-within:shadow-input focus-within:border-violet-60",
           "flex items-center",
           {
-            "text-grey-40 pointer-events-none focus-within:border-none focus-within:shadow-none":
+            "text-grey-40 pl-xsmall pointer-events-none focus-within:border-none focus-within:shadow-none":
               props.readOnly,
           },
           className
         )}
       >
-        {props.readOnly && (
-          <LockIcon size={16} className="text-grey-40 ml-base" />
-        )}
         <input
           className={clsx(
             "remove-number-spinner leading-base w-full bg-transparent py-3 px-4 outline-none outline-0",
@@ -88,12 +84,17 @@ const SigninInput = React.forwardRef(
             onClick={() => setShowPassword(!showPassword)}
             className="text-grey-40 focus:text-violet-60 px-4 focus:outline-none"
           >
-            {showPassword ? <EyeIcon /> : <EyeOffIcon />}
+            {showPassword ? <EyeIcon size={16} /> : <EyeOffIcon size={16} />}
           </button>
         )}
+        {props.readOnly && (
+          <LockIcon size={16} className="text-grey-40 mr-base" />
+        )}
       </div>
     )
   }
 )
 
+SigninInput.displayName = "SigninInput"
+
 export default SigninInput