feat: styles

src/renderer/src/assets/base.css

@@ -2,6 +2,7 @@ body, #root {
   @apply h-screen;
   @apply text-zinc-700;
   @apply cursor-default;
+  @apply select-none;
 
   font-family: 'SNPro', sans-serif;
 }

src/renderer/src/components/feed-list.tsx

@@ -1,10 +1,6 @@
 import { useFeeds } from '@renderer/lib/feeds'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from '@renderer/components/ui/collapsible'
-import { m, AnimatePresence, useSpring } from 'framer-motion'
+import { Collapsible, CollapsibleTrigger } from '@renderer/components/ui/collapsible'
+import { m, AnimatePresence } from 'framer-motion'
 import { useState } from 'react'
 
 export function FeedList({ type }: { type: string }) {
@@ -20,7 +16,7 @@ export function FeedList({ type }: { type: string }) {
   console.log('categories', categories)
 
   return (
-    <div className="w-80 px-4">
+    <div className="w-64 px-5">
       <div className="font-bold my-2">{type}</div>
       {Object.keys(categories).map((category) => (
         <FeedCategory key={category} name={category} list={categories[category]} />
@@ -37,9 +33,9 @@ function FeedCategory({ name, list }: { name: string; list: any[] }) {
       open={open}
       onOpenChange={(o) => setOpen(o)}
     >
-      <CollapsibleTrigger className="flex items-center text-[15px] font-medium leading-loose py-[1px] w-full [&>i]:data-[state=open]:rotate-90">
+      <CollapsibleTrigger className="flex items-center text-sm font-medium leading-loose py-[2px] w-full [&>i]:data-[state=open]:rotate-90">
         <i className="i-mingcute-right-fill mr-2 transition-transform" />
-        <span>{name}</span>
+        <span className='truncate'>{name}</span>
       </CollapsibleTrigger>
       <AnimatePresence>
         {open && (
@@ -73,7 +69,7 @@ function FeedCategory({ name, list }: { name: string; list: any[] }) {
                   src={`https://icons.duckduckgo.com/ip3/${new URL(feed.site_url).host}.ico`}
                   className="w-4 h-4 mr-2 rounded-sm"
                 />
-                <div>{feed.title}</div>
+                <div className='truncate'>{feed.title}</div>
               </div>
             ))}
           </m.div>

src/renderer/src/components/type-tab.tsx

@@ -17,7 +17,7 @@ const items = [
   {
     name: 'Articles',
     icon: <i className="i-mingcute-news-fill" />,
-    className: 'text-indigo-600'
+    className: 'text-amber-700'
   },
   {
     name: 'Social Media',
@@ -56,7 +56,7 @@ export function TypeTab() {
   })
 
   useEffect(() => {
-    spring.set(-active * 320)
+    spring.set(-active * 256)
   }, [active])
 
   useWheel(({ event, last, memo: wait = false, direction: [dx], delta: [dex] }) => {
@@ -81,11 +81,11 @@ export function TypeTab() {
 
   return (
     <TooltipProvider delayDuration={300}>
-      <div className="flex text-zinc-500 w-full justify-around text-xl my-2">
+      <div className="flex text-zinc-500 w-full justify-between text-xl my-2 px-5">
         {items.map((item, index) => (
           <div
             key={item.name}
-            className={cn(active === index && item.className)}
+            className={cn(active === index && "text-zinc-800")}
             onClick={() => {
               setActive(index)
             }}

src/renderer/src/components/ui/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md bg-stone-300 px-2 py-1 text-sm text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}

src/renderer/src/pages/index.tsx

@@ -3,7 +3,7 @@ import { TypeTab } from '@renderer/components/type-tab'
 export function Component() {
   return (
     <div className="flex h-full">
-      <div className="w-80 pt-10 border-r shrink-0 flex flex-col bg-[#E1E1E1]">
+      <div className="w-64 pt-10 border-r shrink-0 flex flex-col bg-[#E1E1E1]">
         <TypeTab />
       </div>
       <div className="w-80 pt-10 px-5 border-r shrink-0">Two</div>