ui and layout fix

src/components/DNSRecordTable.tsx

@@ -1,12 +1,8 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { useToast } from "@app/hooks/useToast";
 import { Badge } from "@app/components/ui/badge";
-import CopyToClipboard from "@app/components/CopyToClipboard";
 import { DNSRecordsDataTable } from "./DNSRecordsDataTable";
 
 export type DNSRecordRow = {
@@ -114,7 +110,9 @@ export default function DNSRecordsTable({ records, domainId, isRefreshing }: Pro
                     verified ? (
                         <Badge variant="green">{t("verified")}</Badge>
                     ) : (
-                        <Badge variant="secondary">{t("unverified")}</Badge>
+                        <Badge variant="destructive">
+                            {t("failed", { fallback: "Failed" })}
+                        </Badge>
                     )
                 );
             }

src/components/DNSRecordsDataTable.tsx

@@ -108,9 +108,9 @@ export function DNSRecordsDataTable<TData, TValue>({
             <Card>
                 <CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-4">
                     <div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2 justify-between">
-                        <div className="relative w-full sm:max-w-sm flex flex-row gap-10 items-center">
-                            <h1 className="font-bold">DNS Records</h1>
-                            <Badge variant="secondary">Required</Badge>
+                        <div className="relative w-full sm:max-w-sm flex flex-row gap-4 items-center">
+                            <h1 className="font-bold">{t("dnsRecord")}</h1>
+                            <Badge variant="secondary">{t("required")}</Badge>
                         </div>
                         <Button
                             variant="outline"
@@ -125,7 +125,7 @@ export function DNSRecordsDataTable<TData, TValue>({
                     <Table>
                         <TableHeader>
                             {table.getHeaderGroups().map((headerGroup) => (
-                                <TableRow key={headerGroup.id} className="bg-[#E8E8E8] dark:bg-transparent">
+                                <TableRow key={headerGroup.id} className="bg-secondary">
                                     {headerGroup.headers.map((header) => (
                                         <TableHead key={header.id}>
                                             {header.isPlaceholder

src/components/DomainInfoCard.tsx

@@ -30,7 +30,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { build } from "@server/build";
 import { Switch } from "./ui/switch";
 import { useEffect, useState } from "react";
-import DNSRecordsTable, {DNSRecordRow} from "./DNSRecordTable";
+import DNSRecordsTable, { DNSRecordRow } from "./DNSRecordTable";
 import { createApiClient } from "@app/lib/api";
 import { useToast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
@@ -150,19 +150,33 @@ export default function DomainInfoCard({ orgId, domainId }: DomainInfoCardProps)
         }
     }, [domain.domainId]);
 
+    const getTypeDisplay = (type: string) => {
+        switch (type) {
+            case "ns":
+                return t("selectDomainTypeNsName");
+            case "cname":
+                return t("selectDomainTypeCnameName");
+            case "wildcard":
+                return t("selectDomainTypeWildcardName");
+            default:
+                return type;
+        }
+    };
+
+
 
     return (
         <>
             <Alert>
                 <AlertDescription>
-                    <InfoSections cols={2}>
+                    <InfoSections cols={3}>
                         <InfoSection>
                             <InfoSectionTitle>
                                 {t("type")}
                             </InfoSectionTitle>
                             <InfoSectionContent>
                                 <span>
-                                    {domain.type}
+                                    {getTypeDisplay(domain.type ? domain.type : "")}
                                 </span>
                             </InfoSectionContent>
                         </InfoSection>
@@ -172,16 +186,11 @@ export default function DomainInfoCard({ orgId, domainId }: DomainInfoCardProps)
                             </InfoSectionTitle>
                             <InfoSectionContent>
                                 {domain.verified ? (
-                                    <div className="text-green-500 flex items-center space-x-2">
-                                        <Badge variant="green">
-                                            {t("verified")}
-                                        </Badge>
-                                    </div>
+                                    <Badge variant="green">{t("verified")}</Badge>
                                 ) : (
-                                    <div className="text-neutral-500 flex items-center space-x-2">
-                                        <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
-                                        <span>{t("unverified")}</span>
-                                    </div>
+                                    <Badge variant="destructive">
+                                        {t("failed", { fallback: "Failed" })}
+                                    </Badge>
                                 )}
                             </InfoSectionContent>
                         </InfoSection>