cosmik.network
A social knowledge tool for researchers built on ATProto
feat: dark mode assets
+2
-2
src/webapp/app/(auth)/login/page.tsx
+2
-2
src/webapp/app/(auth)/login/page.tsx
+11
-2
src/webapp/app/(dashboard)/error.tsx
+11
-2
src/webapp/app/(dashboard)/error.tsx
···
13
} from '@mantine/core';
14
import SembleLogo from '@/assets/semble-logo.svg';
15
import BG from '@/assets/semble-bg.webp';
16
import Link from 'next/link';
17
import { BiRightArrowAlt } from 'react-icons/bi';
18
19
export default function Error() {
20
return (
21
<BackgroundImage
22
-
src={BG.src}
23
h={'100svh'}
24
pos={'fixed'}
25
top={0}
···
44
<Text fz={'h1'} fw={600} ta={'center'}>
45
A social knowledge network for researchers
46
</Text>
47
-
<Text fz={'h3'} fw={600} c={'#1F6144'} ta={'center'}>
48
Follow your peers’ research trails. Surface and discover new
49
connections. Built on ATProto so you own your data.
50
</Text>
···
13
} from '@mantine/core';
14
import SembleLogo from '@/assets/semble-logo.svg';
15
import BG from '@/assets/semble-bg.webp';
16
+
import DarkBG from '@/assets/semble-bg-dark.png';
17
import Link from 'next/link';
18
import { BiRightArrowAlt } from 'react-icons/bi';
19
+
import { useColorScheme } from '@mantine/hooks';
20
21
export default function Error() {
22
+
const colorScheme = useColorScheme();
23
+
24
return (
25
<BackgroundImage
26
+
src={colorScheme === 'dark' ? DarkBG.src : BG.src}
27
h={'100svh'}
28
pos={'fixed'}
29
top={0}
···
48
<Text fz={'h1'} fw={600} ta={'center'}>
49
A social knowledge network for researchers
50
</Text>
51
+
<Text
52
+
fz={'h3'}
53
+
fw={600}
54
+
c={colorScheme === 'dark' ? '#1e4dd9' : '#1F6144'}
55
+
ta={'center'}
56
+
>
57
Follow your peers’ research trails. Surface and discover new
58
connections. Built on ATProto so you own your data.
59
</Text>
+23
-3
src/webapp/app/page.tsx
+23
-3
src/webapp/app/page.tsx
···
1
import {
2
ActionIcon,
3
SimpleGrid,
···
18
import { BiRightArrowAlt } from 'react-icons/bi';
19
import { RiArrowRightUpLine } from 'react-icons/ri';
20
import BG from '@/assets/semble-bg.webp';
21
import CosmikLogo from '@/assets/cosmik-logo-full.svg';
22
import CurateIcon from '@/assets/icons/curate-icon.svg';
23
import CommunityIcon from '@/assets/icons/community-icon.svg';
24
import DBIcon from '@/assets/icons/db-icon.svg';
···
26
import TangledIcon from '@/assets/icons/tangled-icon.svg';
27
import SembleLogo from '@/assets/semble-logo.svg';
28
import Link from 'next/link';
29
30
export default function Home() {
31
return (
32
-
<BackgroundImage src={BG.src} h={'100svh'}>
33
<script async src="https://tally.so/widgets/embed.js" />
34
<Container size={'xl'} p={'md'} my={'auto'}>
35
<Group justify="space-between">
···
56
<Title order={1} fw={600} fz={'3rem'} ta={'center'}>
57
A social knowledge network for researchers
58
</Title>
59
-
<Title order={2} fw={600} fz={'xl'} c={'#1F6144'} ta={'center'}>
60
Follow your peers’ research trails. Surface and discover new
61
connections. Built on ATProto so you own your data.
62
</Title>
···
223
style={{ verticalAlign: 'middle' }}
224
>
225
<Image
226
-
src={CosmikLogo.src}
227
alt="Cosmik logo"
228
w={92}
229
h={28.4}
···
1
+
'use client';
2
+
3
import {
4
ActionIcon,
5
SimpleGrid,
···
20
import { BiRightArrowAlt } from 'react-icons/bi';
21
import { RiArrowRightUpLine } from 'react-icons/ri';
22
import BG from '@/assets/semble-bg.webp';
23
+
import DarkBG from '@/assets/semble-bg-dark.png';
24
import CosmikLogo from '@/assets/cosmik-logo-full.svg';
25
+
import CosmikLogoWhite from '@/assets/cosmik-logo-full-white.svg';
26
import CurateIcon from '@/assets/icons/curate-icon.svg';
27
import CommunityIcon from '@/assets/icons/community-icon.svg';
28
import DBIcon from '@/assets/icons/db-icon.svg';
···
30
import TangledIcon from '@/assets/icons/tangled-icon.svg';
31
import SembleLogo from '@/assets/semble-logo.svg';
32
import Link from 'next/link';
33
+
import { useColorScheme } from '@mantine/hooks';
34
35
export default function Home() {
36
+
const colorScheme = useColorScheme();
37
+
38
return (
39
+
<BackgroundImage
40
+
src={colorScheme === 'dark' ? DarkBG.src : BG.src}
41
+
h={'100svh'}
42
+
>
43
<script async src="https://tally.so/widgets/embed.js" />
44
<Container size={'xl'} p={'md'} my={'auto'}>
45
<Group justify="space-between">
···
66
<Title order={1} fw={600} fz={'3rem'} ta={'center'}>
67
A social knowledge network for researchers
68
</Title>
69
+
<Title
70
+
order={2}
71
+
fw={600}
72
+
fz={'xl'}
73
+
c={colorScheme === 'dark' ? '#1e4dd9' : '#1F6144'}
74
+
ta={'center'}
75
+
>
76
Follow your peers’ research trails. Surface and discover new
77
connections. Built on ATProto so you own your data.
78
</Title>
···
239
style={{ verticalAlign: 'middle' }}
240
>
241
<Image
242
+
src={
243
+
colorScheme === 'dark'
244
+
? CosmikLogoWhite.src
245
+
: CosmikLogo.src
246
+
}
247
alt="Cosmik logo"
248
w={92}
249
h={28.4}
+10
src/webapp/assets/cosmik-logo-full-white.svg
+10
src/webapp/assets/cosmik-logo-full-white.svg
···
···
1
+
<svg width="144" height="46" viewBox="0 0 144 46" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+
<mask id="mask0_327_268" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="9" width="28" height="28">
3
+
<path d="M28 9.5H0V36.5H28V9.5Z" fill="white"/>
4
+
</mask>
5
+
<g mask="url(#mask0_327_268)">
6
+
<path d="M0 23.9995C0 30.9031 5.59644 36.4995 12.5 36.4995C18.7765 36.4995 23.9726 31.8735 24.8647 25.845C24.9411 25.3288 24.332 25.0129 23.8852 25.2825C22.6049 26.055 21.1043 26.4995 19.5 26.4995C14.8056 26.4995 11 22.6939 11 17.9995C11 15.9273 11.7415 14.0283 12.9737 12.5534C13.3084 12.1526 13.0889 11.5024 12.5667 11.4997L12.5 11.4995C5.59644 11.4995 0 17.096 0 23.9995Z" fill="white"/>
7
+
<path d="M28.0716 18C28.0716 13.3056 24.266 9.5 19.5716 9.5C17.9297 9.5 16.3966 9.96552 15.0969 10.7718C14.6532 11.047 14.8357 11.694 15.3446 11.8109C20.6468 13.0293 24.6392 17.7069 25.0383 23.1268C25.0767 23.6472 25.6879 23.9255 26.0275 23.5293C27.3018 22.0429 28.0716 20.1114 28.0716 18Z" fill="white"/>
8
+
</g>
9
+
<path d="M45.3063 32.3201C43.6885 32.3201 42.2752 31.9823 41.0663 31.3068C39.8574 30.6134 38.9152 29.6445 38.2396 28.4001C37.5818 27.1557 37.2529 25.689 37.2529 24.0001C37.2529 22.3112 37.5818 20.8445 38.2396 19.6001C38.8974 18.3557 39.8307 17.3957 41.0396 16.7201C42.2485 16.0268 43.6707 15.6801 45.3063 15.6801C47.2618 15.6801 48.8885 16.169 50.1863 17.1468C51.5018 18.1068 52.364 19.4934 52.7729 21.3068H49.7596C49.4574 20.2757 48.9329 19.5201 48.1863 19.0401C47.4574 18.5423 46.4974 18.2934 45.3063 18.2934C43.724 18.2934 42.4796 18.7912 41.5729 19.7868C40.684 20.7823 40.2396 22.1868 40.2396 24.0001C40.2396 25.7957 40.684 27.2001 41.5729 28.2134C42.4796 29.209 43.724 29.7068 45.3063 29.7068C47.7774 29.7068 49.2974 28.6134 49.8663 26.4268H52.8796C52.4885 28.329 51.6352 29.7868 50.3196 30.8001C49.004 31.8134 47.3329 32.3201 45.3063 32.3201ZM62.81 32.3201C61.1567 32.3201 59.7078 31.9823 58.4633 31.3068C57.2367 30.6134 56.2856 29.6445 55.61 28.4001C54.9345 27.1557 54.5967 25.689 54.5967 24.0001C54.5967 22.3112 54.9345 20.8445 55.61 19.6001C56.2856 18.3557 57.2367 17.3957 58.4633 16.7201C59.7078 16.0268 61.1567 15.6801 62.81 15.6801C64.5167 15.6801 65.9745 16.0179 67.1834 16.6934C68.41 17.369 69.3522 18.329 70.01 19.5734C70.6856 20.8179 71.0234 22.2934 71.0234 24.0001C71.0234 25.689 70.6856 27.1645 70.01 28.4268C69.3522 29.6712 68.41 30.6312 67.1834 31.3068C65.9567 31.9823 64.4989 32.3201 62.81 32.3201ZM62.81 29.7068C64.4634 29.7068 65.7434 29.209 66.65 28.2134C67.5745 27.2001 68.0367 25.7957 68.0367 24.0001C68.0367 22.1868 67.5745 20.7823 66.65 19.7868C65.7434 18.7912 64.4634 18.2934 62.81 18.2934C61.1745 18.2934 59.8945 18.8001 58.97 19.8134C58.0456 20.809 57.5834 22.2045 57.5834 24.0001C57.5834 25.7957 58.0456 27.2001 58.97 28.2134C59.8945 29.209 61.1745 29.7068 62.81 29.7068ZM80.6542 32.3201C78.432 32.3201 76.6809 31.8579 75.4009 30.9334C74.1209 30.009 73.4186 28.7201 73.2942 27.0668H76.2542C76.3786 28.0445 76.8053 28.7645 77.5342 29.2268C78.2631 29.689 79.3386 29.9201 80.7609 29.9201C83.2497 29.9201 84.4942 29.1379 84.4942 27.5734C84.4942 26.9334 84.2986 26.4445 83.9075 26.1068C83.5342 25.7512 82.8942 25.4934 81.9875 25.3334L78.4942 24.6934C75.5253 24.1423 74.0408 22.729 74.0408 20.4534C74.0408 18.9779 74.6009 17.8134 75.7209 16.9601C76.8408 16.1068 78.3697 15.6801 80.3075 15.6801C82.3164 15.6801 83.9075 16.1157 85.0809 16.9868C86.272 17.8579 86.9475 19.0845 87.1075 20.6668H84.2009C84.0231 19.7779 83.6053 19.1201 82.9475 18.6934C82.3075 18.2668 81.4009 18.0534 80.2275 18.0534C79.1431 18.0534 78.2986 18.2401 77.6942 18.6134C77.1075 18.9868 76.8142 19.529 76.8142 20.2401C76.8142 20.7912 77.0008 21.2268 77.3742 21.5468C77.7653 21.849 78.3875 22.0801 79.2409 22.2401L82.7342 22.9068C84.2986 23.1912 85.4453 23.6979 86.1742 24.4268C86.9031 25.1557 87.2675 26.1334 87.2675 27.3601C87.2675 28.9245 86.6986 30.1423 85.5609 31.0134C84.4231 31.8845 82.7875 32.3201 80.6542 32.3201ZM91.0717 32.0001V19.0934H89.525V16.0001H92.725V18.4534H94.005C94.4672 17.5645 95.1339 16.889 96.005 16.4268C96.8939 15.9468 97.9606 15.7068 99.205 15.7068C100.468 15.7068 101.534 15.9557 102.405 16.4534C103.294 16.9512 104.005 17.7157 104.539 18.7468H104.619C105.739 16.7201 107.579 15.7068 110.139 15.7068C112.112 15.7068 113.65 16.2757 114.752 17.4134C115.854 18.5512 116.405 20.1157 116.405 22.1068V32.0001H113.419V22.5334C113.419 19.7245 112.05 18.3201 109.312 18.3201C106.592 18.3201 105.232 19.7245 105.232 22.5334V32.0001H102.245V22.5334C102.245 19.7245 100.877 18.3201 98.1384 18.3201C96.805 18.3201 95.7917 18.6845 95.0984 19.4134C94.405 20.1245 94.0584 21.1645 94.0584 22.5334V32.0001H91.0717ZM120.789 32.0001V16.0001H123.775V32.0001H120.789ZM122.282 13.8134C121.784 13.8134 121.358 13.6357 121.002 13.2801C120.647 12.9245 120.469 12.4979 120.469 12.0001C120.469 11.5023 120.647 11.0757 121.002 10.7201C121.358 10.3645 121.784 10.1868 122.282 10.1868C122.78 10.1868 123.207 10.3645 123.562 10.7201C123.918 11.0757 124.095 11.5023 124.095 12.0001C124.095 12.4979 123.918 12.9245 123.562 13.2801C123.207 13.6357 122.78 13.8134 122.282 13.8134ZM128.254 32.0001V9.6001H131.24V23.2001H131.347L139.054 16.0001H142.707L135.374 22.6134L143.32 32.0001H139.694L133.347 24.4534L131.24 26.1601V32.0001H128.254Z" fill="white"/>
10
+
</svg>
src/webapp/assets/semble-bg-dark.png
src/webapp/assets/semble-bg-dark.png
This is a binary file and will not be displayed.
src/webapp/assets/semble-bg-dark.webp
src/webapp/assets/semble-bg-dark.webp
This is a binary file and will not be displayed.
src/webapp/assets/semble-header-bg-dark.webp
src/webapp/assets/semble-header-bg-dark.webp
This is a binary file and will not be displayed.
+9
-1
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+9
-1
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
···
9
} from '@mantine/core';
10
import useMyProfile from '../../lib/queries/useMyProfile';
11
import CosmikLogo from '@/assets/cosmik-logo-full.svg';
12
import { MdBugReport } from 'react-icons/md';
13
import { useAuth } from '@/hooks/useAuth';
14
import { useRouter } from 'next/navigation';
···
96
href="https://cosmik.network/"
97
target="_blank"
98
>
99
-
<Image src={CosmikLogo.src} alt="Cosmik logo" w={'auto'} h={24} />
100
</Menu.Item>
101
</Menu.Dropdown>
102
</Menu>
···
9
} from '@mantine/core';
10
import useMyProfile from '../../lib/queries/useMyProfile';
11
import CosmikLogo from '@/assets/cosmik-logo-full.svg';
12
+
import CosmikLogoWhite from '@/assets/cosmik-logo-full-white.svg';
13
import { MdBugReport } from 'react-icons/md';
14
import { useAuth } from '@/hooks/useAuth';
15
import { useRouter } from 'next/navigation';
···
97
href="https://cosmik.network/"
98
target="_blank"
99
>
100
+
<Image
101
+
src={
102
+
colorScheme === 'dark' ? CosmikLogoWhite.src : CosmikLogo.src
103
+
}
104
+
alt="Cosmik logo"
105
+
w={'auto'}
106
+
h={24}
107
+
/>
108
</Menu.Item>
109
</Menu.Dropdown>
110
</Menu>
+14
-7
src/webapp/features/profile/components/profileTabs/TabItem.tsx
+14
-7
src/webapp/features/profile/components/profileTabs/TabItem.tsx
···
1
-
import { Anchor, Tabs } from '@mantine/core';
2
import classes from './TabItem.module.css';
3
-
import Link from 'next/link';
4
5
interface Props {
6
value: string;
···
9
}
10
11
export default function TabItem(props: Props) {
12
return (
13
-
<Anchor component={Link} href={props.href} c={'dark'} underline="never">
14
-
<Tabs.Tab value={props.value} className={classes.tab} fw={600}>
15
-
{props.children}
16
-
</Tabs.Tab>
17
-
</Anchor>
18
);
19
}
···
1
+
'use client';
2
+
3
+
import { Tabs } from '@mantine/core';
4
import classes from './TabItem.module.css';
5
+
import { useRouter } from 'next/navigation';
6
7
interface Props {
8
value: string;
···
11
}
12
13
export default function TabItem(props: Props) {
14
+
const router = useRouter();
15
+
16
return (
17
+
<Tabs.Tab
18
+
value={props.value}
19
+
className={classes.tab}
20
+
fw={600}
21
+
onClick={() => router.push(props.href)}
22
+
>
23
+
{props.children}
24
+
</Tabs.Tab>
25
);
26
}
+1
-1
src/webapp/features/semble/components/sembleTabs/TabItem.tsx
+1
-1
src/webapp/features/semble/components/sembleTabs/TabItem.tsx
+3
-18
src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx
+3
-18
src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx
···
1
import SembleHeader from '../../components/SembleHeader/SembleHeader';
2
-
import { Image, Container, Stack, Box } from '@mantine/core';
3
-
import BG from '@/assets/semble-header-bg.webp';
4
import { Suspense } from 'react';
5
import SembleTabs from '../../components/sembleTabs/SembleTabs';
6
import SembleHeaderSkeleton from '../../components/SembleHeader/Skeleton.SembleHeader';
7
8
interface Props {
9
url: string;
···
12
export default async function SembleContainer(props: Props) {
13
return (
14
<Container p={0} fluid>
15
-
<Box style={{ position: 'relative', width: '100%' }}>
16
-
<Image src={BG.src} alt="bg" fit="cover" w="100%" h={80} />
17
-
18
-
{/* White gradient overlay */}
19
-
<Box
20
-
style={{
21
-
position: 'absolute',
22
-
bottom: 0,
23
-
left: 0,
24
-
width: '100%',
25
-
height: '60%', // fade height
26
-
background: 'linear-gradient(to top, white, transparent)',
27
-
pointerEvents: 'none',
28
-
}}
29
-
/>
30
-
</Box>
31
<Container px={'xs'} pb={'xs'} size={'xl'}>
32
<Stack gap={'xl'}>
33
<Suspense fallback={<SembleHeaderSkeleton />}>
···
1
import SembleHeader from '../../components/SembleHeader/SembleHeader';
2
+
import { Container, Stack } from '@mantine/core';
3
import { Suspense } from 'react';
4
import SembleTabs from '../../components/sembleTabs/SembleTabs';
5
import SembleHeaderSkeleton from '../../components/SembleHeader/Skeleton.SembleHeader';
6
+
import SembleHeaderBackground from './SembleHeaderBackground';
7
8
interface Props {
9
url: string;
···
12
export default async function SembleContainer(props: Props) {
13
return (
14
<Container p={0} fluid>
15
+
<SembleHeaderBackground />
16
<Container px={'xs'} pb={'xs'} size={'xl'}>
17
<Stack gap={'xl'}>
18
<Suspense fallback={<SembleHeaderSkeleton />}>
+36
src/webapp/features/semble/containers/sembleContainer/SembleHeaderBackground.tsx
+36
src/webapp/features/semble/containers/sembleContainer/SembleHeaderBackground.tsx
···
···
1
+
'use client';
2
+
3
+
import { useColorScheme } from '@mantine/hooks';
4
+
import BG from '@/assets/semble-header-bg.webp';
5
+
import DarkBG from '@/assets/semble-header-bg-dark.webp';
6
+
import { Box, Image } from '@mantine/core';
7
+
8
+
export default function SembleHeaderBackground() {
9
+
const colorScheme = useColorScheme();
10
+
11
+
return (
12
+
<Box style={{ position: 'relative', width: '100%' }}>
13
+
<Image
14
+
src={colorScheme === 'dark' ? DarkBG.src : BG.src}
15
+
alt="bg"
16
+
fit="cover"
17
+
w="100%"
18
+
h={80}
19
+
/>
20
+
21
+
{/* White gradient overlay */}
22
+
<Box
23
+
style={{
24
+
position: 'absolute',
25
+
bottom: 0,
26
+
left: 0,
27
+
width: '100%',
28
+
height: '60%', // fade height
29
+
background:
30
+
'linear-gradient(to top, var(--mantine-color-body), transparent)',
31
+
pointerEvents: 'none',
32
+
}}
33
+
/>
34
+
</Box>
35
+
);
36
+
}
+3
-18
src/webapp/features/semble/containers/sembleContainer/Skeleton.SembleContainer.tsx
+3
-18
src/webapp/features/semble/containers/sembleContainer/Skeleton.SembleContainer.tsx
···
1
-
import { Image, Container, Stack, Box } from '@mantine/core';
2
-
import BG from '@/assets/semble-header-bg.webp';
3
import SembleHeaderSkeleton from '../../components/SembleHeader/Skeleton.SembleHeader';
4
5
export default function SembleContainerSkeleton() {
6
return (
7
<Container p={0} fluid>
8
-
<Box style={{ position: 'relative', width: '100%' }}>
9
-
<Image src={BG.src} alt="bg" fit="cover" w="100%" h={80} />
10
-
11
-
{/* White gradient overlay */}
12
-
<Box
13
-
style={{
14
-
position: 'absolute',
15
-
bottom: 0,
16
-
left: 0,
17
-
width: '100%',
18
-
height: '60%', // fade height
19
-
background: 'linear-gradient(to top, white, transparent)',
20
-
pointerEvents: 'none',
21
-
}}
22
-
/>
23
-
</Box>
24
<Container px={'xs'} pb={'xs'} size={'xl'}>
25
<Stack gap={'xl'}>
26
<SembleHeaderSkeleton />
···
1
+
import { Container, Stack } from '@mantine/core';
2
import SembleHeaderSkeleton from '../../components/SembleHeader/Skeleton.SembleHeader';
3
+
import SembleHeaderBackground from './SembleHeaderBackground';
4
5
export default function SembleContainerSkeleton() {
6
return (
7
<Container p={0} fluid>
8
+
<SembleHeaderBackground />
9
<Container px={'xs'} pb={'xs'} size={'xl'}>
10
<Stack gap={'xl'}>
11
<SembleHeaderSkeleton />