From b3590813523f611fd449822ec5935ec4290803a9 Mon Sep 17 00:00:00 2001 From: Hunain Bin Sajid Date: Wed, 7 Feb 2024 20:35:38 +0500 Subject: [PATCH 1/3] feat: add dropdown for language selection --- src/_locales/en.json | 1 + src/_locales/es-419.json | 1 + src/_locales/es.json | 1 + src/_locales/index.ts | 19 +++++-- src/components/identifierList.tsx | 8 ++- src/components/selectIdentifier.tsx | 8 ++- src/components/sidebar.tsx | 2 +- src/components/ui/dropdown/dropdown.tsx | 76 +++++++++++++++++++++++++ src/components/ui/dropdown/index.ts | 1 + src/components/ui/index.ts | 3 +- src/screens/config/config.tsx | 25 ++++---- 11 files changed, 122 insertions(+), 23 deletions(-) create mode 100644 src/components/ui/dropdown/dropdown.tsx create mode 100644 src/components/ui/dropdown/index.ts diff --git a/src/_locales/en.json b/src/_locales/en.json index a617aadf..474fd6c3 100644 --- a/src/_locales/en.json +++ b/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:", diff --git a/src/_locales/es-419.json b/src/_locales/es-419.json index b83709ae..a963c89e 100644 --- a/src/_locales/es-419.json +++ b/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:", diff --git a/src/_locales/es.json b/src/_locales/es.json index b83709ae..a963c89e 100644 --- a/src/_locales/es.json +++ b/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:", diff --git a/src/_locales/index.ts b/src/_locales/index.ts index 860aba8f..a520e9c3 100644 --- a/src/_locales/index.ts +++ b/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, +}; diff --git a/src/components/identifierList.tsx b/src/components/identifierList.tsx index 07426086..3336da33 100644 --- a/src/components/identifierList.tsx +++ b/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 { setShowDrawer(false)} - header={formatMessage({ id: "identifier.create.title" })} + header={ + + {formatMessage({ id: "identifier.create.title" })} + + } > setShowDrawer(false)} - header={formatMessage({ id: "identifier.create.title" })} + header={ + + {formatMessage({ id: "identifier.create.title" })} + + } > logo - + {props?.title} diff --git a/src/components/ui/dropdown/dropdown.tsx b/src/components/ui/dropdown/dropdown.tsx new file mode 100644 index 00000000..460dad73 --- /dev/null +++ b/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 ( + + + {selectedOption?.label} + + {isOpen && ( + + {options.map((option) => ( + handleOptionClick(option)} + > + {option?.label} + + ))} + + )} + + ); +}; diff --git a/src/components/ui/dropdown/index.ts b/src/components/ui/dropdown/index.ts new file mode 100644 index 00000000..e2e4b85e --- /dev/null +++ b/src/components/ui/dropdown/index.ts @@ -0,0 +1 @@ +export { Dropdown } from "./dropdown"; \ No newline at end of file diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 86b7c563..a2eeeb90 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -1,4 +1,5 @@ export * from "./button"; export * from "./drawer"; export * from "./typography"; -export * from "./card"; \ No newline at end of file +export * from "./card"; +export * from "./dropdown"; diff --git a/src/screens/config/config.tsx b/src/screens/config/config.tsx index 10ab8602..9d8d56d9 100644 --- a/src/screens/config/config.tsx +++ b/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 { 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,14 +88,13 @@ export function Config(props): JSX.Element { {urlError ?

{urlError}

: null}
- - Select Spanish - - { - changeLocale(currentLocale == "es" ? "en" : "es"); - }} +

+ {formatMessage({ id: "config.language.label" })} +

+ s.value === currentLocale)} + options={langMap} + onSelect={(option) => changeLocale(option.value)} />
From 934bbe0b0cff7bf6aa482e3449119384d7a5c024 Mon Sep 17 00:00:00 2001 From: Hunain Bin Sajid Date: Wed, 7 Feb 2024 20:53:56 +0500 Subject: [PATCH 2/3] fix: add body color to action icon --- src/pages/dialog/Dialog.tsx | 4 ++-- src/pages/dialog/popupPrompt.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx index aae64b28..04cfcb54 100644 --- a/src/pages/dialog/Dialog.tsx +++ b/src/pages/dialog/Dialog.tsx @@ -81,13 +81,13 @@ export default function Dialog({ {showPopupPrompt ? ( + {formatMessage({ id: "action.open" })}{" "} logo {" "} {formatMessage({ id: "action.toProceed" })} -

+ } /> ) : null} diff --git a/src/pages/dialog/popupPrompt.tsx b/src/pages/dialog/popupPrompt.tsx index e2c4e105..9d99d69b 100644 --- a/src/pages/dialog/popupPrompt.tsx +++ b/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 => { 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 ( -
- -
+ + +
+ +
+ ); } 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 { />
- +
);