diff --git a/src/features/common/components/card-message/card-message.module.scss b/src/features/common/components/card-message/card-message.module.scss index a4a46757..c96542cd 100644 --- a/src/features/common/components/card-message/card-message.module.scss +++ b/src/features/common/components/card-message/card-message.module.scss @@ -4,7 +4,7 @@ .span, .p, .code { - font-size: 0.75rem; + font-size: .875rem; line-height: 1.125rem; } diff --git a/src/features/common/components/card-tabs/card-tabs.component.tsx b/src/features/common/components/card-tabs/card-tabs.component.tsx index 00af36ee..435b1b16 100644 --- a/src/features/common/components/card-tabs/card-tabs.component.tsx +++ b/src/features/common/components/card-tabs/card-tabs.component.tsx @@ -129,16 +129,20 @@ const CardTabs: React.FC = ({ {compactTitle} + {activeCard.slots?.toolbar && ( +
+
+ {activeCard.slots.toolbar} +
+
+ )} ); })} - {activeCard.slots?.toolbar && ( -
- {activeCard.slots.toolbar} -
- )} {cards.map((card) => { return ( @@ -181,7 +185,7 @@ const CardTabs: React.FC = ({ onSelectionChange={(e) => { handleActiveCardChange(e.toString()); }} - className={clsx(MonoFont.className, styles.cardTabs)} + className={styles.cardTabs} > <> @@ -197,16 +201,18 @@ const CardTabs: React.FC = ({ {compactTitle} + {activeCard.slots?.toolbar && ( +
+
+ {activeCard.slots.toolbar} +
+
+ )} ); })} - {activeCard.slots?.toolbar && ( -
- {activeCard.slots.toolbar} -
- )} {cards.map((card) => { return ( diff --git a/src/features/common/components/card-tabs/card-tabs.module.scss b/src/features/common/components/card-tabs/card-tabs.module.scss index 8e7a0c44..2db5a3b3 100644 --- a/src/features/common/components/card-tabs/card-tabs.module.scss +++ b/src/features/common/components/card-tabs/card-tabs.module.scss @@ -8,46 +8,42 @@ width: 100%; max-height: fit-content; flex-direction: column; - row-gap: 0.5rem; + row-gap: 1rem; cursor: default; } .cardTabs__title { - grid-column: 1 / -1; + grid-column: 1/-1; display: flex; align-items: center; - gap: 0.25rem; - text-transform: uppercase; + gap: .25rem; color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 500; - letter-spacing: 0.24px; - margin-right: 8px; + font-size: 1rem; + line-height: 1.15rem; + font-weight: 700; + letter-spacing: -.1px; } .cardTabs { - position: relative; - grid-column: span 6; - display: flex; - height: 100%; - width: 100%; - flex-direction: column; - border-radius: 0.5rem; - border: 1px solid var(--color_border_bold); - background: var(--color_bg_layer_alternate); - overflow: hidden; + grid-column: span 6; + display: flex; + flex-direction: column; + border-radius: 1rem; + border: .5px solid var(--color_border_default); + background: var(--color_bg_layer_alternate-bold); + letter-spacing: -.1px; + gap: .25rem; } $cardTabs__tabList__height: 2.5rem; .cardTabs__tabList { - position: relative; - display: flex; - border-bottom: 1px solid var(--color_border_bold); - height: $cardTabs__tabList__height; - flex-shrink: 0; + position: relative; + display: flex; + height: 2.5rem; + padding: .5rem; + gap: .25rem; } .cardTabs__title__container { @@ -56,23 +52,21 @@ $cardTabs__tabList__height: 2.5rem; } .cardTab__title { - position: relative; - display: flex; - align-items: center; - gap: 0.25rem; - text-transform: uppercase; - padding: 0.5rem 0.75rem; - border-bottom: 0.125rem solid transparent; - color: var(--color_fg_default); - font-size: 0.75rem; - line-height: 1.125rem; - font-weight: 500; - letter-spacing: 0.24px; - cursor: pointer; + display: flex; + align-items: center; + gap: .25rem; + border-radius: .5rem; + padding: 0 .5rem; + color: var(--color_fg_default); + font-size: .875rem; + line-height: 1.125rem; + font-weight: 500; + letter-spacing: -.1px; + cursor: pointer; &[data-selected="true"] { - color: var(--color_fg_selected); - border-bottom: 0.125rem solid var(--color_border_selected); + background-color: var(--color_bg_layer); + box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 1px -.5px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.04); } &[data-focus-visible]:after { @@ -86,6 +80,7 @@ $cardTabs__tabList__height: 2.5rem; .cardTab__title__full { display: none; + font-weight: 500; @media #{$breakpoint-dimension-sm} { display: flex; @@ -99,14 +94,24 @@ $cardTabs__tabList__height: 2.5rem; } .cardTabs__actionButtons { - position: absolute; - right: 0.75rem; - top: 0; - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - height: $cardTabs__tabList__height; + position: absolute; + right: 0.75rem; + top: 50%; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.cardTabs__tooltipContainer { + position: relative; + display: inline-block; + &:hover { + .button__tooltip { + opacity: 1; + } + } } .cardTabs__body { diff --git a/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx b/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx index 212703a2..c6de263b 100644 --- a/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx +++ b/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx @@ -7,12 +7,13 @@ import { MonoFont } from "@/libs/theme/fonts"; export interface CardToolbarButtonComponentProps extends AriaButtonOptions<"span"> { variant: "standard" | "icon"; + tooltipText?: string; } export const CardToolbarButtonComponent: React.FC< PropsWithChildren > = (props) => { - const { variant, children } = props; + const { variant, tooltipText, children } = props; const ref = useRef(null); @@ -22,20 +23,25 @@ export const CardToolbarButtonComponent: React.FC< elementType: "span", preventFocusOnPress: true, }, - ref, + ref ); return ( - + {tooltipText && ( + {tooltipText} )} - data-style="compact" - > - {children} - + ); }; diff --git a/src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss b/src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss index b4fb851e..eff9edaf 100644 --- a/src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss +++ b/src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss @@ -1,25 +1,44 @@ +.button__tooltipContainer { + position: relative; + display: inline-block; + &:hover { + .button__tooltip { + opacity: 1; + } + } +} .button__standard { - gap: 0.75rem; - border-radius: 0.25rem; - border: 1px solid var(--color_border_button); + gap: .75rem; + border-radius: .5rem; color: var(--color_fg_on_button_subtle); - font-variant-numeric: slashed-zero; - font-feature-settings: - "clig" off, - "liga" off; + z-index: 2; background-color: transparent; text-transform: uppercase; cursor: pointer; - letter-spacing: 0.2px; + padding: .75rem; + letter-spacing: .2px; appearance: none; display: flex; align-items: center; + justify-content: center; + border: 1px solid transparent; + transition: all .2s ease-out; + width: 2rem; + height: 2rem; + font-size: .875rem; + line-height: 1.375rem; &[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; } + &:hover { + background-color: var(--color_bg_layer); + border: 1px solid var(--color_border_default); + transition: all .2s ease-out; + } + padding: 0 0.75rem; width: 5rem; height: 2rem; @@ -27,11 +46,11 @@ line-height: 1.375rem; &[data-style="compact"] { - padding: 0.125rem 0.375rem; - width: unset; - height: unset; - font-size: 0.75rem; - line-height: 1.25rem; + padding: .25rem; + width: 2rem; + height: 2rem; + font-size: .8125rem; + line-height: 1.35; } svg { @@ -46,6 +65,25 @@ } } +.button__tooltip { + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%); + padding: 4px 8px; + color: var(--color_fg_bold); + background-color: var(--color_bg_layer); + border: 1px solid var(--color_border_default); + border-radius: .5rem; + font-size: .75rem; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity .2s ease-in-out; + box-shadow: 0 2px 4px rgba(0,0,0,.1); + z-index: 1000; +} + .button__icon { gap: 0.75rem; border-radius: 0.25rem; @@ -72,10 +110,9 @@ } &:hover { - background-color: var(--color_bg_layer_alternate-bold); - svg { - stroke: var(--color_fg_selected); - } + background-color: var(--color_bg_layer); + border: 1px solid var(--color_border_default); + transition: all .2s ease-out; } &:focus-visible { diff --git a/src/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx b/src/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx index bb046555..2afb7879 100644 --- a/src/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx +++ b/src/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx @@ -4,6 +4,7 @@ import { CardToolbarButtonComponent, CardToolbarButtonComponentProps, } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component"; +import { ClearIcon } from "../../icons/clear/clear-icon"; interface CardToolbarClearButtonComponentProps extends Omit { @@ -16,8 +17,12 @@ export const CardToolbarClearButtonComponent: React.FC< const dictionary = getButtonsUiDictionary(languageCode); return ( - - {dictionary.clearButton.label} + + ); }; diff --git a/src/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component.tsx b/src/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component.tsx index 788e411a..757c73b4 100644 --- a/src/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component.tsx +++ b/src/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component.tsx @@ -4,6 +4,8 @@ import { CardToolbarButtonComponentProps, } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component"; import { getButtonsUiDictionary } from "@/features/localization/services/ui-language-dictionary.service"; +import { CopyIcon } from "../../icons/copy/copy-icon"; +import { CheckIcon } from "../../icons/check/check-icon"; interface CardToolbarCopyButtonComponentProps extends Omit, "variant"> { @@ -15,7 +17,6 @@ export const CardToolbarCopyButtonComponent: React.FC< CardToolbarCopyButtonComponentProps > = ({ languageCode, value, isDisabled, ...props }) => { const dictionary = getButtonsUiDictionary(languageCode); - const [isCopied, setIsCopied] = useState(false); const resetCopy = () => { @@ -36,10 +37,13 @@ export const CardToolbarCopyButtonComponent: React.FC< onPress={copyValue} onBlur={resetCopy} variant="standard" + tooltipText={ + isCopied + ? dictionary.copyButton.done.label + : dictionary.copyButton.idle.label + } > - {isCopied - ? dictionary.copyButton.done.label - : dictionary.copyButton.idle.label} + {isCopied ? : } ); }; diff --git a/src/features/common/components/card-toolbar-buttons/card-toolbar-description-button/card-toolbar-description-button.component.tsx b/src/features/common/components/card-toolbar-buttons/card-toolbar-description-button/card-toolbar-description-button.component.tsx index 0cc9e1ba..0304d2ca 100644 --- a/src/features/common/components/card-toolbar-buttons/card-toolbar-description-button/card-toolbar-description-button.component.tsx +++ b/src/features/common/components/card-toolbar-buttons/card-toolbar-description-button/card-toolbar-description-button.component.tsx @@ -11,6 +11,8 @@ import { CardToolbarButtonComponent, CardToolbarButtonComponentProps, } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component"; +import { EyeOpenIcon } from "../../icons/eye-open/eye-open-icon"; +import { EyeCloseIcon } from "../../icons/eye-close/eye-close-icon"; interface CardToolbarDescriptionButtonComponentProps extends Omit { @@ -26,12 +28,12 @@ export const CardToolbarDescriptionButtonComponent: React.FC< const setDescriptionVisibility$ = useDebuggerStore((state) => outputType === "header" ? state.setDecodedHeaderDescriptionVisibility$ - : state.setDecodedPayloadDescriptionVisibility$, + : state.setDecodedPayloadDescriptionVisibility$ ); const descriptionVisibility$ = useDebuggerStore((state) => outputType === "header" ? state.decodedHeaderDescriptionVisibility$ - : state.decodedPayloadDescriptionVisibility$, + : state.decodedPayloadDescriptionVisibility$ ); const [descVisibility, setDescVisibility] = @@ -47,7 +49,7 @@ export const CardToolbarDescriptionButtonComponent: React.FC< ClaimDescriptionVisibilityValues.HIDDEN, { secure: true, - }, + } ); setDescriptionVisibility$(ClaimDescriptionVisibilityValues.HIDDEN); @@ -63,7 +65,7 @@ export const CardToolbarDescriptionButtonComponent: React.FC< ClaimDescriptionVisibilityValues.VISIBLE, { secure: true, - }, + } ); setDescriptionVisibility$(ClaimDescriptionVisibilityValues.VISIBLE); @@ -79,15 +81,22 @@ export const CardToolbarDescriptionButtonComponent: React.FC< - {descVisibility === ClaimDescriptionVisibilityValues.VISIBLE - ? dictionary.hideDetailsButton.label - : dictionary.showDetailsButton.label} + {descVisibility === ClaimDescriptionVisibilityValues.VISIBLE ? ( + + ) : ( + + )} ); }; diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index bb9e5912..39d92ed9 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -1,14 +1,21 @@ import React, { PropsWithChildren, useId } from "react"; import styles from "./card.module.scss"; import { clsx } from "clsx"; -import { getLocalizedSecondaryFont, MonoFont } from "@/libs/theme/fonts"; +import { getLocalizedSecondaryFont } from "@/libs/theme/fonts"; import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component"; +import { HeaderIcon } from "../icons/header/header-icon"; +import { CheckIcon } from "../icons/check/check-icon"; +import { EncodingFormatToggleSwitchComponent } from "@/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch"; +import { useDecoderStore } from "@/features/decoder/services/decoder.store"; +import { isHmacAlg } from "../../services/jwt.service"; +import { TokenDecoderKeyFormatPickerComponent } from "@/features/decoder/components/token-decoder-key-format-picker.component"; export interface CardComponentProps extends PropsWithChildren { id: string; languageCode: string; title: string; compactTitle: string; + hasHeaderIcon?: boolean; options: Partial<{ noPadding: boolean; fullWidth: boolean; @@ -44,6 +51,7 @@ export const CardComponent: React.FC = (props) => { }, messages, slots, + hasHeaderIcon = false, } = props; const cardId = useId(); @@ -61,12 +69,12 @@ export const CardComponent: React.FC = (props) => { aria-label={canRenderTitle ? undefined : title} heap-ignore="true" className={clsx( - MonoFont.className, styles.card, options && options.fullWidth && styles.card__hasFullWidth, - options && options.fullHeight && styles.card__hasFullHeight, + options && options.fullHeight && styles.card__hasFullHeight )} data-type={options && options.isOutput ? "output" : "input"} + data-no-padding={options ? options.noPadding : undefined} data-frameless={options && options.frameless} > {!options?.hideTitle && ( @@ -74,21 +82,9 @@ export const CardComponent: React.FC = (props) => { {titleKey && (
{titleKey && !compactTitle && ( -

- - {titleKey} - {titleValue && `: `} - - {titleValue && ( - - {titleValue} - - )} -

- )} - {titleKey && compactTitle && ( - <> -

+
+ {hasHeaderIcon && } +

{titleKey} {titleValue && `: `} @@ -99,6 +95,24 @@ export const CardComponent: React.FC = (props) => { )}

+
+ )} + {titleKey && compactTitle && ( + <> +
+ {hasHeaderIcon && } +

+ + {titleKey} + {titleValue && `: `} + + {titleValue && ( + + {titleValue} + + )} +

+

{compactTitle} @@ -111,6 +125,16 @@ export const CardComponent: React.FC = (props) => { )} )} +
+
+ {children} +
+
{messages && messages.errors && messages.errors.length > 0 ? (
= (props) => { > {messages.success.map((line, index) => { return ( - {line} +
+ + {line} +
); })}
) : null} + {slots?.notification} {messages && messages.warnings && messages.warnings.length > 0 && (
= (props) => { })}
)} - {slots?.notification} -
- {children} -
{slots?.footer && (
{slots.footer}
)} @@ -183,31 +202,40 @@ export const CardWithHeadlineComponent: React.FC< CardWithHeadlineComponentProps > = ({ sectionHeadline, languageCode, ...props }) => { const regionId = useId(); + const alg$ = useDecoderStore((state) => state.alg); return (
{sectionHeadline && ( - <> -

- {sectionHeadline.title} - {sectionHeadline.titleTag && ( - - {sectionHeadline.titleTag} - +
+
+

+ {sectionHeadline.title} + {sectionHeadline.titleTag && ( + + {sectionHeadline.titleTag} + + )} +

+ {sectionHeadline.description && ( +

+ {sectionHeadline.description} +

)} -

- {sectionHeadline.description && ( -

- {sectionHeadline.description} -

+
+ + {isHmacAlg(alg$) ? ( + + ) : ( + )} - +

)} diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index a320b31e..a7104dc9 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -2,17 +2,17 @@ @use "@/libs/theme/styles/mixins" as *; .cardHeadline__title { - grid-column: 1 / -1; - display: flex; - align-items: center; - gap: 0.25rem; - text-transform: uppercase; - padding: 0.5rem 0; - color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 500; - letter-spacing: 0.24px; + grid-column: 1/-1; + display: flex; + align-items: center; + gap: .25rem; + font-family: var(--font-primary); + padding-top: .75rem; + color: var(--color_fg_default); + font-size: 1rem; + line-height: 1.15rem; + font-weight: 700; + letter-spacing: -.2px; & * { font-size: inherit; @@ -56,24 +56,44 @@ } } +.headline__container { + display: flex; + flex-direction: column; + gap: 0; +} + +.title__container { + grid-column: 1/-1; + width: 100%; + color: var(--color_fg_bold); + font-size: 1.75rem; + font-weight: 500; + line-height: 1.5; + margin-bottom: .5rem; + display: flex; + justify-content: space-between; +} + .card { isolation: isolate; + flex: 1 1; grid-column: span 6; display: flex; - flex: 1; flex-direction: column; - border-radius: 0.5rem; - border: 1px solid var(--color_border_bold); - background: var(--color_bg_code-editor); - overflow: hidden; - - &[data-type="output"] { - background: var(--color_bg_layer_alternate); - } + border-radius: 1rem; + border: 1px solid var(--color_border_default); + background: var(--color_bg_layer_alternate-bold); + padding: 0.25rem; + letter-spacing: -.1px; +} - &[data-frameless="true"] { - border-radius: 0; - border: none; +.card__heading_title_container { + display: flex; + flex-direction: row; + align-items: center; + svg { + color: var(--color_fg_default); + margin-right: 2px; } } @@ -106,10 +126,7 @@ justify-content: space-between; padding: 0.5rem 1rem; height: 3rem; - - border-bottom: 1px solid var(--color_border_bold); gap: 0.25rem; - text-transform: uppercase; } .card__fullTitle { @@ -143,22 +160,19 @@ } .card__titleKey { - color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-style: normal; - font-weight: 500; - letter-spacing: 0.24px; - text-transform: uppercase; + color: var(--color_fg_default); + font-size: .875rem; + line-height: 1.375rem; + font-weight: 500; + letter-spacing: .24px; } .card__titleValue { color: var(--color_fg_default); - font-size: 0.875rem; + font-size: .875rem; line-height: 1.375rem; font-weight: 500; - letter-spacing: 0.24px; - text-transform: uppercase; + letter-spacing: .24px; } .card__action { @@ -173,6 +187,13 @@ border-top: 1px solid var(--color_border_bold); } +.card__content { + background-color: var(--color_bg_layer); + height: 100%; + border-radius: .75rem; + box-shadow: 0 0 0 .5px rgba(0,0,0,.12),0 2px 2px -1px rgba(0,0,0,.04),0 4px 4px -2px rgba(0,0,0,.04),0 6px 6px -3px rgba(0,0,0,.04); +} + .card__body { display: flex; flex: 1; @@ -197,20 +218,19 @@ } .card__status { + flex: 1 1; display: flex; - flex-direction: column; - flex-shrink: 0; - padding: 0.5rem 1rem; - gap: 0.25rem; - font-size: 0.875rem; + align-items: center; + justify-content: flex-start; + padding: .75rem .75rem .5rem; + gap: .25rem; + font-size: .875rem; line-height: 1.375rem; color: var(--color_fg_default); - border-top: 1px solid var(--color_border_bold); } .card__success { - background-color: var(--color_bg_state_success_subtle); - + svg, span, p, code { @@ -227,8 +247,7 @@ } .card__error { - background-color: var(--color_bg_state_danger_subtle); - + span, p, code { @@ -245,7 +264,6 @@ } .card__warning { - background-color: var(--color_bg_state_caution_subtle); span, p, diff --git a/src/features/common/components/checkbox/checkbox.module.scss b/src/features/common/components/checkbox/checkbox.module.scss index 307edf43..94b4e498 100644 --- a/src/features/common/components/checkbox/checkbox.module.scss +++ b/src/features/common/components/checkbox/checkbox.module.scss @@ -2,6 +2,7 @@ --selected-color: var(--color_bg_state_success); --selected-color-pressed: var(--color_fg_on_state_success_subtle); --checkmark-color: var(--color_border_state_success); + width: 250px; display: flex; /* This is needed so the HiddenInput is positioned correctly */ diff --git a/src/features/common/components/debugger-picker/debugger-picker.component.tsx b/src/features/common/components/debugger-picker/debugger-picker.component.tsx index df256aa4..c62873c2 100644 --- a/src/features/common/components/debugger-picker/debugger-picker.component.tsx +++ b/src/features/common/components/debugger-picker/debugger-picker.component.tsx @@ -5,7 +5,6 @@ import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-pic import { LibraryFilterLabel } from "@/features/libraries/models/library-filters.model"; import { isGroupedOptionsType } from "./utils"; - interface PickerLabelProps { label: string | null; } @@ -17,12 +16,12 @@ const getGroupLabel = ( >, selected: DebuggerPickerOptionModel ): LibraryFilterLabel | undefined => { - if(!isGroupedOptionsType(options)) return undefined + if (!isGroupedOptionsType(options)) return undefined; const group = (options as GroupBase[]).find( (group) => group.options.some((opt) => opt.value === selected.value) ); - return group ? group.label as LibraryFilterLabel : undefined; + return group ? (group.label as LibraryFilterLabel) : undefined; }; const PickerLabel: React.FC = ({ label }) => { @@ -41,7 +40,7 @@ interface DebuggerPickerComponentProps { GroupBase >; isGrouped?: boolean; - selectedOptionCode: DebuggerPickerOptionModel | null; + selectedOptionCode?: DebuggerPickerOptionModel | null; handleSelection: ( selection: string, parentLabel?: LibraryFilterLabel @@ -55,16 +54,14 @@ export const DebuggerPickerComponent: React.FC< > = ({ label, options, - handleSelection, selectedOptionCode, + handleSelection, placeholder, minWidth, }) => { const [isClient, setIsClient] = useState(false); - const handleChange = ( - selection: SingleValue - ) => { + const handleChange = (selection: SingleValue) => { if (!selection) { return; } @@ -78,31 +75,45 @@ export const DebuggerPickerComponent: React.FC< if (!isClient) { return ( -
+ <>
-
+ ); } return ( -
+ <> {label && } -
+ ); }; diff --git a/src/features/common/components/debugger-picker/debugger-picker.module.scss b/src/features/common/components/debugger-picker/debugger-picker.module.scss index 8541f752..ab25a72c 100644 --- a/src/features/common/components/debugger-picker/debugger-picker.module.scss +++ b/src/features/common/components/debugger-picker/debugger-picker.module.scss @@ -21,8 +21,8 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); background: transparent; border: none; color: var(--color_fg_bold); - cursor: pointer; - gap: 0.75rem; + gap: .75rem; + width: 100%; //width: $picker-width-sm; @@ -34,20 +34,17 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); } .picker__label { - display: flex; - align-items: center; - justify-content: center; - padding: 0; - list-style-type: none; - margin: 0; - gap: 0.5rem; - font-size: 0.8125rem; - line-height: 1.3125rem; - letter-spacing: -0.05px; - - width: 100%; - - height: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0; + list-style-type: none; + margin: 0; + gap: .5rem; + font-size: .875rem; + line-height: 1.35; + width: 100%; + height: 100%; & svg { stroke: var(--color_fg_bold); @@ -56,4 +53,5 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); .picker__fullName { display: flex; -} + font-weight: 600; +} \ No newline at end of file diff --git a/src/features/common/components/icons/check/check-icon.tsx b/src/features/common/components/icons/check/check-icon.tsx new file mode 100644 index 00000000..e539182f --- /dev/null +++ b/src/features/common/components/icons/check/check-icon.tsx @@ -0,0 +1,19 @@ +export const CheckIcon = () => { + return ( + + + + ); +}; diff --git a/src/features/common/components/icons/clear/clear-icon.tsx b/src/features/common/components/icons/clear/clear-icon.tsx new file mode 100644 index 00000000..98ad42fe --- /dev/null +++ b/src/features/common/components/icons/clear/clear-icon.tsx @@ -0,0 +1,26 @@ +export const ClearIcon = () => { + return ( + + + + + ); +}; diff --git a/src/features/common/components/icons/copy/copy-icon.tsx b/src/features/common/components/icons/copy/copy-icon.tsx index 93a104a9..38ccf3c7 100644 --- a/src/features/common/components/icons/copy/copy-icon.tsx +++ b/src/features/common/components/icons/copy/copy-icon.tsx @@ -20,4 +20,4 @@ export const CopyIcon = () => { > ); -}; \ No newline at end of file +}; diff --git a/src/features/common/components/icons/eye-close/eye-close-icon.tsx b/src/features/common/components/icons/eye-close/eye-close-icon.tsx new file mode 100644 index 00000000..a15bd475 --- /dev/null +++ b/src/features/common/components/icons/eye-close/eye-close-icon.tsx @@ -0,0 +1,25 @@ +export const EyeCloseIcon = () => { + return ( + + + + + ); +}; diff --git a/src/features/common/components/icons/eye-open/eye-open-icon.tsx b/src/features/common/components/icons/eye-open/eye-open-icon.tsx new file mode 100644 index 00000000..1cef38a7 --- /dev/null +++ b/src/features/common/components/icons/eye-open/eye-open-icon.tsx @@ -0,0 +1,16 @@ +export const EyeOpenIcon = () => { + return ( + + + + ); +}; diff --git a/src/features/common/components/icons/header/header-icon.tsx b/src/features/common/components/icons/header/header-icon.tsx new file mode 100644 index 00000000..4d83d5e5 --- /dev/null +++ b/src/features/common/components/icons/header/header-icon.tsx @@ -0,0 +1,25 @@ +export const HeaderIcon = () => { + return ( + + + + + ); +}; diff --git a/src/features/common/components/json-viewer/json-viewer.module.scss b/src/features/common/components/json-viewer/json-viewer.module.scss index a9a9d9c8..8fd8a933 100644 --- a/src/features/common/components/json-viewer/json-viewer.module.scss +++ b/src/features/common/components/json-viewer/json-viewer.module.scss @@ -76,15 +76,14 @@ .propertyTooltip { border-radius: 4px; - background: var(--color_bg_state_info_subtle); - color: var(--color_fg_on_state_info_subtle); - border: 1px solid var(--color_border_state_info); + background: var(--color_bg_layer); + color: var(--color_fg_default); + border: 1px solid var(--color_border_default); font-size: 0.75rem; line-height: 1.25rem; forced-color-adjust: none; outline: none; padding: 2px 8px; - max-width: 150px; /* fixes FF gap */ transform: translate3d(0, 0, 0); transition: diff --git a/src/features/common/components/widget/widget/widget.component.tsx b/src/features/common/components/widget/widget/widget.component.tsx index eff71f5c..4069b3d2 100644 --- a/src/features/common/components/widget/widget/widget.component.tsx +++ b/src/features/common/components/widget/widget/widget.component.tsx @@ -1,7 +1,6 @@ import React, { ReactNode, useId } from "react"; import styles from "./widget.module.scss"; import { BoxComponent } from "@/features/common/components/box/box.component"; -import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component"; import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values"; import { clsx } from "clsx"; import { getLocalizedSecondaryFont } from "@/libs/theme/fonts"; @@ -23,12 +22,9 @@ interface WidgetComponentProps { export const WidgetComponent: React.FC = ({ id, - widget, languageCode, headlineConfig, title, - description, - exampleGenerator, contentInput, contentOutput, }) => { @@ -42,6 +38,7 @@ export const WidgetComponent: React.FC = ({ contentClassName={styles.content} aria-labelledby={headlineConfig.isVisible ? widgetId : undefined} > + {headlineConfig.isVisible && (

= ({ {headlineConfig.actions}

)} -
- {description} - -
+
{contentInput}
diff --git a/src/features/common/components/widget/widget/widget.module.scss b/src/features/common/components/widget/widget/widget.module.scss index 288e51b6..e5bde61f 100644 --- a/src/features/common/components/widget/widget/widget.module.scss +++ b/src/features/common/components/widget/widget/widget.module.scss @@ -11,7 +11,7 @@ grid-column: span 6; display: flex; flex-direction: column; - gap: 0.5rem; + gap: 1rem; } .content__output { @@ -42,28 +42,3 @@ line-height: 2.25rem; } } - -.input__description { - grid-column: span 6; - width: 100%; - color: var(--color_fg_default); - display: flex; - flex-direction: column; - - gap: 0.625rem; - row-gap: 0.25rem; - - font-size: 0.875rem; - line-height: 1.375rem; - - & strong { - font-weight: 500; - } - - @media #{$breakpoint-dimension-sm} { - grid-column: span 12; - flex-direction: row; - align-items: center; - justify-content: space-between; - } -} diff --git a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx index f1d10216..272b2c28 100644 --- a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx +++ b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx @@ -16,8 +16,6 @@ import { jwsExampleAlgHeaderParameterValuesDictionary, } from "@/features/common/values/jws-alg-header-parameter-values.dictionary"; import { useButton } from "@react-aria/button"; -import { clsx } from "clsx"; -import { PrimaryFont } from "@/libs/theme/fonts"; import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model"; enum PickerStates { @@ -60,11 +58,11 @@ export const WidgetAlgPickerComponent: React.FC< elementType: "span", preventFocusOnPress: true, }, - buttonRef, + buttonRef ); const [pickerState, setPickerState] = useState( - PickerStates.IDLE, + PickerStates.IDLE ); const [canUseEs512, setCanUseEs512] = useState(false); const [canUseEd25519, setCanUseEd25519] = useState(false); @@ -73,11 +71,11 @@ export const WidgetAlgPickerComponent: React.FC< const dictionary = getPickersUiDictionary(languageCode); const selectEncoderAlg$ = useEncoderStore( - (state) => state.selectEncodingExample, + (state) => state.selectEncodingExample ); const selectDecoderAlg$ = useDecoderStore( - (state) => state.selectDecodingExample, + (state) => state.selectDecodingExample ); const selectExample = (value: string) => { @@ -94,14 +92,6 @@ export const WidgetAlgPickerComponent: React.FC< setPickerState(PickerStates.IDLE); }; - const openPicker = () => { - setPickerState(PickerStates.PICKING); - }; - - const closePicker = () => { - setPickerState(PickerStates.IDLE); - }; - useEffect(() => { (async function runEs512Check() { setCanUseEs512(await isP521Supported()); @@ -138,13 +128,13 @@ export const WidgetAlgPickerComponent: React.FC< value: key, label: value.name, }; - }, + } ); }, []); const asymmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { const digitalSignatureEntries = Object.entries( - jwsExampleAlgHeaderParameterValuesDictionary.digitalSignature, + jwsExampleAlgHeaderParameterValuesDictionary.digitalSignature ); const asymmetricAlgOptions: DebuggerPickerOptionModel[] = []; @@ -195,40 +185,30 @@ export const WidgetAlgPickerComponent: React.FC< const algOptions = useMemo(() => { return [...noneAlgOptions, ...symmetricAlgOptions, ...asymmetricAlgOptions]; - }, [asymmetricAlgOptions, noneAlgOptions, symmetricAlgOptions]); + }, [noneAlgOptions, asymmetricAlgOptions, symmetricAlgOptions]); return ( -
- {pickerState === PickerStates.IDLE && ( - - )} - {pickerState === PickerStates.PICKING && ( - <> - - - - )} +
+
+
+
+ +
+
+ +
+
+
); }; diff --git a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss index 05fb7e17..a195930a 100644 --- a/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss +++ b/src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss @@ -1,30 +1,69 @@ @use "@/libs/theme/styles/variables" as *; -.picker { - display: flex; - justify-content: flex-end; - align-items: center; - gap: 0.5rem; - height: 2rem; +.alg_picker { + display: flex; + justify-content: flex-end; + align-items: center; + gap: .5rem; + height: 2rem; + width: 100%; @media #{$breakpoint-dimension-sm} { justify-content: center; + width: unset; } } .container { + position: relative; + display: flex; + align-items: center; + gap: .5rem; + align-self: flex-end; + height: 100%; + width: 100%; + flex-shrink: 0; + + @media #{$breakpoint-dimension-sm} { + align-self: unset; + width: fit-content; + } +} + +.picker { position: relative; display: flex; + justify-content: space-between; align-items: center; - gap: 0.5rem; - align-self: flex-end; + background: transparent; + border: none; + color: var(--color_fg_bold); + gap: .75rem; + width: 100%; +} + +.picker__label { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0; + list-style-type: none; + margin: 0; + margin-top: .475rem; + gap: .5rem; + font-size: .875rem; + line-height: 1.35; + width: 100%; height: 100%; - width: fit-content; - flex-shrink: 0; +} - @media #{$breakpoint-dimension-sm} { - align-self: unset; - } +.picker__fullName { + display: flex; + font-weight: 600; +} + +.picker__container { + height: 2rem; } .button { @@ -40,7 +79,7 @@ cursor: pointer; &:focus-visible { - outline: solid 1px var(--color_border_focus); + outline: solid 2px var(--color_border_focus); outline-offset: 0.125rem; border-radius: 0.125rem; } diff --git a/src/features/debugger/components/debugger-toolbar/debugger-toolbar.module.scss b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.module.scss index ca10a854..26f93226 100644 --- a/src/features/debugger/components/debugger-toolbar/debugger-toolbar.module.scss +++ b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.module.scss @@ -4,7 +4,7 @@ .content { @include InnerContentFlex; flex-direction: column; - + align-items: center; grid-row-gap: 0; } @@ -16,23 +16,35 @@ .tabs { display: flex; - gap: 1rem; list-style: none; + background-color: var(--color_bg_app_bar); + padding: 0.25rem; + border-radius: 9999px; +} + +.titleTab:hover { + opacity: 1; + background-color: var(--color_bg_app_bar); + border-radius: 9999px; + transition: all 0.2s ease-out } .titleTab { color: var(--color_fg_bold); - font-size: 1.5rem; - line-height: 2.25rem; - letter-spacing: -0.8px; + padding: 0.5rem 1rem; background-color: transparent; outline: none; border: none; cursor: pointer; opacity: 0.48; + transition: all .2s ease-out; &[data-active="true"] { opacity: 1; + background-color: var(--color_bg_layer); + border-radius: 9999px; + box-shadow: 0 1px 2px rgba(0,0,0,.1); + transition: all .2s ease-out; } :global(html[lang="ja"]) & { @@ -41,16 +53,18 @@ } @media #{$breakpoint-dimension-sm} { - font-size: 1.75rem; - line-height: 2.25rem; + font-size: 0.875rem; + line-height: 1.35; } } -.titleTab:hover { - opacity: 1; -} + .titleTab__compactLabel { + font-size: .875rem; + font-weight: 600; + font-family: var(--font-primary); + line-height: 1.35; @media #{$tablet} { display: none; } @@ -58,6 +72,10 @@ .titleTab__fullLabel { display: none; + font-size: .875rem; + font-weight: 600; + font-family: var(--font-primary); + line-height: 1.35; @media #{$tablet} { display: unset; diff --git a/src/features/debugger/components/debugger-widget/debugger-widget.module.scss b/src/features/debugger/components/debugger-widget/debugger-widget.module.scss index b105d2ce..b169d74f 100644 --- a/src/features/debugger/components/debugger-widget/debugger-widget.module.scss +++ b/src/features/debugger/components/debugger-widget/debugger-widget.module.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; gap: 0.5rem; - padding-bottom: 4rem; + padding-bottom: 2rem; &[data-mode="UNIFIED"] > :nth-child(2) { margin-top: -0.5rem; diff --git a/src/features/decoder/components/claim.module.scss b/src/features/decoder/components/claim.module.scss index 68e52a19..46bde402 100644 --- a/src/features/decoder/components/claim.module.scss +++ b/src/features/decoder/components/claim.module.scss @@ -2,12 +2,11 @@ @use "@/libs/theme/styles/mixins" as *; .row { - position: relative; - grid-column: 1 / -1; - display: grid; - grid-template-columns: subgrid; - - border-bottom: 1px solid var(--color_border_bold); + position: relative; + grid-column: 1/-1; + display: grid; + grid-template-columns: subgrid; + border-bottom: 1px solid var(--color_border_bold); &:last-child { border-bottom: unset; @@ -40,8 +39,6 @@ text-wrap: wrap; overflow: hidden; word-break: break-all; - color: var(--color_jwt_payload); - background-color: var(--color_bg_layer_alternate-bold); font-size: 0.75rem; line-height: 1.125rem; font-style: normal; @@ -134,13 +131,4 @@ font-size: 0.75rem; line-height: 1.25rem; - &[data-type="warning"] { - background-color: var(--color_bg_state_caution_subtle); - color: var(--color_fg_on_state_caution_subtle); - } - - &[data-type="info"] { - background-color: var(--color_bg_state_info_subtle); - color: var(--color_fg_on_state_info_subtle); - } } diff --git a/src/features/decoder/components/claims.module.scss b/src/features/decoder/components/claims.module.scss index bd40d92d..23567184 100644 --- a/src/features/decoder/components/claims.module.scss +++ b/src/features/decoder/components/claims.module.scss @@ -2,10 +2,10 @@ @use "@/libs/theme/styles/mixins" as *; .table { - display: grid; - grid-template-columns: repeat(6, 1fr); - overflow-y: auto; - overflow-x: auto; + display: grid; + grid-template-columns: repeat(6,1fr); + padding: .25rem; + transition: all .3s ease-in-out; &::-webkit-scrollbar { width: 0.75rem; diff --git a/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.module.scss b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.module.scss new file mode 100644 index 00000000..8c2b060f --- /dev/null +++ b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.module.scss @@ -0,0 +1,91 @@ +@use "@/libs/theme/styles/variables" as *; + +.base_switch { + display: flex; + justify-content: flex-end; +} + +.encoder { + width: 100%; +} + +.container { + display: flex; + align-items: center; + gap: .5rem; +} + +.label { + display: flex; + flex-direction: column; + text-transform: uppercase; + font-size: .75rem; + line-height: 1.25rem; + color: var(--color_fg_default); + letter-spacing: .1px; +} + +.fullLabel { + display: none; + font-size: .8125rem; + font-weight: 500; + @media #{$breakpoint-dimension-sm} { + display: unset; + } +} + +.input { + opacity: 0; + width: 0; + height: 0; +} + +.switch__container { + position: relative; + display: inline-block; + width: 40px; + height: 24px; + transition: all .25s cubic-bezier(.17,.67,.83,.67); +} + +.picker__round { + border-radius: 24px; + &::before { + border-radius: 50%; + } +} + +.picker__slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--color_bg_layer_bold); + border: 1px solid var(--color_border_default); + box-shadow: 0 0 1px rgba(0,0,0,.06),0 0 1px rgba(0,0,0,.06),inset 0 1px 1px .5px rgba(0,0,0,.04); + transition: background-color .25s cubic-bezier(.17,.67,.83,.67),border .25s ease; + &::before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + top: 3px; + left: 3px; + background: linear-gradient(180deg,transparent,rgba(0,0,0,.08)),#fff; + box-shadow: 0 2px 2px -1px rgba(0,0,0,.2),0 2px 4px -2px rgba(0,0,0,.2),inset 0 .5px .5px hsla(0,0%,100%,.12); + transition: transform .25s cubic-bezier(.34,1.56,.64,1),background-color .2s ease; + will-change: transform; + } +} + +input:checked+.picker__slider { + background-color: var(--color_fg_bold); + border: 1px solid var(--color_fg_bold); + &::before { + transform: translateX(16px); + background-color: var(--color_fg_on_state_success); + } +} + diff --git a/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx new file mode 100644 index 00000000..bd034ce4 --- /dev/null +++ b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx @@ -0,0 +1,62 @@ +import React, { ChangeEvent, useEffect, useState } from "react"; +import styles from "./encoding-format-toggle-switch.module.scss"; +import { EncodingValues } from "@/features/common/values/encoding.values"; +import { useDecoderStore } from "@/features/decoder/services/decoder.store"; +import { getPickersUiDictionary } from "@/features/localization/services/ui-language-dictionary.service"; +import { Switch } from "react-aria-components"; +import clsx from "clsx"; +import { useEncoderStore } from "@/features/encoder/services/encoder.store"; + +interface EncodingFormatToggleSwitchComponentProps { + languageCode: string; + isEncoding?: boolean; +} + +export const EncodingFormatToggleSwitchComponent: React.FC< + EncodingFormatToggleSwitchComponentProps +> = ({ languageCode, isEncoding = false }) => { + const dictionary = getPickersUiDictionary(languageCode); + + const handleSymmetricSecretKeyEncodingChangeDe = useDecoderStore( + (state) => state.handleSymmetricSecretKeyEncodingChange + ); + + const handleSymmetricSecretKeyEncodingChangeEn = useEncoderStore( + (state) => state.handleSymmetricSecretKeyEncodingChange + ); + + const onSecretEncodingFormatChange = ( + event: ChangeEvent + ) => { + if (isEncoding) { + handleSymmetricSecretKeyEncodingChangeEn( + event.target.checked ? EncodingValues.BASE64URL : EncodingValues.UTF8 + ); + return; + } + handleSymmetricSecretKeyEncodingChangeDe( + event.target.checked ? EncodingValues.BASE64URL : EncodingValues.UTF8 + ); + }; + + return ( +
+
+
+ Base64URL Encoded? +
+ +
+
+ ); +}; diff --git a/src/features/decoder/components/jwt-editor.component.tsx b/src/features/decoder/components/jwt-editor.component.tsx index 36f05a36..3475fc06 100644 --- a/src/features/decoder/components/jwt-editor.component.tsx +++ b/src/features/decoder/components/jwt-editor.component.tsx @@ -73,7 +73,7 @@ export const JwtEditorComponent: React.FC = ({ padding="1rem" style={{ fontFamily: '"Roboto Mono", monospace', - fontSize: 14, + fontSize: 16, lineHeight: 1.4, border: "none", outline: "none", diff --git a/src/features/decoder/components/jwt-input.component.tsx b/src/features/decoder/components/jwt-input.component.tsx index 17274b92..41c1541a 100644 --- a/src/features/decoder/components/jwt-input.component.tsx +++ b/src/features/decoder/components/jwt-input.component.tsx @@ -85,6 +85,7 @@ export const JwtInputComponent: React.FC = ({ success: [dictionary.successMessage], errors: decodeErrors$, }} + hasHeaderIcon slots={{ notification: ( = ({ value={token} /> ), diff --git a/src/features/decoder/components/jwt-input.module.scss b/src/features/decoder/components/jwt-input.module.scss index 386b07eb..09165b65 100644 --- a/src/features/decoder/components/jwt-input.module.scss +++ b/src/features/decoder/components/jwt-input.module.scss @@ -1,14 +1,12 @@ .headline { - grid-column: 1 / -1; - display: flex; - align-items: center; - gap: 0.25rem; - text-transform: uppercase; - color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 500; - letter-spacing: 0.24px; + display: flex; + align-items: center; + width: 100%; + font-size: 1rem; + font-weight: 700; + line-height: 1.15; + letter-spacing: -.1px; + color: var(--color_fg_default); } .checkbox__label { diff --git a/src/features/decoder/components/secret-key-input.component.tsx b/src/features/decoder/components/secret-key-input.component.tsx index 43eda43e..35a937b5 100644 --- a/src/features/decoder/components/secret-key-input.component.tsx +++ b/src/features/decoder/components/secret-key-input.component.tsx @@ -1,10 +1,8 @@ import React, { ChangeEvent, useEffect, useState } from "react"; -import { TokenDecoderEncodingFormatPickerComponent } from "@/features/decoder/components/token-decoder-encoding-format-picker.component"; import { SignatureVerificationSecretInputComponent } from "@/features/decoder/components/signature-verification-secret-input.component"; import { SignatureVerificationPublicKeyInputComponent } from "@/features/decoder/components/signature-verification-public-key-input.component"; import { CardWithHeadlineComponent } from "@/features/common/components/card/card.component"; import { DEFAULT_JWT } from "@/features/decoder/services/token-decoder.service"; -import { TokenDecoderKeyFormatPickerComponent } from "@/features/decoder/components/token-decoder-key-format-picker.component"; import { useDecoderStore } from "@/features/decoder/services/decoder.store"; import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model"; import { useDebuggerStore } from "@/features/debugger/services/debugger.store"; @@ -20,6 +18,7 @@ import { CardToolbarCopyButtonComponent } from "@/features/common/components/car import { CardToolbarClearButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component"; import { NOOP_ALG } from "@/features/common/values/constants"; + type SecretKeyInputComponentProps = { languageCode: string; dictionary: HomeDictionaryModel["decoder"]["signatureVerification"]; @@ -58,7 +57,7 @@ export const SecretKeyInputComponent: React.FC< decoderInputs$.algType === SigningAlgCategoryValues.SYMMETRIC && decoderInputs$.symmetricSecretKey ? decoderInputs$.symmetricSecretKey - : DEFAULT_JWT.secret, + : DEFAULT_JWT.secret ); const [publicKey, setPublicKey] = useState(""); @@ -128,6 +127,7 @@ export const SecretKeyInputComponent: React.FC< ? dictionary.description.secret : dictionary.description.publicKey, }} + hasHeaderIcon languageCode={languageCode} messages={{ errors: verificationInputErrors$, @@ -137,7 +137,7 @@ export const SecretKeyInputComponent: React.FC< : dictionary.editor.successMessage.publicKey, ], }} - options={{ noPadding: true }} + options={{ noPadding: false }} title={ isHmacAlg(alg$) ? dictionary.editor.title.secret @@ -161,14 +161,7 @@ export const SecretKeyInputComponent: React.FC< isDisabled={isHmacAlg(alg$) ? !secret : !publicKey} /> - ), - footer: isHmacAlg(alg$) ? ( - - ) : ( - - ), + ) }} > {isHmacAlg(alg$) && ( diff --git a/src/features/decoder/components/secret-key-input.module.scss b/src/features/decoder/components/secret-key-input.module.scss index a4d81ca0..00a893a1 100644 --- a/src/features/decoder/components/secret-key-input.module.scss +++ b/src/features/decoder/components/secret-key-input.module.scss @@ -14,17 +14,17 @@ } .grid__subtitle { - grid-column: 1 / -1; - display: flex; - align-items: center; - gap: 0.25rem; - text-transform: uppercase; - padding: 0.5rem 0; - color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 500; - letter-spacing: 0.24px; + grid-column: 1/-1; + display: flex; + align-items: center; + gap: .25rem; + font-family: var(--font-primary); + padding-top: .75rem; + color: var(--color_fg_default); + font-size: 1rem; + line-height: 1.15rem; + font-weight: 700; + letter-spacing: -.2px; & * { font-size: inherit; diff --git a/src/features/decoder/components/token-decoder-key-format-picker.module.scss b/src/features/decoder/components/token-decoder-key-format-picker.module.scss index c172cbca..d85867ad 100644 --- a/src/features/decoder/components/token-decoder-key-format-picker.module.scss +++ b/src/features/decoder/components/token-decoder-key-format-picker.module.scss @@ -12,11 +12,17 @@ } .label { - color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 500; - letter-spacing: 0.1px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0; + list-style-type: none; + margin: 0; + gap: .5rem; + font-size: .875rem; + line-height: 1.35; + width: 100%; + height: 100%; } .select { diff --git a/src/features/decoder/components/token-decoder-signature-validation.component.tsx b/src/features/decoder/components/token-decoder-signature-validation.component.tsx index 369943f9..5b20fa80 100644 --- a/src/features/decoder/components/token-decoder-signature-validation.component.tsx +++ b/src/features/decoder/components/token-decoder-signature-validation.component.tsx @@ -5,6 +5,7 @@ import { clsx } from "clsx"; import { useDecoderStore } from "@/features/decoder/services/decoder.store"; import { JwtSignatureStatusValues } from "@/features/common/values/jwt-signature-status.values"; import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component"; +import { CheckIcon } from "@/features/common/components/icons/check/check-icon"; interface TokenDecoderSignatureValidationComponentProps { id: string; @@ -35,6 +36,7 @@ export const TokenDecoderSignatureValidationComponent: React.FC< role="status" className={clsx(styles.container, styles.valid)} > + {StringValues.editor.signatureVerified}
); diff --git a/src/features/decoder/components/token-decoder-signature-validation.module.scss b/src/features/decoder/components/token-decoder-signature-validation.module.scss index 2d383902..9681555d 100644 --- a/src/features/decoder/components/token-decoder-signature-validation.module.scss +++ b/src/features/decoder/components/token-decoder-signature-validation.module.scss @@ -1,25 +1,25 @@ @use "@/libs/theme/styles/variables" as *; .container { + flex: 1 1; display: flex; - flex-direction: column; - transition: background-color 0.13s ease-in-out; - padding: 0.5rem 1rem; - font-size: 0.75rem; - line-height: 1.125rem; + align-items: center; + justify-content: flex-start; + padding: .75rem .75rem .5rem; + gap: .25rem; + font-size: .875rem; + line-height: 1.375rem; + color: var(--color_fg_default); } .valid { - background-color: var(--color_bg_state_success_subtle); - color: var(--color_fg_on_state_success_subtle); + color: var(--color_fg_on_state_success_subtle); } .invalid { - background-color: var(--color_bg_state_danger_subtle); color: var(--color_fg_on_state_danger_subtle); } .warning { - background-color: var(--color_bg_state_caution_subtle); color: var(--color_fg_on_state_caution_subtle); } diff --git a/src/features/decoder/components/token-decoder.component.tsx b/src/features/decoder/components/token-decoder.component.tsx index 721ef51d..27faea8e 100644 --- a/src/features/decoder/components/token-decoder.component.tsx +++ b/src/features/decoder/components/token-decoder.component.tsx @@ -20,6 +20,8 @@ import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-k import { WidgetComponent } from "@/features/common/components/widget/widget/widget.component"; import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary"; import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values"; +import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component"; +import styles from "./token-decoder.module.scss"; interface TokenDecoderComponentProps { languageCode: string; @@ -49,7 +51,7 @@ export const TokenDecoderComponent: React.FC = ({ const loadDecoderInputs = useDecoderStore((state) => state.loadDecoderInputs); const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange); const showUseHashWarning$ = useDecoderStore( - (state) => state.showUseHashWarning, + (state) => state.showUseHashWarning ); useEffect(() => { @@ -184,41 +186,51 @@ export const TokenDecoderComponent: React.FC = ({ }, [decoderInputs$, loadDecoderInputs, headlineConfig.isVisible]); return ( - +
+ {dictionary.description} + - } - contentOutput={ - <> - - - + - - } - warnings={null} - /> + } + contentOutput={ + <> + + + + + } + warnings={null} + /> + ); }; diff --git a/src/features/decoder/components/token-decoder.module.scss b/src/features/decoder/components/token-decoder.module.scss index 39909fa5..b57e7dc2 100644 --- a/src/features/decoder/components/token-decoder.module.scss +++ b/src/features/decoder/components/token-decoder.module.scss @@ -1,2 +1,32 @@ @use "@/libs/theme/styles/variables" as *; @use "@/libs/theme/styles/mixins" as *; + +.input__description { + display: flex; + width: calc(100% - 2rem); + max-width: 1312px; + flex-direction: column; + grid-row-gap: 0; + margin: 0 auto 2rem; + color: var(--color_fg_default); + font-size: .875rem; + line-height: 1.375rem; + margin-bottom: .5rem; + + & strong { + font-weight: 500; + } + + @media #{$breakpoint-dimension-sm} { + width: calc(100% - 4rem); + grid-column: span 12; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + @media #{$breakpoint-dimension-lg} { + width: calc(100% - 8rem); + } + +} \ No newline at end of file diff --git a/src/features/encoder/components/encoded-jwt-output.component.tsx b/src/features/encoder/components/encoded-jwt-output.component.tsx index 6f167a10..3a01b5d7 100644 --- a/src/features/encoder/components/encoded-jwt-output.component.tsx +++ b/src/features/encoder/components/encoded-jwt-output.component.tsx @@ -6,6 +6,7 @@ import { HomeDictionaryModel } from "@/features/localization/models/home-diction import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary"; import { CardToolbarComponent } from "@/features/common/components/card-toolbar/card-toolbar.component"; import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component"; +import styles from "./encoded-jwt-output.module.scss"; type EncodedJwtOutputComponentProps = { languageCode: string; @@ -20,28 +21,32 @@ export const EncodedJwtOutputComponent: React.FC< const encodingErrors = useEncoderStore((state) => state.encodingErrors); return ( - - - - ), - }} - > - - + <> +

{dictionary.heading}

+ + + + ), + }} + > + + + ); }; diff --git a/src/features/encoder/components/encoded-jwt-output.module.scss b/src/features/encoder/components/encoded-jwt-output.module.scss new file mode 100644 index 00000000..3e2c0344 --- /dev/null +++ b/src/features/encoder/components/encoded-jwt-output.module.scss @@ -0,0 +1,14 @@ +@use "@/libs/theme/styles/variables" as *; +@use "@/libs/theme/styles/mixins" as *; + +.headline { + display: flex; + grid-column: 1/-1; + width: 100%; + font-size: 1rem; + font-weight: 700; + line-height: 1.15; + letter-spacing: -.1px; + color: var(--color_fg_default); + padding-bottom: 0.5rem; +} \ No newline at end of file diff --git a/src/features/encoder/components/token-encoder-encoding-format-picker.component.tsx b/src/features/encoder/components/token-encoder-encoding-format-picker.component.tsx deleted file mode 100644 index 631dd252..00000000 --- a/src/features/encoder/components/token-encoder-encoding-format-picker.component.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useEffect, useState } from "react"; -import styles from "./token-encoder-encoding-format-picker.module.scss"; -import { EncodingValues } from "@/features/common/values/encoding.values"; -import { useEncoderStore } from "@/features/encoder/services/encoder.store"; -import { getPickersUiDictionary } from "@/features/localization/services/ui-language-dictionary.service"; -import { DebuggerPickerComponent } from "@/features/common/components/debugger-picker/debugger-picker.component"; - -interface TokenEncoderEncodingFormatPickerComponentProps { - languageCode: string; -} - -export const TokenEncoderEncodingFormatPickerComponent: React.FC< - TokenEncoderEncodingFormatPickerComponentProps -> = ({ languageCode }) => { - const dictionary = getPickersUiDictionary(languageCode); - - const handleSymmetricSecretKeyEncodingChange = useEncoderStore( - (state) => state.handleSymmetricSecretKeyEncodingChange, - ); - const controlledSymmetricSecretKey = useEncoderStore( - (state) => state.controlledSymmetricSecretKey, - ); - - const [secretEncodingFormat, setSecretEncodingFormat] = - useState(EncodingValues.UTF8); - - useEffect(() => { - if (controlledSymmetricSecretKey) { - setSecretEncodingFormat(controlledSymmetricSecretKey.encoding); - } - }, [controlledSymmetricSecretKey]); - - const onSecretEncodingFormatChange = (value: string) => { - setSecretEncodingFormat(value as EncodingValues); - - handleSymmetricSecretKeyEncodingChange(value as EncodingValues); - }; - - return ( -
- -
- ); -}; diff --git a/src/features/encoder/components/token-encoder-encoding-format-picker.module.scss b/src/features/encoder/components/token-encoder-encoding-format-picker.module.scss deleted file mode 100644 index 1429bdc1..00000000 --- a/src/features/encoder/components/token-encoder-encoding-format-picker.module.scss +++ /dev/null @@ -1,70 +0,0 @@ -@use "@/libs/theme/styles/variables" as *; - -.container { - position: relative; - display: flex; - align-items: center; - gap: 0.5rem; - - @media #{$breakpoint-dimension-sm} { - align-self: unset; - } -} - -.label { - color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 500; - letter-spacing: 0.1px; -} - -.select { - display: flex; - padding: 0.125rem 1.75rem 0.125rem 0.875rem; - align-items: center; - gap: 0.75rem; - align-self: stretch; - - border-radius: 0.25rem; - border: 1px solid var(--color_border_button); - - color: var(--color_fg_default); - font-variant-numeric: slashed-zero; - font-feature-settings: - "clig" off, - "liga" off; - font-size: 0.875rem; - line-height: 1.375rem; - letter-spacing: 0.2px; - appearance: none; - - z-index: 2; - - background-color: transparent; -} - -.icon { - position: absolute; - top: 50%; - right: 0.5rem; - transform: translateY(-40%); - - svg { - height: 1rem; - width: 1rem; - - path { - fill: var(--color_fg_default); - } - } - - @media #{$breakpoint-dimension-sm} { - transform: translateY(-45%); - - svg { - height: 1.25rem; - width: 1.25rem; - } - } -} diff --git a/src/features/encoder/components/token-encoder-input.component.tsx b/src/features/encoder/components/token-encoder-input.component.tsx index e3300551..46f63c23 100644 --- a/src/features/encoder/components/token-encoder-input.component.tsx +++ b/src/features/encoder/components/token-encoder-input.component.tsx @@ -1,13 +1,18 @@ "use client"; -import React, { ChangeEvent, useCallback, useEffect, useState } from "react"; +import React, { + ChangeEvent, + Fragment, + useCallback, + useEffect, + useState, +} from "react"; import { HeaderEditorComponent } from "@/features/encoder/components/header-editor.component"; import { CardComponent, CardComponentProps, } from "@/features/common/components/card/card.component"; import { PayloadEditorComponent } from "@/features/encoder/components/payload-editor.component"; -import { TokenEncoderEncodingFormatPickerComponent } from "@/features/encoder/components/token-encoder-encoding-format-picker.component"; import { TokenEncoderKeyFormatPickerComponent } from "@/features/encoder/components/token-encoder-key-format-picker.component"; import { SigningSecretEditorComponent } from "@/features/encoder/components/signing-secret-editor.component"; import { SigningPrivateKeyEditorComponent } from "@/features/encoder/components/signing-private-key-editor.component"; @@ -28,6 +33,7 @@ import { import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary"; import { CardToolbarComponent } from "@/features/common/components/card-toolbar/card-toolbar.component"; import { CardToolbarClearButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component"; +import { EncodingFormatToggleSwitchComponent } from "@/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch"; type HeaderInputComponentProps = { languageCode: string; @@ -41,32 +47,32 @@ export const TokenEncoderInputComponent: React.FC< const headerErrors$ = useEncoderStore((state) => state.headerErrors && state.headerErrors.length > 0 ? state.headerErrors - : null, + : null ); const headerWarnings$ = useEncoderStore((state) => state.headerWarnings && state.headerWarnings.length > 0 ? state.headerWarnings - : null, + : null ); const payloadErrors$ = useEncoderStore((state) => state.payloadErrors && state.payloadErrors.length > 0 ? state.payloadErrors - : null, + : null ); const signingErrors$ = useEncoderStore((state) => state.signingErrors && state.signingErrors.length > 0 ? state.signingErrors - : null, + : null ); const controlledHeader$ = useEncoderStore((state) => state.controlledHeader); const controlledPayload$ = useEncoderStore( - (state) => state.controlledPayload, + (state) => state.controlledPayload ); const controlledSymmetricSecretKey$ = useEncoderStore( - (state) => state.controlledSymmetricSecretKey, + (state) => state.controlledSymmetricSecretKey ); const controlledAsymmetricPrivateKey$ = useEncoderStore( - (state) => state.controlledAsymmetricPrivateKey, + (state) => state.controlledAsymmetricPrivateKey ); const [header, setHeader] = useState(DEFAULT_HEADER); @@ -95,28 +101,28 @@ export const TokenEncoderInputComponent: React.FC< }, [controlledAsymmetricPrivateKey$]); const handleHeaderChange$ = useEncoderStore( - (state) => state.handleHeaderChange, + (state) => state.handleHeaderChange ); const resetControlledHeader$ = useEncoderStore( - (state) => state.resetControlledHeader, + (state) => state.resetControlledHeader ); const handlePayloadChange$ = useEncoderStore( - (state) => state.handlePayloadChange, + (state) => state.handlePayloadChange ); const resetControlledPayload$ = useEncoderStore( - (state) => state.resetControlledPayload, + (state) => state.resetControlledPayload ); const handleSymmetricSecretKeyChange$ = useEncoderStore( - (state) => state.handleSymmetricSecretKeyChange, + (state) => state.handleSymmetricSecretKeyChange ); const resetControlledSymmetricSecretKey$ = useEncoderStore( - (state) => state.resetControlledSymmetricSecretKey, + (state) => state.resetControlledSymmetricSecretKey ); const handleAsymmetricPrivateKeyChange$ = useEncoderStore( - (state) => state.handleAsymmetricPrivateKeyChange, + (state) => state.handleAsymmetricPrivateKeyChange ); const resetControlledAsymmetricPrivateKey$ = useEncoderStore( - (state) => state.resetControlledAsymmetricPrivateKey, + (state) => state.resetControlledAsymmetricPrivateKey ); const clearHeader = async () => { @@ -153,7 +159,7 @@ export const TokenEncoderInputComponent: React.FC< handleHeaderChange$(cleanValue); }, - [handleHeaderChange$], + [handleHeaderChange$] ); const handlePayloadChange = useCallback( @@ -164,11 +170,11 @@ export const TokenEncoderInputComponent: React.FC< handlePayloadChange$(cleanValue); }, - [handlePayloadChange$], + [handlePayloadChange$] ); const handleSymmetricSecretKeyChange = async ( - e: ChangeEvent, + e: ChangeEvent ) => { const key = e.target.value; @@ -180,7 +186,7 @@ export const TokenEncoderInputComponent: React.FC< }; const handleAsymmetricPrivateKeyChange = async ( - e: ChangeEvent, + e: ChangeEvent ) => { const key = e.target.value; @@ -197,6 +203,7 @@ export const TokenEncoderInputComponent: React.FC< languageCode: languageCode, title: dictionary.headerEditor.title, compactTitle: dictionary.headerEditor.compactTitle, + hasHeaderIcon: true, children: ( ), + hasHeaderIcon: true, messages: { success: [dictionary.payloadEditor.successMessage], errors: payloadErrors$, @@ -255,6 +263,7 @@ export const TokenEncoderInputComponent: React.FC< cards.push({ id: dataTestidDictionary.encoder.secretKeyEditor.id, languageCode: languageCode, + hasHeaderIcon: true, title: isHmacAlg(alg$) ? dictionary.signatureEditor.title.secret : dictionary.signatureEditor.title.privateKey, @@ -307,13 +316,6 @@ export const TokenEncoderInputComponent: React.FC< /> ), - footer: isHmacAlg(alg$) ? ( - - ) : ( - - ), }, }); } @@ -322,7 +324,26 @@ export const TokenEncoderInputComponent: React.FC< <>
{cards.map((props) => ( - + + {props.id === dataTestidDictionary.encoder.secretKeyEditor.id ? ( +
+

{props.compactTitle}

+ {isHmacAlg(alg$) ? ( + + ) : ( + + )} +
+ ) : ( +

{props.compactTitle}

+ )} + + ))}
diff --git a/src/features/encoder/components/token-encoder-input.module.scss b/src/features/encoder/components/token-encoder-input.module.scss index 7ddf3a0d..30c16d15 100644 --- a/src/features/encoder/components/token-encoder-input.module.scss +++ b/src/features/encoder/components/token-encoder-input.module.scss @@ -24,3 +24,21 @@ display: none; } } +.headline_container { + display: flex; + grid-column: 1/-1; + width: 100%; + justify-content: space-between; + align-items: center; +} + +.headline { + display: flex; + grid-column: 1/-1; + width: 100%; + font-size: 1rem; + font-weight: 700; + line-height: 1.15; + letter-spacing: -.1px; + color: var(--color_fg_default); +} \ No newline at end of file diff --git a/src/features/encoder/components/token-encoder-key-format-picker.component.tsx b/src/features/encoder/components/token-encoder-key-format-picker.component.tsx index 523bcfc9..a005f448 100644 --- a/src/features/encoder/components/token-encoder-key-format-picker.component.tsx +++ b/src/features/encoder/components/token-encoder-key-format-picker.component.tsx @@ -15,14 +15,14 @@ export const TokenEncoderKeyFormatPickerComponent: React.FC< const dictionary = getPickersUiDictionary(languageCode); const handlePrivateKeyFormatChange = useEncoderStore( - (state) => state.handleAsymmetricPrivateKeyFormatChange, + (state) => state.handleAsymmetricPrivateKeyFormatChange ); const controlledAsymmetricPrivateKey$ = useEncoderStore( - (state) => state.controlledAsymmetricPrivateKey, + (state) => state.controlledAsymmetricPrivateKey ); const [keyFormat, setKeyFormat] = useState( - AsymmetricKeyFormatValues.PEM, + AsymmetricKeyFormatValues.PEM ); useEffect(() => { @@ -38,28 +38,32 @@ export const TokenEncoderKeyFormatPickerComponent: React.FC< }; return ( -
- +
+
+
+ +
+
); }; diff --git a/src/features/encoder/components/token-encoder-key-format-picker.module.scss b/src/features/encoder/components/token-encoder-key-format-picker.module.scss index 1429bdc1..f292b294 100644 --- a/src/features/encoder/components/token-encoder-key-format-picker.module.scss +++ b/src/features/encoder/components/token-encoder-key-format-picker.module.scss @@ -1,22 +1,47 @@ @use "@/libs/theme/styles/variables" as *; + +.encoder__switch { + display: flex; + width: 100%; + justify-content: flex-end; +} + .container { position: relative; display: flex; align-items: center; - gap: 0.5rem; + gap: .5rem; @media #{$breakpoint-dimension-sm} { align-self: unset; } } +.picker { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + background: transparent; + border: none; + color: var(--color_fg_bold); + gap: .75rem; + width: 100%; +} + .label { - color: var(--color_fg_default); - font-size: 0.875rem; - line-height: 1.375rem; - font-weight: 500; - letter-spacing: 0.1px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0; + list-style-type: none; + margin: 0; + gap: .5rem; + font-size: .875rem; + line-height: 1.35; + width: 100%; + height: 100%; } .select { diff --git a/src/features/encoder/components/token-encoder.component.tsx b/src/features/encoder/components/token-encoder.component.tsx index d2a045bf..6ebe901d 100644 --- a/src/features/encoder/components/token-encoder.component.tsx +++ b/src/features/encoder/components/token-encoder.component.tsx @@ -1,6 +1,7 @@ "use client"; import React, { useEffect, useRef } from "react"; +import styles from "./token-encoder.module.scss" import { EncodedJwtOutputComponent } from "@/features/encoder/components/encoded-jwt-output.component"; import { TokenEncoderInputComponent } from "@/features/encoder/components/token-encoder-input.component"; import { useEncoderStore } from "@/features/encoder/services/encoder.store"; @@ -10,6 +11,7 @@ import { SigningAlgCategoryValues } from "@/features/common/values/signing-alg-c import { WidgetComponent } from "@/features/common/components/widget/widget/widget.component"; import { dataTestidDictionary } from "@/libs/testing/data-testid.dictionary"; import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values"; +import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component"; interface TokenEncoderComponentProps { languageCode: string; @@ -99,27 +101,37 @@ export const TokenEncoderComponent: React.FC = ({ }, [encoderInputs$, loadEncoderInputs, headlineConfig.isVisible]); return ( - +
+ {dictionary.description} + - } - contentOutput={ - - } - warnings={encodingWarnings$} - /> +
+ + } + contentOutput={ + + } + warnings={encodingWarnings$} + /> + ); }; diff --git a/src/features/encoder/components/token-encoder.module.scss b/src/features/encoder/components/token-encoder.module.scss new file mode 100644 index 00000000..b57e7dc2 --- /dev/null +++ b/src/features/encoder/components/token-encoder.module.scss @@ -0,0 +1,32 @@ +@use "@/libs/theme/styles/variables" as *; +@use "@/libs/theme/styles/mixins" as *; + +.input__description { + display: flex; + width: calc(100% - 2rem); + max-width: 1312px; + flex-direction: column; + grid-row-gap: 0; + margin: 0 auto 2rem; + color: var(--color_fg_default); + font-size: .875rem; + line-height: 1.375rem; + margin-bottom: .5rem; + + & strong { + font-weight: 500; + } + + @media #{$breakpoint-dimension-sm} { + width: calc(100% - 4rem); + grid-column: span 12; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + @media #{$breakpoint-dimension-lg} { + width: calc(100% - 8rem); + } + +} \ No newline at end of file diff --git a/src/features/localization/dictionaries/home/en.ts b/src/features/localization/dictionaries/home/en.ts index 076f652a..bca2e5d6 100644 --- a/src/features/localization/dictionaries/home/en.ts +++ b/src/features/localization/dictionaries/home/en.ts @@ -76,7 +76,7 @@ export const enHomeDictionary: HomeDictionaryModel = { label: "JWT example generator", }, jwtEditor: { - headline: "Encoded value", + headline: "Encoded Token", label: "JWT editor", title: "JSON Web Token (JWT)", compactTitle: "JWT", @@ -89,7 +89,7 @@ export const enHomeDictionary: HomeDictionaryModel = { label: "JSON", }, claims: { - label: "Claims Table", + label: "Claims Breakdown", }, }, }, @@ -100,7 +100,7 @@ export const enHomeDictionary: HomeDictionaryModel = { label: "JSON", }, claims: { - label: "Claims Table", + label: "Claims Breakdown", }, }, }, @@ -141,18 +141,18 @@ export const enHomeDictionary: HomeDictionaryModel = { label: "Header, payload, and signature example generator", }, headerEditor: { - title: "Header: Algorithm & Token Type", + title: "Algorithm & Token Type", compactTitle: "Header", successMessage: "Valid header", }, payloadEditor: { - title: "Payload: Data", + title: "Data", compactTitle: "Payload", successMessage: "Valid payload", }, signatureEditor: { title: { - secret: "Sign JWT: Secret", + secret: "Secret", privateKey: "Sign JWT: Private Key", }, compactTitle: { @@ -169,7 +169,8 @@ export const enHomeDictionary: HomeDictionaryModel = { }, }, encodedJwt: { - title: "JSON Web Token", + title: "Encoded JWT", + heading: "JWT Signature" }, }, }; diff --git a/src/features/localization/dictionaries/ui/pickers/en.tsx b/src/features/localization/dictionaries/ui/pickers/en.tsx index b2b4f6b7..eed010d2 100644 --- a/src/features/localization/dictionaries/ui/pickers/en.tsx +++ b/src/features/localization/dictionaries/ui/pickers/en.tsx @@ -9,7 +9,7 @@ export const enPickersUiDictionary: PickersUiDictionaryModel = { exampleAlgPicker: { label: "Generate example", compactLabel: "Alg", - defaultValue: "Select a signing algorithm", + defaultValue: "Select signing algorithm", description: "Generate a JWT", closeButton: { label: "Close signing algorithm list", diff --git a/src/features/localization/models/encoder-dictionary.model.ts b/src/features/localization/models/encoder-dictionary.model.ts index cafec528..3dd677ef 100644 --- a/src/features/localization/models/encoder-dictionary.model.ts +++ b/src/features/localization/models/encoder-dictionary.model.ts @@ -42,5 +42,6 @@ export interface EncoderDictionaryModel { }; encodedJwt: { title: string; + heading?: string; }; } diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 548d29c1..4d243469 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -56,9 +56,9 @@ --color_fg_link_hover: var(--functional-gray-50); --color_fg_link_pressed: var(--functional-gray-50); - --color_fg_selected: #99a7f1; - --color_border_selected: #99a7f1; - --color_border_focus: #99a7f1; + --color_fg_selected: var(--functional-gray-850); + --color_border_selected: var(--functional-gray-850); + --color_border_focus: var(--functional-gray-850); --color_bg_auth0-cta: linear-gradient(251deg, #1e1e1e 2.29%, #191919 87.03%); @@ -78,11 +78,12 @@ --color_code_blue2: #7487eb; --color_code_blue3: #7487eb; --color_code_dark_blue: #fafbfe; - --color_code_dark_blue2: #b9c3f5; + --color_code_dark_blue2: #3f59e4; --color_code_purple: #ccbcfa; - --color_code_orange: #f1b99b; + --color_code_orange: #e7834e; --color_code_inverse: #fefaf8; --color_code_teal: #3b8d7e; + --color_code_green: #52af6d; --color_code_dark_teal: #8ed2c5; --color_code_dark_neutral: #808080; @@ -172,7 +173,7 @@ html[data-theme="system-light"] { --color_bg_state_success: #10783f; --color_fg_on_state_success: #fff; - --color_fg_on_state_success_subtle: #094726; + --color_fg_on_state_success_subtle: #149750; --color_bg_state_success_subtle: #e6f4ec; --color_border_state_success: #10783f; @@ -196,6 +197,7 @@ html[data-theme="system-light"] { --color_bg_page: var(--functional-gray-0); --color_fg_bold: var(--charcoal2); + --color_fg_default: var(--functional-gray-500); --color_fg_link_primary: var(--sky); --color_bg_app_bar: hsla(0, 0%, 7%, 0.04); @@ -206,9 +208,9 @@ html[data-theme="system-light"] { --color_fg_link_hover: var(--charcoal2); --color_fg_link_pressed: var(--charcoal2); - --color_fg_selected: #3f59e4; - --color_border_selected: #3f59e4; - --color_border_focus: #3f59e4; + --color_fg_selected: var(--functional-gray-850); + --color_border_selected: var(--functional-gray-850); + --color_border_focus: var(--functional-gray-850); --color_bg_auth0-cta: var(--functional-gray-950); @@ -245,9 +247,9 @@ html[data-theme="system-light"] { --color_code_blue2: #7487eb; --color_code_blue3: #7487eb; --color_code_dark_blue: #10163a; - --color_code_dark_blue2: #263588; + --color_code_dark_blue2: #3f59e4; --color_code_purple: #9979f5; - --color_code_orange: #a35125; + --color_code_orange: #e7834e; --color_code_inverse: #291409; --color_code_teal: #3b8d7e; --color_code_dark_teal: #419d8c; @@ -420,15 +422,18 @@ pre[class*="language-"] { .token.property, .token.tag, -.token.number, .token.constant, .token.symbol, .token.deleted { - color: var(--color_code_orange); + color: var(--color_code_dark_blue); +} + +.token.number { + color: var(--color_code_dark_blue2) } .token.boolean { - color: var(--color_fg_code); + color: var(--color_code_orange); } .token.selector, @@ -437,7 +442,7 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: var(--color_code_dark_blue); + color: var(--color_code_green); } .token.operator, @@ -507,19 +512,24 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); background: transparent; color: var(--color_fg_bold); font-family: var(--font-primary), monospace !important; - height: 2rem !important; } .react-select__control { background-color: transparent !important; border-color: var(--color_border_button) !important; + background-color: var(--color_bg_layer); + border: 1px solid var(--color_border_default) !important; height: 100% !important; - border: 1px solid var(--color_border_inverse_static) !important; + &:hover { + border-color: var(--color_border_bold) !important; + transition: 0.2s ease-out !important; + } } .react-select__control--is-focused { - border-color: var(--color_border_focus) !important; - box-shadow: 0 0 0 1px var(--color_border_focus) !important; + transition: 0.2s ease-out; + border-color: var(--color_border_default) !important; + box-shadow: 0 0 0 3px var(--color_border_default) !important; } .react-select__value-container { @@ -542,13 +552,16 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); } .react-select__menu { - background-color: var(--color_bg_layer_alternate-bold) !important; - color: var(--color_fg_bold) !important; - border: 1px solid var(--color_border_bold) !important; - font-size: 0.875rem !important; - font-family: var(--font-primary), monospace !important; - width: max-content !important; - min-width: 100% !important; + background-color: var(--color_bg_layer) !important; + border-radius: 0.75rem !important; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px !important; + margin-bottom: 8px !important; + margin-top: 8px !important; + box-sizing: border-box !important; + border: 1px solid var(--color_border_default); + padding: 0.25rem; + overflow: hidden; + min-width: 6.125rem; } .react-select__menu-portal { @@ -581,28 +594,29 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); } .react-select__option { - display: flex !important; - align-items: center !important; - color: var(--color_fg_default) !important; - position: relative !important; - height: 2.5rem !important; - border-bottom: 1px solid var(--color_border_bold) !important; - padding: 0.25rem 1rem !important; - background-color: transparent !important; - font-family: var(--font-primary), monospace !important; - - gap: 0.5rem !important; - font-size: 0.8125rem !important; - line-height: 1.3125rem !important; - letter-spacing: -0.05px !important; - - &:last-child { - border-bottom: unset; - } - - &:hover { - cursor: pointer; - } + cursor: pointer !important; + display: flex !important; + font-size: 0.875rem !important; + width: 100% !important; + user-select: none !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; + background-color: transparent !important; + color: var(--color_fg_default) !important; + padding: 8px 12px 8px 1.25rem !important; + box-sizing: border-box !important; + -webkit-box-align: center !important; + align-items: center !important; + position: relative !important; + height: 1.5rem !important; + border-radius: 0.5rem !important; + font-family: var(--font-primary),monospace !important; + line-height: 1.3125rem !important; + letter-spacing: -0.05px !important; + font-weight: 500 !important; + opacity: 1 !important; + &:hover { + background-color: var(--color_bg_layer_alternate) !important; + } } .react-select__option--is-selected { @@ -620,7 +634,7 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); transform: translateY(-50%); height: 0.375rem; width: 0.375rem; - background-color: var(--color_fg_selected); + background-color: var(--color_fg_bold); border-radius: 50%; } } @@ -628,7 +642,7 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); .react-select__option--is-disabled { color: var(--color_fg_bold) !important; font-weight: 500; - opacity: 0.32; + opacity: 0.32 !important; cursor: not-allowed !important; }