From ddd002094d5c80ca4065b7d181e7f5b9471556da Mon Sep 17 00:00:00 2001
From: vantezzen <hello@vantezzen.io>
Date: Thu, 2 Apr 2020 15:32:18 +0200
Subject: Update dashboard design

---
 resources/views/dashboard/account.edge  | 109 ++++++-----
 resources/views/dashboard/data.edge     | 326 ++++++++++++++++----------------
 resources/views/dashboard/delete.edge   |  45 +++--
 resources/views/dashboard/login.edge    |  86 +++++----
 resources/views/dashboard/transfer.edge |  81 ++++----
 5 files changed, 348 insertions(+), 299 deletions(-)

(limited to 'resources/views/dashboard')

diff --git a/resources/views/dashboard/account.edge b/resources/views/dashboard/account.edge
index a91aa11..9f3539e 100644
--- a/resources/views/dashboard/account.edge
+++ b/resources/views/dashboard/account.edge
@@ -1,66 +1,75 @@
-@layout('layouts.main')
+@layout('layouts.v2')
 
 @section('content')
-<h2>Your Ferdi account</h2>
-@if(flashMessage('error'))
-    <div class="alert">
-        {{ flashMessage('error') }} 
+<div class="w-screen h-screen bg-purple-200 flex items-center justify-center">
+  <div class="w-full max-w-lg bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Your Ferdi account
+    </h1>
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
     </div>
-@endif
-@if(old('message'))
-    <div class="alert">
-        {{ old('message') }}
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
     </div>
-@endif
-@if(flashMessage('notification'))
-    <div class="alert">
-        {{ flashMessage('notification.message') }}
+    @endif
+    @if(flashMessage('notification'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('notification.message') }}
     </div>
-@endif
-@if(success === true)
-    <div class="alert" style="background-color:#28C76F;">
-        Sucessfully updated your user account
+    @endif
+    @if(success === true)
+    <div class="bg-green-100 border-l-4 border-green-500 text-white p-4" style="background-color:#28C76F;">
+      Sucessfully updated your user account
     </div>
-@endif
+    @endif
 
-<form action="/user/account" method="POST">
-    {{ csrfField() }}
-    <div>
-        <label>Name</label>
+    <form action="/user/account" method="POST">
+      {{ csrfField() }}
+      <div class="mb-6">
+        <label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
         <div>
-            <input type="text" value="{{ old('name', username) }}" placeholder="Name" name="username" required>
+          <input
+            class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            type="text" value="{{ old('name', username) }}" placeholder="Name" name="username" required>
         </div>
-    </div>
-    <div>
-        <label>E-Mail</label>
+      </div>
+      <div class="mb-6">
+        <label class="block text-gray-700 text-sm font-bold mb-2">E-Mail</label>
         <div>
-            <input type="email" value="{{ old('email', email) }}" placeholder="E-Mail" name="email" required>
+          <input
+            class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            type="email" value="{{ old('email', email) }}" placeholder="E-Mail" name="email" required>
         </div>
-    </div>
-    <div>
-        <label>Password</label>
+      </div>
+      <div class="mb-6">
+        <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
         <div>
-            <input type="password" placeholder="*********" name="password">
+          <input
+            class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+            type="password" placeholder="*********" name="password">
         </div>
-    </div>
-    <div>
+      </div>
+      <div>
         <button style="background-color:#28C76F;margin-bottom:1rem;">Change settings</button>
+      </div>
+    </form>
+    <div class="text-center">
+        <a class="w-full font-bold text-sm text-gray-500 hover:text-gray-800 mb-3"
+        href="/user/data">My account data</a>
+        <br />
+        <a class="w-full font-bold text-sm text-gray-500 hover:text-gray-800 mb-3"
+        href="/user/transfer">Import/Export account data</a>
+        <br />
+        <a class="w-full font-bold text-sm text-red-500 hover:text-red-800 mb-3"
+        href="/user/delete">Delete my account</a>
+        <br />
+    <a class="w-full font-bold text-sm text-gray-500 hover:text-gray-800 mb-3"
+    href="/user/logout">Logout</a>
     </div>
-</form>
-
-<div>
-    <a class="button" href="/user/delete" style="background-color:#F6416C;margin-bottom:1rem;">Delete my account</a>
-</div>
-<div>
-    <a class="button" href="/user/data" style="margin-bottom:1rem;">My account data</a>
+  </div>
 </div>
-<div>
-    <a class="button" href="/user/transfer" style="margin-bottom:1rem;">Import/Export account data</a>
-</div>
-<div>
-    <a class="button" href="/user/logout">Logout</a>
-</div>
-
-</div>
-
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/dashboard/data.edge b/resources/views/dashboard/data.edge
index 1935229..60ef10b 100644
--- a/resources/views/dashboard/data.edge
+++ b/resources/views/dashboard/data.edge
@@ -1,167 +1,177 @@
-@layout('layouts.main')
+@layout('layouts.v2')
 
 @section('content')
-<h2>Your Ferdi account data</h2>
-@if(flashMessage('error'))
-    <div class="alert">
-        {{ flashMessage('error') }} 
-    </div>
-@endif
-@if(old('message'))
-    <div class="alert">
-        {{ old('message') }}
-    </div>
-@endif
-
-<h4>General account data</h4>
-<table>
-    <tr>
-        <th>
-            Name
-        </th>
-        <th>
-            Value
-        </th>
-    </tr>
-    <tr>
-        <td>
-            E-Mail
-        </td>
-        <td>
-            {{ mail }}
-        </td>
-    </tr>
-    <tr>
-        <td>
-            Username
-        </td>
-        <td>
-            {{ username }}
-        </td>
-    </tr>
-    <tr>
-        <td>
-            Created account on
-        </td>
-        <td>
-            {{ created }}
-        </td>
-    </tr>
-    <tr>
-        <td>
-            Last account update on
-        </td>
-        <td>
-            {{ updated }}
-        </td>
-    </tr>
-</table>
-
-<h4>Your services</h4>
-<table>
-    <tr>
-        <th>
-            Service ID
-        </th>
-        <th>
-            Name
-        </th>
-        <th>
-            Recipe ID
-        </th>
-        <th>
-            Settings
-        </th>
-        <th>
-            Created
-        </th>
-        <th>
-            Last updated
-        </th>
-    </tr>
+<style>
+    table {
+        border: 1px solid #919191;
+        border-collapse: collapse;
+        table-layout: fixed;
+        width: 100%; 
+    }
+    table thead { text-align: center; }
+    table tbody { text-align: right; }
+    table tr { border-bottom: 1px solid #919191; }
+    table tbody tr:nth-child(even) { background: var(--tertiary-color); }
+    table th { background: var(--secondary-color); font-weight: bold; }
+    table th, table td { padding: 1rem; }
+    table th:not(last-of-type), table td:not(last-of-type) { border-right: 1px solid #919191; }
 
-    @each(service in services)
-      <tr>
-          <td>
-              {{ service.serviceId }}
-          </td>
-          <td>
-              {{ service.name }}
-          </td>
-          <td>
-              {{ service.recipeId }}
-          </td>
-          <td>
-              {{ service.settings }}
-          </td>
-          <td>
-              {{ service.created_at }}
-          </td>
-          <td>
-              {{ service.updated_at }}
-          </td>
-      </tr>
-    @endeach
-</table>
+</style>
 
+<div class="bg-purple-200 flex items-center justify-center">
+  <div class="w-full bg-white shadow-md rounded px-8 pt-6 mt-5 pb-8 mb-4">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">Your Account Data</h1>
 
-<h4>Your workspaces</h4>
-<table>
-    <tr>
-        <th>
-            Service ID
-        </th>
-        <th>
-            Name
-        </th>
-        <th>
-            Order
-        </th>
-        <th>
-            Services
-        </th>
-        <th>
-            Data
-        </th>
-        <th>
-            Created
-        </th>
-        <th>
-            Last updated
-        </th>
-    </tr>
-
-    @each(workspace in workspaces)
-      <tr>
-          <td>
-              {{ workspace.workspaceId }}
-          </td>
-          <td>
-              {{ workspace.name }}
-          </td>
-          <td>
-              {{ workspace.order }}
-          </td>
-          <td>
-              {{ workspace.services }}
-          </td>
-          <td>
-              {{ workspace.data }}
-          </td>
-          <td>
-              {{ workspace.created_at }}
-          </td>
-          <td>
-              {{ workspace.updated_at }}
-          </td>
-      </tr>
-    @endeach
-</table>
+    
+    <table class="w-full rounded-lg overflow-hidden sm:shadow-lg my-5">
+        <tr>
+            <th>
+                Name
+            </th>
+            <th>
+                Value
+            </th>
+        </tr>
+        <tr>
+            <td>
+                E-Mail
+            </td>
+            <td>
+                {{ mail }}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Username
+            </td>
+            <td>
+                {{ username }}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Created account on
+            </td>
+            <td>
+                {{ created }}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Last account update on
+            </td>
+            <td>
+                {{ updated }}
+            </td>
+        </tr>
+    </table>
+    
+    <h1 class="text-gray-700 text-center text-2xl pb-5">Your Services</h1>
+    <table class="w-full rounded-lg overflow-hidden sm:shadow-lg my-5">
+        <tr>
+            <th>
+                Service ID
+            </th>
+            <th>
+                Name
+            </th>
+            <th>
+                Recipe ID
+            </th>
+            <th>
+                Settings
+            </th>
+            <th>
+                Created
+            </th>
+            <th>
+                Last updated
+            </th>
+        </tr>
+    
+        @each(service in services)
+          <tr>
+              <td>
+                  {{ service.serviceId }}
+              </td>
+              <td>
+                  {{ service.name }}
+              </td>
+              <td>
+                  {{ service.recipeId }}
+              </td>
+              <td>
+                  {{ stringify(service.settings) }}
+              </td>
+              <td>
+                  {{ service.created_at }}
+              </td>
+              <td>
+                  {{ service.updated_at }}
+              </td>
+          </tr>
+        @endeach
+    </table>
+    
+    <h1 class="text-gray-700 text-center text-2xl pb-5">Your Workspaces</h1>
+    <table>
+        <tr>
+            <th>
+                Service ID
+            </th>
+            <th>
+                Name
+            </th>
+            <th>
+                Order
+            </th>
+            <th>
+                Services
+            </th>
+            <th>
+                Data
+            </th>
+            <th>
+                Created
+            </th>
+            <th>
+                Last updated
+            </th>
+        </tr>
+    
+        @each(workspace in workspaces)
+          <tr>
+              <td>
+                  {{ workspace.workspaceId }}
+              </td>
+              <td>
+                  {{ workspace.name }}
+              </td>
+              <td>
+                  {{ workspace.order }}
+              </td>
+              <td>
+                  {{ stringify(workspace.services) }}
+              </td>
+              <td>
+                  {{ stringify(workspace.data) }}
+              </td>
+              <td>
+                  {{ workspace.created_at }}
+              </td>
+              <td>
+                  {{ workspace.updated_at }}
+              </td>
+          </tr>
+        @endeach
+    </table>
+    
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-gray-500 hover:text-gray-800 mb-3" href="/user/account">Back to My
+        Account</a>
+    </div>
 
-<div>
-    <a class="button" href="/user/account">Back to my account</a>
+  </div>
 </div>
-
 </div>
-
 @endsection
\ No newline at end of file
diff --git a/resources/views/dashboard/delete.edge b/resources/views/dashboard/delete.edge
index d3fc0df..3a29253 100644
--- a/resources/views/dashboard/delete.edge
+++ b/resources/views/dashboard/delete.edge
@@ -1,31 +1,36 @@
-@layout('layouts.main')
+@layout('layouts.v2')
 
 @section('content')
-<h2>Delete Ferdi account</h2>
-@if(flashMessage('error'))
-    <div class="alert">
-        {{ flashMessage('error') }} 
+<div class="w-screen h-screen bg-purple-200 flex items-center justify-center">
+  <div class="w-full max-w-lg bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">Delete your account</h1>
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
     </div>
-@endif
-@if(old('message'))
-    <div class="alert">
-        {{ old('message') }}
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
     </div>
-@endif
+    @endif
 
-<form action="/user/delete" method="POST">
-    <p>Are you sure, that you want to delete your Ferdi account?</p>
-    <p>This will <b>permanently</b> delete all your account settings, services and workspaces.</p>
-    <div>
+    <form action="/user/delete" method="POST">
+      <p>Are you sure, that you want to delete your Ferdi account?</p>
+      <p>This will <b>permanently</b> delete all your account settings, services and workspaces.</p>
+      <div class="pt-8">
         {{ csrfField() }}
         <button style="background-color:#F6416C;margin-bottom:1rem;">Yes, delete account</button>
+      </div>
+    </form>
+
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-gray-500 hover:text-gray-800 mb-3" href="/user/account">Back to My
+        Account</a>
     </div>
-</form>
 
-<div>
-    <a class="button" href="/user/account" style="background-color:#28C76F;">Cancel</a>
+  </div>
+  <script src="/js/transfer.js"></script>
 </div>
-
 </div>
-
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/dashboard/login.edge b/resources/views/dashboard/login.edge
index 16042b3..9b4b52a 100644
--- a/resources/views/dashboard/login.edge
+++ b/resources/views/dashboard/login.edge
@@ -1,42 +1,64 @@
-@layout('layouts.main')
+@layout('layouts.v2')
 
 @section('content')
-<h2>Login</h2>
-@if(flashMessage('error'))
-    <div class="alert">
-        {{ flashMessage('error') }} 
+<div class="w-screen h-screen bg-purple-200 flex items-center justify-center">
+<form class="w-full max-w-sm bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+  action="{{ route('login') }}" method="POST">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Login
+    </h1>
+
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
     </div>
-@endif
-@if(old('message'))
-    <div class="alert">
-        {{ old('message') }}
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
     </div>
-@endif
-<form action="/user/login" method="POST">
+    @endif
+
     {{ csrfField() }}
-    <div>
-        <label>E-Mail</label>
-        <div>
-            <input type="email" value="{{ old('mail', '') }}" placeholder="E-Mail" name="mail">
-        </div>
-    </div>
-    <div>
-        <label>Password</label>
-        <div>
-            <input type="password" placeholder="*********" name="password">
-        </div>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+        E-Mail
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="mail"
+        name="mail"
+        type="text"
+        placeholder="E-Mail"
+        value="{{ old('mail', '') }}"
+        required>
     </div>
-    <div>
-        <button>Login</button>
-        By logging in, you accept the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy policy</a>. This website uses cookies to log you in.
-
+    <div class="mb-6">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Password
+      </label>
+      <input
+        class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+        id="password"
+        type="password"
+        name="password"
+        placeholder="*****"
+        autocomplete="current-password"
+        required>
     </div>
-    <div>
-        <p>Not a member yet? Register in the Ferdi app or <a href="../import">import your Franz account</a>.</p>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+      type="submit">
+      Sign In
+    </button>
+    <p class="text-gray-600 text-sm text-center py-2">
+      By logging in, you accept the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy policy</a>. This website uses cookies to log you in.
+    </p>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="../import">
+        Import your Franz account
+      </a>
     </div>
 </form>
-<br />
-
 </div>
-
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/dashboard/transfer.edge b/resources/views/dashboard/transfer.edge
index 94efeb0..d2feedc 100644
--- a/resources/views/dashboard/transfer.edge
+++ b/resources/views/dashboard/transfer.edge
@@ -1,52 +1,55 @@
-@layout('layouts.main')
+@layout('layouts.v2')
 
 @section('content')
-<h2>Import/Export data from another Ferdi server</h2>
-@if(flashMessage('error'))
-    <div class="alert">
-        {{ flashMessage('error') }} 
+<div class="w-screen h-screen bg-purple-200 flex items-center justify-center">
+  <div class="w-full max-w-lg bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">Import/Export data from another Ferdi server</h1>
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
     </div>
-@endif
-@if(old('message'))
-    <div class="alert">
-        {{ old('message') }}
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
     </div>
-@endif
-@if(flashMessage('notification'))
-    <div class="alert">
-        {{ flashMessage('notification.message') }}
+    @endif
+    @if(flashMessage('notification'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('notification.message') }}
     </div>
-@endif
-@if(success === true)
-    <div class="alert" style="background-color:#28C76F;">
-        Sucessfully imported your account data
+    @endif
+    @if(success === true)
+    <div class="bg-green-100 border-l-4 border-green-500 text-white p-4" style="background-color:#28C76F;">
+      Sucessfully imported your account data
     </div>
-@endif
+    @endif
 
-<h3>Import data</h3>
-<div>
-  <label>Account data</label>
-  <div>
-    <input type="file" name="file" id="file" value="" accept=".json,.ferdi-data" required>
-  </div>
-</div>
-
-<form action="/user/transfer" method="POST">
-    {{ csrfField() }}
-    <input type="hidden" name="file" id="fileoutput" value="">
+    <h3 class="text-gray-600 text-xl">Import data</h3>
     <div>
-        <button style="background-color:#28C76F;margin-bottom:1rem;" id="submit" disabled>Import data</button>
+      <div>
+        <input type="file" name="file" id="file" value="" accept=".json,.ferdi-data" required>
+      </div>
     </div>
-</form>
 
-<h3>Export data</h3>
-<a class="button" style="background-color:#28C76F;margin-bottom:1rem;" href="/user/export">Export data</a>
+    <form action="/user/transfer" method="POST">
+      {{ csrfField() }}
+      <input type="hidden" name="file" id="fileoutput" value="">
+      <div>
+        <button style="background-color:#28C76F;margin-bottom:1rem;" id="submit" disabled>Import data</button>
+      </div>
+    </form>
 
-<div>
-  <a class="button" href="/user/account">Back to my account</a>
-</div>
+    <h3 class="text-gray-600 text-xl">Export data</h3>
+    <a class="button" style="background-color:#28C76F;margin-bottom:1rem;" href="/user/export">Export data</a>
 
-</div>
-<script src="/js/transfer.js"></script>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-gray-500 hover:text-gray-800 mb-3" href="/user/account">Back to My
+        Account</a>
+    </div>
 
-@endsection
\ No newline at end of file
+  </div>
+  <script src="/js/transfer.js"></script>
+</div>
+</div>
+@endsection
-- 
cgit v1.2.3-70-g09d2