Skip to content

Commit ef8702b

Browse files
zehfernandesgabrielmfern
zehfernandes
and
gabrielmfern
authored
feat(preview-server): ui improvements (#2656)
Co-authored-by: gabriel miranda <[email protected]>
1 parent c612cd7 commit ef8702b

File tree

7 files changed

+105
-16
lines changed

7 files changed

+105
-16
lines changed

‎.changeset/proud-dingos-refuse.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/preview-server": patch
3+
---
4+
5+
ui improvements

‎packages/preview-server/src/app/preview/[...slug]/preview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
9898
<Topbar emailTitle={emailTitle}>
9999
{activeView === 'preview' ? (
100100
<>
101+
<EmulatedDarkModeToggle
102+
enabled={isDarkModeEnabled}
103+
onChange={(enabled) => handleDarkModeChange(enabled)}
104+
/>
101105
<ViewSizeControls
102106
setViewHeight={(height) => {
103107
setHeight(height);
@@ -116,10 +120,6 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
116120
minWidth={minWidth}
117121
minHeight={minHeight}
118122
/>
119-
<EmulatedDarkModeToggle
120-
enabled={isDarkModeEnabled}
121-
onChange={(enabled) => handleDarkModeChange(enabled)}
122-
/>
123123
</>
124124
) : null}
125125
<ActiveViewToggleGroup

‎packages/preview-server/src/components/icons/icon-moon.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import { IconBase } from './icon-base';
44
export const IconMoon = ({ ...props }: IconProps) => (
55
<IconBase {...props}>
66
<path
7-
fill="currentColor"
8-
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"
7+
stroke="currentColor"
8+
strokeWidth="2"
9+
strokeLinecap="round"
10+
strokeLinejoin="round"
11+
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
912
/>
1013
</IconBase>
1114
);

‎packages/preview-server/src/components/icons/icon-sun.tsx‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,70 @@ import { IconBase } from './icon-base';
33

44
export const IconSun = ({ ...props }: IconProps) => (
55
<IconBase {...props}>
6+
<circle
7+
cx="12"
8+
cy="12"
9+
r="4"
10+
stroke="currentColor"
11+
strokeWidth="2"
12+
strokeLinecap="round"
13+
strokeLinejoin="round"
14+
/>
15+
<path
16+
stroke="currentColor"
17+
strokeWidth="2"
18+
strokeLinecap="round"
19+
strokeLinejoin="round"
20+
d="M12 2v2"
21+
/>
22+
<path
23+
stroke="currentColor"
24+
strokeWidth="2"
25+
strokeLinecap="round"
26+
strokeLinejoin="round"
27+
d="M12 20v2"
28+
/>
29+
<path
30+
stroke="currentColor"
31+
strokeWidth="2"
32+
strokeLinecap="round"
33+
strokeLinejoin="round"
34+
d="m4.93 4.93 1.41 1.41"
35+
/>
36+
<path
37+
stroke="currentColor"
38+
strokeWidth="2"
39+
strokeLinecap="round"
40+
strokeLinejoin="round"
41+
d="m17.66 17.66 1.41 1.41"
42+
/>
43+
<path
44+
stroke="currentColor"
45+
strokeWidth="2"
46+
strokeLinecap="round"
47+
strokeLinejoin="round"
48+
d="M2 12h2"
49+
/>
50+
<path
51+
stroke="currentColor"
52+
strokeWidth="2"
53+
strokeLinecap="round"
54+
strokeLinejoin="round"
55+
d="M20 12h2"
56+
/>
57+
<path
58+
stroke="currentColor"
59+
strokeWidth="2"
60+
strokeLinecap="round"
61+
strokeLinejoin="round"
62+
d="m6.34 17.66-1.41 1.41"
63+
/>
664
<path
7-
fill="currentColor"
8-
d="m3.55 19.09l1.41 1.41l1.8-1.79l-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71l1.8 1.79l1.41-1.41l-1.79-1.8M20.45 5l-1.41-1.4l-1.8 1.79l1.42 1.42M13 1h-2v3h2M6.76 5.39L4.96 3.6L3.55 5l1.79 1.81zM1 13h3v-2H1m12 9h-2v3h2"
65+
stroke="currentColor"
66+
strokeWidth="2"
67+
strokeLinecap="round"
68+
strokeLinejoin="round"
69+
d="m19.07 4.93-1.41 1.41"
970
/>
1071
</IconBase>
1172
);

‎packages/preview-server/src/components/topbar/active-view-toggle-group.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const ActiveViewToggleGroup = ({
1818
return (
1919
<ToggleGroup.Root
2020
aria-label="View mode"
21-
className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
21+
className="lg:absolute lg:left-1/2 lg:-translate-x-1/2 inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
2222
onValueChange={(value) => {
2323
if (value) setActiveView(value);
2424
}}
@@ -32,8 +32,8 @@ export const ActiveViewToggleGroup = ({
3232
className={cn(
3333
'w-9 flex items-center py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
3434
{
35-
'text-slate-11': activeView !== 'desktop',
36-
'text-slate-12': activeView === 'desktop',
35+
'text-slate-11': activeView !== 'preview',
36+
'text-slate-12': activeView === 'preview',
3737
},
3838
)}
3939
>

‎packages/preview-server/src/components/topbar/emulated-dark-mode-toggle.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as Toggle from '@radix-ui/react-toggle';
22
import { cn } from '../../utils';
33
import { IconMoon } from '../icons/icon-moon';
4+
import { IconSun } from '../icons/icon-sun';
45
import { Tooltip } from '../tooltip';
56

67
interface EmulatedDarkModeToggleProps {
@@ -19,12 +20,33 @@ export const EmulatedDarkModeToggle = ({
1920
value="dark"
2021
className={cn(
2122
'relative w-9 h-9 flex items-center justify-center border border-slate-6 text-sm rounded-lg transition duration-200 ease-in-out',
22-
'text-slate-11 hover:text-slate-12 aria-pressed:text-slate-12 aria-pressed:bg-slate-4',
23+
'text-slate-11 hover:text-slate-12 aria-pressed:bg-slate-4',
2324
)}
2425
pressed={enabled}
2526
onPressedChange={() => onChange(!enabled)}
2627
>
27-
<IconMoon />
28+
<div className="relative w-5 h-5">
29+
<div
30+
className={cn(
31+
'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
32+
enabled
33+
? 'opacity-0 scale-50 rotate-90'
34+
: 'opacity-100 scale-100 rotate-0',
35+
)}
36+
>
37+
<IconMoon />
38+
</div>
39+
<div
40+
className={cn(
41+
'absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out',
42+
enabled
43+
? 'opacity-100 scale-100 rotate-0'
44+
: 'opacity-0 scale-50 -rotate-90',
45+
)}
46+
>
47+
<IconSun />
48+
</div>
49+
</div>
2850
</Toggle.Root>
2951
</Tooltip.Trigger>
3052
<Tooltip.Content>

‎packages/preview-server/src/components/topbar/view-size-controls.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,7 @@ export const ViewSizeControls = ({
8888
className={cn(
8989
'relative flex items-center justify-center w-9 transition-colors hover:text-slate-12',
9090
{
91-
'bg-slate-4':
92-
viewWidth === preset.dimensions.width &&
93-
viewHeight === preset.dimensions.height,
91+
'bg-slate-4': viewWidth === preset.dimensions.width,
9492
},
9593
)}
9694
type="button"

0 commit comments

Comments
 (0)