whey.party
+7
-4
src/routes/notifications.tsx
+7
-4
src/routes/notifications.tsx
···
88
88
//console.log(wow);
89
89
return wow;
90
90
});
91
-
}
92
-
// eslint-disable-next-line react-hooks/exhaustive-deps
91
+
};
92
+
// eslint-disable-next-line react-hooks/exhaustive-deps
93
93
}, []);
94
94
95
95
return (
···
103
103
>
104
104
<TabsPrimitive.Trigger
105
105
value="mentions"
106
+
className="m3tab"
106
107
// styling is in app.css
107
108
>
108
109
Mentions
109
110
</TabsPrimitive.Trigger>
110
-
<TabsPrimitive.Trigger value="follows">Follows</TabsPrimitive.Trigger>
111
-
<TabsPrimitive.Trigger value="postInteractions">
111
+
<TabsPrimitive.Trigger value="follows" className="m3tab">
112
+
Follows
113
+
</TabsPrimitive.Trigger>
114
+
<TabsPrimitive.Trigger value="postInteractions" className="m3tab">
112
115
Post Interactions
113
116
</TabsPrimitive.Trigger>
114
117
</TabsPrimitive.List>
+10
-2
src/styles/app.css
+10
-2
src/styles/app.css
···
237
237
238
238
/* radix tabs */
239
239
240
-
[data-radix-collection-item] {
240
+
.m3tab[data-radix-collection-item] {
241
241
flex: 1;
242
242
display: flex;
243
243
padding: 12px 8px;
···
245
245
justify-content: center;
246
246
color: var(--color-gray-500);
247
247
font-weight: 500;
248
+
&:hover {
249
+
background-color: var(--color-gray-100);
250
+
cursor: pointer;
251
+
}
248
252
&[aria-selected="true"] {
249
253
color: var(--color-gray-950);
250
254
&::before{
···
260
264
}
261
265
262
266
@media (prefers-color-scheme: dark) {
263
-
[data-radix-collection-item] {
267
+
.m3tab[data-radix-collection-item] {
264
268
color: var(--color-gray-400);
269
+
&:hover {
270
+
background-color: var(--color-gray-900);
271
+
cursor: pointer;
272
+
}
265
273
&[aria-selected="true"] {
266
274
color: var(--color-gray-50);
267
275
&::before{