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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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/21] 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 */