add press effect to button active, sidebar fix

HolodexNet · Oct 17, 2023 · 78c18b9 · 78c18b9
1 parent 02ce877
commit 78c18b9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx
@@ -29,7 +29,7 @@ export function ChannelCard({
     // Set min-height because react-virtuoso will break if the height is not fixed
     <div className="flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4">
       <img className="h-24 w-24 rounded-full" src={photo ?? ""} />
-      <div className="font-xl line-clamp-2 text-center font-bold">{name}</div>
+      <div className="line-clamp-2 text-center text-lg font-bold">{name}</div>
       <div className="flex flex-col items-center">
         <div className="whitespace-nowrap text-sm text-base-11">
           {formatCount(subscriber_count ?? 0)} subscribers

diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
@@ -167,8 +167,9 @@ function SidebarItem({
       asChild
       className={cn(
         "w-full justify-start",
-        { "text-white": isHere },
         className,
+        { "text-base-12 font-semibold": isHere },
+        { 'font-base-11 font-light': !isHere },
       )}
       variant={isHere ? "default" : "ghost"}
       onClick={isMobile ? onClose : undefined}

diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx
@@ -1,21 +1,21 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-
+// import './button.css'
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition focus-visible:outline-none focus-visible:ring-1 active:scale-[97%] disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default:
-          "bg-primary-9 text-base-12 hover:bg-primaryA-4 focus-visible:ring-primary-7",
+          "bg-primary-9 text-base-12 hover:bg-primaryA-5 focus-visible:ring-primary-7 active:bg-primaryA-7",
         outline:
-          "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-4 focus-visible:ring-primary-7",
+          "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-5 focus-visible:ring-primary-7",
         secondary:
           "bg-secondary-9 text-base-12 hover:bg-secondaryA-4 focus-visible:ring-secondary-7 ",
-        ghost: "hover:bg-primary-4 hover:text-base-12 focus-visible:ring-primary-7",
+        ghost: "hover:bg-primary-4 hover:text-base-12 focus-visible:ring-primary-7 active:bg-primaryA-7",
         link: "text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-secondary-7",
       },
       size: {