From 58565162381255b127ce55beae4623caff9e75da Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Tue, 8 Oct 2024 20:23:01 +0400
Subject: [PATCH] refactor badge styles and add static variants

---
 packages/ui/components/shared/badge.tsx       | 24 +++++++++++++------
 tools/bridge-frontend/src/lib/siteMetadata.ts |  2 +-
 .../components/modules/dashboard/index.tsx    |  2 +-
 .../modules/dashboard/recent-transactions.tsx |  2 +-
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/ui/components/shared/badge.tsx b/packages/ui/components/shared/badge.tsx
index d8a17f563b..46a22c2d58 100644
--- 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
index 34ec555cc6..d64ad7f883 100644
--- 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: "team@ten.xyz",
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
index 07ee091b50..47c4426ab5 100644
--- 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
index e94fc1b00d..97fad80705 100644
--- 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>
         )