Skip to content

Commit b664fd9

Browse files
ishita1805ishita1805
authored
Merge pull request #33 from dyte-in/staging
feat: dark mode
2 parents 1eb501a + 2500198 commit b664fd9

File tree

10 files changed

+70
-24
lines changed

10 files changed

+70
-24
lines changed

‎src/components/badge/Badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const Badge = () => {
8080
return (
8181
<div className="badge" style={{ borderColor: user.color }}>
8282
{
83-
!config.zenMode && <div className="label">
83+
!config.zenMode && <div className={config.darkMode ? "label-dark": "label"}>
8484
You are following {user?.metadata?.name}
8585
<Icon onClick={unfollow} icon='dismiss' className="dismiss" />
8686
</div>

‎src/components/badge/badge.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,15 @@
55
z-index: 2345;
66
border: solid 4px;
77
}
8-
98
.badge .label {
109
@apply m-2 p-2 bg-white shadow-lg rounded-md text-xs text-gray-500 border-solid border-[1px] border-gray-200 flex flex-row items-center;
10+
.dismiss {
11+
@apply h-5 w-5 text-black cursor-pointer -mr-1 ml-1;
12+
}
13+
}
14+
.badge .label-dark {
15+
@apply m-2 p-2 bg-[#353D43] shadow-lg rounded-md text-xs text-gray-200 border-solid border-[1px] border-gray-600 flex flex-row items-center;
16+
.dismiss {
17+
@apply h-5 w-5 cursor-pointer -mr-1 ml-1 text-white;
18+
}
1119
}
12-
13-
.dismiss {
14-
@apply h-5 w-5 text-black cursor-pointer -mr-1 ml-1;
15-
}

‎src/components/cursor/CustomCursor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { MainContext } from '../../context';
55

66
const CustomCursor: CursorComponent<{ name: 'Anonymous' }> = (props: Pick<TLUser<any>, 'id' | 'color' | 'metadata'>) => {
77
const { color, metadata } = props;
8-
const { app } = useContext(MainContext);
8+
const { app, config } = useContext(MainContext);
99

1010
return (
1111
<div className="cursor-container">
@@ -18,7 +18,7 @@ const CustomCursor: CursorComponent<{ name: 'Anonymous' }> = (props: Pick<TLUser
1818
}}
1919
/>
2020
<div
21-
className="cursor-label"
21+
className={config.darkMode ? "cursor-label-dark":"cursor-label"}
2222
style={{
2323
maxWidth: `${150 / Math.min(app.zoom, 1) }px`,
2424
height: `${24 / Math.min(app.zoom, 1) }px`,

‎src/components/cursor/customCursor.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,8 @@
55
@apply h-3 w-3 rounded-full mr-1 shadow-lg;
66
}
77
.cursor-label {
8-
@apply text-gray-500 bg-white whitespace-nowrap text-ellipsis overflow-x-hidden shadow-sm flex items-center justify-center;
8+
@apply text-gray-500 bg-white whitespace-nowrap text-ellipsis overflow-hidden shadow-sm flex items-center justify-center;
9+
}
10+
.cursor-label-dark {
11+
@apply text-gray-200 bg-[#353D43] whitespace-nowrap text-ellipsis overflow-hidden shadow-sm flex items-center justify-center;
912
}

‎src/components/presence/Presence.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,12 @@ const Presence = () => {
102102
listB.push(
103103
<div
104104
key={index}
105-
className="user-tile"
105+
className={config.darkMode ? "user-tile-dark" : "user-tile"}
106106
onClick={() => follow(user)}
107107
>
108108
<div
109109
key={index}
110-
className="user-icon"
110+
className={config.darkMode ? "user-icon-dark":"user-icon"}
111111
style={{ background: user?.color ?? 'blue' }}
112112
>
113113
{genName(user?.metadata?.name ?? 'Participant')}
@@ -119,12 +119,12 @@ const Presence = () => {
119119
listA.push(
120120
<div
121121
key={index}
122-
className="user-icon"
122+
className={config.darkMode ?"user-icon-dark" : "user-icon"}
123123
onClick={() => follow(user)}
124124
style={{ background: user?.color ?? 'blue' }}
125125
>
126126
{genName(user?.metadata?.name ?? 'Participant')}
127-
<div className="tooltip">
127+
<div className={config.darkMode ?"tooltip-dark": "tooltip"}>
128128
{user?.metadata?.name ?? 'Participant'}
129129
</div>
130130
</div>
@@ -140,11 +140,11 @@ const Presence = () => {
140140
<div className='more-users-container' ref={hostEl}>
141141
{
142142
!showMore
143-
? <Icon onClick={() => setShowMore(true)} className="more-users" icon="more" />
144-
: <Icon onClick={() => setShowMore(false)} className="more-users" icon="less" />
143+
? <Icon onClick={() => setShowMore(true)} className={config.darkMode ?"more-users-dark": "more-users"} icon="more" />
144+
: <Icon onClick={() => setShowMore(false)} className={config.darkMode ?"more-users-dark": "more-users"} icon="less" />
145145
}
146146
{
147-
showMore && <div className="user-dropdown">
147+
showMore && <div className={config.darkMode ?"user-dropdown-dark": "user-dropdown"}>
148148
{listB}
149149
</div>
150150
}

‎src/components/presence/presence.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,28 @@
44
.user-icon {
55
@apply !h-6 !w-6 rounded-full shadow-lg text-xs text-white flex items-center justify-center border-solid border-2 border-white box-content cursor-pointer select-none relative;
66
}
7+
.user-icon-dark {
8+
@apply !h-6 !w-6 rounded-full shadow-lg text-xs text-black flex items-center justify-center border-solid border-2 border-gray-600 box-content cursor-pointer select-none relative mr-1;
9+
}
710
.tooltip {
811
@apply absolute flex bg-gray-200 min-w-fit w-14 py-0.5 px-1 rounded-sm items-center justify-center line-clamp-1 text-gray-700 text-xs top-8 left-0 hidden;
912
}
13+
14+
.tooltip-dark {
15+
@apply absolute flex bg-gray-600 min-w-fit w-14 py-0.5 px-1 rounded-sm items-center justify-center line-clamp-1 text-white text-xs top-8 left-0 hidden;
16+
}
1017
.user-icon:hover .tooltip {
1118
@apply flex;
1219
}
20+
.user-icon-dark:hover .tooltip-dark {
21+
@apply flex;
22+
}
1323
.more-users {
1424
@apply h-6 w-6 text-black cursor-pointer;
1525
}
26+
.more-users-dark {
27+
@apply h-6 w-6 text-white cursor-pointer;
28+
}
1629

1730
.more-users-container {
1831
@apply flex flex-col items-start justify-start relative;
@@ -21,9 +34,15 @@
2134
.user-dropdown {
2235
@apply max-h-60 overflow-y-auto bg-white absolute top-6 rounded-md shadow-[0_8px_30px_rgb(0,0,0,0.12)] border-solid border-[1px] border-gray-200 w-40 overflow-x-hidden flex flex-col justify-center;
2336
}
37+
.user-dropdown-dark {
38+
@apply max-h-60 overflow-y-auto bg-[#353D43] absolute top-6 rounded-md shadow-[0_8px_30px_rgb(0,0,0,0.12)] border-solid border-[1px] border-gray-600 w-40 overflow-x-hidden flex flex-col justify-center;
39+
}
2440
.user-tile {
2541
@apply text-xs p-1 cursor-pointer border-solid border-0 border-b-[1px] border-gray-200 flex flex-row items-center justify-start w-full;
26-
42+
}
43+
44+
.user-tile-dark {
45+
@apply text-xs p-1 cursor-pointer border-solid border-0 border-b-[1px] border-gray-600 flex flex-row items-center justify-start w-full text-white;
2746
}
2847

2948
.user-tile .user-icon {

‎src/components/settings/Settings.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { fetchUrl, getFormData } from '../../utils/helpers';
99
const SaveButton = () => {
1010
const [loading, setLoading] = useState<boolean>(false);
1111
const [uploaded, setUploaded] = useState<boolean>(false);
12-
const { app, plugin, meetingId, setError, autoScale, setAutoScale } = useContext(MainContext);
12+
const { app, plugin, meetingId, setError, autoScale, setAutoScale, config } = useContext(MainContext);
1313

1414
const handleExportError = () => {
1515
plugin?.room?.emitEvent(
@@ -84,15 +84,17 @@ const SaveButton = () => {
8484
setAutoScale((a: boolean) => !a);
8585
}
8686

87+
console.log(config);
88+
8789
return (
88-
<div className='settings-container'>
90+
<div className={config.darkMode ? 'settings-container-dark' : 'settings-container'}>
8991
<Icon
9092
onClick={toggleAutoScale}
91-
className={`settings-icon ${autoScale ? 'active' : ''}`}
93+
className={`${config.darkMode ? 'settings-icon-dark' : 'settings-icon'} ${autoScale ? 'active' : ''}`}
9294
icon='scale' />
9395
<Icon
9496
onClick={() => handleExport()}
95-
className={`settings-icon ${getExportColor()}`}
97+
className={`${config.darkMode ? 'settings-icon-dark' : 'settings-icon'} ${getExportColor()}`}
9698
icon={getExportIcon()} />
9799
</div>
98100
)

‎src/components/settings/settings.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
.settings-container {
22
@apply flex flex-row items-center justify-center bg-white rounded-br-md text-xs overflow-hidden border-solid border-[1px] border-gray-200 p-1 shadow-[0_8px_30px_rgb(0,0,0,0.16)] box-border;
33
}
4+
5+
.settings-container-dark {
6+
@apply flex flex-row items-center justify-center bg-[#353D43] rounded-br-md text-xs overflow-hidden border-solid border-[1px] border-gray-600 p-1 shadow-[0_8px_30px_rgb(0,0,0,0.16)] box-border;
7+
}
48
.settings-icon {
59
@apply text-black cursor-pointer !h-7 !w-7 ;
610
}
7-
11+
.settings-icon-dark {
12+
@apply text-white cursor-pointer !h-7 !w-7 ;
13+
}
814
.loading {
915
@apply text-gray-400;
1016
}

‎src/context/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface Config {
1010
role?: 'editor' | 'viewer';
1111
autoScale?: boolean;
1212
zenMode?: boolean;
13+
darkMode?: boolean;
1314
}
1415

1516
const MainProvider = ({ children }: { children: any }) => {
@@ -22,7 +23,7 @@ const MainProvider = ({ children }: { children: any }) => {
2223
const [following, setFollowing] = useState<string[]>([]);
2324
const [followers, setFollowers] = useState<Set<string>>(new Set());
2425
const [users, setUsers] = useState<Record<string, TDUser>>({});
25-
const [config, setConfig] = useState<Config>({ role: 'editor', autoScale: false, zenMode: false });
26+
const [config, setConfig] = useState<Config>({ role: 'editor', autoScale: false, zenMode: false, darkMode: false });
2627

2728
useEffect(() => {
2829
if (!app || !config) return;

‎src/hooks/PlayerHook.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import axios from 'axios';
88
export function UsePlayer(meetingId: string) {
99
const [loading, setLoading] = useState<boolean>(true);
1010
const [activeTool, setActiveTool] = useState<string>('select');
11-
const { app, plugin, setApp, self, setUsers, setError } = useContext(MainContext);
11+
const { app, plugin, config, setApp, self, setUsers, setError } = useContext(MainContext);
1212

1313
// load app
1414
const onMount = (tlApp: TldrawApp) => {
@@ -96,6 +96,17 @@ export function UsePlayer(meetingId: string) {
9696
})
9797
}, [app]);
9898

99+
// set dark mode
100+
useEffect(() => {
101+
if (!app) return;
102+
if (config.darkMode) {
103+
104+
if (!(app as TldrawApp).settings.isDarkMode) app.toggleDarkMode();
105+
} else {
106+
if ((app as TldrawApp).settings.isDarkMode) app.toggleDarkMode();
107+
}
108+
}, [app, config])
109+
99110
// update store users when something is drawn
100111
const onChangePage = debounce(useCallback((
101112
app: TldrawApp,

0 commit comments

Comments
 (0)