Add Arvan/Cloudflare DNS choice on domain edit and restyle empty add boxes.

Domain save can upsert tenant records on either provider, overflow menus stay opaque, and empty-state add controls use a dashed outline.

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/dashboard-ui/src/components/EmptyState.module.css

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  padding: 32px 0 48px;
+  padding: 20px 0 28px;
 }
 
 .rootDashed {
@@ -10,7 +10,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 24px;
+  gap: 12px;
   width: 100%;
   max-width: 880px;
   margin-inline: auto;
@@ -20,7 +20,7 @@
 
 .rootDashedInline {
   max-width: 100%;
-  padding: 24px 12px;
+  padding: 12px 8px 16px;
 }
 
 .messageDashed {
@@ -55,36 +55,52 @@
 
 .addBox {
   appearance: none;
+  -webkit-appearance: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  gap: 6px;
   width: 100%;
-  max-width: 880px;
-  min-height: 180px;
-  padding: 32px 28px;
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 2px dashed rgba(var(--primary-rgb) / 0.38);
-  border-radius: var(--radius);
-  color: var(--primary);
+  max-width: 480px;
+  min-height: 76px;
+  padding: 12px 14px;
+  background: none;
+  background-color: transparent;
+  border-width: 2px;
+  border-style: dashed;
+  border-color: #64748b;
+  border-radius: 12px;
+  color: var(--primary, #0a1628);
   font-family: var(--font-ui);
   text-decoration: none;
   cursor: pointer;
   transition:
-    background 0.2s ease,
-    border-color 0.2s ease,
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
 }
 
-.addBox:hover {
-  background: rgba(var(--primary-rgb) / 0.08);
-  border-color: rgba(var(--primary-rgb) / 0.58);
-  transform: translateY(-3px);
-  box-shadow: var(--card-hover-shadow);
+a.addBox,
+button.addBox {
+  background: none;
+  background-color: transparent;
+  border-width: 2px;
+  border-style: dashed;
+  border-color: #64748b;
+}
+
+.addBox:hover,
+a.addBox:hover,
+button.addBox:hover {
+  background-color: rgba(10, 22, 40, 0.07);
+  border-style: dashed;
+  border-color: #0a1628;
+  color: #0a1628;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
 }
 
 .addBox:focus-visible {
@@ -96,16 +112,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  background: rgba(var(--primary-rgb) / 0.12);
+  width: 28px;
+  height: 28px;
 }
 
 .addLabel {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 1.4;
+  line-height: 1.3;
 }
 
 .cell {
@@ -127,4 +141,8 @@
   .addBox {
     max-width: min(100%, 640px);
   }
+
+  .addBox {
+    max-width: 480px;
+  }
 }

packages/dashboard-ui/src/components/EmptyState.tsx

@@ -79,7 +79,7 @@ function EmptyStateContent({
   const addContent = (
     <>
       <span className={styles.addIcon} aria-hidden="true">
-        <Plus size={28} strokeWidth={2} />
+        <Plus size={20} strokeWidth={2} />
       </span>
       {actionLabel ? <span className={styles.addLabel}>{actionLabel}</span> : null}
     </>
@@ -92,11 +92,11 @@ function EmptyStateContent({
     >
       <p className={styles.messageDashed}>{messageContent}</p>
       {actionTo ? (
-        <Link to={actionTo} className={styles.addBox} onClick={onAction}>
+        <Link to={actionTo} className={styles.addBox} data-empty-add="" onClick={onAction}>
           {addContent}
         </Link>
       ) : (
-        <button type="button" className={styles.addBox} onClick={onAction}>
+        <button type="button" className={styles.addBox} data-empty-add="" onClick={onAction}>
           {addContent}
         </button>
       )}