an independent Bluesky client using Constellation, PDS Queries, and other services reddwarf.app
frontend spa bluesky reddwarf microcosm client app
92
fork

Configure Feed

Select the types of activity you want to include in your feed.

m3tab styling fix

rimar1337 27e21537 d14e2ae8

+17 -6
+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
··· 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{