Skip to content

Commit 61f0a4f

Browse files
committed
fix visual regression
Signed-off-by: Adam Setch <[email protected]>
1 parent e2aa28d commit 61f0a4f

File tree

11 files changed

+753
-745
lines changed

11 files changed

+753
-745
lines changed

src/renderer/components/fields/Checkbox.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
2424
disabled={props.disabled}
2525
/>
2626

27-
<div className="ml-3">
27+
<div className="flex items-center ml-3">
2828
<label
2929
htmlFor={props.name}
3030
className="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -33,10 +33,10 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
3333
}
3434
>
3535
{props.label}
36-
{props.tooltip && (
37-
<Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
38-
)}
3936
</label>
37+
{props.tooltip && (
38+
<Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
39+
)}
4040
</div>
4141
</div>
4242

src/renderer/components/fields/Tooltip.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
1919
>
2020
<QuestionIcon className="ml-1 text-blue-500" />
2121
{showTooltip && (
22-
<div className="absolute z-10 w-60 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar">
22+
<div className="absolute left-[-80px] z-10 w-60 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar">
2323
<div className="text-left text-xs text-gray-700 dark:text-white">
2424
{props.tooltip}
2525
</div>

src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/renderer/components/settings/AppearanceSettings.tsx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -134,26 +134,26 @@ export const AppearanceSettings: FC = () => {
134134
tooltip={
135135
<div>
136136
<div>Show notification metric pills for:</div>
137-
<div className="pl-6">
138-
<ul className="list-disc">
139-
<li>
140-
<IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
137+
<div className="pl-4">
138+
<ul>
139+
<li className="flex items-center gap-1">
140+
<IssueClosedIcon size={Size.SMALL} />
141141
linked issues
142142
</li>
143-
<li>
144-
<CheckIcon size={Size.MEDIUM} className="pr-1" /> pr reviews
143+
<li className="flex items-center gap-1">
144+
<CheckIcon size={Size.SMALL} />
145+
pr reviews
145146
</li>
146-
<li>
147-
<CommentIcon size={Size.MEDIUM} className="pr-1" />
147+
<li className="flex items-center gap-1">
148+
<CommentIcon size={Size.SMALL} />
148149
comments
149150
</li>
150-
151-
<li>
152-
<TagIcon size={Size.MEDIUM} className="pr-1" />
151+
<li className="flex items-center gap-1">
152+
<TagIcon size={Size.SMALL} />
153153
labels
154154
</li>
155-
<li>
156-
<MilestoneIcon size={Size.MEDIUM} className="pr-1" />
155+
<li className="flex items-center gap-1">
156+
<MilestoneIcon size={Size.SMALL} />
157157
milestones
158158
</li>
159159
</ul>
@@ -173,18 +173,18 @@ export const AppearanceSettings: FC = () => {
173173
tooltip={
174174
<div>
175175
<div>Show GitHub number for:</div>
176-
<div className="pl-6">
177-
<ul className="list-disc">
178-
<li>
179-
<CommentIcon size={Size.MEDIUM} className="pr-1" />
176+
<div className="pl-4">
177+
<ul>
178+
<li className="flex items-center gap-1">
179+
<CommentIcon size={Size.SMALL} />
180180
Discussion
181181
</li>
182-
<li>
183-
<IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
182+
<li className="flex items-center gap-1">
183+
<IssueClosedIcon size={Size.SMALL} />
184184
Issue
185185
</li>
186-
<li>
187-
<GitPullRequestIcon size={Size.MEDIUM} className="pr-1" />
186+
<li className="flex items-center gap-1">
187+
<GitPullRequestIcon size={Size.SMALL} />
188188
Pull Request
189189
</li>
190190
</ul>

src/renderer/components/settings/SystemSettings.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,14 @@ export const SystemSettings: FC = () => {
7676
}
7777
tooltip={
7878
<div>
79-
Use a white Gitify logo (instead of the default black logo) when all
80-
notifications are read. Particularly useful for devices which have a
81-
dark-themed menubar or taskbar.
79+
<div className="pb-3">
80+
Use a white Gitify logo (instead of the default black logo) when
81+
all notifications are read.
82+
</div>
83+
<div>
84+
This is particularly useful for devices which have a dark-themed
85+
menubar or taskbar.
86+
</div>
8287
</div>
8388
}
8489
/>

src/renderer/routes/Accounts.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export const AccountsRoute: FC = () => {
103103
<div>
104104
<button
105105
type="button"
106-
className="mb-1 ml-1 cursor-pointer align-middle"
106+
className="flex items-center mb-1 ml-1 cursor-pointer align-middle"
107107
title="Open Host"
108108
onClick={() => openHost(account.hostname)}
109109
>
@@ -114,7 +114,7 @@ export const AccountsRoute: FC = () => {
114114
<div>
115115
<button
116116
type="button"
117-
className="ml-1 cursor-pointer align-middle"
117+
className="flex items-center ml-1 cursor-pointer align-middle"
118118
title="Open Developer Settings"
119119
onClick={() => openDeveloperSettings(account)}
120120
>
@@ -182,10 +182,10 @@ export const AccountsRoute: FC = () => {
182182

183183
<div className="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker">
184184
<div className="font-semibold italic">Add new account</div>
185-
<div>
185+
<div className="flex items-center">
186186
<button
187187
type="button"
188-
className={BUTTON_CLASS_NAME}
188+
className={cn('flex items-center', BUTTON_CLASS_NAME)}
189189
title="Login with GitHub"
190190
onClick={loginWithGitHub}
191191
>
@@ -197,7 +197,7 @@ export const AccountsRoute: FC = () => {
197197
</button>
198198
<button
199199
type="button"
200-
className={BUTTON_CLASS_NAME}
200+
className={cn('flex items-center', BUTTON_CLASS_NAME)}
201201
title="Login with Personal Access Token"
202202
onClick={loginWithPersonalAccessToken}
203203
>
@@ -209,7 +209,7 @@ export const AccountsRoute: FC = () => {
209209
</button>
210210
<button
211211
type="button"
212-
className={BUTTON_CLASS_NAME}
212+
className={cn('flex items-center', BUTTON_CLASS_NAME)}
213213
title="Login with OAuth App"
214214
onClick={loginWithOAuthApp}
215215
>

src/renderer/routes/Filters.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { AppContext } from '../context/App';
1212
import { BUTTON_CLASS_NAME } from '../styles/gitify';
1313
import { Size } from '../types';
1414
import type { Reason } from '../typesGitHub';
15+
import { cn } from '../utils/cn';
1516
import { FORMATTED_REASONS, formatReason } from '../utils/reason';
1617

1718
export const FiltersRoute: FC = () => {
@@ -91,7 +92,7 @@ export const FiltersRoute: FC = () => {
9192
<div>
9293
<button
9394
type="button"
94-
className={BUTTON_CLASS_NAME}
95+
className={cn('flex items-center', BUTTON_CLASS_NAME)}
9596
title="Clear filters"
9697
onClick={clearFilters}
9798
>

src/renderer/routes/__snapshots__/Accounts.test.tsx.snap

Lines changed: 12 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)