refactor badge styles and add static variants

ten-protocol · Oct 8, 2024 · 5856516 · 5856516
1 parent 4991b86
commit 5856516
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/packages/ui/components/shared/badge.tsx b/packages/ui/components/shared/badge.tsx
@@ -1,21 +1,31 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary hover:bg-primary/80",
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         success:
-          "border-transparent bg-success text-success-foreground hover:bg-success/80",
-        outline: "text-foreground",
+          "border-transparent bg-success text-success-foreground hover:bg-success/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        outline:
+          "text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "static-default":
+          "border-transparent bg-primary text-primary-foreground",
+        "static-secondary":
+          "border-transparent bg-secondary text-secondary-foreground",
+        "static-destructive":
+          "border-transparent bg-destructive text-destructive-foreground",
+        "static-success":
+          "border-transparent bg-success text-success-foreground",
+        "static-outline": "border-current text-foreground",
       },
     },
     defaultVariants: {

diff --git a/tools/bridge-frontend/src/lib/siteMetadata.ts b/tools/bridge-frontend/src/lib/siteMetadata.ts
@@ -7,7 +7,7 @@ export const siteMetadata = {
     "Bridge tokens between Layer 1 and Layer 2 networks effortlessly with TEN Bridge. Ensure secure and efficient cross-chain transactions",
   keywords:
     "token bridging, cross-chain transactions, Layer 1 to Layer 2 bridge, blockchain bridge, Ten Bridge, crypto bridging, TEN network, TEN blockchain, TEN ecosystem",
-  siteUrl: `https://${environment}-bridge.ten.xyz`,
+  siteUrl: `https://${environment && environment + "-"}bridge.ten.xyz`,
   siteLogo: `/assets/images/cover.png`,
   siteLogoSquare: `/assets/images/cover.png`,
   email: "[email protected]",

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -128,7 +128,7 @@ export default function Dashboard() {
     },
     {
       title: "Nodes",
-      value: <Badge>Coming Soon</Badge>,
+      value: <Badge variant={"static-default"}>Coming Soon</Badge>,
       icon: BlocksIcon,
     },
   ];

diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/recent-transactions.tsx
@@ -41,7 +41,7 @@ export function RecentTransactions({ transactions }: { transactions: any }) {
               />
             </div>
             <div className="ml-auto">
-              <Badge>{transaction?.Finality}</Badge>
+              <Badge variant={"static-default"}>{transaction?.Finality}</Badge>
             </div>
           </div>
         )
-Original file line number
+Diff line change
@@ Expand Up @@
                   />
                 </div>
                 <div className="ml-auto">
-                  <Badge>{transaction?.Finality}</Badge>
+                  <Badge variant={"static-default"}>{transaction?.Finality}</Badge>
                 </div>
               </div>
             )
@@ Expand Down @@