Skip to content

Commit ca3298f

Browse files
domhhvdomhhv
committed
feat: ui tweaks (#457)
1 parent 9441b7d commit ca3298f

9 files changed

Lines changed: 50 additions & 80 deletions

File tree

‎src/components/account/AuthForm.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,11 @@ const AuthForm = ({
4545
onCancel();
4646
};
4747

48-
const formClassName = cn(mode === 'reset-password' && 'py-3');
49-
5048
return (
5149
<form
5250
onSubmit={handleSubmit}
5351
data-testid="submit-form"
54-
className={formClassName}
52+
className={cn(mode === 'reset-password' && 'py-3')}
5553
>
5654
<div className="flex flex-col gap-4">
5755
{mode === 'reset-password' && (

‎src/components/account/AuthModalButton.tsx‎

Lines changed: 23 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
import {
2-
Tabs,
3-
Modal,
4-
Toast,
5-
Tooltip,
6-
ButtonGroup,
7-
useOverlayState,
8-
} from '@heroui/react';
9-
import { UserIcon, SignOutIcon } from '@phosphor-icons/react';
1+
import { Tabs, Modal, Toast, useOverlayState } from '@heroui/react';
102
import React from 'react';
11-
import { VisuallyHidden } from 'react-aria';
123

134
import { CustomKbd, CustomButton } from '@components';
14-
import { useScreenWidth, useFirstDayOfWeek } from '@hooks';
5+
import { useFirstDayOfWeek } from '@hooks';
156
import type { DaysOfWeek } from '@models';
16-
import { signIn, signUp, signOut, sendPasswordResetEmail } from '@services';
7+
import { signIn, signUp, sendPasswordResetEmail } from '@services';
178
import { useUser } from '@stores';
189
import { getErrorMessage } from '@utils';
1910

@@ -23,7 +14,6 @@ type AuthMode = 'login' | 'register' | 'reset-password';
2314

2415
const AuthModalButton = () => {
2516
const user = useUser();
26-
const { isDesktop, isMobile } = useScreenWidth();
2717
const overlayState = useOverlayState();
2818
const [isAuthenticating, setIsAuthenticating] = React.useState(false);
2919
const [mode, setMode] = React.useState<AuthMode>('login');
@@ -121,61 +111,28 @@ const AuthModalButton = () => {
121111

122112
return (
123113
<>
124-
{user?.id ? (
125-
<ButtonGroup>
126-
<CustomButton
127-
href="/account"
128-
variant="bordered"
129-
isIconOnly={!isDesktop}
130-
data-testid="auth-button"
131-
size={isMobile ? 'sm' : 'md'}
132-
aria-label='Go to "Account" page'
133-
className="rounded-r-none border-r-0"
134-
>
135-
<UserIcon weight="bold" data-testid="user-icon" />
136-
<span className="max-sm:hidden">Account</span>
137-
</CustomButton>
138-
<Tooltip delay={0} closeDelay={0}>
139-
<Tooltip.Trigger>
140-
<CustomButton
141-
isIconOnly
142-
onPress={signOut}
143-
variant="bordered"
144-
aria-label="Log out"
145-
size={isMobile ? 'sm' : 'md'}
146-
className="rounded-l-none rounded-r-3xl"
147-
>
148-
<SignOutIcon weight="bold" data-testid="sign-out-icon" />
149-
<VisuallyHidden>Log Out</VisuallyHidden>
150-
</CustomButton>
151-
</Tooltip.Trigger>
152-
<Tooltip.Content>Log out</Tooltip.Content>
153-
</Tooltip>
154-
</ButtonGroup>
155-
) : (
156-
<CustomButton
114+
<CustomButton
115+
size="sm"
116+
variant="primary"
117+
data-testid="auth-button"
118+
onPress={overlayState.open}
119+
>
120+
Log In
121+
<CustomKbd
157122
size="sm"
158-
variant="primary"
159-
data-testid="auth-button"
160-
onPress={overlayState.open}
123+
variant="default"
124+
shortcutParams={[
125+
'i',
126+
() => {
127+
if (!user?.id) {
128+
overlayState.open();
129+
}
130+
},
131+
]}
161132
>
162-
Log In
163-
<CustomKbd
164-
size="sm"
165-
variant="default"
166-
shortcutParams={[
167-
'i',
168-
() => {
169-
if (!user?.id) {
170-
overlayState.open();
171-
}
172-
},
173-
]}
174-
>
175-
I
176-
</CustomKbd>
177-
</CustomButton>
178-
)}
133+
I
134+
</CustomKbd>
135+
</CustomButton>
179136
<Modal state={overlayState}>
180137
<Modal.Backdrop
181138
onOpenChange={(open) => {

‎src/components/calendar/CalendarNavigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,8 @@ const CalendarNavigation = ({ focusedDate }: MonthCalendarNavigationProps) => {
108108
<Select
109109
variant="secondary"
110110
value={monthSelectValue}
111-
className="w-17.5 md:w-28"
112111
isOpen={monthSelectState.isOpen}
112+
className="select--sm w-17.5 md:w-28"
113113
onOpenChange={monthSelectState.setOpen}
114114
>
115115
<Label className="sr-only">Month</Label>

‎src/components/calendar/CalendarSidebar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@ const CalendarSidebar = ({
180180
{VIEWS.map((view, index) => {
181181
return (
182182
<CustomButton
183+
size="sm"
183184
key={view.id}
184185
className="flex-1"
185186
href={viewPaths[view.id]}

‎src/components/common/CustomButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { tv } from 'tailwind-variants';
1414
import InfinityLoader from './InfinityLoader';
1515

1616
const customButtonVariants = tv({
17-
base: 'text-md relative overflow-hidden font-semibold has-[kbd]:pr-2 data-[pending=true]:opacity-40',
17+
base: 'text-md relative overflow-hidden font-semibold has-[kbd]:gap-1.5 has-[kbd]:pr-2 data-[pending=true]:opacity-40',
1818
extend: buttonVariants,
1919
variants: {
2020
variant: {

‎src/components/common/CustomKbd.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { useHasKeyboard, useKeyboardShortcut } from '@hooks';
1010
import { noop } from '@utils';
1111

1212
const customKbdVariants = tv({
13-
base: 'hidden',
1413
extend: coreKbdVariants,
1514
defaultVariants: {
1615
size: 'sm',
@@ -51,6 +50,10 @@ const CustomKbd = ({
5150

5251
useKeyboardShortcut(...shortcutParams);
5352

53+
if (!hasKeyboard) {
54+
return null;
55+
}
56+
5457
const { base } = customKbdVariants({ size, variant });
5558

5659
return (

‎src/components/header/Header.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ const Header = () => {
9393
<div className="flex items-center gap-2">
9494
<Dropdown>
9595
<CustomButton
96+
size="sm"
9697
variant="outline"
97-
size={isMobile ? 'sm' : 'md'}
9898
aria-label="Open navigation menu"
9999
>
100100
<ListIcon size={isMobile ? 16 : 18} />
@@ -126,7 +126,7 @@ const Header = () => {
126126
);
127127
})}
128128
</Dropdown.Section>
129-
<Separator className="bg-muted" />
129+
<Separator className="bg-muted/25" />
130130
<Dropdown.Section>
131131
<Dropdown.Item
132132
id="roadmap"
@@ -140,7 +140,7 @@ const Header = () => {
140140
<RoadHorizonIcon className="size-4 shrink-0" />
141141
<Label>Roadmap</Label>
142142
</div>
143-
<ArrowSquareOutIcon className="text-muted size-4 shrink-0" />
143+
<ArrowSquareOutIcon className="text-muted/50 size-4 shrink-0" />
144144
</Dropdown.Item>
145145
<Dropdown.Item
146146
target="_blank"
@@ -154,12 +154,12 @@ const Header = () => {
154154
<GithubLogoIcon className="size-4 shrink-0" />
155155
<Label>Source Code on GitHub</Label>
156156
</div>
157-
<ArrowSquareOutIcon className="text-muted size-4 shrink-0 justify-self-end" />
157+
<ArrowSquareOutIcon className="text-muted/50 size-4 shrink-0 justify-self-end" />
158158
</Dropdown.Item>
159159
</Dropdown.Section>
160160
{!!user && (
161161
<>
162-
<Separator className="bg-muted" />
162+
<Separator className="bg-muted/25" />
163163
<Dropdown.Section>
164164
<Dropdown.Item
165165
id="logout"

‎src/components/header/ThemeToggle.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ const ThemeToggle = () => {
2626
{index > 0 && (
2727
<ButtonGroup.Separator
2828
className={cn(
29-
index === 1 && 'left-7.75',
30-
index === 2 && 'left-15.75'
29+
index === 1 && 'left-8.75 md:left-7.75',
30+
index === 2 && 'left-17.75 md:left-15.75'
3131
)}
3232
/>
3333
)}
3434
<CustomButton
3535
size="sm"
3636
isIconOnly
3737
variant={'outline'}
38-
className={cn('size-8', isSelected && 'text-accent')}
38+
className={cn('md:size-8', isSelected && 'text-accent')}
3939
onPress={() => {
4040
setThemeMode(mode);
4141
}}

‎src/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,17 @@
119119
@apply text-xs leading-3;
120120
}
121121

122+
.select--sm .select__trigger {
123+
font-size: var(--text-xs);
124+
line-height: calc(var(--spacing) * 3);
125+
height: calc(var(--spacing) * 9);
126+
padding-block: calc(var(--spacing));
127+
128+
@media (width >= 48rem) {
129+
height: calc(var(--spacing) * 6);
130+
}
131+
}
132+
122133
.switch--sm,
123134
.switch--md,
124135
.switch--lg {

0 commit comments

Comments
 (0)