cosmik.network
A social knowledge tool for researchers built on ATProto
feat: new gradient overlay for edit/update actions
+2
-2
src/webapp/features/collections/components/editCollectionDrawer/EditCollectionDrawer.tsx
+2
-2
src/webapp/features/collections/components/editCollectionDrawer/EditCollectionDrawer.tsx
···
10
10
import { useForm } from '@mantine/form';
11
11
import { notifications } from '@mantine/notifications';
12
12
import useUpdateCollection from '../../lib/mutations/useUpdateCollection';
13
-
import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
13
+
import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
14
14
15
15
interface Props {
16
16
isOpen: boolean;
···
62
62
withCloseButton={false}
63
63
position="bottom"
64
64
size={'30rem'}
65
-
overlayProps={DEFAULT_OVERLAY_PROPS}
65
+
overlayProps={UPDATE_OVERLAY_PROPS}
66
66
>
67
67
<Drawer.Header>
68
68
<Drawer.Title fz="xl" fw={600} mx="auto">
+2
-3
src/webapp/features/notes/components/editNoteDrawer/EditNoteDrawer.tsx
+2
-3
src/webapp/features/notes/components/editNoteDrawer/EditNoteDrawer.tsx
···
9
9
import { useForm } from '@mantine/form';
10
10
import { notifications } from '@mantine/notifications';
11
11
import useUpdateNote from '../../lib/mutations/useUpdateNote';
12
-
import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
13
-
import { stringify } from 'postcss';
12
+
import { UPDATE_OVERLAY_PROPS } from '@/styles/overlays';
14
13
15
14
interface Props {
16
15
isOpen: boolean;
···
60
59
withCloseButton={false}
61
60
position="bottom"
62
61
size={'xs'}
63
-
overlayProps={DEFAULT_OVERLAY_PROPS}
62
+
overlayProps={UPDATE_OVERLAY_PROPS}
64
63
>
65
64
<Drawer.Header>
66
65
<Drawer.Title fz="xl" fw={600} mx="auto">
+8
src/webapp/styles/overlays.ts
+8
src/webapp/styles/overlays.ts
···
13
13
gradient:
14
14
'linear-gradient(0deg, rgba(242, 5, 5, 0.5), rgba(255, 255, 255, 0.5))',
15
15
};
16
+
17
+
export const UPDATE_OVERLAY_PROPS = {
18
+
inset: 0,
19
+
zIndex: 102,
20
+
blur: 3,
21
+
gradient:
22
+
'linear-gradient(0deg, rgba(255, 142, 0, 0.5), rgba(255, 255, 255, 0.5))',
23
+
};