feat(ui): Shadow UI redesign, domain management, and DNS autoconfigure (#11119)

Co-authored-by: ShadowArcanist <162910371+ShadowArcanist@users.noreply.github.com>

resources/views/livewire/project/shared/environment-variable/show-hardcoded.blade.php

@@ -1,31 +1,24 @@
-<div>
-    <div
-        class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base dark:border-coolgray-300 border-neutral-200">
-        <div class="flex flex-wrap items-center gap-2">
-            <span
-                class="px-2 py-0.5 text-xs font-normal rounded dark:bg-coolgray-400/50 bg-neutral-200 dark:text-neutral-400 text-neutral-600">
-                Hardcoded env
-            </span>
-            @if($serviceName)
-                <span
-                    class="px-2 py-0.5 text-xs font-normal rounded dark:bg-coolgray-400/50 bg-neutral-200 dark:text-neutral-400 text-neutral-600">
-                    Service: {{ $serviceName }}
-                </span>
+<div class="env-table-item"
+    x-show="typeof envFilter === 'undefined' || envFilter === 'all' || envFilter === '{{ $isPreview ? 'preview' : 'production' }}'">
+    <div class="data-table-row env-table-grid">
+        <div class="flex min-w-0 items-center gap-2">
+            <span class="env-key-label min-w-0 truncate font-mono text-[13px] text-black dark:text-fg" title="{{ $key }}">{{ $key }}</span>
+            <span class="table-badge shrink-0">Hardcoded</span>
+            @if ($serviceName)
+                <span class="table-badge shrink-0">{{ $serviceName }}</span>
             @endif
+            <span class="env-type-mobile table-badge shrink-0">{{ $isPreview ? 'Preview' : 'Production' }}</span>
         </div>
-        <div class="flex flex-col w-full gap-2">
-            <div class="flex flex-col w-full gap-2 lg:flex-row">
-                <x-forms.input disabled id="key" />
-                @if($value !== null && $value !== '')
-                    <x-forms.input disabled type="password" value="{{ $value }}" />
-                @else
-                    <x-forms.input disabled value="(inherited from host)" />
-                @endif
-            </div>
-            @if($comment)
-                <x-forms.input disabled value="{{ $comment }}" label="Comment"
-                    helper="Documentation for this environment variable." />
-            @endif
+        <div class="env-type-desktop text-[13px] text-neutral-500 dark:text-fg-dim">
+            {{ $isPreview ? 'Preview' : 'Production' }}
         </div>
+        <div class="min-w-0 truncate text-[13px] text-neutral-500 dark:text-fg-dim">
+            {{ $comment ?: ($value !== null && $value !== '' ? '-' : 'Inherited from host') }}
+        </div>
+        <span class="data-table-cell-dash">-</span>
+        <span class="data-table-cell-dash">-</span>
+        <span class="data-table-cell-dash">-</span>
+        <span class="data-table-cell-dash">-</span>
+        <div></div>
     </div>
-</div>
+</div>