Review adjustments (#11)

components/custom/card.tsx

@@ -36,45 +36,34 @@ export const Card = ({
     return null;
   }
 
-  if (isMobile) {
-    console.log(isMobile);
-    return (
-      <CardUI className={`max-h-[90vh] w-[90%] p-4`}>
-        <CardHeader className='text-center'>
+  return (
+    <div className='gradient-border'>
+      <CardUI
+        style={{
+          boxShadow: '0 16px 32px 0 rgba(0, 0, 0, 0.6)'
+        }}
+        className={`max-h-[90vh] w-[90vw] p-8 ${style}`}
+      >
+        <CardHeader>
+          <p className='text-xs uppercase text-gray-500'>
+            Hackernews + newsletter
+          </p>
           <CardTitle>{title}</CardTitle>
           <CardDescription>{description}</CardDescription>
         </CardHeader>
-        <CardContent className='max-h-[60vh] overflow-auto'>
-          {content}
-        </CardContent>
+        {isMobile ? (
+          <CardContent>{content}</CardContent>
+        ) : (
+          <CardContent className='flex max-h-[60vh] flex-grow  justify-center overflow-auto'>
+            {content}
+          </CardContent>
+        )}
         {footer && (
-          <CardFooter className='flex justify-center p-4'>
+          <CardFooter>
             <Footer />
           </CardFooter>
         )}
       </CardUI>
-    );
-  }
-
-  return (
-    <CardUI
-      style={{
-        boxShadow: '0 16px 32px 0 rgba(0, 0, 0, 0.6)'
-      }}
-      className={`${style ?? 'sm:w-2/3 md:w-2/5 lg:w-1/3 xl:w-1/4'} p-4`}
-    >
-      <CardHeader className='text-center'>
-        <CardTitle>{title}</CardTitle>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent className='h-[80%] flex-grow overflow-auto'>
-        {content}
-      </CardContent>
-      {footer && (
-        <CardFooter className=' flex justify-center p-4'>
-          <Footer />
-        </CardFooter>
-      )}
-    </CardUI>
+    </div>
   );
 };

components/ui/button.tsx

@@ -1,55 +1,19 @@
 import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { cn } from '../../utils/ui';
 
-const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground hover:bg-primary/90 bg-blue-500 hover:bg-blue-700',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10'
-      }
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default'
-    }
-  }
-);
-
 export type ButtonProps = {
   asChild?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof buttonVariants>;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
+      <Comp className={cn('btn-grad', 'btn-grad-hover')} ref={ref} {...props} />
     );
   }
 );
 Button.displayName = 'Button';
 
-export { Button, buttonVariants };
+export { Button };

components/ui/card.tsx

@@ -22,7 +22,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    className={cn('flex flex-col space-y-1.5 text-center', className)}
     {...props}
   />
 ));
@@ -59,7 +59,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('px-8 py-4', className)} {...props} />
+  <div ref={ref} className={cn('py-4', className)} {...props} />
 ));
 CardContent.displayName = 'CardContent';
 
@@ -69,7 +69,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex items-center p-8', className)}
+    className={cn('flex items-center justify-center', className)}
     {...props}
   />
 ));