Refactor/input

src/components/createIdentifierCard.tsx

@@ -1,6 +1,6 @@
-import { isValidElement, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
-import { Button } from "@components/ui";
+import { Button, Input } from "@components/ui";
 import { hasWhiteSpace, removeWhiteSpace } from "@pages/background/utils";
 
 interface ICreateIdentifierCard {
@@ -35,7 +35,7 @@ export function CreateIdentifierCard(
       hasError = true;
     } else if (hasWhiteSpace(name)) {
       setNameError(
-        <div className="text-red mt-1">
+        <div className="text-red text-xs mt-1">
           {formatMessage({ id: "identifier.error.noWhiteSpace" })}{" "}
           <button
             className=" underline cursor-pointer"
@@ -62,24 +62,14 @@ export function CreateIdentifierCard(
         className=" max-w-xs m-4 flex flex-col gap-y-4"
       >
         <div>
-          <input
+          <Input
             type="text"
             id="vendor_url"
-            className={`border text-black text-sm rounded-lg block w-full p-2.5 ${
-              nameError ? " text-red border-red" : ""
-            } `}
+            error={nameError}
             placeholder={formatMessage({ id: "identifier.uniqueName" })}
-            required
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
-          {nameError ? (
-            isValidElement(nameError) ? (
-              nameError
-            ) : (
-              <p className="text-red mt-1">{nameError}</p>
-            )
-          ) : null}
         </div>
         <div className=" flex flex-row justify-center mt-2">
           <Button

src/components/ui/dropdown/dropdown.tsx

@@ -21,7 +21,7 @@ const DropdownWrapper = styled.div<Pick<IDropdown, "zIndex">>`
 `;
 
 const DropdownButton = styled.button`
-  padding: 10px;
+  padding: 8px;
   border: none;
   cursor: pointer;
   width: 100%;

src/components/ui/index.ts

@@ -6,3 +6,4 @@ export * from "./dropdown";
 export * from "./radio";
 export * from "./switch";
 export * from "./loader";
+export * from "./input";

src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { Input } from "./input";

src/components/ui/input/input.tsx

@@ -0,0 +1,73 @@
+import React, { isValidElement } from "react";
+import styled from "styled-components";
+
+interface IInput {
+  label?: string;
+  placeholder?: string;
+  error?: string | JSX.Element;
+  id: string;
+  required?: boolean;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  type?: string;
+}
+
+const StyledInput = styled.input<Pick<IInput, "error">>`
+  border-radius: 4px;
+  display: block;
+  width: 100%;
+  padding: 8px;
+  border: ${({ theme, error }) =>
+    `1px solid ${error ? theme?.colors?.error : theme?.colors?.bodyBorder}`};
+  background-color: ${({ theme }) => theme?.colors?.bodyBg};
+  color: ${({ theme, error }) =>
+    error ? theme?.colors?.error : theme?.colors?.bodyColor};
+`;
+
+const StyledInputError = styled.p`
+  color: ${({ theme }) => theme?.colors?.error};
+  font-size: 12px;
+`;
+
+export const Input = ({
+  label,
+  placeholder,
+  error,
+  id,
+  required,
+  value,
+  onChange,
+  onBlur,
+  type = "text",
+}: IInput) => {
+  return (
+    <div>
+      {label ? (
+        <label htmlFor={id} className="text-sm font-bold">
+          {label}
+        </label>
+      ) : (
+        <></>
+      )}
+      <StyledInput
+        type={type}
+        id={id}
+        className={`text-black text-sm `}
+        error={error}
+        placeholder={placeholder}
+        required={required}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+      />
+      {error ? (
+        isValidElement(error) ? (
+          error
+        ) : (
+          <StyledInputError>{error}</StyledInputError>
+        )
+      ) : null}
+    </div>
+  );
+};

src/screens/config/config.tsx

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl";
 import { configService } from "@pages/background/services/config";
 import { useLocale, languageCodeMap } from "@src/_locales";
 import { isValidUrl, setActionIcon } from "@pages/background/utils";
-import { Button, Dropdown } from "@components/ui";
+import { Button, Dropdown, Input } from "@components/ui";
 
 const langMap = Object.entries(languageCodeMap).map((s) => ({
   label: s[1],
@@ -115,22 +115,15 @@ export function Config(props: any): JSX.Element {
   return (
     <>
       <div className="px-4 relative mb-2">
-        <p className="text-sm font-bold">
-          {formatMessage({ id: "config.vendorUrl.label" })}
-        </p>
-        <input
-          type="text"
+        <Input
           id="vendor_url"
-          className={`border text-black text-sm rounded-lg block w-full p-2.5 ${
-            vendorUrlError ? " text-red border-red" : ""
-          } `}
+          label={formatMessage({ id: "config.vendorUrl.label" })}
+          error={vendorUrlError}
           placeholder={formatMessage({ id: "config.vendorUrl.placeholder" })}
-          required
           value={vendorUrl}
           onChange={(e) => setVendorUrl(e.target.value)}
           onBlur={checkErrorVendorUrl}
         />
-        {vendorUrlError ? <p className="text-red">{vendorUrlError}</p> : null}
         <div className="absolute right-[16px] bottom-[-28px]">
           <Button
             handleClick={handleSave}
@@ -143,22 +136,15 @@ export function Config(props: any): JSX.Element {
         </div>
       </div>
       <div className="px-4">
-        <p className="text-sm font-bold">
-          {formatMessage({ id: "config.agentUrl.label" })} *
-        </p>
-        <input
-          type="text"
+        <Input
           id="agent_url"
-          className={`border text-black text-sm rounded-lg block w-full p-2.5 ${
-            agentUrlError ? " text-red border-red" : ""
-          } `}
+          label={`${formatMessage({ id: "config.agentUrl.label" })} *`}
+          error={agentUrlError}
           placeholder={formatMessage({ id: "config.agentUrl.placeholder" })}
-          required
           value={agentUrl}
           onChange={(e) => setAgentUrl(e.target.value)}
           onBlur={() => handleSetAgentUrl(agentUrl)}
         />
-        {agentUrlError ? <p className="text-red">{agentUrlError}</p> : null}
       </div>
       <div className="px-4">
         <p className="text-sm font-bold">

src/screens/signin/signin.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Button } from "@components/ui";
+import { Button, Input } from "@components/ui";
 import { useIntl } from "react-intl";
 
 interface ISignin {
@@ -49,19 +49,15 @@ export function Signin(props: ISignin): JSX.Element {
         <img src={props.logo} className="w-32 h-32" alt="logo" />
       </div>
       <div className=" px-4 py-2">
-        <input
+        <Input
           type="password"
           id="passcode"
-          className={`border text-black text-sm rounded-lg block w-full p-2.5 ${
-            passcodeError ? " text-red border-red" : ""
-          }`}
+          error={passcodeError}
           placeholder={passcodeMessage}
-          required
           value={passcode}
           onChange={(e) => setPasscode(e.target.value)}
           onBlur={onBlurPasscode}
         />
-        {passcodeError ? <p className="text-red">{passcodeError}</p> : null}
       </div>
       <div className="flex flex-row justify-center">
         <Button

src/screens/signup/signup.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import styled, { css } from "styled-components";
 import { useIntl } from "react-intl";
-import { Card, Button, Text } from "@components/ui";
+import { Card, Button, Text, Input } from "@components/ui";
 import EyeIcon from "@components/shared/icons/eye";
 import EyeOffIcon from "@components/shared/icons/eye-off";
 import { IMessage } from "@config/types";
@@ -13,11 +13,11 @@ interface ISignup {
 }
 
 const StyledGeneratedPassword = styled.p<{ blur: boolean }>`
-  ${({ blur }) =>
+  ${({ blur, theme }) =>
     blur &&
     css`
       color: transparent;
-      text-shadow: 0 0 8px #000;
+      text-shadow: 0 0 8px ${theme?.colors?.cardColor};
     `}
 `;
 
@@ -131,21 +131,15 @@ export function Signup({
               copiedToClipboard ? (
                 <div>
                   <div className="mb-1">
-                    <input
+                    <Input
                       type="password"
                       id="passcode"
-                      className={`border text-black text-sm rounded-lg block w-full p-1 ${
-                        passcodeError ? " text-red border-red" : ""
-                      }`}
+                      error={passcodeError}
                       placeholder={passcodeMessage}
-                      required
                       value={passcode}
                       onChange={(e) => setPasscode(e.target.value)}
                       onBlur={onBlurPasscode}
                     />
-                    {passcodeError ? (
-                      <p className="text-red">{passcodeError}</p>
-                    ) : null}
                   </div>
                   <Button
                     isLoading={isLoading}