From 2eb7c3c87b3290f98bd8af89f53666dbe3b50911 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:28:53 -0500 Subject: [PATCH 01/72] update success subtle color value --- src/libs/theme/styles/globals.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 051ef32b..a40fe762 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -171,7 +171,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; From 5db974e20e86feac393152b5b1ca87ac2807e771 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:29:14 -0500 Subject: [PATCH 02/72] add icon components --- .../components/icons/check/check-icon.tsx | 19 ++++++++++++++ .../components/icons/clear/clear-icon.tsx | 26 +++++++++++++++++++ .../components/icons/copy/copy-icon.tsx | 23 ++++++++++++++++ .../components/icons/header/header-icon.tsx | 25 ++++++++++++++++++ 4 files changed, 93 insertions(+) create mode 100644 src/features/common/components/icons/check/check-icon.tsx create mode 100644 src/features/common/components/icons/clear/clear-icon.tsx create mode 100644 src/features/common/components/icons/copy/copy-icon.tsx create mode 100644 src/features/common/components/icons/header/header-icon.tsx 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 new file mode 100644 index 00000000..38ccf3c7 --- /dev/null +++ b/src/features/common/components/icons/copy/copy-icon.tsx @@ -0,0 +1,23 @@ +export const CopyIcon = () => { + 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 ( + + + + + ); +}; From 390c5a27a41ac286062349d802f2ec65c3c3a264 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:30:10 -0500 Subject: [PATCH 03/72] refactor card components order --- .../common/components/card/card.component.tsx | 63 +++++++++++-------- 1 file changed, 37 insertions(+), 26 deletions(-) diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index bb9e5912..71bfdea6 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -3,12 +3,14 @@ import styles from "./card.module.scss"; import { clsx } from "clsx"; import { getLocalizedSecondaryFont, MonoFont } from "@/libs/theme/fonts"; import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component"; +import { HeaderIcon } from "../icons/header/header-icon"; export interface CardComponentProps extends PropsWithChildren { id: string; languageCode: string; title: string; compactTitle: string; + hasHeaderIcon?: boolean; options: Partial<{ noPadding: boolean; fullWidth: boolean; @@ -44,6 +46,7 @@ export const CardComponent: React.FC = (props) => { }, messages, slots, + hasHeaderIcon = false, } = props; const cardId = useId(); @@ -64,7 +67,7 @@ export const CardComponent: React.FC = (props) => { 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-frameless={options && options.frameless} @@ -74,21 +77,9 @@ export const CardComponent: React.FC = (props) => { {titleKey && (
{titleKey && !compactTitle && ( -

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

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

+
+ {hasHeaderIcon && } +

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

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

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

+

{compactTitle} @@ -111,6 +120,16 @@ export const CardComponent: React.FC = (props) => { )} )} +
+
+ {children} +
+
{messages && messages.errors && messages.errors.length > 0 ? (
= (props) => { })}
) : null} + {slots?.notification} {messages && messages.warnings && messages.warnings.length > 0 && (
= (props) => { })}
)} - {slots?.notification} -
- {children} -
{slots?.footer && (
{slots.footer}
)} @@ -192,7 +203,7 @@ export const CardWithHeadlineComponent: React.FC< id={regionId} className={clsx( styles.cardHeadline__title, - getLocalizedSecondaryFont(languageCode), + getLocalizedSecondaryFont(languageCode) )} > {sectionHeadline.title} From 135e9a629cff312fbf0de601d64bf815677f87c2 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:31:47 -0500 Subject: [PATCH 04/72] update styles for card component --- .../common/components/card/card.module.scss | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index a320b31e..423e4c64 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -6,7 +6,6 @@ display: flex; align-items: center; gap: 0.25rem; - text-transform: uppercase; padding: 0.5rem 0; color: var(--color_fg_default); font-size: 0.875rem; @@ -61,10 +60,11 @@ grid-column: span 6; display: flex; flex: 1; + padding: 0px 2px; flex-direction: column; border-radius: 0.5rem; border: 1px solid var(--color_border_bold); - background: var(--color_bg_code-editor); + background: var(--color_bg_layer_alternate-bold); overflow: hidden; &[data-type="output"] { @@ -77,6 +77,12 @@ } } +.card__heading_title_container { + display: flex; + flex-direction: row; + align-items: center; +} + .card__hasFullWidth { grid-column: 1 / -1; } @@ -109,7 +115,6 @@ border-bottom: 1px solid var(--color_border_bold); gap: 0.25rem; - text-transform: uppercase; } .card__fullTitle { @@ -143,22 +148,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 +175,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; @@ -209,7 +218,6 @@ } .card__success { - background-color: var(--color_bg_state_success_subtle); span, p, @@ -245,7 +253,6 @@ } .card__warning { - background-color: var(--color_bg_state_caution_subtle); span, p, From 996c30be9cf765cce95f2b32a67a8b1df5278269 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:32:27 -0500 Subject: [PATCH 05/72] udpate toolbar button to include tooltip --- .../card-toolbar-button.component.tsx | 30 +++++++------ .../card-toolbar-button.module.scss | 43 ++++++++++++++++--- 2 files changed, 56 insertions(+), 17 deletions(-) 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..30842ae1 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,7 +1,16 @@ +.button__tooltipContainer { + position: relative; + display: inline-block; + &:hover { + .button__tooltip { + opacity: 1; + } + } +} .button__standard { gap: 0.75rem; + border: none; border-radius: 0.25rem; - border: 1px solid var(--color_border_button); color: var(--color_fg_on_button_subtle); font-variant-numeric: slashed-zero; font-feature-settings: @@ -20,6 +29,12 @@ 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; @@ -46,6 +61,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 +106,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 { From 96bbae14aacce5938576ecb6eb10249c54326703 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:33:22 -0500 Subject: [PATCH 06/72] remove background color --- .../token-decoder-signature-validation.module.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) 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..1a8d27de 100644 --- a/src/features/decoder/components/token-decoder-signature-validation.module.scss +++ b/src/features/decoder/components/token-decoder-signature-validation.module.scss @@ -5,21 +5,18 @@ flex-direction: column; transition: background-color 0.13s ease-in-out; padding: 0.5rem 1rem; - font-size: 0.75rem; + font-size: .875rem; line-height: 1.125rem; } .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); } From 024fa3b87d43a3855e171a793775eb90cc811cdd Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:34:39 -0500 Subject: [PATCH 07/72] update jwt input --- src/features/decoder/components/jwt-input.component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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} /> ), From 32f9d5013a3fa1b0c3ea8e01de51f9a18169c8b8 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:35:15 -0500 Subject: [PATCH 08/72] update debugger toolbar styles --- .../debugger-toolbar.module.scss | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) 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; From 59b050a9d36a3a13e1188f473ea58716bd38c830 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:35:40 -0500 Subject: [PATCH 09/72] update font size --- .../common/components/card-message/card-message.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; } From af1ec5bc5883af2bb2403368cf1f0fb44855da16 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:35:55 -0500 Subject: [PATCH 10/72] add icons to toolbar components --- .../card-toolbar-clear-button.component.tsx | 9 +++++++-- .../card-toolbar-copy-button.component.tsx | 12 ++++++++---- 2 files changed, 15 insertions(+), 6 deletions(-) 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 ? : } ); }; From 078bfd21b573cf843b64ba617d2b8666c24f98f0 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:48:32 -0500 Subject: [PATCH 11/72] update color values --- src/libs/theme/styles/globals.scss | 38 +++++++++++++++++------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index a40fe762..ef752b34 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -45,7 +45,7 @@ :root { --color_bg_page: var(--functional-gray-950); --color_fg_bold: var(--functional-gray-50); - --color_fg_default: var(--functional-gray-200); + --color_fg_default: var(--functional-gray-500); --color_fg_link_primary: var(--cloud); --color_bg_app_bar: rgba(17, 17, 17, 0.66); @@ -61,7 +61,7 @@ --color_bg_auth0-cta: linear-gradient(251deg, #1e1e1e 2.29%, #191919 87.03%); - --color_bg_layer: var(--functional-gray-950); + --color_bg_layer: var(--functional-gray-0); --color_bg_layer_bold: var(--functional-gray-700); --color_bg_layer_boldest: var(--functional-gray-50); --color_bg_layer_alternate: var(--functional-gray-850); @@ -77,11 +77,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; @@ -138,9 +139,9 @@ --color_fg_on_state_caution: #000000; --color_fg_on_state_caution_subtle: #e3c423; - --color_jwt_header: #6dc993; - --color_jwt_payload: #e5e5e5; - --color_jwt_signature: #8c9bef; + --color_jwt_header: #e27133; + --color_jwt_payload: #9472f7; + --color_jwt_signature: #149750; --color_jwt_dot: #ff69e4; --color_bg_scrollbar: #6b7380; @@ -148,9 +149,9 @@ html[data-theme="light"], html[data-theme="system-light"] { - --color_jwt_header: #096256; - --color_jwt_payload: #383838; - --color_jwt_signature: #2c3ea0; + --color_jwt_header: #e27133 ; + --color_jwt_payload: #9472f7; + --color_jwt_signature: #149750; --color_jwt_dot: #cc36b1; --color_bg_state_info_subtle: #eef0fd; @@ -195,7 +196,7 @@ html[data-theme="system-light"] { --color_bg_page: var(--functional-gray-0); --color_fg_bold: var(--charcoal2); - --color_fg_default: var(--functional-gray-650); + --color_fg_default: var(--functional-gray-500); --color_fg_link_primary: var(--sky); --color_bg_app_bar: rgba(241, 241, 241, 0.66); @@ -241,9 +242,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; @@ -416,15 +417,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, @@ -433,7 +437,7 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: var(--color_code_dark_blue); + color: var(--color_code_green); } .token.operator, From 833f4a44b1ab2d013e190a53d2e862988ef75c7a Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:49:06 -0500 Subject: [PATCH 12/72] change titles for decoded header and payload --- src/features/localization/dictionaries/home/en.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/features/localization/dictionaries/home/en.ts b/src/features/localization/dictionaries/home/en.ts index 8e437dbe..7f080cf6 100644 --- a/src/features/localization/dictionaries/home/en.ts +++ b/src/features/localization/dictionaries/home/en.ts @@ -92,7 +92,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", @@ -105,7 +105,7 @@ export const enHomeDictionary: HomeDictionaryModel = { label: "JSON", }, claims: { - label: "Claims Table", + label: "Claims Breakdown", }, }, }, @@ -116,7 +116,7 @@ export const enHomeDictionary: HomeDictionaryModel = { label: "JSON", }, claims: { - label: "Claims Table", + label: "Claims Breakdown", }, }, }, From f485c4bd925a3cd647ff9a8f033055c683035789 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:49:53 -0500 Subject: [PATCH 13/72] update styles for token decoder signature component --- .../token-decoder-signature-validation.component.tsx | 2 ++ .../token-decoder-signature-validation.module.scss | 11 +++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) 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 1a8d27de..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,12 +1,15 @@ @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; + align-items: center; + justify-content: flex-start; + padding: .75rem .75rem .5rem; + gap: .25rem; font-size: .875rem; - line-height: 1.125rem; + line-height: 1.375rem; + color: var(--color_fg_default); } .valid { From a0d4b0c653c998ebb8da01c09c3bd4ddc9b7a4b8 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:50:24 -0500 Subject: [PATCH 14/72] update secret key input styles --- .../components/secret-key-input.component.tsx | 7 ------ .../components/secret-key-input.module.scss | 22 +++++++++---------- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/features/decoder/components/secret-key-input.component.tsx b/src/features/decoder/components/secret-key-input.component.tsx index 43eda43e..919a6f88 100644 --- a/src/features/decoder/components/secret-key-input.component.tsx +++ b/src/features/decoder/components/secret-key-input.component.tsx @@ -162,13 +162,6 @@ export const SecretKeyInputComponent: React.FC< /> ), - 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; From 4101083f6cd3d5ad29957a3aefef3e0ac93476fb Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:50:55 -0500 Subject: [PATCH 15/72] update styles for jwt input headline --- .../decoder/components/jwt-input.module.scss | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) 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 { From c10e64d49377397611f0a9a441efa228d6ed2c74 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:51:35 -0500 Subject: [PATCH 16/72] update styles for claims table --- src/features/decoder/components/claim.module.scss | 13 +++++-------- src/features/decoder/components/claims.module.scss | 8 ++++---- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/features/decoder/components/claim.module.scss b/src/features/decoder/components/claim.module.scss index 68e52a19..88e5a199 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; 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; From ecc58392459b4263c81d43901a4190f637aa714b Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:53:30 -0500 Subject: [PATCH 17/72] add bottom margin --- src/features/common/components/widget/widget/widget.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/common/components/widget/widget/widget.module.scss b/src/features/common/components/widget/widget/widget.module.scss index 288e51b6..75066a1b 100644 --- a/src/features/common/components/widget/widget/widget.module.scss +++ b/src/features/common/components/widget/widget/widget.module.scss @@ -49,6 +49,7 @@ color: var(--color_fg_default); display: flex; flex-direction: column; + margin-bottom: 2rem; gap: 0.625rem; row-gap: 0.25rem; From 46559536e9ca10848f4ede441ec12101c07d9f4c Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:53:57 -0500 Subject: [PATCH 18/72] add eye icons --- .../icons/eye-close/eye-close-icon.tsx | 25 +++++++++++++++++++ .../icons/eye-open/eye-open-icon.tsx | 16 ++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 src/features/common/components/icons/eye-close/eye-close-icon.tsx create mode 100644 src/features/common/components/icons/eye-open/eye-open-icon.tsx 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 ( + + + + ); +}; From 88f1e38dc18f865758e65a128e04d19c6406ee02 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:54:49 -0500 Subject: [PATCH 19/72] update card tabs styling --- .../card-tabs/card-tabs.module.scss | 72 +++++++++---------- 1 file changed, 34 insertions(+), 38 deletions(-) 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..7824bd62 100644 --- a/src/features/common/components/card-tabs/card-tabs.module.scss +++ b/src/features/common/components/card-tabs/card-tabs.module.scss @@ -14,40 +14,37 @@ } .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); + padding: .25rem; + 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 +53,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 +81,7 @@ $cardTabs__tabList__height: 2.5rem; .cardTab__title__full { display: none; + font-weight: 500; @media #{$breakpoint-dimension-sm} { display: flex; From 5d66e8dd91c641aae7a591ebd014623de5f51807 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:55:41 -0500 Subject: [PATCH 20/72] update styles for card component --- ...d-toolbar-description-button.component.tsx | 23 +++++++---- .../common/components/card/card.component.tsx | 4 ++ .../common/components/card/card.module.scss | 39 +++++++++---------- 3 files changed, 39 insertions(+), 27 deletions(-) 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 71bfdea6..f0618f26 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -4,6 +4,7 @@ import { clsx } from "clsx"; import { getLocalizedSecondaryFont, MonoFont } 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"; export interface CardComponentProps extends PropsWithChildren { id: string; @@ -150,7 +151,10 @@ export const CardComponent: React.FC = (props) => { > {messages.success.map((line, index) => { return ( + <> + {line} + ); })} diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index 423e4c64..eaa9742c 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -2,16 +2,17 @@ @use "@/libs/theme/styles/mixins" as *; .cardHeadline__title { - grid-column: 1 / -1; - display: flex; - align-items: center; - gap: 0.25rem; - 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; @@ -65,7 +66,6 @@ border-radius: 0.5rem; border: 1px solid var(--color_border_bold); background: var(--color_bg_layer_alternate-bold); - overflow: hidden; &[data-type="output"] { background: var(--color_bg_layer_alternate); @@ -206,19 +206,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 { - + svg, span, p, code { @@ -235,8 +235,7 @@ } .card__error { - background-color: var(--color_bg_state_danger_subtle); - + span, p, code { From 5594a34b7b198eda978fe36ba60254d27f7c95e6 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:55:58 -0500 Subject: [PATCH 21/72] update styles for checkbox --- src/features/common/components/checkbox/checkbox.module.scss | 1 + 1 file changed, 1 insertion(+) 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 */ From 93d3d1b4a253f0a62c2cde29e3b2d44937acf2da Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 10 Sep 2025 15:39:37 -0500 Subject: [PATCH 22/72] remove roboto font --- src/features/common/components/card/card.component.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index f0618f26..504f2df9 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -65,7 +65,6 @@ 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 From 641ada4e78eada0aec2b50d2b4861359d32d4c74 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 10 Sep 2025 15:40:17 -0500 Subject: [PATCH 23/72] remove borders, add color to svg icons --- src/features/common/components/card/card.module.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index eaa9742c..382be7c2 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -64,7 +64,6 @@ padding: 0px 2px; flex-direction: column; border-radius: 0.5rem; - border: 1px solid var(--color_border_bold); background: var(--color_bg_layer_alternate-bold); &[data-type="output"] { @@ -81,6 +80,10 @@ display: flex; flex-direction: row; align-items: center; + svg { + color: var(--color_fg_default); + margin-right: 2px; + } } .card__hasFullWidth { @@ -112,8 +115,6 @@ justify-content: space-between; padding: 0.5rem 1rem; height: 3rem; - - border-bottom: 1px solid var(--color_border_bold); gap: 0.25rem; } From 0ff9668afd736114c16a6ba48a9c8ad52de30b51 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 10 Sep 2025 15:41:00 -0500 Subject: [PATCH 24/72] change button icons positioning, udpate styles --- .../card-tabs/card-tabs.component.tsx | 28 +++++++++++-------- .../card-tabs/card-tabs.module.scss | 26 +++++++++++------ 2 files changed, 35 insertions(+), 19 deletions(-) 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 7824bd62..98bc879b 100644 --- a/src/features/common/components/card-tabs/card-tabs.module.scss +++ b/src/features/common/components/card-tabs/card-tabs.module.scss @@ -95,14 +95,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 { From 784c4363b660db7e496b05f917b4f7038c402217 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 10 Sep 2025 15:41:29 -0500 Subject: [PATCH 25/72] remove background color --- src/features/decoder/components/claim.module.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/features/decoder/components/claim.module.scss b/src/features/decoder/components/claim.module.scss index 88e5a199..46bde402 100644 --- a/src/features/decoder/components/claim.module.scss +++ b/src/features/decoder/components/claim.module.scss @@ -131,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); - } } From 93a3d072460b40250e96a0373d283919c3205ad1 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 10 Sep 2025 15:41:54 -0500 Subject: [PATCH 26/72] update styles for property tooltip --- .../common/components/json-viewer/json-viewer.module.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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: From 83bea5a986830db47b5ad963bb3fc2971447236e Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 10 Sep 2025 15:42:12 -0500 Subject: [PATCH 27/72] update global style variables values --- src/libs/theme/styles/globals.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index ef752b34..9efc4bbb 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -45,10 +45,10 @@ :root { --color_bg_page: var(--functional-gray-950); --color_fg_bold: var(--functional-gray-50); - --color_fg_default: var(--functional-gray-500); + --color_fg_default: var(--functional-gray-200); --color_fg_link_primary: var(--cloud); - --color_bg_app_bar: rgba(17, 17, 17, 0.66); + --color_bg_app_bar: hsla(0, 0%, 95%, .04);; --color_bg_app_bar_plain: rgba(17, 17, 17); --color_fg_link: var(--functional-gray-50); @@ -61,7 +61,7 @@ --color_bg_auth0-cta: linear-gradient(251deg, #1e1e1e 2.29%, #191919 87.03%); - --color_bg_layer: var(--functional-gray-0); + --color_bg_layer: var(--functional-gray-950); --color_bg_layer_bold: var(--functional-gray-700); --color_bg_layer_boldest: var(--functional-gray-50); --color_bg_layer_alternate: var(--functional-gray-850); From 682182ffecd2cba576cdc5fa5377c56ba74d5d43 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 12 Sep 2025 17:34:42 -0500 Subject: [PATCH 28/72] update focus values --- src/libs/theme/styles/globals.scss | 81 +++++++++++++++++------------- 1 file changed, 45 insertions(+), 36 deletions(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 9efc4bbb..8bd4bf58 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -55,9 +55,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%); @@ -206,9 +206,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-150); @@ -513,8 +513,13 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); .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 { @@ -542,13 +547,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: 240px; } .react-select__menu-portal { @@ -581,28 +589,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 { From 26f2bddc4e1abb66751ae6915b3a795c865e116f Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 12 Sep 2025 17:35:46 -0500 Subject: [PATCH 29/72] update picker en message --- src/features/localization/dictionaries/ui/pickers/en.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 0b202db8ba15e9c75db2c72c3bd21242af7a1cea Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 12 Sep 2025 17:36:14 -0500 Subject: [PATCH 30/72] update token decoder styling --- .../components/token-decoder.component.tsx | 78 +++++++++++-------- .../components/token-decoder.module.scss | 30 +++++++ 2 files changed, 75 insertions(+), 33 deletions(-) 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 From 61c4d5ee7204ae155f6a1459d23f130ac9c9deaa Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Fri, 12 Sep 2025 17:36:41 -0500 Subject: [PATCH 31/72] update debugger picker styling and reorganize tags --- .../debugger-picker.component.tsx | 37 +++++++---- .../debugger-picker.module.scss | 19 +++--- .../widget/widget/widget.component.tsx | 14 +--- .../widget/widget/widget.module.scss | 26 -------- .../debugger-alg-picker.component.tsx | 66 +++++++------------ .../debugger-alg-picker.module.scss | 63 ++++++++++++++---- 6 files changed, 107 insertions(+), 118 deletions(-) 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..aa28f50e 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 }) => { @@ -62,9 +61,7 @@ export const DebuggerPickerComponent: React.FC< }) => { const [isClient, setIsClient] = useState(false); - const handleChange = ( - selection: SingleValue - ) => { + const handleChange = (selection: SingleValue) => { if (!selection) { return; } @@ -78,21 +75,21 @@ 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..ab3f065d 100644 --- a/src/features/common/components/debugger-picker/debugger-picker.module.scss +++ b/src/features/common/components/debugger-picker/debugger-picker.module.scss @@ -14,15 +14,14 @@ $picker-list-width-lg: 7rem; $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); .picker { - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - background: transparent; - border: none; - color: var(--color_fg_bold); - cursor: pointer; - gap: 0.75rem; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + background: transparent; + color: var(--color_fg_bold); + gap: .75rem; + width: 100vh; //width: $picker-width-sm; @@ -56,4 +55,4 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); .picker__fullName { display: flex; -} +} \ No newline at end of file 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 75066a1b..543c34e3 100644 --- a/src/features/common/components/widget/widget/widget.module.scss +++ b/src/features/common/components/widget/widget/widget.module.scss @@ -42,29 +42,3 @@ line-height: 2.25rem; } } - -.input__description { - grid-column: span 6; - width: 100%; - color: var(--color_fg_default); - display: flex; - flex-direction: column; - margin-bottom: 2rem; - - 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..3242b44f 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 @@ -15,9 +15,7 @@ import { algDictionary, 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 { useButton } from "@react-aria/button" 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,13 +92,6 @@ export const WidgetAlgPickerComponent: React.FC< setPickerState(PickerStates.IDLE); }; - const openPicker = () => { - setPickerState(PickerStates.PICKING); - }; - - const closePicker = () => { - setPickerState(PickerStates.IDLE); - }; useEffect(() => { (async function runEs512Check() { @@ -116,9 +107,9 @@ export const WidgetAlgPickerComponent: React.FC< })(); }, []); - const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { + /* const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { return Object.entries( - jwsExampleAlgHeaderParameterValuesDictionary.unsecured, + jwsExampleAlgHeaderParameterValuesDictionary.unsecured ).map((entry) => { const [key, value] = entry; @@ -127,7 +118,7 @@ export const WidgetAlgPickerComponent: React.FC< label: value.name, }; }); - }, []); + }, []); */ const symmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { return Object.entries(jwsExampleAlgHeaderParameterValuesDictionary.mac).map( @@ -138,13 +129,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[] = []; @@ -194,24 +185,21 @@ export const WidgetAlgPickerComponent: React.FC< }, [canUseEd25519, canUseEd448, canUseEs512]); const algOptions = useMemo(() => { - return [...noneAlgOptions, ...symmetricAlgOptions, ...asymmetricAlgOptions]; - }, [asymmetricAlgOptions, noneAlgOptions, symmetricAlgOptions]); + return [...symmetricAlgOptions, ...asymmetricAlgOptions]; + }, [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..48f7278b 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,65 @@ @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; } .button { @@ -40,7 +75,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; } From 79f7c8d44d5f643829403e5188e5b11c1ec91b1d Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Mon, 15 Sep 2025 11:13:27 -0500 Subject: [PATCH 32/72] delete unused prop --- .../components/debugger-picker/debugger-picker.component.tsx | 2 -- 1 file changed, 2 deletions(-) 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 aa28f50e..450e9619 100644 --- a/src/features/common/components/debugger-picker/debugger-picker.component.tsx +++ b/src/features/common/components/debugger-picker/debugger-picker.component.tsx @@ -55,7 +55,6 @@ export const DebuggerPickerComponent: React.FC< label, options, handleSelection, - selectedOptionCode, placeholder, minWidth, }) => { @@ -89,7 +88,6 @@ export const DebuggerPickerComponent: React.FC< aria-label={"Debugger picker"} className="react-select-container" onChange={handleChange} - //value={selectedOptionCode} options={options} menuPortalTarget={document.body} classNamePrefix={"react-select"} From 2993e82b16fc41daf3883afe72414fbf3ebfcb95 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Mon, 15 Sep 2025 11:13:44 -0500 Subject: [PATCH 33/72] update focused and disabled styles --- src/libs/theme/styles/globals.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 8bd4bf58..4b320253 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -523,8 +523,9 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); } .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 { @@ -637,7 +638,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; } From e442a80e7a29975c6a26cba5f0158cb7cf6bbc2c Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 16 Sep 2025 12:35:30 -0500 Subject: [PATCH 34/72] add new encoding toggle switch component --- .../encoding-format-toggle-switch.module.scss | 82 +++++++++++++++++++ .../encoding-format-toggle-switch.tsx | 42 ++++++++++ 2 files changed, 124 insertions(+) create mode 100644 src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.module.scss create mode 100644 src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx 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..377661de --- /dev/null +++ b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.module.scss @@ -0,0 +1,82 @@ +@use "@/libs/theme/styles/variables" as *; + +.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..5d29db85 --- /dev/null +++ b/src/features/decoder/components/encoding-format-toggle-swith/encoding-format-toggle-switch.tsx @@ -0,0 +1,42 @@ +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"; + +interface EncodingFormatToggleSwitchComponentProps { + languageCode: string; +} + +export const EncodingFormatToggleSwitchComponent: React.FC< + EncodingFormatToggleSwitchComponentProps +> = ({ languageCode }) => { + const dictionary = getPickersUiDictionary(languageCode); + + const handleSymmetricSecretKeyEncodingChange = useDecoderStore( + (state) => state.handleSymmetricSecretKeyEncodingChange + ); + + const onSecretEncodingFormatChange = (event: ChangeEvent) => { + handleSymmetricSecretKeyEncodingChange(event.target.checked ? EncodingValues.BASE64URL : EncodingValues.UTF8); + }; + + return ( +
+
+ Base64URL Encoded? +
+ +
+ ); +}; From cd270fcaa7eaecf23b282cdebcb8c2c4cadc7792 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 16 Sep 2025 12:36:50 -0500 Subject: [PATCH 35/72] update card styles and component to render toggle switch --- .../common/components/card/card.component.tsx | 50 ++++++++++--------- .../common/components/card/card.module.scss | 12 +++++ 2 files changed, 39 insertions(+), 23 deletions(-) diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index 504f2df9..739482af 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -1,10 +1,11 @@ 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"; export interface CardComponentProps extends PropsWithChildren { id: string; @@ -151,8 +152,8 @@ export const CardComponent: React.FC = (props) => { {messages.success.map((line, index) => { return ( <> - - {line} + + {line} ); })} @@ -201,27 +202,30 @@ export const CardWithHeadlineComponent: React.FC< return (
{sectionHeadline && ( - <> -

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

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

+ {sectionHeadline.description && ( +

+ {sectionHeadline.description} +

)} -

- {sectionHeadline.description && ( -

- {sectionHeadline.description} -

- )} - +
+ +
)}
diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index 382be7c2..5472c0c4 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -56,6 +56,18 @@ } } +.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; grid-column: span 6; From f4624e307a825c4a729ccdb3baa0c1d0b10bf671 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 16 Sep 2025 12:36:59 -0500 Subject: [PATCH 36/72] comment footer --- .../components/secret-key-input.component.tsx | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/features/decoder/components/secret-key-input.component.tsx b/src/features/decoder/components/secret-key-input.component.tsx index 919a6f88..3a852cd7 100644 --- a/src/features/decoder/components/secret-key-input.component.tsx +++ b/src/features/decoder/components/secret-key-input.component.tsx @@ -19,6 +19,7 @@ import { CardToolbarComponent } from "@/features/common/components/card-toolbar/ import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component"; 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"; +import { EncodingFormatToggleSwitchComponent } from "./encoding-format-toggle-swith/encoding-format-toggle-switch"; type SecretKeyInputComponentProps = { languageCode: string; @@ -29,27 +30,27 @@ export const SecretKeyInputComponent: React.FC< SecretKeyInputComponentProps > = ({ languageCode, dictionary }) => { const handleSymmetricSecretKeyChange$ = useDecoderStore( - (state) => state.handleSymmetricSecretKeyChange, + (state) => state.handleSymmetricSecretKeyChange ); const handleAsymmetricPublicKeyChange$ = useDecoderStore( - (state) => state.handleAsymmetricPublicKeyChange, + (state) => state.handleAsymmetricPublicKeyChange ); const resetControlledSymmetricSecretKey$ = useDecoderStore( - (state) => state.resetControlledSymmetricSecretKey, + (state) => state.resetControlledSymmetricSecretKey ); const resetControlledAsymmetricPublicKey$ = useDecoderStore( - (state) => state.resetControlledAsymmetricPublicKey, + (state) => state.resetControlledAsymmetricPublicKey ); const alg$ = useDecoderStore((state) => state.alg); const verificationInputErrors$ = useDecoderStore( - (state) => state.verificationInputErrors, + (state) => state.verificationInputErrors ); const controlledSymmetricSecretKey = useDecoderStore( - (state) => state.controlledSymmetricSecretKey, + (state) => state.controlledSymmetricSecretKey ); const controlledAsymmetricPublicKey = useDecoderStore( - (state) => state.controlledAsymmetricPublicKey, + (state) => state.controlledAsymmetricPublicKey ); const decoderInputs$ = useDebuggerStore((state) => state.decoderInputs$); @@ -58,7 +59,7 @@ export const SecretKeyInputComponent: React.FC< decoderInputs$.algType === SigningAlgCategoryValues.SYMMETRIC && decoderInputs$.symmetricSecretKey ? decoderInputs$.symmetricSecretKey - : DEFAULT_JWT.secret, + : DEFAULT_JWT.secret ); const [publicKey, setPublicKey] = useState(""); @@ -87,7 +88,7 @@ export const SecretKeyInputComponent: React.FC< }; const handleSymmetricSecretKeyChange = async ( - e: ChangeEvent, + e: ChangeEvent ) => { const key = e.target.value; @@ -99,7 +100,7 @@ export const SecretKeyInputComponent: React.FC< }; const handleAsymmetricPublicKeyChange = async ( - e: ChangeEvent, + e: ChangeEvent ) => { const key = e.target.value; @@ -162,6 +163,11 @@ export const SecretKeyInputComponent: React.FC< /> ), + /* footer: isHmacAlg(alg$) ? ( + + ) : ( + + ), */ }} > {isHmacAlg(alg$) && ( From ff3738173569a6822a7a46d4dfc5f2a8c4b481a7 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Tue, 16 Sep 2025 12:37:35 -0500 Subject: [PATCH 37/72] format secret key input component --- .../components/secret-key-input.component.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/features/decoder/components/secret-key-input.component.tsx b/src/features/decoder/components/secret-key-input.component.tsx index 3a852cd7..0cb09328 100644 --- a/src/features/decoder/components/secret-key-input.component.tsx +++ b/src/features/decoder/components/secret-key-input.component.tsx @@ -30,27 +30,27 @@ export const SecretKeyInputComponent: React.FC< SecretKeyInputComponentProps > = ({ languageCode, dictionary }) => { const handleSymmetricSecretKeyChange$ = useDecoderStore( - (state) => state.handleSymmetricSecretKeyChange + (state) => state.handleSymmetricSecretKeyChange, ); const handleAsymmetricPublicKeyChange$ = useDecoderStore( - (state) => state.handleAsymmetricPublicKeyChange + (state) => state.handleAsymmetricPublicKeyChange, ); const resetControlledSymmetricSecretKey$ = useDecoderStore( - (state) => state.resetControlledSymmetricSecretKey + (state) => state.resetControlledSymmetricSecretKey, ); const resetControlledAsymmetricPublicKey$ = useDecoderStore( - (state) => state.resetControlledAsymmetricPublicKey + (state) => state.resetControlledAsymmetricPublicKey, ); const alg$ = useDecoderStore((state) => state.alg); const verificationInputErrors$ = useDecoderStore( - (state) => state.verificationInputErrors + (state) => state.verificationInputErrors, ); const controlledSymmetricSecretKey = useDecoderStore( - (state) => state.controlledSymmetricSecretKey + (state) => state.controlledSymmetricSecretKey, ); const controlledAsymmetricPublicKey = useDecoderStore( - (state) => state.controlledAsymmetricPublicKey + (state) => state.controlledAsymmetricPublicKey, ); const decoderInputs$ = useDebuggerStore((state) => state.decoderInputs$); @@ -88,7 +88,7 @@ export const SecretKeyInputComponent: React.FC< }; const handleSymmetricSecretKeyChange = async ( - e: ChangeEvent + e: ChangeEvent, ) => { const key = e.target.value; @@ -100,7 +100,7 @@ export const SecretKeyInputComponent: React.FC< }; const handleAsymmetricPublicKeyChange = async ( - e: ChangeEvent + e: ChangeEvent, ) => { const key = e.target.value; From 19565b7fc3ace0b8ddf9cfe6ae9456be3b1d56fa Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 17 Sep 2025 12:07:11 -0500 Subject: [PATCH 38/72] update react control styles --- src/libs/theme/styles/globals.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 4b320253..837baf4f 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -507,7 +507,7 @@ $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; + height: 2rem; } .react-select__control { @@ -557,7 +557,7 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); border: 1px solid var(--color_border_default); padding: 0.25rem; overflow: hidden; - min-width: 240px; + min-width: 6.125rem; } .react-select__menu-portal { From deb9bfc2ece08bb5b92e41188a75a8a3d8c2a724 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 17 Sep 2025 12:08:29 -0500 Subject: [PATCH 39/72] move pickers to card component --- .../common/components/card/card.component.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index 739482af..885c6f1b 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -6,6 +6,9 @@ import { CardMessageComponent } from "@/features/common/components/card-message/ 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; @@ -151,10 +154,10 @@ export const CardComponent: React.FC = (props) => { > {messages.success.map((line, index) => { return ( - <> +
{line} - +
); })} @@ -198,6 +201,7 @@ export const CardWithHeadlineComponent: React.FC< CardWithHeadlineComponentProps > = ({ sectionHeadline, languageCode, ...props }) => { const regionId = useId(); + const alg$ = useDecoderStore((state) => state.alg); return (
@@ -224,7 +228,12 @@ export const CardWithHeadlineComponent: React.FC<

)}
- + + {isHmacAlg(alg$) ? ( + + ) : ( + + )} )} From 3f9d976073afbe7ac5846a802df406993b1c03ee Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 17 Sep 2025 12:16:00 -0500 Subject: [PATCH 40/72] update debugger picker styling and options --- .../debugger-picker.component.tsx | 4 ++- .../debugger-picker.module.scss | 26 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) 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 450e9619..c62873c2 100644 --- a/src/features/common/components/debugger-picker/debugger-picker.component.tsx +++ b/src/features/common/components/debugger-picker/debugger-picker.component.tsx @@ -40,7 +40,7 @@ interface DebuggerPickerComponentProps { GroupBase >; isGrouped?: boolean; - selectedOptionCode: DebuggerPickerOptionModel | null; + selectedOptionCode?: DebuggerPickerOptionModel | null; handleSelection: ( selection: string, parentLabel?: LibraryFilterLabel @@ -54,6 +54,7 @@ export const DebuggerPickerComponent: React.FC< > = ({ label, options, + selectedOptionCode, handleSelection, placeholder, minWidth, @@ -93,6 +94,7 @@ export const DebuggerPickerComponent: React.FC< classNamePrefix={"react-select"} isSearchable={false} placeholder={placeholder} + value={selectedOptionCode} styles={{ control: (base) => ({ ...base, 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 ab3f065d..d8944919 100644 --- a/src/features/common/components/debugger-picker/debugger-picker.module.scss +++ b/src/features/common/components/debugger-picker/debugger-picker.module.scss @@ -33,20 +33,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); @@ -55,4 +52,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 From dba55a9b43b28291589bdd760ea7f410faabe1c5 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 17 Sep 2025 12:16:33 -0500 Subject: [PATCH 41/72] update label styles --- .../token-decoder-key-format-picker.module.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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 { From 5a4868ff1fc4d3eca5a2f593391534224d1a9f43 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 17 Sep 2025 12:17:44 -0500 Subject: [PATCH 42/72] update alg picker container --- .../debugger-alg-picker.component.tsx | 36 +++++++------------ .../debugger-alg-picker.module.scss | 4 +++ 2 files changed, 16 insertions(+), 24 deletions(-) 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 3242b44f..c407e3b4 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 @@ -15,7 +15,7 @@ import { algDictionary, jwsExampleAlgHeaderParameterValuesDictionary, } from "@/features/common/values/jws-alg-header-parameter-values.dictionary"; -import { useButton } from "@react-aria/button" +import { useButton } from "@react-aria/button"; import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model"; enum PickerStates { @@ -92,7 +92,6 @@ export const WidgetAlgPickerComponent: React.FC< setPickerState(PickerStates.IDLE); }; - useEffect(() => { (async function runEs512Check() { setCanUseEs512(await isP521Supported()); @@ -107,18 +106,6 @@ export const WidgetAlgPickerComponent: React.FC< })(); }, []); - /* const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { - return Object.entries( - jwsExampleAlgHeaderParameterValuesDictionary.unsecured - ).map((entry) => { - const [key, value] = entry; - - return { - value: key, - label: value.name, - }; - }); - }, []); */ const symmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { return Object.entries(jwsExampleAlgHeaderParameterValuesDictionary.mac).map( @@ -197,16 +184,17 @@ export const WidgetAlgPickerComponent: React.FC< {dictionary.exampleAlgPicker.label} - +
+ +
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 48f7278b..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 @@ -62,6 +62,10 @@ font-weight: 600; } +.picker__container { + height: 2rem; +} + .button { color: var(--color_fg_on_button); background-color: var(--color_bg_button); From c255d5ef0b3569f1043bec3738c0ca0608a4ebf4 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 17 Sep 2025 12:27:44 -0500 Subject: [PATCH 43/72] update styling for signature messages --- src/features/common/components/card/card.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index 885c6f1b..cb72669a 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -154,7 +154,7 @@ export const CardComponent: React.FC = (props) => { > {messages.success.map((line, index) => { return ( -
+
{line}
From 1f0c9a25c393ee4aaad8c42e505998b54372e0ee Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 17 Sep 2025 14:38:58 -0500 Subject: [PATCH 44/72] remove height --- src/libs/theme/styles/globals.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 837baf4f..83dd4895 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -507,7 +507,6 @@ $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; } .react-select__control { From 58a40014c926be995f9b9310a7eba55e0f0d36bb Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:05:01 -0500 Subject: [PATCH 45/72] add data-no-padding attribute --- src/features/common/components/card/card.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index cb72669a..37469511 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -74,6 +74,7 @@ export const CardComponent: React.FC = (props) => { 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 && ( From ca3353dd31186d4899a86af8805dcbcd835df010 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:05:29 -0500 Subject: [PATCH 46/72] fix card styles --- .../common/components/card/card.module.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index 5472c0c4..7bb7d074 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -70,18 +70,18 @@ .card { isolation: isolate; + flex: 1 1; grid-column: span 6; display: flex; - flex: 1; - padding: 0px 2px; flex-direction: column; - border-radius: 0.5rem; + border-radius: 1rem; + border: 1px solid var(--color_border_default); background: var(--color_bg_layer_alternate-bold); - - &[data-type="output"] { - background: var(--color_bg_layer_alternate); + padding:0 0.25rem; + letter-spacing: -.1px; + &[data-no-padding="true"] { + padding: 0; } - &[data-frameless="true"] { border-radius: 0; border: none; From 92d74fee8cbeabe72f02cacf3f7b54d8bb64be5e Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:05:54 -0500 Subject: [PATCH 47/72] update padding value --- src/features/decoder/components/jwt-input.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/decoder/components/jwt-input.component.tsx b/src/features/decoder/components/jwt-input.component.tsx index 41c1541a..774ca8bb 100644 --- a/src/features/decoder/components/jwt-input.component.tsx +++ b/src/features/decoder/components/jwt-input.component.tsx @@ -80,7 +80,7 @@ export const JwtInputComponent: React.FC = ({ languageCode={languageCode} title={dictionary.title} compactTitle={dictionary.compactTitle} - options={{ fullWidth: true, noPadding: true }} + options={{ fullWidth: true, noPadding: false }} messages={{ success: [dictionary.successMessage], errors: decodeErrors$, From a054985015b0b6d627a8dcf3032c0dff07184a3c Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:06:20 -0500 Subject: [PATCH 48/72] delete comment --- .../components/secret-key-input.component.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/features/decoder/components/secret-key-input.component.tsx b/src/features/decoder/components/secret-key-input.component.tsx index 0cb09328..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"; @@ -19,7 +17,7 @@ import { CardToolbarComponent } from "@/features/common/components/card-toolbar/ import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component"; 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"; -import { EncodingFormatToggleSwitchComponent } from "./encoding-format-toggle-swith/encoding-format-toggle-switch"; + type SecretKeyInputComponentProps = { languageCode: string; @@ -129,6 +127,7 @@ export const SecretKeyInputComponent: React.FC< ? dictionary.description.secret : dictionary.description.publicKey, }} + hasHeaderIcon languageCode={languageCode} messages={{ errors: verificationInputErrors$, @@ -138,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 @@ -162,12 +161,7 @@ export const SecretKeyInputComponent: React.FC< isDisabled={isHmacAlg(alg$) ? !secret : !publicKey} /> - ), - /* footer: isHmacAlg(alg$) ? ( - - ) : ( - - ), */ + ) }} > {isHmacAlg(alg$) && ( From 21ba061701ab92753f9fd89de71b9ce34a7728a5 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:07:04 -0500 Subject: [PATCH 49/72] update toggle switch logic and styles --- .../encoding-format-toggle-switch.module.scss | 6 +++ .../encoding-format-toggle-switch.tsx | 52 +++++++++++++------ 2 files changed, 42 insertions(+), 16 deletions(-) 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 index 377661de..64734b9a 100644 --- 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 @@ -1,5 +1,11 @@ @use "@/libs/theme/styles/variables" as *; +.encoder_switch { + display: flex; + width: 100%; + justify-content: flex-end; +} + .container { display: flex; align-items: center; 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 index 5d29db85..88d88b2d 100644 --- 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 @@ -5,38 +5,58 @@ 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 }) => { +> = ({ languageCode, isEncoding = false }) => { const dictionary = getPickersUiDictionary(languageCode); - const handleSymmetricSecretKeyEncodingChange = useDecoderStore( + const handleSymmetricSecretKeyEncodingChangeDe = useDecoderStore( (state) => state.handleSymmetricSecretKeyEncodingChange ); - const onSecretEncodingFormatChange = (event: ChangeEvent) => { - handleSymmetricSecretKeyEncodingChange(event.target.checked ? EncodingValues.BASE64URL : EncodingValues.UTF8); + 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? +
+
+
+ Base64URL Encoded? +
+
-
); }; From e2ee558cd61515738856e47404048897b77cc7dd Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:07:42 -0500 Subject: [PATCH 50/72] add heading and update styles --- .../encoded-jwt-output.component.tsx | 51 ++++++++++--------- .../components/encoded-jwt-output.module.scss | 14 +++++ 2 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 src/features/encoder/components/encoded-jwt-output.module.scss diff --git a/src/features/encoder/components/encoded-jwt-output.component.tsx b/src/features/encoder/components/encoded-jwt-output.component.tsx index 6f167a10..1831ff05 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 From 931c82d04a3e0873deda26dc62200030cef99d24 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:11:28 -0500 Subject: [PATCH 51/72] update en dictionary entries --- src/features/localization/dictionaries/home/en.ts | 9 +++++---- .../localization/models/encoder-dictionary.model.ts | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/features/localization/dictionaries/home/en.ts b/src/features/localization/dictionaries/home/en.ts index 7f080cf6..947388ad 100644 --- a/src/features/localization/dictionaries/home/en.ts +++ b/src/features/localization/dictionaries/home/en.ts @@ -157,18 +157,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: { @@ -185,7 +185,8 @@ export const enHomeDictionary: HomeDictionaryModel = { }, }, encodedJwt: { - title: "JSON Web Token", + title: "Encoded JWT", + heading: "JWT Signature" }, }, }; 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; }; } From 51867df38d3dc7168489e8854eaac0076e369347 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:11:50 -0500 Subject: [PATCH 52/72] update global values --- src/libs/theme/styles/globals.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index aac2d0ac..df7d2bbc 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -45,7 +45,7 @@ :root { --color_bg_page: var(--functional-gray-950); --color_fg_bold: var(--functional-gray-50); - --color_fg_default: var(--functional-gray-500); + --color_fg_default: var(--functional-gray-200); --color_fg_link_primary: var(--cloud); --color_bg_app_bar: hsla(0, 0%, 95%, .04); From 09ffa2058bc07ba270bfdb60942609c828773bf0 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:12:33 -0500 Subject: [PATCH 53/72] add headers to token encoder cards --- .../token-encoder-input.component.tsx | 85 ++++++++++++------- .../token-encoder-input.module.scss | 17 ++++ 2 files changed, 70 insertions(+), 32 deletions(-) diff --git a/src/features/encoder/components/token-encoder-input.component.tsx b/src/features/encoder/components/token-encoder-input.component.tsx index e3300551..b4e92119 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: ( ), }, - options: { noPadding: true }, + options: { noPadding: false }, }, { id: dataTestidDictionary.encoder.payloadEditor.id, @@ -232,6 +239,7 @@ export const TokenEncoderInputComponent: React.FC< handlePayloadChange={handlePayloadChange} /> ), + hasHeaderIcon: true, messages: { success: [dictionary.payloadEditor.successMessage], errors: payloadErrors$, @@ -247,7 +255,7 @@ export const TokenEncoderInputComponent: React.FC< ), }, - options: { noPadding: true }, + options: { noPadding: false }, }, ]; @@ -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, @@ -262,7 +271,7 @@ export const TokenEncoderInputComponent: React.FC< ? dictionary.signatureEditor.compactTitle.secret : dictionary.signatureEditor.compactTitle.privateKey, options: { - noPadding: true, + noPadding: false, }, children: ( <> @@ -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..cd033ef4 100644 --- a/src/features/encoder/components/token-encoder-input.module.scss +++ b/src/features/encoder/components/token-encoder-input.module.scss @@ -24,3 +24,20 @@ display: none; } } +.headline_container { + display: flex; + grid-column: 1/-1; + width: 100%; + justify-content: space-between; +} + +.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 From cd274ab558b5b873e78381fd640ee24c7d71969b Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Wed, 24 Sep 2025 17:12:44 -0500 Subject: [PATCH 54/72] delete unused component --- ...coder-encoding-format-picker.component.tsx | 64 ----------------- ...encoder-encoding-format-picker.module.scss | 70 ------------------- 2 files changed, 134 deletions(-) delete mode 100644 src/features/encoder/components/token-encoder-encoding-format-picker.component.tsx delete mode 100644 src/features/encoder/components/token-encoder-encoding-format-picker.module.scss 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; - } - } -} From b1529d829a4066b0d7ec65389b478f65a8cb38ba Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:41:02 -0500 Subject: [PATCH 55/72] add headline classname --- src/features/common/components/card/card.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx index 37469511..39d92ed9 100644 --- a/src/features/common/components/card/card.component.tsx +++ b/src/features/common/components/card/card.component.tsx @@ -208,7 +208,7 @@ export const CardWithHeadlineComponent: React.FC<
{sectionHeadline && (
-
+

Date: Thu, 25 Sep 2025 15:41:42 -0500 Subject: [PATCH 56/72] add styles for heading container --- src/features/common/components/card/card.module.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index 7bb7d074..e2d28e8c 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -56,6 +56,12 @@ } } +.headline__container { + display: flex; + flex-direction: column; + gap: 0; +} + .title__container { grid-column: 1/-1; width: 100%; From 686d4e49b88124853fcc1f861610b46f16b704ec Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:42:32 -0500 Subject: [PATCH 57/72] fix row-gap value --- src/features/common/components/card-tabs/card-tabs.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 98bc879b..6a11f221 100644 --- a/src/features/common/components/card-tabs/card-tabs.module.scss +++ b/src/features/common/components/card-tabs/card-tabs.module.scss @@ -8,7 +8,7 @@ width: 100%; max-height: fit-content; flex-direction: column; - row-gap: 0.5rem; + row-gap: 1rem; cursor: default; } From a2c53e77af24b6da32d62050bc2129e55285d72c Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:44:10 -0500 Subject: [PATCH 58/72] fix button icon styling --- .../card-toolbar-button.module.scss | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) 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 30842ae1..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 @@ -8,21 +8,25 @@ } } .button__standard { - gap: 0.75rem; - border: none; - border-radius: 0.25rem; + 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; @@ -42,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 { From 863fdf815006f129e8e08258e374f1f8bc249c40 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:45:09 -0500 Subject: [PATCH 59/72] fix picker styles --- .../debugger-picker/debugger-picker.module.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) 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 d8944919..ab25a72c 100644 --- a/src/features/common/components/debugger-picker/debugger-picker.module.scss +++ b/src/features/common/components/debugger-picker/debugger-picker.module.scss @@ -14,14 +14,15 @@ $picker-list-width-lg: 7rem; $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2); .picker { - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - background: transparent; - color: var(--color_fg_bold); - gap: .75rem; - width: 100vh; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + background: transparent; + border: none; + color: var(--color_fg_bold); + gap: .75rem; + width: 100%; //width: $picker-width-sm; From 68c44ea333da8478cb38c5012920f57ad493642e Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:46:01 -0500 Subject: [PATCH 60/72] increase font size --- src/features/decoder/components/jwt-editor.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From f1471cb390f2dabbd59687a4b33a9f9884054eda Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:47:22 -0500 Subject: [PATCH 61/72] increase padding --- src/features/common/components/widget/widget/widget.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/common/components/widget/widget/widget.module.scss b/src/features/common/components/widget/widget/widget.module.scss index 543c34e3..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 { From 2824a4883dfe89cdeb92c1ee6ab412e3f3a252a5 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:48:31 -0500 Subject: [PATCH 62/72] align items to center --- src/features/encoder/components/token-encoder-input.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/encoder/components/token-encoder-input.module.scss b/src/features/encoder/components/token-encoder-input.module.scss index cd033ef4..30c16d15 100644 --- a/src/features/encoder/components/token-encoder-input.module.scss +++ b/src/features/encoder/components/token-encoder-input.module.scss @@ -29,6 +29,7 @@ grid-column: 1/-1; width: 100%; justify-content: space-between; + align-items: center; } .headline { From df05d986aa742a2287c1e6c72fe603a257a1e50b Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:50:02 -0500 Subject: [PATCH 63/72] fix styles for encoder picker --- ...en-encoder-key-format-picker.component.tsx | 54 ++++++++++--------- ...oken-encoder-key-format-picker.module.scss | 37 ++++++++++--- 2 files changed, 60 insertions(+), 31 deletions(-) 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 { From 39dad3fade994bd7ac1eb8617c368bc50acb4636 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:52:05 -0500 Subject: [PATCH 64/72] add picker to token encoder component --- .../components/token-encoder.component.tsx | 52 ++++++++++++------- .../components/token-encoder.module.scss | 32 ++++++++++++ 2 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 src/features/encoder/components/token-encoder.module.scss 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 From 84350b5de791b9e2c53424b43e97aa6fac1b1db2 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:52:36 -0500 Subject: [PATCH 65/72] add new color to light theme --- src/libs/theme/styles/globals.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index df7d2bbc..4866080d 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -200,6 +200,7 @@ html[data-theme="system-light"] { --color_fg_default: var(--functional-gray-500); --color_fg_link_primary: var(--sky); + --color_bg_app_bar: hsla(0,0%,7%,.04); --color_bg_app_bar_plain: rgba(241, 241, 241); --color_fg_link: var(--charcoal2); From 600cbdc606cfdfba1e7486a862598b9c61c28b14 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 25 Sep 2025 16:18:31 -0500 Subject: [PATCH 66/72] fix toggle switch styles --- .../encoding-format-toggle-switch.module.scss | 7 +++++-- .../encoding-format-toggle-switch.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) 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 index 64734b9a..8c2b060f 100644 --- 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 @@ -1,11 +1,14 @@ @use "@/libs/theme/styles/variables" as *; -.encoder_switch { +.base_switch { display: flex; - width: 100%; justify-content: flex-end; } +.encoder { + width: 100%; +} + .container { display: flex; align-items: center; 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 index 88d88b2d..bd034ce4 100644 --- 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 @@ -40,7 +40,7 @@ export const EncodingFormatToggleSwitchComponent: React.FC< }; return ( -
+
Base64URL Encoded? From 7f547b469656c4f9b032f6cef1cbfe688f4416aa Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 2 Oct 2025 13:05:17 -0500 Subject: [PATCH 67/72] delete no padding styles --- src/features/common/components/card/card.module.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/features/common/components/card/card.module.scss b/src/features/common/components/card/card.module.scss index e2d28e8c..a7104dc9 100644 --- a/src/features/common/components/card/card.module.scss +++ b/src/features/common/components/card/card.module.scss @@ -83,15 +83,8 @@ border-radius: 1rem; border: 1px solid var(--color_border_default); background: var(--color_bg_layer_alternate-bold); - padding:0 0.25rem; + padding: 0.25rem; letter-spacing: -.1px; - &[data-no-padding="true"] { - padding: 0; - } - &[data-frameless="true"] { - border-radius: 0; - border: none; - } } .card__heading_title_container { From c40823f0483c334fac2afe31c9166bc5765641af Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 2 Oct 2025 13:05:45 -0500 Subject: [PATCH 68/72] remove padding --- src/features/common/components/card-tabs/card-tabs.module.scss | 1 - 1 file changed, 1 deletion(-) 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 6a11f221..2db5a3b3 100644 --- a/src/features/common/components/card-tabs/card-tabs.module.scss +++ b/src/features/common/components/card-tabs/card-tabs.module.scss @@ -32,7 +32,6 @@ border-radius: 1rem; border: .5px solid var(--color_border_default); background: var(--color_bg_layer_alternate-bold); - padding: .25rem; letter-spacing: -.1px; gap: .25rem; } From 5e791f79b04a793025fd75a65cfb989f762e4d82 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 2 Oct 2025 13:06:13 -0500 Subject: [PATCH 69/72] add none algorithm option --- .../debugger-alg-picker.component.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) 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 c407e3b4..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 @@ -106,6 +106,18 @@ export const WidgetAlgPickerComponent: React.FC< })(); }, []); + const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { + return Object.entries( + jwsExampleAlgHeaderParameterValuesDictionary.unsecured, + ).map((entry) => { + const [key, value] = entry; + + return { + value: key, + label: value.name, + }; + }); + }, []); const symmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => { return Object.entries(jwsExampleAlgHeaderParameterValuesDictionary.mac).map( @@ -172,8 +184,8 @@ export const WidgetAlgPickerComponent: React.FC< }, [canUseEd25519, canUseEd448, canUseEs512]); const algOptions = useMemo(() => { - return [...symmetricAlgOptions, ...asymmetricAlgOptions]; - }, [asymmetricAlgOptions, symmetricAlgOptions]); + return [...noneAlgOptions, ...symmetricAlgOptions, ...asymmetricAlgOptions]; + }, [noneAlgOptions, asymmetricAlgOptions, symmetricAlgOptions]); return (
From 4a2abf8a0a85bb141d50b66fe686ec80fbfaba00 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 2 Oct 2025 13:06:49 -0500 Subject: [PATCH 70/72] decrease padding --- .../components/debugger-widget/debugger-widget.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From ec01c9ef8537395fb14391e29a384ec844a4c838 Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 2 Oct 2025 13:07:21 -0500 Subject: [PATCH 71/72] update color for selected option in picker --- src/libs/theme/styles/globals.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 4866080d..48ef3439 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -630,7 +630,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%; } } From 4096e62d90f54f6c67b9a6ad6f29ab70a23525de Mon Sep 17 00:00:00 2001 From: Javier Tinoco <213990346+javiert-okta@users.noreply.github.com> Date: Thu, 2 Oct 2025 13:07:39 -0500 Subject: [PATCH 72/72] fix padding option --- src/features/decoder/components/jwt-input.component.tsx | 2 +- .../encoder/components/encoded-jwt-output.component.tsx | 2 +- .../encoder/components/token-encoder-input.component.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/decoder/components/jwt-input.component.tsx b/src/features/decoder/components/jwt-input.component.tsx index 774ca8bb..41c1541a 100644 --- a/src/features/decoder/components/jwt-input.component.tsx +++ b/src/features/decoder/components/jwt-input.component.tsx @@ -80,7 +80,7 @@ export const JwtInputComponent: React.FC = ({ languageCode={languageCode} title={dictionary.title} compactTitle={dictionary.compactTitle} - options={{ fullWidth: true, noPadding: false }} + options={{ fullWidth: true, noPadding: true }} messages={{ success: [dictionary.successMessage], errors: decodeErrors$, diff --git a/src/features/encoder/components/encoded-jwt-output.component.tsx b/src/features/encoder/components/encoded-jwt-output.component.tsx index 1831ff05..3a01b5d7 100644 --- a/src/features/encoder/components/encoded-jwt-output.component.tsx +++ b/src/features/encoder/components/encoded-jwt-output.component.tsx @@ -29,7 +29,7 @@ export const EncodedJwtOutputComponent: React.FC< title={dictionary.title} hasHeaderIcon compactTitle={dictionary.title} - options={{ noPadding: false, fullHeight: true, isOutput: true }} + options={{ noPadding: true, fullHeight: true, isOutput: true }} messages={{ warnings: encodingWarnings, errors: encodingErrors, diff --git a/src/features/encoder/components/token-encoder-input.component.tsx b/src/features/encoder/components/token-encoder-input.component.tsx index b4e92119..46f63c23 100644 --- a/src/features/encoder/components/token-encoder-input.component.tsx +++ b/src/features/encoder/components/token-encoder-input.component.tsx @@ -226,7 +226,7 @@ export const TokenEncoderInputComponent: React.FC< ), }, - options: { noPadding: false }, + options: { noPadding: true }, }, { id: dataTestidDictionary.encoder.payloadEditor.id, @@ -255,7 +255,7 @@ export const TokenEncoderInputComponent: React.FC< ), }, - options: { noPadding: false }, + options: { noPadding: true }, }, ]; @@ -271,7 +271,7 @@ export const TokenEncoderInputComponent: React.FC< ? dictionary.signatureEditor.compactTitle.secret : dictionary.signatureEditor.compactTitle.privateKey, options: { - noPadding: false, + noPadding: true, }, children: ( <>