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/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 aae64b28..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}; `; @@ -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 => { -
- -
+ + +
+ +
+ ); } diff --git a/src/screens/config/config.tsx b/src/screens/config/config.tsx index 10ab8602..ad58b991 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 { 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 ?

{urlError}

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

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

+ s.value === currentLocale)} + options={langMap} + onSelect={(option) => changeLocale(option.value)} />
- +
);