Skip to content

Commit ac16e52

Browse files
nevo-davidnevo-david
committed
feat: remove mentine modals with custom modals, fix reddit
1 parent 9ab19f5 commit ac16e52

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+921
-758
lines changed

‎apps/frontend/src/app/colors.scss‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
--new-col-color: #2c2b2b;
2323
--new-menu-dots: #696868;
2424
--new-menu-hover: #fff;
25-
--menu-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.50);
25+
--menu-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.5);
26+
--popup-color: rgba(65, 64, 66, 0.3);
2627
}
2728
.light {
2829
--new-bgColor: #f0f2f4;
@@ -33,8 +34,8 @@
3334
--new-boxFocused: #ebe8ff;
3435
--new-textColor: 14 14 14;
3536
--new-blockSeparator: #f2f2f4;
36-
--new-btn-simple: #ECEEF1;
37-
--new-btn-text: #0E0E0E;
37+
--new-btn-simple: #eceef1;
38+
--new-btn-text: #0e0e0e;
3839
--new-btn-primary: #612bd3;
3940
--new-ai-btn: #d82d7e;
4041
--new-box-hover: #f4f6f8;
@@ -43,15 +44,19 @@
4344
--new-table-text: #777b7f;
4445
--new-table-text-focused: #fc69ff;
4546
--new-small-strips: #191818;
46-
--new-big-strips: #F5F7F9;
47-
--new-col-color: #EFF1F3;
47+
--new-big-strips: #f5f7f9;
48+
--new-col-color: #eff1f3;
4849
--new-menu-dots: #696868;
4950
--new-menu-hover: #000;
50-
--menu-shadow: -22px 83px 24px 0 rgba(55, 52, 75, 0.00), -14px 53px 22px 0 rgba(55, 52, 75, 0.01), -8px 30px 19px 0 rgba(55, 52, 75, 0.05), -3px 13px 14px 0 rgba(55, 52, 75, 0.09), -1px 3px 8px 0 rgba(55, 52, 75, 0.10);
51+
--menu-shadow: -22px 83px 24px 0 rgba(55, 52, 75, 0),
52+
-14px 53px 22px 0 rgba(55, 52, 75, 0.01),
53+
-8px 30px 19px 0 rgba(55, 52, 75, 0.05),
54+
-3px 13px 14px 0 rgba(55, 52, 75, 0.09),
55+
-1px 3px 8px 0 rgba(55, 52, 75, 0.1);
56+
--popup-color: rgba(55, 37, 97, 0.2);
5157
}
5258
}
5359

54-
5560
:root {
5661
.dark {
5762
--color-primary: #0e0e0e;
@@ -193,4 +198,4 @@
193198
--color-custom55: #d5d7e1;
194199
--color-modalCustom: transparent;
195200
}
196-
}
201+
}

‎apps/frontend/src/app/global.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,10 @@ body * {
357357
// /*right: -5rem !important;*/
358358
//}
359359

360+
.trz {
361+
transform: translateZ(0);
362+
}
363+
360364
.uppy-FileInput-container {
361365
@apply cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] text-textColor border-[2px];
362366
@apply bg-customColor3 border-customColor21;
@@ -672,3 +676,6 @@ html[dir='rtl'] [dir='ltr'] {
672676
}
673677
}
674678
}
679+
.blur-xs {
680+
filter: blur(4px);
681+
}

‎apps/frontend/src/components/autopost/autopost.tsx‎

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { FC, Fragment, useCallback, useMemo, useState } from 'react';
22
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
33
import useSWR from 'swr';
44
import { Button } from '@gitroom/react/form/button';
5-
import { useModals } from '@mantine/modals';
5+
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
66
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
77
import { Input } from '@gitroom/react/form/input';
88
import { FormProvider, useForm } from 'react-hook-form';
@@ -28,11 +28,8 @@ export const Autopost: FC = () => {
2828
const addWebhook = useCallback(
2929
(data?: any) => () => {
3030
modal.openModal({
31-
title: '',
32-
withCloseButton: false,
33-
classNames: {
34-
modal: 'bg-transparent text-textColor',
35-
},
31+
title: data ? 'Edit Autopost' : 'Add Autopost',
32+
withCloseButton: true,
3633
children: <AddOrEditWebhook data={data} reload={mutate} />,
3734
});
3835
},
@@ -296,29 +293,7 @@ export const AddOrEditWebhook: FC<{
296293
return (
297294
<FormProvider {...form}>
298295
<form onSubmit={form.handleSubmit(callBack)}>
299-
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-customColor6 bg-sixth p-[16px] pt-0 w-[500px]">
300-
<TopTitle title={data ? 'Edit autopost' : 'Add autopost'} />
301-
<button
302-
className="outline-none absolute end-[20px] top-[15px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
303-
type="button"
304-
onClick={modal.closeAll}
305-
>
306-
<svg
307-
viewBox="0 0 15 15"
308-
fill="none"
309-
xmlns="http://www.w3.org/2000/svg"
310-
width="16"
311-
height="16"
312-
>
313-
<path
314-
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
315-
fill="currentColor"
316-
fillRule="evenodd"
317-
clipRule="evenodd"
318-
></path>
319-
</svg>
320-
</button>
321-
296+
<div className="relative flex gap-[20px] flex-col flex-1 rounded-[4px] border border-customColor6 pt-0">
322297
<div>
323298
<Input
324299
label="Title"

‎apps/frontend/src/components/billing/main.billing.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { useSWRConfig } from 'swr';
1717
import { useUser } from '@gitroom/frontend/components/layout/user.context';
1818
import { useRouter, useSearchParams } from 'next/navigation';
1919
import { useVariables } from '@gitroom/react/helpers/variable.context';
20-
import { useModals } from '@mantine/modals';
20+
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
2121
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
2222
import { Textarea } from '@gitroom/react/form/textarea';
2323
import { useFireEvents } from '@gitroom/helpers/utils/use.fire.events';

‎apps/frontend/src/components/launches/add.provider.component.tsx‎

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { useModals } from '@mantine/modals';
3+
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
44
import React, { FC, useCallback, useEffect, useMemo } from 'react';
55
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
66
import { Input } from '@gitroom/react/form/input';
@@ -24,17 +24,9 @@ export const useAddProvider = (update?: () => void) => {
2424
return useCallback(async () => {
2525
const data = await (await fetch('/integrations')).json();
2626
modal.openModal({
27-
title: '',
28-
withCloseButton: false,
29-
classNames: {
30-
modal: 'text-textColor',
31-
},
32-
size: 'auto',
33-
children: (
34-
<ModalWrapperComponent title="Add Channel">
35-
<AddProviderComponent update={update} {...data} />
36-
</ModalWrapperComponent>
37-
),
27+
title: 'Add Channel',
28+
withCloseButton: true,
29+
children: <AddProviderComponent update={update} {...data} />,
3830
});
3931
}, []);
4032
};
@@ -349,20 +341,18 @@ export const AddProviderComponent: FC<{
349341
await fetch(`/integrations/social/${identifier}`)
350342
).json();
351343
modal.openModal({
352-
title: '',
344+
title: 'Web3 provider',
353345
withCloseButton: false,
354346
classNames: {
355347
modal: 'bg-transparent text-textColor',
356348
},
357349
children: (
358-
<ModalWrapperComponent title="Web3 provider">
359-
<Web3Providers
360-
onComplete={(code, newState) => {
361-
window.location.href = `/integrations/social/${identifier}?code=${code}&state=${newState}`;
362-
}}
363-
nonce={url}
364-
/>
365-
</ModalWrapperComponent>
350+
<Web3Providers
351+
onComplete={(code, newState) => {
352+
window.location.href = `/integrations/social/${identifier}?code=${code}&state=${newState}`;
353+
}}
354+
nonce={url}
355+
/>
366356
),
367357
});
368358
return;
@@ -388,35 +378,29 @@ export const AddProviderComponent: FC<{
388378
if (isExternal) {
389379
modal.closeAll();
390380
modal.openModal({
391-
title: '',
381+
title: 'URL',
392382
withCloseButton: false,
393383
classNames: {
394384
modal: 'bg-transparent text-textColor',
395385
},
396-
children: (
397-
<ModalWrapperComponent title="URL">
398-
<UrlModal gotoUrl={gotoIntegration} />
399-
</ModalWrapperComponent>
400-
),
386+
children: <UrlModal gotoUrl={gotoIntegration} />,
401387
});
402388
return;
403389
}
404390
if (customFields) {
405391
modal.closeAll();
406392
modal.openModal({
407-
title: '',
393+
title: 'Add Provider',
408394
withCloseButton: false,
409395
classNames: {
410396
modal: 'bg-transparent text-textColor',
411397
},
412398
children: (
413-
<ModalWrapperComponent title="Add Provider">
414-
<CustomVariables
415-
identifier={identifier}
416-
gotoUrl={(url: string) => router.push(url)}
417-
variables={customFields}
418-
/>
419-
</ModalWrapperComponent>
399+
<CustomVariables
400+
identifier={identifier}
401+
gotoUrl={(url: string) => router.push(url)}
402+
variables={customFields}
403+
/>
420404
),
421405
});
422406
return;
@@ -425,9 +409,7 @@ export const AddProviderComponent: FC<{
425409
},
426410
[]
427411
);
428-
const close = useCallback(() => {
429-
modal.closeAll();
430-
}, []);
412+
431413
const showApiButton = useCallback(
432414
(identifier: string, name: string) => async () => {
433415
modal.openModal({
@@ -449,7 +431,6 @@ export const AddProviderComponent: FC<{
449431
return (
450432
<div className="w-full flex flex-col gap-[20px] rounded-[4px] relative">
451433
<div className="flex flex-col">
452-
<h2 className="pt-[16px] pb-[10px]">{t('social', 'Social')}</h2>
453434
<div className="grid grid-cols-5 gap-[10px] justify-items-center justify-center">
454435
{social.map((item) => (
455436
<div

‎apps/frontend/src/components/launches/bot.picture.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
22
import React, { FC, FormEventHandler, useCallback, useState } from 'react';
33
import { Integrations } from '@gitroom/frontend/components/launches/calendar.context';
4-
import { useModals } from '@mantine/modals';
4+
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
55
import { Input } from '@gitroom/react/form/input';
66
import { Button } from '@gitroom/react/form/button';
77
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';

‎apps/frontend/src/components/launches/calendar.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import 'dayjs/locale/ar';
3030
import 'dayjs/locale/tr';
3131
import 'dayjs/locale/vi';
3232
import localizedFormat from 'dayjs/plugin/localizedFormat';
33-
import { useModals } from '@mantine/modals';
33+
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
3434
import clsx from 'clsx';
3535
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
3636
import { ExistingDataContextProvider } from '@gitroom/frontend/components/launches/helpers/use.existing.data';
@@ -215,7 +215,8 @@ export const WeekView = () => {
215215
<div
216216
className={clsx(
217217
'text-[14px] font-[600] flex items-center justify-center gap-[6px]',
218-
day.day === newDayjs().format('L') && 'text-newTableTextFocused'
218+
day.day === newDayjs().format('L') &&
219+
'text-newTableTextFocused'
219220
)}
220221
>
221222
{day.day === newDayjs().format('L') && (
@@ -391,7 +392,9 @@ export const CalendarColumn: FC<{
391392

392393
const isBeforeNow = useMemo(() => {
393394
const originalUtc = getDate.startOf('hour');
394-
return originalUtc.startOf('hour').isBefore(newDayjs().startOf('hour').utc());
395+
return originalUtc
396+
.startOf('hour')
397+
.isBefore(newDayjs().startOf('hour').utc());
395398
}, [getDate, num]);
396399

397400
const { start, stop } = useInterval(
@@ -462,8 +465,10 @@ export const CalendarColumn: FC<{
462465
: Fragment;
463466
modal.openModal({
464467
closeOnClickOutside: false,
468+
removeLayout: true,
465469
closeOnEscape: false,
466470
withCloseButton: false,
471+
askClose: true,
467472
classNames: {
468473
modal: 'w-[100%] max-w-[1400px] text-textColor',
469474
},
@@ -515,28 +520,24 @@ export const CalendarColumn: FC<{
515520
? undefined
516521
: await new Promise((resolve) => {
517522
modal.openModal({
518-
title: '',
523+
title: t('select_set', 'Select a Set'),
519524
closeOnClickOutside: true,
525+
askClose: true,
520526
closeOnEscape: true,
521-
withCloseButton: false,
527+
withCloseButton: true,
522528
onClose: () => resolve('exit'),
523-
classNames: {
524-
modal: 'text-textColor',
525-
},
526529
children: (
527-
<ModalWrapperComponent title={t('select_set', 'Select a Set')}>
528-
<SetSelectionModal
529-
sets={sets}
530-
onSelect={(selectedSet) => {
531-
resolve(selectedSet);
532-
modal.closeAll();
533-
}}
534-
onContinueWithoutSet={() => {
535-
resolve(undefined);
536-
modal.closeAll();
537-
}}
538-
/>
539-
</ModalWrapperComponent>
530+
<SetSelectionModal
531+
sets={sets}
532+
onSelect={(selectedSet) => {
533+
resolve(selectedSet);
534+
modal.closeAll();
535+
}}
536+
onContinueWithoutSet={() => {
537+
resolve(undefined);
538+
modal.closeAll();
539+
}}
540+
/>
540541
),
541542
});
542543
});
@@ -547,6 +548,8 @@ export const CalendarColumn: FC<{
547548
closeOnClickOutside: false,
548549
closeOnEscape: false,
549550
withCloseButton: false,
551+
removeLayout: true,
552+
askClose: true,
550553
classNames: {
551554
modal: 'w-[100%] max-w-[1400px] text-textColor',
552555
},
@@ -586,17 +589,14 @@ export const CalendarColumn: FC<{
586589
const openStatistics = useCallback(
587590
(id: string) => () => {
588591
modal.openModal({
592+
title: t('statistics', 'Statistics'),
589593
closeOnClickOutside: true,
590594
closeOnEscape: true,
591595
withCloseButton: false,
592596
classNames: {
593597
modal: 'w-[100%] max-w-[1400px]',
594598
},
595-
children: (
596-
<ModalWrapperComponent title={t('statistics', 'Statistics')}>
597-
<StatisticsModal postId={id} />
598-
</ModalWrapperComponent>
599-
),
599+
children: <StatisticsModal postId={id} />,
600600
size: '80%',
601601
// title: `Adding posts for ${getDate.format('DD/MM/YYYY HH:mm')}`,
602602
});

‎apps/frontend/src/components/launches/comments/comment.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useCallback, useEffect, useState } from 'react';
22
import dayjs from 'dayjs';
33
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
4-
import { useModals } from '@mantine/modals';
4+
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
55
import { Textarea } from '@gitroom/react/form/textarea';
66
import { Button } from '@gitroom/react/form/button';
77
import clsx from 'clsx';

‎apps/frontend/src/components/launches/customer.modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
22
import React, { FC, useCallback, useEffect, useState } from 'react';
3-
import { useModals } from '@mantine/modals';
3+
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
44
import { Integration } from '@prisma/client';
55
import { Autocomplete } from '@mantine/core';
66
import useSWR from 'swr';

0 commit comments

Comments
 (0)