Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1f2451e

Browse files
jonathanp-oktaCopilot
jonathanp-okta
and
Copilot
committed
refactor: standardize class names in mobile header, codeblock, and steps components.
Co-authored-by: Copilot <[email protected]>
1 parent b6692b4 commit 1f2451e

6 files changed

Lines changed: 35 additions & 35 deletions

File tree

‎src/features/common/components/mobile-header/mobile-header.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ useEffect(() => {
7171
className={styles.headerImageLogo}
7272
/>
7373
<div>
74-
<h1 className={styles.logo_title}>OpenID Connect</h1>
75-
<h3 className={styles.logo_small_title}>Playground</h3>
74+
<h1 className={styles.logoTitle}>OpenID Connect</h1>
75+
<h3 className={styles.logoSmallTitle}>Playground</h3>
7676
</div>
7777
</div>
7878
<ControlIcon />

‎src/features/common/components/mobile-header/mobile-header.module.scss‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
background: var(--color_bg_layer);
1313
backdrop-filter: blur(2rem);
1414
z-index: 100;
15-
15+
1616
@media #{$breakpoint-dimension-sm} {
1717
display: none;
1818
}
@@ -33,7 +33,6 @@
3333
align-items: center;
3434
justify-content: space-between;
3535
color: var(--color_fg_link);
36-
3736
}
3837

3938
.headerLogo {
@@ -48,16 +47,6 @@
4847
width: auto;
4948
}
5049

51-
h1 {
52-
font-size: 1.25rem;
53-
line-height: 24px;
54-
}
55-
56-
h3 {
57-
font-size: 11px;
58-
line-height: 11px;
59-
}
60-
6150
& .headerImageLogo {
6251
margin-right: 8px;
6352
}
@@ -67,6 +56,16 @@
6756
}
6857
}
6958

59+
.logoTitle {
60+
font-size: 1.25rem;
61+
line-height: 24px;
62+
}
63+
64+
.logoSmallTitle {
65+
font-size: 11px;
66+
line-height: 11px;
67+
}
68+
7069
.burgerIconWrapper {
7170
appearance: none;
7271
border: 0;
@@ -153,7 +152,7 @@
153152
.menuContent {
154153
@include InnerContentFlex;
155154
width: 100%;
156-
padding: .25rem;
155+
padding: .25rem;
157156
}
158157

159158
.menuList {
@@ -180,7 +179,7 @@
180179
align-items: center;
181180
p {
182181
display: flex;
183-
align-items: center;
182+
align-items: center;
184183
border-radius: .75rem;
185184
width: 100%;
186185
font-size: 1rem;
@@ -196,7 +195,7 @@
196195

197196
.menuItemLink {
198197
display: flex;
199-
align-items: center;
198+
align-items: center;
200199
border-radius: .75rem;
201200
width: 100%;
202201
font-size: 1rem;

‎src/features/debugger/components/codeblock/codeblock.component.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type RequestData = {
1212
isEditable?: boolean;
1313
}[];
1414
};
15+
1516
interface CodeBlockProps {
1617
title: string;
1718
type: "request" | "json" | "token";
@@ -26,24 +27,24 @@ export const Codeblock = (props: CodeBlockProps) => {
2627
const { title, type, requestData, token, HeaderRightComponent } = props;
2728
return (
2829
<div className={styles.container}>
29-
<div className={styles.header_container}>
30-
<div className={styles.title_container}>{title}</div>
30+
<div className={styles.headerContainer}>
31+
<div className={styles.titleContainer}>{title}</div>
3132
{HeaderRightComponent && <HeaderRightComponent />}
3233
</div>
33-
<div className={styles.scroll_container}>
34+
<div className={styles.scrollContainer}>
3435
<div
3536
className={clsx(
36-
styles.code_block,
37-
type === "token" && styles.vertical_scroll_container,
38-
type === "request" && styles.horizontal_scroll_container
37+
styles.codeBlock,
38+
type === "token" && styles.verticalScrollContainer,
39+
type === "request" && styles.horizontalScrollContainer
3940
)}
4041
>
4142
{type === "request" && requestData ? (
4243
<>
43-
<div className={styles.code_line}>
44-
<p className={styles.code_line_number}>01</p>
44+
<div className={styles.codeLine}>
45+
<p className={styles.codeLineNumber}>01</p>
4546
<p
46-
className={styles.param_value}
47+
className={styles.paramValue}
4748
data-editable={requestData.isEditable}
4849
>
4950
<span>{`${requestData.method ? requestData.method : ""} ${requestData.url}?`}</span>

‎src/features/debugger/components/codeblock/codeblock.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
background-color: var(--color_bg_light);
88
}
99

10-
.horizontal_scroll_container {
10+
.horizontalScrollContainer {
1111
min-width: 544px;
1212
}
1313

14-
.vertical_scroll_container {
14+
.verticalScrollContainer {
1515
max-height: 248px;
1616
@media #{$breakpoint-dimension-sm} {
1717
max-height: fit-content;
1818
}
1919
}
2020

21-
.title_container {
21+
.titleContainer {
2222
color: var(--color_fg_bold);
2323
text-transform: uppercase;
2424
font-family: var(--font-secondary);
@@ -27,20 +27,20 @@
2727
line-height: 20px;
2828
}
2929

30-
.header_container {
30+
.headerContainer {
3131
padding: 24px;
3232
display: flex;
3333
justify-content: space-between;
3434
border-bottom: 0.5px solid var(--color_border_light);
3535
}
3636

37-
.scroll_container {
37+
.scrollContainer {
3838
overflow-x: auto;
3939
overflow-y: auto;
4040
max-width: 100%;
4141
}
4242

43-
.code_block {
43+
.codeBlock {
4444
max-width: 544px;
4545
color: var(--color_fg_link);
4646
font-feature-settings: 'liga' off, 'clig' off;

‎src/features/debugger/components/steps/debugger-steps.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
color: var(--color_fg_bold);
4141
}
4242

43-
.stepContainer:not(:last-child) .step_title_container {
43+
.stepContainer:not(:last-child) .stepTitleContainer {
4444
border-bottom: 0.5px solid var(--color_border_light);
4545
}
4646

@@ -82,7 +82,7 @@
8282
}
8383
}
8484

85-
.button_container {
85+
.buttonContainer {
8686
display: flex;
8787
flex-direction: row;
8888
gap: 8px;

‎src/features/debugger/components/steps/step-three/step-three.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const StepThree = () => {
3030

3131
const ViewJWTButton = ({ token }: { token: string }) => {
3232
return (
33-
<a href={`https://jwt.io/#token=${token}`} target="_blank" className={styles.button_container}>
33+
<a href={`https://jwt.io/#token=${token}`} target="_blank" className={styles.buttonContainer}>
3434
<ConfigurationIcon />
3535
View on JWT.IO
3636
</a>

0 commit comments

Comments
 (0)