From dd0c69ac37c45c80e34d084dc2f14d7313245685 Mon Sep 17 00:00:00 2001
From: Hunain Bin Sajid <hunainbinsajid@gmail.com>
Date: Fri, 9 Feb 2024 21:04:01 +0500
Subject: [PATCH] fix: add default theme to config screen

---
 src/config/meta.json          | 26 +++++++++++++-------------
 src/pages/dialog/Dialog.tsx   |  2 +-
 src/pages/popup/Popup.tsx     | 10 +++++++---
 src/screens/config/config.tsx | 10 +++++-----
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/config/meta.json b/src/config/meta.json
index 0805c7fe..7f8ff3b5 100644
--- a/src/config/meta.json
+++ b/src/config/meta.json
@@ -1,22 +1,22 @@
 {
-  "title": "FaceBook",
-  "logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Facebook_Logo_2023.png/1200px-Facebook_Logo_2023.png",
-  "icon":"https://cdn-icons-png.flaticon.com/128/3955/3955011.png",
+  "title": "Keria",
+  "logo": "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png",
+    "icon":"https://cdn-icons-png.flaticon.com/128/3291/3291695.png",
   "theme": {
     "colors": {
-      "primary": "#4c6edf",
-      "secondary": "#2ad881",
-      "error": "#f55877",
-      "heading": "#273444",
-      "text": "#5A5252",
-      "subtext": "#d3dce6",
+      "primary": "green",
+      "secondary": "#2d0457",
+      "error": "red",
+      "heading": "#5e2b8f",
+      "text": "grey",
+      "subtext": "brown",
       "white": "#ffffff",
       "black": "#373e49",
-      "bodyBg": "#252430",
-      "bodyBorder": "#252430",
+      "bodyBg": "linear-gradient(90deg, rgba(2,0,36,1) 1%, rgba(125,67,214,1) 100%, rgba(0,212,255,1) 100%)",
+      "bodyBorder": "#eeff04",
       "bodyColor": "#eeff04",
-      "cardColor": "blue",
-      "cardBg": "green"
+      "cardColor": "green",
+      "cardBg": "blue"
     }
   }
 }
\ No newline at end of file
diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx
index 04cfcb54..ccee39b4 100644
--- a/src/pages/dialog/Dialog.tsx
+++ b/src/pages/dialog/Dialog.tsx
@@ -13,7 +13,7 @@ const StyledMain = styled.div`
     `1px solid ${
       props.theme?.colors?.bodyBorder ?? props.theme?.colors?.bodyBg
     }`};
-  background-color: ${(props) => props.theme?.colors?.bodyBg};
+  background: ${(props) => props.theme?.colors?.bodyBg};
   color: ${(props) => props.theme?.colors?.bodyColor};
 `;
 
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index 6fc64b63..84766b9a 100644
--- a/src/pages/popup/Popup.tsx
+++ b/src/pages/popup/Popup.tsx
@@ -3,6 +3,7 @@ import { createGlobalStyle } from "styled-components";
 import { configService } from "@pages/background/services/config";
 import { ThemeProvider, styled } from "styled-components";
 import { LocaleProvider } from "@src/_locales";
+import { default as defaultMeta } from "@src/config/meta.json";
 import { IMessage } from "@pages/background/types";
 import { Signin } from "@src/screens/signin";
 import { Config } from "@src/screens/config";
@@ -110,9 +111,12 @@ export default function Popup(): JSX.Element {
   if (!vendorData) {
     return (
       <LocaleProvider>
-        <div className="w-[300px]">
-          <Config afterSetUrl={checkIfVendorDataExists} />
-        </div>
+        <ThemeProvider theme={defaultMeta?.theme}>
+          <GlobalStyles />
+          <div className="w-[300px]">
+            <Config afterSetUrl={checkIfVendorDataExists} />
+          </div>
+        </ThemeProvider>
       </LocaleProvider>
     );
   }
diff --git a/src/screens/config/config.tsx b/src/screens/config/config.tsx
index 9d8d56d9..ad58b991 100644
--- a/src/screens/config/config.tsx
+++ b/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 } from "@pages/background/utils";
-import { Dropdown } from "@components/ui";
+import { Button, Dropdown } from "@components/ui";
 
 const langMap = Object.entries(languageCodeMap).map((s) => ({
   label: s[1],
@@ -98,14 +98,14 @@ export function Config(props): JSX.Element {
         />
       </div>
       <div className="flex flex-row justify-center">
-        <button
-          onClick={handleSetUrl}
-          className="text-white bg-green p-2 flex flex-row focus:outline-none font-medium rounded-full text-sm"
+        <Button
+          handleClick={handleSetUrl}
+          className="text-white flex flex-row focus:outline-none font-medium rounded-full text-sm px-5 py-2.5"
         >
           <p className="font-medium text-md">
             {formatMessage({ id: "action.save" })}
           </p>
-        </button>
+        </Button>
       </div>
     </>
   );