Skip to content

Commit 0f8946d

Browse files
jonasfroellerjonasfroeller
committed
fixes create-monitor.blade styling
1 parent d3291d7 commit 0f8946d

File tree

1 file changed

+55
-43
lines changed

1 file changed

+55
-43
lines changed

‎resources/views/livewire/auth/create-monitor.blade.php‎

Lines changed: 55 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -109,52 +109,57 @@ public function switchTo()
109109
}
110110
};
111111
?>
112-
<div class="flex flex-col items-center mt-4 bg-gray-100 dark:bg-gray-900 sm:justify-center sm:pt-0">
113-
<div class="w-full sm:max-w-4xl mt-6 grid grid-cols-1 sm:grid-cols-2 gap-6">
114112

115-
<!-- Create Monitor Form -->
116-
<div class="p-12 bg-white dark:bg-gray-800 border border-border-color sm:rounded-lg shadow-lg">
117-
<div class="text-center">
118-
<h1 class="mb-6 text-4xl font-bold text-primary-blue">Create Monitor</h1>
119-
</div>
120-
121-
<form wire:submit.prevent="create" class="space-y-4">
122-
<sl-input required wire:model.defer="project_url" placeholder="Your Project URL" type="text"></sl-input>
123-
<br>
124-
<sl-input wire:model.defer="pat_token" placeholder="Your PAT Token (Optional)" type="text"></sl-input>
125-
<sl-switch wire:click="switchTo()">Open Source</sl-switch>
126-
127-
<div class="flex justify-between items-center mt-4">
128-
<a class="text-sm text-gray-600 underline dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
129-
href="{{ url('join') }}">
130-
Already have a monitor?
131-
</a>
132-
<sl-button wire:click="on_create">Create</sl-button>
133-
</div>
134-
</form>
135-
136-
@if($create_monitor_error)
137-
<sl-alert variant="danger" open closable class="mt-4">
138-
<sl-icon wire:ignore slot="icon" name="patch-exclamation"></sl-icon>
139-
<strong>{{ $error_head }}</strong><br/>
140-
{{ $create_monitor_error }}
141-
</sl-alert>
142-
@endif
113+
<div class="flex flex-col items-center w-full h-full bg-gray-100">
114+
<div class="flex flex-col justify-center mt-10">
115+
<div class="flex gap-1 items-center mt-16 mb-2 sm:mt-10">
116+
<div class="w-[30px] h-[30px] rounded-full bg-primary-blue"></div>
117+
<div class="w-2 h-1 bg-primary-blue"></div>
118+
<div class="w-[30px] h-[30px] bg-primary-blue rounded-full"></div>
143119
</div>
144120

145-
<div class="p-4 bg-white dark:bg-gray-800 border border-border-color sm:rounded-lg shadow-lg">
146-
<h2 class="text-lg font-semibold mb-2">Monitor Logs</h2>
147-
<div wire:poll.100ms="pollLogs" class="h-64 overflow-y-auto p-2 rounded-md">
148-
<ul class="space-y-1">
149-
@foreach ($logs as $log)
150-
<li class="text-sm p-1 rounded-md
151-
{{ $log['level'] === 'error' ? 'text-additional-red' :
152-
($log['level'] === 'warning' ? 'text-additional-orange' :
153-
($log['level'] === 'success' ? 'text-additional-green' : 'bg-gray-700')) }}">
154-
<strong>[{{ strtoupper($log['level']) }}]</strong> {{ $log['message'] }}
155-
</li>
156-
@endforeach
157-
</ul>
121+
<div class="flex flex-wrap gap-2">
122+
<div class="px-10 pt-8 pb-8 mx-auto w-96 max-w-full bg-white rounded-lg border border-border-color">
123+
<h1 class="mb-8 text-6xl uppercase font-koulen text-primary-blue">Create Monitor</h1>
124+
125+
<form wire:submit.prevent="create" class="flex flex-col gap-2">
126+
<sl-input size="medium" required wire:model.defer="project_url" placeholder="Your Project URL" type="text"></sl-input>
127+
<sl-input size="medium" wire:model.defer="pat_token" placeholder="Your PAT Token (Optional)" type="text"></sl-input>
128+
<sl-switch class="pt-1 text-secondary-grey" size="medium" wire:click="switchTo()">Open Source</sl-switch>
129+
130+
<div class="flex justify-between items-end mt-5">
131+
<a class="text-sm no-underline text-primary-blue hover:underline"
132+
href="{{ url('join') }}">
133+
Already have a monitor?
134+
</a>
135+
136+
<sl-button size="medium" wire:click="on_create">Create</sl-button>
137+
</div>
138+
</form>
139+
140+
@if($create_monitor_error)
141+
<sl-alert variant="danger" open closable class="mt-4">
142+
<sl-icon wire:ignore slot="icon" name="patch-exclamation"></sl-icon>
143+
<strong>{{ $error_head }}</strong><br/>
144+
{{ $create_monitor_error }}
145+
</sl-alert>
146+
@endif
147+
</div>
148+
149+
<div class="p-4 w-96 max-w-full bg-white border shadow-lg dark:bg-gray-800 border-border-color sm:rounded-lg">
150+
<h2 class="mb-2 text-lg font-semibold">Monitor Logs</h2>
151+
<div wire:poll.100ms="pollLogs" class="overflow-y-auto p-2 h-64 rounded-md">
152+
<ul class="space-y-1">
153+
@foreach ($logs as $log)
154+
<li class="text-sm p-1 rounded-md
155+
{{ $log['level'] === 'error' ? 'text-additional-red' :
156+
($log['level'] === 'warning' ? 'text-additional-orange' :
157+
($log['level'] === 'success' ? 'text-additional-green' : 'bg-gray-700')) }}">
158+
<strong>[{{ strtoupper($log['level']) }}]</strong> {{ $log['message'] }}
159+
</li>
160+
@endforeach
161+
</ul>
162+
</div>
158163
</div>
159164
</div>
160165

@@ -167,3 +172,10 @@ public function switchTo()
167172
</div>
168173
</div>
169174

175+
<!-- <div class="relative mt-2 w-full aspect-video">
176+
<iframe
177+
class="absolute top-0 left-0 w-full h-full rounded-lg"
178+
src="https://player.vimeo.com/video/953693369?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&background=1&responsive=1"
179+
frameborder="0"
180+
allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
181+
title="Propromo P

0 commit comments

Comments
 (0)