Skip to content

Commit

Permalink
style: Improved design
Browse files Browse the repository at this point in the history
  • Loading branch information
@lewislarsen
lewislarsen committed Jul 30, 2024
1 parent b3ce86f commit 78db2b6
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 39 deletions.
5 changes: 3 additions & 2 deletions resources/views/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,9 @@ function createCharts() {
});
});
</script>

@else
@include('partials.steps-to-get-started.view')
<x-slot name="outsideContainer">
@include('partials.steps-to-get-started.view')
</x-slot>
@endif
</x-app-layout>
18 changes: 11 additions & 7 deletions resources/views/layouts/app.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,14 +77,18 @@
@endif
<!-- Page Content -->
<main>
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
<div class="block md:hidden w-full">
@if (isset($action))
{{ $action }}
@endif
@if (isset($outsideContainer))
{{ $outsideContainer }}
@else
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
<div class="block md:hidden w-full">
@if (isset($action))
{{ $action }}
@endif
</div>
{{ $slot }}
</div>
{{ $slot }}
</div>
@endif
</main>
</div>
<x-toaster-hub/>
Expand Down
38 changes: 24 additions & 14 deletions resources/views/partials/missing-keys-and-passphrase.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,18 @@ class="flex-grow sm:flex-grow-0 bg-white/10 hover:bg-white/20 backdrop-blur-sm p
{{ __('Show Command') }}
</button>

<x-modal name="ssh-key-generation" :focusable="true">
<div class="p-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="ssh-key-modal-title">
{{ __('SSH Key Generation Command') }}
</h2>

<div class="mt-4">
<x-modal name="ssh-key-generation" :focusable="true" maxWidth="lg">
<x-slot name="title">
{{ __('SSH Key Generation Command') }}
</x-slot>
<x-slot name="description">
{{ __('Easy, straightforward instructions on how to generate your SSH keys.') }}
</x-slot>
<x-slot name="icon">
heroicon-o-command-line
</x-slot>
<div>
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">
{{ __('Run this command in your terminal to generate SSH keys:') }}
</p>
Expand Down Expand Up @@ -91,13 +96,18 @@ class="flex-grow sm:flex-grow-0 bg-white/10 hover:bg-white/20 backdrop-blur-sm p
{{ __('How to Set Passphrase') }}
</button>

<x-modal name="set-passphrase" :focusable="true">
<div class="p-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100" id="set-passphrase-modal-title">
{{ __('How to Set SSH Passphrase') }}
</h2>

<div class="mt-4">
<x-modal name="set-passphrase" :focusable="true" maxWidth="lg">
<x-slot name="title">
{{ __('How to Set SSH Passphrase') }}
</x-slot>
<x-slot name="description">
{{ __('Easy, straightforward instructions on how to set your passphrase.') }}
</x-slot>
<x-slot name="icon">
heroicon-o-command-line
</x-slot>
<div>
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">{{ __('To set the SSH passphrase:') }}</p>
<ol class="list-decimal list-inside text-sm space-y-2 mt-2">
<li>{{ __('Open your .env file') }}</li>
Expand Down
44 changes: 28 additions & 16 deletions resources/views/partials/steps-to-get-started/view.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,38 @@
<div class="min-h-screen bg-gradient-to-b from-primary-950 to-primary-900 bg-cover text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-left mb-12">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4">{{ __('Steps to Get Started') }}</h2>
<div class="w-20 h-1 bg-white"></div>
<div class="w-20 h-1 bg-white mx-auto"></div>
<p class="mt-4 text-lg text-gray-300">{{ __('Follow these steps to set up your backup system quickly and easily.') }}</p>
</div>

@if (!ssh_keys_exist())
<div class="bg-yellow-50 dark:bg-yellow-900/50 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mb-8 text-center">
<div class="flex items-center justify-center text-yellow-800 dark:text-yellow-200">
@svg('heroicon-o-exclamation-triangle', 'h-5 w-5 mr-2')
<span class="font-medium">{{ __('SSH Keys Required') }}</span>
</div>
<p class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
{{ __('Please generate SSH keys before proceeding with the first step.') }}
</p>
</div>
@endif

<div class="grid md:grid-cols-3 gap-8">
@foreach ([
[
'step' => 1,
'title' => __('Link your first Remote Server'),
'description' => __('We support Ubuntu and Debian distributions primarily.'),
'description' => __('Get started easily with popular Linux distributions like Ubuntu and Debian. We\'ve got you covered!'),
'icons' => ['ubuntu', 'debian', 'tux'],
'route' => 'remote-servers.create',
'buttonText' => __('Link Remote Server'),
'condition' => Auth::user()->remoteServers->isEmpty()
'condition' => Auth::user()->remoteServers->isEmpty() && ssh_keys_exist()
],
[
'step' => 2,
'title' => __('Connect a Backup Destination'),
'description' => __('Add your S3 bucket API details to store your backups safely.'),
'description' => __('Securely store your backups in the cloud. Easy setup with S3 buckets, and support for other popular storage solutions.'),
'icons' => ['aws', 'upcloud', 'gcp'],
'route' => 'backup-destinations.create',
'buttonText' => __('Add your Backup Destination'),
Expand All @@ -36,22 +48,22 @@
'condition' => Auth::user()->remoteServers->isNotEmpty() && Auth::user()->backupDestinations->isNotEmpty()
]
] as $index => $step)
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-2xl border border-gray-200 dark:border-gray-700">
<div class="p-6 flex flex-col h-full relative">
<div class="absolute top-0 right-0 mt-4 mr-4 bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold">
<div class="absolute top-0 right-0 mt-4 mr-4 bg-primary-500 text-white rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg shadow-md">
{{ $index + 1 }}
</div>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
{{ $step['title'] }}
</h3>
@if (isset($step['icons']))
<div class="flex justify-center space-x-4 my-6">
<div class="flex justify-center space-x-6 my-6">
@foreach ($step['icons'] as $icon)
<x-dynamic-component :component="'icons.' . $icon" class="h-12 w-12 {{ $icon === 'upcloud' ? 'text-gray-700 dark:text-white' : 'text-gray-700 dark:text-gray-300' }}" />
<x-dynamic-component :component="'icons.' . $icon" class="h-14 w-14 {{ $icon === 'upcloud' ? 'text-gray-700 dark:text-white' : 'text-gray-700 dark:text-gray-300' }} transition-all duration-300 hover:scale-110" />
@endforeach
</div>
@endif
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 flex-grow">
{{ $step['description'] }}
</p>
@if (isset($step['additional_info']))
Expand All @@ -61,15 +73,15 @@
@endif
<div class="mt-auto">
@if (Auth::user()->{$step['step'] == 1 ? 'remoteServers' : 'backupDestinations'}->isNotEmpty())
<div class="bg-green-100 dark:bg-green-800 border-l-4 border-green-500 p-4 mb-4 rounded-r">
<p class="text-green-700 dark:text-green-200 flex items-center">
<div class="bg-green-100 dark:bg-green-800 text-green-700 dark:text-green-200 p-3 rounded-lg text-sm">
<p class="flex items-center font-medium">
@svg('heroicon-o-check-circle', 'h-5 w-5 mr-2')
<span>{{ __('You have completed this step.') }}</span>
</p>
</div>
@elseif ($step['condition'])
<a href="{{ route($step['route']) }}" wire:navigate class="group">
<x-primary-button class="w-full justify-center group-hover:bg-primary-600 transition-colors duration-300">
<a href="{{ route($step['route']) }}" wire:navigate class="block w-full">
<x-primary-button class="w-full justify-center bg-primary-600 hover:bg-primary-700 transition-colors duration-300">
<span>{{ $step['buttonText'] }}</span>
@svg('heroicon-o-arrow-right', 'h-5 w-5 ml-2 inline-block transition-transform duration-300 group-hover:translate-x-1')
</x-primary-button>
Expand All @@ -88,7 +100,7 @@

<div class="text-center mt-16">
<x-application-logo class="h-24 w-24 mx-auto animate-pulse" />
<p class="mt-4 text-gray-300">{{ __("You're on your way to secure, automated backups!") }}</p>
<p class="mt-4 text-lg text-gray-300">{{ __("You're on your way to secure, automated backups!") }}</p>
</div>
</div>
</div>

0 comments on commit 78db2b6

Please sign in to comment.