add slide-over component

resources/views/components/slide-over.blade.php

@@ -4,7 +4,7 @@
     {{ $slot }}
     <template x-teleport="body">
         <div x-show="slideOverOpen" @keydown.window.escape="slideOverOpen=false" class="relative z-[99]">
-            <div x-show="slideOverOpen" @click="slideOverOpen = false" class="fixed inset-0 "></div>
+            <div x-show="slideOverOpen" @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-60"></div>
             <div class="fixed inset-0 overflow-hidden">
                 <div class="absolute inset-0 overflow-hidden">
                     <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
@@ -15,17 +15,17 @@
                             x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
                             class="w-screen max-w-md">
                             <div
-                                class="flex flex-col h-full py-5 overflow-y-scroll border-l shadow-lg bg-primary border-neutral-800">
+                                class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base-100 border-neutral-800">
-                                <div class="px-4 sm:px-5">
+                                <div class="px-4 pb-10 sm:px-5">
                                     <div class="flex items-start justify-between pb-1">
-                                        <h2 class="text-base leading-6" id="slide-over-title">
+                                        <h2 class="text-2xl leading-6" id="slide-over-title">
                                             {{ $title }}</h2>
                                         <div class="flex items-center h-auto ml-3">
-                                            <button @click="slideOverOpen=false"
+                                            <button class="icon" @click="slideOverOpen=false"
-                                                class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-3 mr-5 space-x-1 text-xs font-normal border-none rounded">
+                                                class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded">
                                                 <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
                                                     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-                                                    class="w-3 h-3">
+                                                    >
                                                     <path stroke-linecap="round" stroke-linejoin="round"
                                                         d="M6 18L18 6M6 6l12 12"></path>
                                                 </svg>

resources/views/livewire/project/edit.blade.php

@@ -13,8 +13,15 @@
     </form>
     <div class="flex gap-2">
         <h2>Shared Variables</h2>
-        <x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
+        <x-slide-over>
+            <x-slot:title>New Shared Variable</x-slot:title>
+            <x-slot:content>
                 <livewire:project.shared.environment-variable.add />
+            </x-slot:content>
+            <button @click="slideOverOpen=true"
+                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
+                Add</button>
+        </x-slide-over>
     </div>
     <div class="pb-4">You can use this anywhere.</div>
     <div class="flex flex-col gap-2">

resources/views/livewire/project/environment-edit.blade.php

@@ -43,8 +43,14 @@
     </form>
     <div class="flex gap-2 pt-10">
         <h2>Shared Variables</h2>
-        <x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
+        <x-slide-over>
+            <x-slot:title>New Shared Variable</x-slot:title>
+            <x-slot:content>
                 <livewire:project.shared.environment-variable.add  />
+            </x-slot:content>
+            <button @click="slideOverOpen=true"
+                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
+        </x-slide-over>
     </div>
     <div class="pb-4">You can use this anywhere.</div>
     <div class="flex flex-col gap-2">

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

@@ -1,16 +1,10 @@
-<dialog id="newVariable" class="modal">
+<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
-    <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
-        <h3 class="text-lg font-bold">Add Environment Variable</h3>
     <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
     <x-forms.input placeholder="production" id="value" label="Value" required />
     @if (data_get($parameters, 'application_uuid'))
         <x-forms.checkbox id="is_build_time" label="Build Variable?" />
     @endif
-        <x-forms.button onclick="newVariable.close()" type="submit">
+    <x-forms.button type="submit" @click="slideOverOpen=false">
         Save
     </x-forms.button>
 </form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-</dialog>

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

@@ -4,20 +4,13 @@
             <h2>Environment Variables</h2>
             @if ($resource->type() !== 'service')
                 <x-slide-over>
-                    <x-slot:title>Add Environment Variables</x-slot:title>
+                    <x-slot:title>New Environment Variable</x-slot:title>
                     <x-slot:content>
-                        <form class="flex flex-col gap-2 rounded" wire:submit='submit'>
+                        <livewire:project.shared.environment-variable.add />
-                            <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
-                            <x-forms.input placeholder="production" id="value" label="Value" required />
-                            <x-forms.button type="submit">
-                                Save
-                            </x-forms.button>
-                        </form>
                     </x-slot:content>
                     <button @click="slideOverOpen=true"
                         class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
                 </x-slide-over>
-                {{-- <x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button> --}}
             @endif
             <x-forms.button
                 wire:click='switch'>{{ $view === 'normal' ? 'Developer view' : 'Normal view' }}</x-forms.button>
@@ -46,12 +39,12 @@
         @endif
     @else
         <form wire:submit='saveVariables(false)' class="flex flex-col gap-2">
-            <x-forms.textarea rows=25 class="whitespace-pre-wrap" id="variables"></x-forms.textarea>
+            <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables"></x-forms.textarea>
             <x-forms.button type="submit" class="btn btn-primary">Save</x-forms.button>
         </form>
         @if ($showPreview)
             <form wire:submit='saveVariables(true)' class="flex flex-col gap-2">
-                <x-forms.textarea rows=25 class="whitespace-pre-wrap" label="Preview Environment Variables"
+                <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Environment Variables"
                     id="variablesPreview"></x-forms.textarea>
                 <x-forms.button type="submit" class="btn btn-primary">Save</x-forms.button>
             </form>

resources/views/livewire/team-shared-variables-index.blade.php

@@ -2,8 +2,14 @@
     <x-team.navbar />
     <div class="flex gap-2">
         <h2>Shared Variables</h2>
-        <x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
+        <x-slide-over>
+            <x-slot:title>New Shared Variable</x-slot:title>
+            <x-slot:content>
                 <livewire:project.shared.environment-variable.add  />
+            </x-slot:content>
+            <button @click="slideOverOpen=true"
+                class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
+        </x-slide-over>
     </div>
     <div class="pb-4">You can use this anywhere.</div>
     <div class="flex flex-col gap-2">