Skip to content

Commit 7e44537

Browse files
Stan-l-e-yStan-l-e-y
committed
modal changes
1 parent 498ec70 commit 7e44537

3 files changed

Lines changed: 51 additions & 30 deletions

File tree

‎components/home/RenderDesktopView.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,17 @@ export default function RenderDesktopView() {
5656
const settingsRef = useSetUserSettings();
5757
const userSettings = useUserSettings();
5858

59-
6059
return (
6160
<div className={`${styles.container} `}>
6261
{deafenRoom ? <></> : <RoomAudioRenderer />}
63-
<div className='col-start-1 col-end-2 row-start-1 row-end-4 bg-grey-950 flex-col justify-center '>
64-
<NavBar type='vertical' />
62+
<div className="col-start-1 col-end-2 row-start-1 row-end-4 bg-grey-950 flex-col justify-center ">
63+
<NavBar type="vertical" />
6564
</div>
66-
<div className='col-start-2 col-end-4 row-start-1 row-end-4 flex-col bg-grey-900 relative '>
65+
<div className="col-start-2 col-end-4 row-start-1 row-end-4 flex-col bg-grey-900 relative ">
6766
{sideBarView}
6867
</div>
6968

70-
<div className='col-start-4 col-end-13 row-start-1 row-end-4 flex flex-col h-screen'>
69+
<div className="col-start-4 col-end-13 row-start-1 row-end-4 flex flex-col h-screen">
7170
{mainView}
7271
</div>
7372

@@ -81,23 +80,25 @@ export default function RenderDesktopView() {
8180
<UserIcon
8281
user={userProfile}
8382
indicator={true}
84-
className='!mr-1 !h-6 !w-6'
83+
className="!mr-1 !h-6 !w-6"
8584
/>
8685
)}
8786
<span className="text-sm">{userProfile?.username}</span>
8887
</div>
8988

90-
<div className='flex flex-row w-9'>
89+
<div className="flex flex-row w-9 mr-2">
9190
{deafenRoom ? (
9291
<button
93-
className='w-7 h-7 hover:text-grey-400'
94-
onClick={() => setDeafenRoom(false)}>
92+
className="w-7 h-7 hover:text-grey-400"
93+
onClick={() => setDeafenRoom(false)}
94+
>
9595
<HeadPhonesOffIcon width={5} height={5} />
9696
</button>
9797
) : (
9898
<button
99-
className='w-7 h-7 hover:text-grey-400'
100-
onClick={() => setDeafenRoom(true)}>
99+
className="w-7 h-7 hover:text-grey-400"
100+
onClick={() => setDeafenRoom(true)}
101+
>
101102
<HeadPhonesIcon width={5} height={5} />
102103
</button>
103104
)}
@@ -106,14 +107,16 @@ export default function RenderDesktopView() {
106107
{' '}
107108
{userSettings ? (
108109
<button
109-
className='w-7 h-7 hover:text-grey-400'
110-
onClick={() => settingsRef(false)}>
110+
className="w-7 h-7 hover:text-grey-400"
111+
onClick={() => settingsRef(false)}
112+
>
111113
<MicrophoneIcon width={5} height={5} />
112114
</button>
113115
) : (
114116
<button
115-
className='w-7 h-7 hover:text-grey-400'
116-
onClick={() => settingsRef(true)}>
117+
className="w-7 h-7 hover:text-grey-400"
118+
onClick={() => settingsRef(true)}
119+
>
117120
<MicrophoneOff width={5} height={5} />
118121
</button>
119122
)}
@@ -123,25 +126,27 @@ export default function RenderDesktopView() {
123126
showIcon={false}
124127
className={'w-7 h-7 hover:text-grey-400'}
125128
source={Track.Source.Microphone}
126-
onClick={() => settingsRef(false)}>
129+
onClick={() => settingsRef(false)}
130+
>
127131
{audioTrack.isMicrophoneEnabled ? (
128132
<MicrophoneIcon width={5} height={5} />
129133
) : (
130134
<MicrophoneOff width={5} height={5} />
131135
)}
132136
</TrackToggle>
133137
)}
134-
<div></div>
138+
135139
<EditUserModal
136140
showModal={showEditUser}
137141
setShowModal={setShowEditUser}
138142
user={editUser}
139143
/>
140144
<button
141-
className='w-7 h-7 hover:text-grey-400'
145+
className="w-7 h-7 hover:text-grey-400"
142146
onClick={() => {
143147
setShowEditUser(true);
144-
}}>
148+
}}
149+
>
145150
<GearIcon width={6} height={6} />
146151
</button>
147152
</div>

‎components/home/modals/Modal.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ export default function Modal({
99
children: content,
1010
buttons,
1111
onKeyDown = undefined,
12+
closeBtn = '',
1213
}: {
1314
modalRef: RefObject<HTMLDialogElement>;
1415
showModal: boolean;
1516
title: string;
1617
children: JSX.Element;
1718
buttons: JSX.Element;
1819
onKeyDown?: KeyboardEventHandler<HTMLDialogElement> | undefined;
20+
closeBtn?: JSX.Element | '';
1921
}) {
2022
useEffect(() => {
2123
if (showModal && !modalRef.current?.open) {
@@ -30,7 +32,10 @@ export default function Modal({
3032
onKeyDown={onKeyDown}
3133
>
3234
<div className="bg-grey-900 p-4 rounded-lg z-50 ">
33-
<div className="text-2xl font-bold tracking-wider">{title}</div>
35+
<div className="text-2xl font-bold tracking-wider flex justify-between items-center">
36+
{title}
37+
{closeBtn}
38+
</div>
3439
<div className="px-2 pt-4 pb-4 flex flex-col">{content}</div>
3540
<div className=" border-t-2 mx-5 border-grey-700"></div>
3641
<div className="flex justify-end space-x-5 items-center mt-4">

‎components/home/modals/ServerSettingsModal.tsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
2424
import MutateServer from '@/components/forms/MutateServer';
2525
import { updateServer, updateServerIcon } from '@/services/server.service';
2626
import { PostgrestError } from '@supabase/supabase-js';
27+
import { XIcon } from '@/components/icons/XIcon';
2728

2829
const tabRootClass = 'flex flex-row';
2930
const tabListClass = 'flex flex-col flex-shrink border-r border-gray-600';
@@ -139,6 +140,17 @@ export default function ServerSettingsModal({
139140
Close
140141
</button>
141142
}
143+
closeBtn={
144+
<div
145+
className="font-light hover:cursor-pointer"
146+
onClick={() => {
147+
modalRef.current?.close();
148+
setShowModal(false);
149+
}}
150+
>
151+
<XIcon className="fill-white" />
152+
</div>
153+
}
142154
>
143155
<Tabs.Root className={tabRootClass} orientation="vertical">
144156
<Tabs.List className={tabListClass}>
@@ -207,8 +219,8 @@ export default function ServerSettingsModal({
207219
<Tabs.Content value="Roles" className={`${tabContentClass} `}>
208220
<span className="w-full flex flex-row">
209221
<h1 className="text-2xl p-2 flex-grow">Roles</h1>
210-
<button
211-
className=""
222+
<div
223+
className="flex justify-center items-center hover:text-gray-400 hover:cursor-pointer"
212224
onClick={async () => {
213225
const { error } = await createRole(
214226
supabase,
@@ -218,25 +230,24 @@ export default function ServerSettingsModal({
218230
0,
219231
'a9aaab'
220232
);
221-
222233
if (error) {
223234
console.error(error);
224235
toast.error('Failed to create role');
225236
return;
226237
}
227-
228238
toast.success('Created role');
229239
}}
230240
>
241+
<p className="mr-1 font-light">New Role</p>
242+
231243
<PlusIcon width={5} height={5} />
232-
</button>
244+
</div>
233245
</span>
234246

235-
<Tabs.Root
236-
className={`${tabRootClass} overflow-x-clip`}
237-
orientation="vertical"
238-
>
239-
<Tabs.List className={`${tabListClass} h-14 overflow-y-auto `}>
247+
<Tabs.Root className={`${tabRootClass} `} orientation="vertical">
248+
<Tabs.List
249+
className={`${tabListClass} h-14 overflow-y-auto overflow-x-clip`}
250+
>
240251
{roles
241252
.sort((first, second) => first.position - second.position)
242253
.map((role) => (

0 commit comments

Comments
 (0)