add new design (#70)

* add new design stuff

* add more ui things

* add more ui changes

* more ui changes

* add more design

* update emoji
This commit is contained in:
KM Koushik
2024-09-28 20:48:26 +10:00
committed by GitHub
parent 5ca6537a81
commit b75b125981
50 changed files with 1909 additions and 419 deletions

View File

@@ -111,7 +111,7 @@ export default function DomainItemPage({
</div>
</div>
<div className=" border rounded-lg p-4">
<div className=" border rounded-lg p-4 shadow">
<p className="font-semibold text-xl">DNS records</p>
<Table className="mt-2">
<TableHeader className="">
@@ -266,7 +266,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
);
}
return (
<div className="rounded-lg p-4 border flex flex-col gap-6">
<div className="rounded-lg shadow p-4 border flex flex-col gap-6">
<p className="font-semibold text-xl">Settings</p>
<div className="flex flex-col gap-1">
<div className="font-semibold">Click tracking</div>
@@ -309,30 +309,29 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
switch (status) {
case DomainStatus.NOT_STARTED:
badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10";
break;
case DomainStatus.SUCCESS:
badgeColor = "bg-emerald-500/10 text-emerald-500 border-emerald-600/10";
badgeColor =
"bg-green-500/15 dark:bg-green-600/10 text-green-700 dark:text-green-600/90 border border-green-500/25 dark:border-green-700/25";
break;
case DomainStatus.FAILED:
badgeColor = "bg-red-500/10 text-red-600 border-red-500/20";
badgeColor =
"bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
break;
case DomainStatus.TEMPORARY_FAILURE:
case DomainStatus.PENDING:
badgeColor = "bg-yellow-500/10 text-yellow-600 border-yellow-600/10";
badgeColor =
"bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
break;
default:
badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10";
badgeColor =
"bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
}
return (
<div
className={` text-center min-w-[70px] capitalize rounded-md py-1 justify-center flex items-center ${badgeColor}`}
className={` text-xs text-center min-w-[70px] capitalize rounded-md py-1 justify-center flex items-center ${badgeColor}`}
>
<span className="text-xs">
{status.split("_").join(" ").toLowerCase()}
</span>
{status.split("_").join(" ").toLowerCase()}
</div>
);
};