Merge pull request #84 from HunnySajid/feat/poc-customization

White Label Customisation Configuration

package.json

@@ -17,6 +17,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
@@ -44,7 +45,7 @@
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
-    "vite-plugin-node-polyfills": "^0.17.0",
-    "vite": "^4.5.1"
+    "vite": "^4.5.1",
+    "vite-plugin-node-polyfills": "^0.17.0"
   }
 }

src/components/appbar.tsx

@@ -4,7 +4,7 @@ interface IAppbar {}
 
 export function Appbar(props: IAppbar): JSX.Element {
   return (
-    <nav className="bg-white border-gray-200 dark:bg-gray-900 p-2">
+    <nav className="bg-white p-2">
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
         <a
           href="https://github.com/WebOfTrust/signify-browser-extension"

src/components/createIdentifierCard.tsx

@@ -1,6 +1,6 @@
 import { isValidElement, useState, useEffect } from "react";
+import { Button } from "@components/ui";
 import { hasWhiteSpace, removeWhiteSpace } from "@pages/background/utils";
-import { Loader } from "@components/loader";
 
 export function CreateIdentifierCard(props): JSX.Element {
   const [name, setName] = useState("");
@@ -51,7 +51,7 @@ export function CreateIdentifierCard(props): JSX.Element {
           <input
             type="text"
             id="vendor_url"
-            className={`bg-gray-50 border text-black border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ${
+            className={`border text-black text-sm rounded-lg block w-full p-2.5 ${
               nameError ? " text-red border-red" : ""
             } `}
             placeholder="Enter unique name for identifier"
@@ -69,14 +69,12 @@ export function CreateIdentifierCard(props): JSX.Element {
           ) : null}
         </div>
         <div className=" flex flex-row justify-center mt-2">
-          <button
-            type="button"
-            onClick={onCreateIdentifier}
-            className="text-white bg-green flex flex-row gap-x-1 font-medium rounded-full text-sm px-5 py-2 text-center"
+          <Button
+            handleClick={onCreateIdentifier}
+            className="text-white flex flex-row font-medium rounded-full text-sm px-5 py-2"
           >
-            {props.isLoading ? <Loader size={4} /> : null}
             <p className="font-medium text-md">Create</p>
-          </button>
+          </Button>
         </div>
       </div>
     </>