minor stylistic tweaking

HolodexNet · Oct 8, 2023 · 576a9c7 · 576a9c7
1 parent a95ca42
commit 576a9c7
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 22 deletions.
diff --git a/packages/react/src/Kitchensink.tsx b/packages/react/src/Kitchensink.tsx
@@ -5,7 +5,7 @@ function App() {
   const [count, setCount] = useState(0);
 
   return (
-    <>
+    <div className="p-4">
       This page is for testing components and styling.
 
       Regular spacing:
@@ -15,7 +15,7 @@ function App() {
       </div>
 
       Color and variants:
-      <div className="grid grid-cols-5 items-start justify-start gap-4">
+      <div className="flex flex-row max-w-5xl flex-wrap tems-start justify-start gap-4">
         <Button>Default button</Button>
         <Button variant="ghost">Ghost button</Button>
         <Button variant="outline">Outline button</Button>
@@ -42,7 +42,7 @@ function App() {
         <Button size="icon-lg" variant="secondary"><div className="i-heroicons:academic-cap"></div></Button>
         <Button size="icon-lg" variant="link"><div className="i-heroicons:academic-cap"></div></Button>
       </div>
-    </>
+    </div>
   );
 }
 

diff --git a/packages/react/src/components/layout/Frame.scss b/packages/react/src/components/layout/Frame.scss
@@ -1,5 +1,5 @@
 $header-height: 40px;
-$sidebar-width: 300px;
+$sidebar-width: 200px + calc(100px * calc(100vw / 1920vw));
 $footer-height: 40px;
 $responsive-breakpoint: 768px;
 

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -3,7 +3,7 @@ import { RouterProvider } from 'react-router-dom'
 import router from '@/routes/router'
 import { ReactPropTypes, useEffect } from 'react'
 import classNames from 'classnames'
-import { Sidebar } from '../sidebar/sidebar'
+import { Sidebar } from '@/components/sidebar/Sidebar.tsx'
 import { isFloatingAtom, isMobileAtom, onResizeAtom, sidebarOpenAtom, sidebarShouldBeFullscreenAtom, toggleAtom } from '@/hooks/useFrame'
 import { useAtom } from 'jotai/react'
 import { darkAtom } from '@/hooks/useTheme'
@@ -38,7 +38,7 @@ export function Frame() {
 
   return (
     <div className={mainClasses} id='layout'>
-      <aside className="">
+      <aside className="border-r border-r-base">
         <Sidebar id="sidebar" />
       </aside>
       <header className="">Header

diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
@@ -13,53 +13,57 @@ export function Sidebar({ className, id }: SidebarProps) {
 
   return (
     <div className={cn("pb-12", className)} id={id}>
-      <div className="space-y-4 py-4">
+      <div className="space-y-4 py-2">
         <div className="px-3 py-2">
-          <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
+          <h2 className="mb-2 px-4 font-semibold tracking-tight">
             Hololive
           </h2>
           <div className="space-y-1">
-            <Button className="w-full justify-start" size='lg'>
+            <Button className="w-full justify-start h-10" variant="default">
               <div className="i-heroicons:home"></div>
               Home
             </Button>
-            <Button className="w-full justify-start" size='lg'>
+            <Button className="w-full justify-start h-10" variant="ghost">
               <span className="i-heroicons:user-group"></span>
               Channels
             </Button>
           </div>
         </div>
         <div className="px-3 py-2">
-          <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight" >
+          <h2 className="mb-2 px-4 font-semibold tracking-tight" >
             Holodex
           </h2>
           <div className="space-y-1">
-            <Button className="w-full justify-start" size='lg'>
+            <Button className="w-full justify-start h-10" variant="ghost">
+              <span className="i-heroicons:heart"></span>
+              Favorites
+            </Button>
+            <Button className="w-full justify-start h-10" variant="ghost">
               <span className="i-heroicons:rectangle-group"></span>
               Multiview
             </Button>
-            <Button className="w-full justify-start" size='lg'>
+            <Button className="w-full justify-start" variant="ghost">
               <span className="i-heroicons:queue-list"></span>
               Playlist
             </Button>
-            <Button className="w-full justify-start" size='lg'>
+            <Button className="w-full justify-start" variant="ghost">
               <span className="i-heroicons:musical-note"></span>
               Music
             </Button>
-            <Button className="w-full justify-start" size='lg'>
+            <Button className="w-full justify-start" variant="ghost">
               <span className="i-heroicons:cog-6-tooth"></span>
               Settings
             </Button>
-            <Button className="w-full justify-start" size='lg'>
+            <Button className="w-full justify-start" variant="ghost">
               <span className="i-heroicons:information-circle"></span>
               About
             </Button>
           </div>
         </div>
         <div className="py-2">
-          <h2 className="relative px-7 text-lg font-semibold tracking-tight">
+          {/* <h2 className="relative px-7 text-lg font-semibold tracking-tight">
             Favorites
-          </h2>
+          </h2> */}
           {/* <ScrollArea className="h-[300px] px-1">
             <div className="space-y-1 p-2">
               {playlists?.map((playlist, i) => (

diff --git a/packages/react/src/hooks/useFrame.ts b/packages/react/src/hooks/useFrame.ts
@@ -24,10 +24,16 @@ export const sidebarOpenAtom = atom(window.innerWidth > MobileSizeBreak);
 
 export const onResizeAtom = atom(
   null,
-  (_, set) => {
+  (get, set) => {
     const width = window.innerWidth;
     set(siteIsSmallAtom, width < MobileSizeBreak);
     set(sidebarShouldBeFullscreenAtom, width < FooterSizeBreak);
+    if (width < MobileSizeBreak) {
+      console.log("closing")
+      set(sidebarOpenAtom, false)
+    } else {
+      set(sidebarOpenAtom, get(sidebarPrefOpenAtom))
+    }
   }
 );
 

diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx
@@ -19,7 +19,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-8 px-4 py-2 gap-2",
+        default: "h-8 px-3.5 py-2 gap-2",
         sm: "h-6 rounded-md px-1 text-xs gap-1.5",
         lg: "h-10 rounded-md px-6 text-lg gap-3 ",
         icon: "h-8 w-8",
@@ -44,7 +44,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, }), className)}
         ref={ref}
         {...props}
       />

diff --git a/packages/react/uno.config.ts b/packages/react/uno.config.ts
@@ -7,7 +7,10 @@ import {
 // import presetAutoprefixer from 'unocss-preset-autoprefixer'
 export default defineConfig({
   presets: [
-    presetIcons(),
+    presetIcons({
+      scale: 1.25,
+      unit: 'em',
+    }),
     // presetWebFonts({
     //   fonts: {
     //     sans: 'Roboto',