styling

Author: zdql

packages/app/control/src/app/(app)/app/[id]/(overview)/_components/header/index.tsx

@@ -60,11 +60,15 @@ export const HeaderCard: React.FC<Props> = ({ appId }) => {
       <div className="grid grid-cols-1 md:grid-cols-7">
         <div className="flex flex-col gap-4 p-4 pt-12 md:pt-14 col-span-5">
           <div className="">
-            <h1 className="text-3xl font-bold break-words line-clamp-2">{app.name}</h1>
+            <h1 className="text-3xl font-bold break-words line-clamp-2">
+              {app.name}
+            </h1>
             <p
               className={cn(
                 'break-words line-clamp-2',
-                app.description ? 'text-muted-foreground' : 'text-muted-foreground/40'
+                app.description
+                  ? 'text-muted-foreground'
+                  : 'text-muted-foreground/40'
               )}
             >
               {app.description ?? 'No description'}

packages/app/control/src/app/(app)/app/[id]/free-tier/_components/balance/add-credits.tsx

@@ -75,6 +75,8 @@ export const AddCredits: React.FC<Props> = ({ appId }) => {
     createPaymentFromBalance({ appId, amountInDollars: amount });
   };
 
+  const [currentUserBalance] = api.user.balance.get.useSuspenseQuery();
+
   return (
     <div className="flex flex-col w-full gap-4">
       <MoneyInput
@@ -95,9 +97,9 @@ export const AddCredits: React.FC<Props> = ({ appId }) => {
       <div className="flex gap-3">
         <Button
           onClick={onAddCredits}
-          disabled={isPending || !amount || amount <= 0 || isSuccess}
+          disabled={isPending || !amount || amount < 1 || isSuccess}
           size="lg"
-          variant="turbo"
+          variant="turboSecondary"
           className="flex-1"
         >
           {isPending ? (
@@ -113,8 +115,9 @@ export const AddCredits: React.FC<Props> = ({ appId }) => {
           disabled={
             isPendingFromBalance ||
             !amount ||
-            amount <= 0 ||
-            isSuccessFromBalance
+            amount < 0 ||
+            isSuccessFromBalance ||
+            currentUserBalance.balance < amount
           }
           size="lg"
           variant="turbo"

packages/app/control/src/app/(app)/app/[id]/free-tier/_components/balance/index.tsx

@@ -13,8 +13,10 @@ import {
   DialogTitle,
   DialogDescription,
   DialogTrigger,
+  DialogFooter,
 } from '@/components/ui/dialog';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Balance as BalanceDisplay } from '@/app/(app)/_components/layout/header/balance/balance-display';
 
 import { AddCredits } from './add-credits';
 
@@ -29,7 +31,9 @@ interface Props {
 const BalanceContainer = ({ children }: { children: React.ReactNode }) => {
   return (
     <Card className="border rounded-lg overflow-hidden flex flex-col gap-2 p-4">
-      <h1 className="text-lg font-semibold text-muted-foreground">Balance</h1>
+      <h1 className="text-lg font-semibold text-muted-foreground">
+        Free Tier Balance
+      </h1>
       <div className="flex items-center gap-4 w-full">{children}</div>
     </Card>
   );
@@ -58,6 +62,12 @@ export const Balance: React.FC<Props> = ({ appId }) => {
               Your users will be able to use free tier credits before they have
               to buy credits and spend their Echo balance.
             </DialogDescription>
+            <DialogFooter>
+              <span className="text-sm font-semibold text-muted-foreground">
+                Current Balance:
+              </span>
+              <BalanceDisplay />
+            </DialogFooter>
           </DialogHeader>
           <AddCredits appId={appId} />
         </DialogContent>

packages/app/control/src/components/ui/button.tsx

@@ -32,6 +32,15 @@ const buttonVariants = cva(
           'before:content-[""] before:absolute before:w-full before:h-full before:rounded-md before:pointer-events-none',
           'before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent before:animate-shimmer'
         ),
+        turboSecondary: cn(
+          'bg-gradient-to-br from-gray-400 via-gray-500 to-gray-600 text-white hover:opacity-90',
+          'shadow-[0_2px_6px_color-mix(in_oklab,theme(colors.gray.500)_70%,transparent)]',
+          'hover:shadow-[0_2px_4px_color-mix(in_oklab,theme(colors.gray.500)_70%,transparent)]',
+          'inset-ring-2 inset-ring-inset inset-ring-border/50',
+          'relative overflow-hidden',
+          'before:content-[""] before:absolute before:w-full before:h-full before:rounded-md before:pointer-events-none',
+          'before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent before:animate-shimmer'
+        ),
         unstyled: '',
       },
       size: {