cosmik.network
A social knowledge tool for researchers built on ATProto
fix: feed activity theme colour
+9
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css
+9
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css
+17
-23
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
+17
-23
src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
···
1
-
'use client';
2
-
3
1
import {
4
2
Anchor,
5
3
Avatar,
6
4
Card,
7
5
Group,
8
6
Menu,
7
+
MenuDropdown,
8
+
MenuItem,
9
+
MenuTarget,
9
10
ScrollArea,
10
11
Stack,
11
12
Text,
···
13
14
import { FeedItem, Collection } from '@/api-client';
14
15
import { Fragment } from 'react';
15
16
import Link from 'next/link';
17
+
import styles from './FeedActivityStatus.module.css';
16
18
import { getRelativeTime } from '@/lib/utils/time';
17
19
import { getRecordKey } from '@/lib/utils/atproto';
18
20
import { sanitizeText } from '@/lib/utils/text';
19
-
import { useColorScheme } from '@mantine/hooks';
20
-
import { BiCollection } from 'react-icons/bi';
21
21
22
22
interface Props {
23
23
user: FeedItem['user'];
···
26
26
}
27
27
28
28
export default function FeedActivityStatus(props: Props) {
29
-
const colorScheme = useColorScheme();
30
29
const MAX_DISPLAYED = 2;
31
30
const time = getRelativeTime(props.createdAt.toString());
32
31
const relativeCreatedDate = time === 'just now' ? `Now` : `${time} ago`;
···
41
40
const remainingCount = collections.length - MAX_DISPLAYED;
42
41
43
42
return (
44
-
<Text fw={500} c={'gray'}>
45
-
<Anchor
46
-
component={Link}
47
-
href={`/profile/${props.user.handle}`}
48
-
c="dark"
49
-
fw={600}
50
-
>
43
+
<Text fw={500}>
44
+
<Text component={Link} href={`/profile/${props.user.handle}`} fw={600}>
51
45
{sanitizeText(props.user.name)}
52
-
</Anchor>{' '}
46
+
</Text>{' '}
53
47
{collections.length === 0 ? (
54
-
'added to library'
48
+
<Text span>added to library</Text>
55
49
) : (
56
50
<Fragment>
57
-
added to{' '}
51
+
<Text span>added to </Text>
58
52
{displayedCollections.map(
59
53
(collection: Collection, index: number) => (
60
54
<span key={collection.id}>
···
70
64
</span>
71
65
),
72
66
)}
73
-
{remainingCount > 0 && ' and '}
67
+
{remainingCount > 0 && <Text span>{' and '}</Text>}
74
68
{remainingCount > 0 && (
75
69
<Menu shadow="sm">
76
-
<Menu.Target>
70
+
<MenuTarget>
77
71
<Text
78
72
fw={600}
79
73
c={'blue'}
···
83
77
{remainingCount} other collection
84
78
{remainingCount > 1 ? 's' : ''}
85
79
</Text>
86
-
</Menu.Target>
87
-
<Menu.Dropdown maw={380}>
80
+
</MenuTarget>
81
+
<MenuDropdown maw={380}>
88
82
<ScrollArea.Autosize mah={150} type="auto">
89
83
{remainingCollections.map((c) => (
90
-
<Menu.Item
84
+
<MenuItem
91
85
key={c.id}
92
86
component={Link}
93
87
href={`/profile/${c.author.handle}/collections/${getRecordKey(c.uri!)}`}
···
96
90
fw={600}
97
91
>
98
92
{c.name}
99
-
</Menu.Item>
93
+
</MenuItem>
100
94
))}
101
95
</ScrollArea.Autosize>
102
-
</Menu.Dropdown>
96
+
</MenuDropdown>
103
97
</Menu>
104
98
)}
105
99
</Fragment>
···
112
106
};
113
107
114
108
return (
115
-
<Card p={0} bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'} radius={'lg'}>
109
+
<Card p={0} className={styles.root} radius={'lg'}>
116
110
<Stack gap={'xs'}>
117
111
<Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
118
112
<Avatar
+3
-11
src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
+3
-11
src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
···
1
-
'use client';
2
-
3
1
import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
4
-
import { Avatar, Card, Group, Paper, Skeleton, Stack } from '@mantine/core';
5
-
import { useColorScheme } from '@mantine/hooks';
2
+
import { Avatar, Card, Group, Skeleton, Stack } from '@mantine/core';
3
+
import styles from '../feedActivityStatus/FeedActivityStatus.module.css';
6
4
7
5
export default function FeedItemSkeleton() {
8
-
const colorScheme = useColorScheme();
9
-
10
6
return (
11
7
<Stack gap={'xs'} align="stretch">
12
8
{/* Feed activity status*/}
13
-
<Card
14
-
p={0}
15
-
bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'}
16
-
radius={'lg'}
17
-
>
9
+
<Card p={0} className={styles.root} radius={'lg'}>
18
10
<Stack gap={'xs'} align="stretch" w={'100%'}>
19
11
<Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
20
12
<Avatar />
+2
-2
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+2
-2
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
···
114
114
115
115
<Menu.Divider />
116
116
117
-
{/*<Menu.Item
117
+
<Menu.Item
118
118
color="gray"
119
119
leftSection={
120
120
colorScheme === 'auto' ? (
···
129
129
onClick={handleThemeToggle}
130
130
>
131
131
Theme: {colorScheme}
132
-
</Menu.Item>*/}
132
+
</Menu.Item>
133
133
134
134
<Menu.Item
135
135
component="a"