feat: add dropdown for language selection

src/_locales/en.json

@@ -18,6 +18,7 @@
   "config.error.enterUrl": "Enter a valid url",
   "config.error.invalidUrl": "Invalid url, Vendor configuration not found",
   "config.error.setUrl": "Vendor url is not set",
+  "config.language.label": "Language",
   "config.vendorUrl.label": "Vendor Url:",
   "config.vendorUrl.placeholder": "Enter vendor url",
   "credential.issue.label": "Isuee:",

src/_locales/es-419.json

@@ -18,6 +18,7 @@
   "config.error.enterUrl": "Introduce una URL válida",
   "config.error.invalidUrl": "URL no válida, configuración del proveedor no encontrada",
   "config.error.setUrl": "La URL del proveedor no está configurada",
+  "config.language.label": "Idioma",
   "config.vendorUrl.label": "URL del proveedor:",
   "config.vendorUrl.placeholder": "Ingrese la URL del proveedor",
   "credential.issue.label": "Asunto:",

src/_locales/es.json

@@ -18,6 +18,7 @@
   "config.error.enterUrl": "Introduce una URL válida",
   "config.error.invalidUrl": "URL no válida, configuración del proveedor no encontrada",
   "config.error.setUrl": "La URL del proveedor no está configurada",
+  "config.language.label": "Idioma",
   "config.vendorUrl.label": "URL del proveedor:",
   "config.vendorUrl.placeholder": "Ingrese la URL del proveedor",
   "credential.issue.label": "Asunto:",

src/_locales/index.ts

@@ -1,13 +1,20 @@
-import en from '@src/_locales/en.json';
-import es from '@src/_locales/es.json';
-import es_419 from '@src/_locales/es-419.json';
+import en from "@src/_locales/en.json";
+import es from "@src/_locales/es.json";
+import es_419 from "@src/_locales/es-419.json";
 
 const existingLanguageCodes = ["en", "es", "es-419"];
+export const languageCodeMap = {
+  en: "English",
+  es: "Spanish",
+  "es-419": "Spanish (LA)",
+};
 
 export * from "./localeContext";
-export const defaultLocale = existingLanguageCodes.includes(navigator.language) ? navigator.language : 'en';
+export const defaultLocale = existingLanguageCodes.includes(navigator.language)
+  ? navigator.language
+  : "en";
 export const messages = {
   en,
   es,
-  "es-419": es_419
-}
+  "es-419": es_419,
+};

src/components/identifierList.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { IdentifierCard } from "@components/identifierCard";
-import { Button, Drawer } from "@components/ui";
+import { Button, Drawer, Text } from "@components/ui";
 import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
 import { CreateIdentifierCard } from "@components/createIdentifierCard";
@@ -71,7 +71,11 @@ export function IdentifierList(): JSX.Element {
       <Drawer
         isOpen={showDrawer}
         handleClose={() => setShowDrawer(false)}
-        header={formatMessage({ id: "identifier.create.title" })}
+        header={
+          <Text $color="subtext" className="text-xl capitalize font-bold">
+            {formatMessage({ id: "identifier.create.title" })}
+          </Text>
+        }
       >
         <CreateIdentifierCard
           isLoading={isCreating}

src/components/selectIdentifier.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { IdentifierCard } from "@components/identifierCard";
-import { Button, Drawer } from "@components/ui";
+import { Button, Drawer, Text } from "@components/ui";
 import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
 import { CreateIdentifierCard } from "@components/createIdentifierCard";
@@ -82,7 +82,11 @@ export function SelectIdentifier(): JSX.Element {
       <Drawer
         isOpen={showDrawer}
         handleClose={() => setShowDrawer(false)}
-        header={formatMessage({ id: "identifier.create.title" })}
+        header={
+          <Text $color="subtext" className="text-xl capitalize font-bold">
+            {formatMessage({ id: "identifier.create.title" })}
+          </Text>
+        }
       >
         <CreateIdentifierCard
           isLoading={isCreating}

src/components/sidebar.tsx

@@ -112,7 +112,7 @@ export function Sidebar(props: ISidebar): JSX.Element {
               className="flex items-center space-x-3 rtl:space-x-reverse"
             >
               <img src={props?.logo} className="h-8" alt="logo" />
-              <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+              <span className="self-center text-2xl font-semibold whitespace-nowrap">
                 {props?.title}
               </span>
             </a>

src/components/ui/dropdown/dropdown.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const DropdownWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+`;
+
+const DropdownButton = styled.button`
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  border-radius: 4px;
+  color: ${({ theme }) => theme?.colors?.bodyColor};
+  background: ${({ theme }) => theme?.colors?.bodyBg};
+  border: ${({ theme }) => `1px solid ${theme?.colors?.bodyBorder}`};
+`;
+
+const DropdownList = styled.ul`
+  width: 100%;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background: ${({ theme }) => theme?.colors?.bodyBg};
+  color: ${({ theme }) => theme?.colors?.bodyColor};
+  border: ${({ theme }) => `1px solid ${theme?.colors?.bodyBorder}`};
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+`;
+
+const DropdownItem = styled.li`
+  padding: 10px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme?.colors?.secondary};
+    color: ${({ theme }) => theme?.colors?.subtext};
+  }
+`;
+
+export const Dropdown = ({ selectedOption, options, onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleDropdownClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleOptionClick = (option) => {
+    setIsOpen(false);
+    onSelect(option);
+  };
+
+  return (
+    <DropdownWrapper>
+      <DropdownButton onClick={handleDropdownClick}>
+        {selectedOption?.label}
+      </DropdownButton>
+      {isOpen && (
+        <DropdownList>
+          {options.map((option) => (
+            <DropdownItem
+              key={option?.value}
+              onClick={() => handleOptionClick(option)}
+            >
+              {option?.label}
+            </DropdownItem>
+          ))}
+        </DropdownList>
+      )}
+    </DropdownWrapper>
+  );
+};

src/components/ui/dropdown/index.ts

@@ -0,0 +1 @@
+export { Dropdown } from "./dropdown";

src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export * from "./button";
 export * from "./drawer";
 export * from "./typography";
-export * from "./card";
+export * from "./card";
+export * from "./dropdown";

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"
     }
   }
 }

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};
 `;
 
@@ -81,13 +81,13 @@ export default function Dialog({
         {showPopupPrompt ? (
           <PopupPrompt
             message={
-              <p className="text-sm text-white">
+              <Text className="text-sm" $color="bodyColor">
                 {formatMessage({ id: "action.open" })}{" "}
                 <span className="inline-block">
                   <img src={logo} className="h-4" alt="logo" />
                 </span>{" "}
                 {formatMessage({ id: "action.toProceed" })}
-              </p>
+              </Text>
             }
           />
         ) : null}

src/pages/dialog/popupPrompt.tsx

@@ -6,6 +6,7 @@ interface IPopupPrompt {
 
 const StyledContainer = styled.div`
   background-color: ${({ theme }) => theme?.colors?.secondary};
+  color: ${({ theme }) => theme?.colors?.bodyColor};
 `;
 
 export const PopupPrompt = ({ message }: IPopupPrompt): JSX.Element => {
@@ -21,7 +22,7 @@ export const PopupPrompt = ({ message }: IPopupPrompt): JSX.Element => {
           <g>
             <g>
               <path
-                fill="white"
+                fill="currentColor"
                 d="M32.131,184.928L32.131,184.928c-18.388,0-31.573-2.505-32.131-2.616l0.734-7.648
         c32.349,0,55.555-8.45,68.964-25.098c15.174-18.835,13.532-43.34,12.394-51.811H25.918l85.588-85.592l85.585,85.592h-53.976
         C136.315,173.487,70.922,184.928,32.131,184.928z M44.564,90.028h43.912l0.673,3.028c0.311,1.432,7.476,35.341-13.381,61.302

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>
     );
   }

src/screens/config/config.tsx

@@ -1,10 +1,14 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { configService } from "@pages/background/services/config";
-import { useLocale } from "@src/_locales";
+import { useLocale, languageCodeMap } from "@src/_locales";
 import { isValidUrl } from "@pages/background/utils";
-import { Text } from "@components/ui";
-import { CustomSwitch } from "@components/customSwitch";
+import { Button, Dropdown } from "@components/ui";
+
+const langMap = Object.entries(languageCodeMap).map((s) => ({
+  label: s[1],
+  value: s[0],
+}));
 
 // This screen should not be styled with theme as it does not depend on the vendor configuration
 export function Config(props): JSX.Element {
@@ -84,25 +88,24 @@ export function Config(props): JSX.Element {
         {urlError ? <p className="text-red">{urlError}</p> : null}
       </div>
       <div className="px-4 py-2">
-        <Text className="font-bold" $color="heading">
-          Select Spanish
-        </Text>
-        <CustomSwitch
-          isChecked={currentLocale == "es"}
-          handleToggle={() => {
-            changeLocale(currentLocale == "es" ? "en" : "es");
-          }}
+        <p className="text-sm font-bold">
+          {formatMessage({ id: "config.language.label" })}
+        </p>
+        <Dropdown
+          selectedOption={langMap.find((s) => s.value === currentLocale)}
+          options={langMap}
+          onSelect={(option) => changeLocale(option.value)}
         />
       </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>
     </>
   );