Skip to content

Commit b398098

Browse files
jakehwlljakehwll
committed
fix: inline className's
1 parent abf4632 commit b398098

File tree

4 files changed

+34
-39
lines changed

4 files changed

+34
-39
lines changed

‎site/src/components/FullPageLayout/Sidebar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,9 @@ export const SidebarIconButton: FC<SidebarIconButton> = ({
6969
{...buttonProps}
7070
className={cn(
7171
"border-0 border-x-2 border-x-transparent border-solid",
72-
!isActive && "opacity-75 hover:opacity-100",
73-
isActive && "opacity-100 relative border-l-sky-400",
72+
isActive
73+
? "opacity-100 relative border-l-sky-400"
74+
: "opacity-75 hover:opacity-100",
7475
className,
7576
)}
7677
/>

‎site/src/components/GitDeviceAuth/GitDeviceAuth.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,9 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
7272
deviceExchangeError,
7373
}) => {
7474
let status = (
75-
<p className={classNames.status}>
75+
<p
76+
className={"flex items-center justify-center gap-2 text-content-disabled"}
77+
>
7678
<CircularProgress size={16} color="secondary" data-chromatic="ignore" />
7779
Checking for authentication...
7880
</p>
@@ -129,10 +131,14 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
129131

130132
return (
131133
<div>
132-
<p className={classNames.text}>
134+
<p
135+
className={
136+
"text-base text-content-secondary text-center leading-relaxed m-0"
137+
}
138+
>
133139
Copy your one-time code:&nbsp;
134-
<div className={classNames.copyCode}>
135-
<span className={classNames.code}>
140+
<div className={"inline-flex items-center"}>
141+
<span className={"font-bold text-content-primary"}>
136142
{externalAuthDevice.user_code}
137143
</span>
138144
&nbsp;{" "}
@@ -144,9 +150,9 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
144150
<br />
145151
Then open the link below and paste it:
146152
</p>
147-
<div className={classNames.links}>
153+
<div className={"flex flex-col gap-1 m-4"}>
148154
<Link
149-
className={classNames.link}
155+
className={"flex items-center justify-center font-base gap-2"}
150156
href={externalAuthDevice.verification_uri}
151157
target="_blank"
152158
rel="noreferrer"
@@ -160,12 +166,3 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
160166
</div>
161167
);
162168
};
163-
164-
const classNames = {
165-
text: "text-base text-content-secondary text-center leading-relaxed m-0",
166-
copyCode: "inline-flex items-center",
167-
code: "font-bold text-content-primary",
168-
links: "flex flex-col gap-1 m-4",
169-
link: "flex items-center justify-center font-base gap-2",
170-
status: "flex items-center justify-center gap-2 text-content-disabled",
171-
};

‎site/src/components/GlobalSnackbar/GlobalSnackbar.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@ export const GlobalSnackbar: FC = () => {
4747
message={
4848
<div className="flex">
4949
{notificationMsg.msgType === MsgType.Error && (
50-
<ErrorIcon className={classNames.errorIcon} />
50+
<ErrorIcon className={"text-content-destructive mr-4"} />
5151
)}
5252

5353
<div className="max-w-[670px] flex flex-col">
54-
<span className={classNames.messageTitle}>
54+
<span className={"text-sm font-semibold"}>
5555
{notificationMsg.msg}
5656
</span>
5757

@@ -100,7 +100,5 @@ const AdditionalMessageDisplay: FC<AdditionalMessageDisplayProps> = ({
100100
};
101101

102102
const classNames = {
103-
messageTitle: "text-sm font-semibold",
104103
messageSubtitle: "mt-1 first-letter:uppercase",
105-
errorIcon: "text-content-destructive mr-4",
106104
};

‎site/src/components/HelpTooltip/HelpTooltip.tsx‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,12 @@ export const HelpTooltipTitle: FC<HTMLAttributes<HTMLHeadingElement>> = ({
9090
...attrs
9191
}) => {
9292
return (
93-
<h4 className={classNames.title} {...attrs}>
93+
<h4
94+
className={
95+
"mt-0 mb-2 text-content-primary text-sm leading-relaxed font-semibold"
96+
}
97+
{...attrs}
98+
>
9499
{children}
95100
</h4>
96101
);
@@ -101,7 +106,10 @@ export const HelpTooltipText: FC<HTMLAttributes<HTMLParagraphElement>> = ({
101106
...attrs
102107
}) => {
103108
return (
104-
<p {...attrs} className={cn(classNames.text, attrs.className)}>
109+
<p
110+
{...attrs}
111+
className={cn("my-1 text-sm leading-relaxed", attrs.className)}
112+
>
105113
{children}
106114
</p>
107115
);
@@ -118,9 +126,9 @@ export const HelpTooltipLink: FC<HelpTooltipLink> = ({ children, href }) => {
118126
href={href}
119127
target="_blank"
120128
rel="noreferrer"
121-
className={classNames.link}
129+
className={"flex items-center text-sm text-content-link"}
122130
>
123-
<ExternalLinkIcon className={classNames.linkIcon} />
131+
<ExternalLinkIcon className={"size-icon-xs mr-2 text-inherit"} />
124132
{children}
125133
</Link>
126134
);
@@ -143,18 +151,20 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
143151
<button
144152
type="button"
145153
aria-label={ariaLabel ?? ""}
146-
className={classNames.action}
154+
className={
155+
"flex items-center bg-transparent border-none p-0 cursor-pointer text-sm text-content-link"
156+
}
147157
onClick={onClick}
148158
>
149-
<Icon className={classNames.actionIcon} />
159+
<Icon className={"text-inherit size-3.5 mr-2"} />
150160
{children}
151161
</button>
152162
);
153163
};
154164

155165
export const HelpTooltipLinksGroup: FC<PropsWithChildren> = ({ children }) => {
156166
return (
157-
<Stack spacing={1} className={classNames.linksGroup}>
167+
<Stack spacing={1} className={"mt-4"}>
158168
{children}
159169
</Stack>
160170
);
@@ -168,14 +178,3 @@ const getIconSpacingFromSize = (size?: Size): number => {
168178
return 16;
169179
}
170180
};
171-
172-
const classNames = {
173-
title: "mt-0 mb-2 text-content-primary text-sm leading-relaxed font-semibold",
174-
text: "my-1 text-sm leading-relaxed",
175-
link: "flex items-center text-sm text-content-link",
176-
linkIcon: "size-icon-xs mr-2 text-inherit",
177-
linksGroup: "mt-4",
178-
action:
179-
"flex items-center bg-transparent border-none p-0 cursor-pointer text-sm text-content-link",
180-
actionIcon: "text-inherit size-3.5 mr-2",
181-
};

0 commit comments

Comments
 (0)