From ac5d0c8cc3ebb947d58b66aa65958883a7c61117 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Thu, 22 Jun 2023 22:50:47 +0300
Subject: [PATCH] update daisyui, fix UI

---
 app/javascript/application.scss               | 14 +++++++++++++-
 app/javascript/form.scss                      | 12 ++++++++++++
 app/views/shared/_navbar.html.erb             |  2 +-
 app/views/shared/_settings_nav.html.erb       |  6 +++---
 app/views/shared/_turbo_modal.html.erb        |  4 ++--
 app/views/storage_settings/_aws_form.html.erb |  2 +-
 app/views/storage_settings/index.html.erb     | 18 ++++++++++--------
 app/views/users/index.html.erb                |  2 +-
 package.json                                  |  2 +-
 yarn.lock                                     |  8 ++++----
 10 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index fd0c7b42..c0c8fd69 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -31,6 +31,18 @@ button[disabled] .enabled {
   display: none;
 }
 
+.input-bordered {
+  @apply border-base-content/20;
+}
+
+.select-bordered {
+  @apply border-base-content/20;
+}
+
+.textarea-bordered {
+  @apply border-base-content/20;
+}
+
 .btn {
   @apply no-animation;
 }
@@ -56,5 +68,5 @@ button[disabled] .enabled {
 }
 
 .base-radio {
-  @apply radio bg-white radio-sm;
+  @apply radio bg-white radio-sm no-animation;
 }
diff --git a/app/javascript/form.scss b/app/javascript/form.scss
index 3e61ae78..a9bac997 100644
--- a/app/javascript/form.scss
+++ b/app/javascript/form.scss
@@ -35,6 +35,18 @@ select:required:invalid {
   @apply text-gray-300;
 }
 
+.input-bordered {
+  @apply border-base-content/20;
+}
+
+.select-bordered {
+  @apply border-base-content/20;
+}
+
+.textarea-bordered {
+  @apply border-base-content/20;
+}
+
 .btn {
   @apply no-animation;
 }
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index ccf06d7f..6760a156 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -10,7 +10,7 @@
         <label tabindex="0" class="cursor-pointer bg-base-content text-purple-300 rounded-full w-8 p-2">
           <span class="text-sm align-text-top"><%= current_user.initials %></span>
         </label>
-        <ul tabindex="0" class="dropdown-content p-2 mt-2 shadow menu bg-base-100 rounded-box whitespace-nowrap">
+        <ul tabindex="0" class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box whitespace-nowrap">
           <li>
             <%= link_to 'Profile', settings_profile_index_path, class: 'text-right' %>
           </li>
diff --git a/app/views/shared/_settings_nav.html.erb b/app/views/shared/_settings_nav.html.erb
index 8d5df4b0..06c1c112 100644
--- a/app/views/shared/_settings_nav.html.erb
+++ b/app/views/shared/_settings_nav.html.erb
@@ -1,7 +1,7 @@
 <menu-active class="block w-full md:w-52">
-  <div class="-ml-3.5">
-    <ul class="menu menu-compact px-2 py-0 space-y-1">
-      <li class="menu-title !pt-0"><span>Settings</span></li>
+  <div class="-ml-6">
+    <ul class="menu">
+      <li class="menu-title py-0"><span>Settings</span></li>
       <li></li>
       <li>
         <%= link_to 'Profile', settings_profile_index_path, class: "text-base hover:bg-base-300" %>
diff --git a/app/views/shared/_turbo_modal.html.erb b/app/views/shared/_turbo_modal.html.erb
index 74fd90f8..00139a5a 100644
--- a/app/views/shared/_turbo_modal.html.erb
+++ b/app/views/shared/_turbo_modal.html.erb
@@ -1,5 +1,5 @@
 <turbo-frame id="modal">
-  <turbo-modal class="modal modal-open items-start">
+  <turbo-modal class="modal modal-open items-start !animate-none">
     <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
     <div class="modal-box pt-4 pb-6 px-6 mt-20">
       <% if local_assigns[:title] %>
@@ -7,7 +7,7 @@
           <span>
             <%= local_assigns[:title] %>
           </span>
-          <a href="#" class="w-8 h-8 flex items-center justify-center text-xl rounded-lg text-center hover:bg-base-300" data-action="click:turbo-modal#close">&times;</a>
+          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
         </div>
       <% end %>
       <div>
diff --git a/app/views/storage_settings/_aws_form.html.erb b/app/views/storage_settings/_aws_form.html.erb
index 12e752fd..338168ab 100644
--- a/app/views/storage_settings/_aws_form.html.erb
+++ b/app/views/storage_settings/_aws_form.html.erb
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="form-control">
-      <%= fff.label :endpoint, class: 'label' %>
+      <%= fff.label :endpoint, 'Endpoint (optional)', class: 'label' %>
       <%= fff.text_field :endpoint, value: configs['endpoint'], type: :url, class: 'base-input' %>
       <label class="label">
         <span class="label-text-alt">For AWS S3 compantiable APIs like Minio.</span>
diff --git a/app/views/storage_settings/index.html.erb b/app/views/storage_settings/index.html.erb
index 6ee4c689..60493964 100644
--- a/app/views/storage_settings/index.html.erb
+++ b/app/views/storage_settings/index.html.erb
@@ -8,15 +8,17 @@
     <% value = @encrypted_config.value || { 'service' => 'disk' } %>
     <% configs = value['configs'] || {} %>
     <%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off', class: 'w-full' } do |f| %>
-      <% options = [['Disk', 'disk'], ['AWS S3', 'aws_s3'], ['Google Cloud', 'google'], ['Azure', 'azure']] %>
+      <% options = [['Disk', 'disk'], ['AWS', 'aws_s3'], ['GCP', 'google'], ['Azure', 'azure']] %>
       <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="block relative">
         <ul class="items-center w-full text-sm font-medium text-gray-900 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">
           <% options.each do |(label, val)| %>
             <li class="w-full border border-neutral-focus rounded-xl hover:bg-neutral hover:text-white">
-              <div class="flex items-center pl-3">
-                <%= f.radio_button :selected, val, checked: value['service'] == val, data: { action: 'change:toggle-visible#trigger' }, class: 'base-radio' %>
-                <%= f.label :selected, label, value: val, class: 'w-full py-3 ml-2 text-sm font-medium' %>
-              </div>
+              <%= f.label :selected, value: val, class: 'w-full py-3 text-sm font-medium flex items-center relative' do %>
+                <%= f.radio_button :selected, val, checked: value['service'] == val, data: { action: 'change:toggle-visible#trigger' }, class: 'base-radio self-start ml-3' %>
+                <span class="absolute text-center left-0 right-0">
+                  <%= label %>
+                </span>
+              <% end %>
             </li>
           <% end %>
         </ul>
@@ -24,13 +26,13 @@
       <disable-hidden id="disk" class="block my-4 <%= 'hidden' if value['service'] != 'disk' %>">
         <%= render "disk_form", f: f %>
       </disable-hidden>
-      <disable-hidden id="aws_s3" class="block my-4 <%= 'hidden' if value['service'] != 'aws_s3' %>">
+      <disable-hidden id="aws_s3" class="block my-4 space-y-4 <%= 'hidden' if value['service'] != 'aws_s3' %>">
         <%= render "aws_form", f: f, configs: configs, value: value %>
       </disable-hidden>
-      <disable-hidden id="google" class="block my-4 <%= 'hidden' if value['service'] != 'google' %>">
+      <disable-hidden id="google" class="block mt-4 space-y-4 mb-8 <%= 'hidden' if value['service'] != 'google' %>">
         <%= render "google_cloud_form", f: f, configs: configs, value: value %>
       </disable-hidden>
-      <disable-hidden id="azure" class="block my-4 <%= 'hidden' if value['service'] != 'azure' %>">
+      <disable-hidden id="azure" class="block mt-4 space-y-4 mb-8 <%= 'hidden' if value['service'] != 'azure' %>">
         <%= render "azure_form", f: f, configs: configs, value: value %>
       </disable-hidden>
       <div class="form-control">
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index ba83585d..ef24ffcb 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -9,7 +9,7 @@
       <% end %>
     </div>
     <div class="overflow-x-auto">
-      <table class="table w-full table-lg rounded-t-2xl overflow-hidden">
+      <table class="table w-full table-lg rounded-b-none overflow-hidden">
         <thead class="bg-base-200">
           <tr class="text-neutral uppercase">
             <th>
diff --git a/package.json b/package.json
index a379fd26..08ff389e 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "compression-webpack-plugin": "10.0.0",
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^5.0.0",
-    "daisyui": "^3.0.19",
+    "daisyui": "^3.1.5",
     "mini-css-extract-plugin": "^2.7.5",
     "postcss": "^8.4.23",
     "postcss-import": "^15.1.0",
diff --git a/yarn.lock b/yarn.lock
index 59f5c6dd..362e97d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2301,10 +2301,10 @@ csstype@^3.1.1:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-daisyui@^3.0.19:
-  version "3.0.19"
-  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-3.0.19.tgz#49ddcb19e51643ee763f1aa346bf51e58c6d3886"
-  integrity sha512-hx3yQ0/Bmn+8OvnA0bayInfu+VjqM3wNNujEaTmnpQRM8p1cwFzcvBXtACNN5gBeEAF18iSBH3drz3wdZ1vCaw==
+daisyui@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-3.1.5.tgz#49cb961d03504beebd238d58f0169dbe81103c95"
+  integrity sha512-3nk5L//IU31ISzsonKEFG8ris8hS/MRAc+PrOTOyRbssjv1fYmNKSdIrOhG6op2ED3RyJL4p6I81JUwd7RWqTw==
   dependencies:
     colord "^2.9"
     css-selector-tokenizer "^0.8"