more styling

app/views/devise/shared/_error_messages.html.erb

@@ -1,15 +1,17 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" class="alert alert-danger" data-turbo-cache="false">
+  <div id="error_explanation" class="alert alert-danger alert-dismissible fade show shadow-lg" role="alert" data-turbo-cache="false">
     <h4 class="alert-heading">
       <%= I18n.t("errors.messages.not_saved",
                  count: resource.errors.count,
                  resource: resource.class.model_name.human.downcase)
        %>
     </h4>
-    <ul class="mb-0">
+    <hr>
+    <ul class="mb-0 list-unstyled">
       <% resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
+        <li><i class="bi bi-exclamation-circle-fill me-2"></i><%= message %></li>
       <% end %>
     </ul>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
 <% end %>

app/views/devise/shared/_links.html.erb

@@ -1,27 +1,34 @@
-<div class="list-group">
+<div class="list-group rounded shadow-lg p-3">
   <%- if controller_name != 'sessions' %>
-    <%= link_to "Log in", new_session_path(resource_name), class: "list-group-item list-group-item-action" %>
+    <%= link_to "Log in", new_session_path(resource_name), class: "list-group-item list-group-item-action bg-light" %>
   <% end %>
 
   <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-    <%= link_to "Sign up", new_registration_path(resource_name), class: "list-group-item list-group-item-action" %>
+    <%= link_to "Sign up", new_registration_path(resource_name), class: "list-group-item list-group-item-action bg-light" %>
   <% end %>
 
   <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-    <%= link_to "Forgot your password?", new_password_path(resource_name), class: "list-group-item list-group-item-action" %>
+    <%= link_to "Forgot your password?", new_password_path(resource_name), class: "list-group-item list-group-item-action bg-light" %>
   <% end %>
 
   <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
-    <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "list-group-item list-group-item-action" %>
+    <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "list-group-item list-group-item-action bg-light" %>
   <% end %>
 
   <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
-    <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: "list-group-item list-group-item-action" %>
+    <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: "list-group-item list-group-item-action bg-light" %>
   <% end %>
 
   <%- if devise_mapping.omniauthable? %>
-    <%- resource_class.omniauth_providers.each do |provider| %>
-      <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), method: :post, class: "btn btn-primary mt-2", data: { turbo: false } %>
-    <% end %>
+    <div class="list-group-item bg-light">
+      <div class="d-flex justify-content-between">
+        <span>Sign in with:</span>
+        <div>
+          <%- resource_class.omniauth_providers.each do |provider| %>
+            <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), method: :post, class: "btn btn-primary btn-sm me-2", data: { turbo: false } %>
+          <% end %>
+        </div>
+      </div>
+    </div>
   <% end %>
 </div>

app/views/layouts/application.html.erb

@@ -38,10 +38,10 @@
       <ul class="navbar-nav ml-auto">
         <% if user_signed_in? %>
           <li class="nav-item px-2">
-            <%= link_to 'Settings', edit_settings_path, class: 'nav-link' %>
+            <%= link_to 'Links', links_path, class: 'nav-link' %>
           </li>
           <li class="nav-item px-2">
-            <%= link_to 'Links', links_path, class: 'nav-link' %>
+            <%= link_to 'Settings', edit_settings_path, class: 'nav-link' %>
           </li>
           <li class="nav-item px-2">
             <%= link_to 'Sign out', destroy_user_session_path, method: :delete, class: 'nav-link' %>

app/views/links/_form.html.erb

@@ -1,29 +1,37 @@
 <%= form_with(model: link, html: { class: 'needs-validation', novalidate: '' }) do |form| %>
-  <div class="form-group">
-    <%= form.label :links_group %>
-    <%= form.text_field :links_group, class: 'form-control' %>
+  <div class="row">
+    <div class="col-md-6 mb-3">
+      <%= form.label :links_group, class: 'form-label' %>
+      <%= form.text_field :links_group, class: 'form-control', placeholder: 'Group' %>
+    </div>
+    <div class="col-md-6 mb-3">
+      <%= form.label :links_url, class: 'form-label' %>
+      <%= form.text_field :links_url, class: 'form-control', placeholder: 'URL' %>
+    </div>
   </div>
-  <div class="form-group">
-    <%= form.label :links_url %>
-    <%= form.text_field :links_url, class: 'form-control' %>
+  <div class="row">
+    <div class="col-md-6 mb-3">
+      <%= form.label :links_display_name, class: 'form-label' %>
+      <%= form.text_field :links_display_name, class: 'form-control', placeholder: 'Display Name' %>
+    </div>
+    <div class="col-md-6 mb-3">
+      <%= form.label :links_icon, class: 'form-label' %>
+      <%= form.text_field :links_icon, class: 'form-control', placeholder: 'Icon' %>
+    </div>
   </div>
-  <div class="form-group">
-    <%= form.label :links_display_name %>
-    <%= form.text_field :links_display_name, class: 'form-control' %>
+  <div class="row">
+    <div class="col-md-6 mb-3 form-check">
+      <%= form.check_box :links_enabled, class: 'form-check-input' %>
+      <%= form.label :links_enabled, class: 'form-check-label' %> Enabled
+    </div>
+    <div class="col-md-6 mb-3 form-check">
+      <%= form.check_box :links_pinned, class: 'form-check-input' %>
+      <%= form.label :links_pinned, class: 'form-check-label' %> Pinned
+    </div>
   </div>
-  <div class="form-group">
-    <%= form.label :links_icon %>
-    <%= form.text_field :links_icon, class: 'form-control' %>
-  </div>
-  <div class="form-check">
-    <%= form.check_box :links_enabled, class: 'form-check-input' %>
-    <%= form.label :links_enabled, class: 'form-check-label' %>
-  </div>
-  <div class="form-check">
-    <%= form.check_box :links_pinned, class: 'form-check-input' %>
-    <%= form.label :links_pinned, class: 'form-check-label' %>
-  </div>
-  <div class="form-group">
-    <%= form.submit class: 'btn btn-primary' %>
+  <div class="row">
+    <div class="col-12">
+      <%= form.submit 'Save', class: 'btn btn-primary mb-3' %>
+    </div>
   </div>
 <% end %>

app/views/links/edit.html.erb

@@ -1,4 +1,12 @@
-<div class="container">
-  <h1 class="display-4">Edit Link</h1>
-  <%= render 'form', link: @link %>
-</div>
+<div class="container mt-4">
+  <div class="row">
+    <div class="col-12 col-md-8 mx-auto">
+      <h3 class="mb-3 text-center">Edit Link</h3>
+      <div class="card">
+        <div class="card-body">
+          <%= render 'form', link: @link %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/links/new.html.erb

@@ -1,4 +1,12 @@
-<div class="container">
-  <h1 class="display-4">New Link</h1>
-  <%= render 'form', link: @link %>
-</div>
+<div class="container mt-4">
+  <div class="row">
+    <div class="col-12 col-md-8 mx-auto">
+      <h3 class="mb-3 text-center">New Link</h3>
+      <div class="card">
+        <div class="card-body">
+          <%= render 'form', link: @link %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/settings/edit.html.erb

@@ -1,6 +1,17 @@
 <%= form_with(model: @user, url: settings_path, local: true, html: { class: 'needs-validation', novalidate: '' }) do |f| %>
-  <%= render 'shared/user_fields', f: f %>
-  <div class="form-group">
-    <%= f.submit 'Update Settings', class: 'btn btn-primary' %>
+  <div class="container mt-4">
+    <div class="row">
+      <div class="col-12 col-md-8 mx-auto">
+        <h3 class="mb-3 text-center">Update Settings</h3>
+        <div class="card">
+          <div class="card-body">
+            <%= render 'shared/user_fields', f: f %>
+          </div>
+          <div class="card-footer text-center">
+            <%= f.submit 'Update Settings', class: 'btn btn-primary' %>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 <% end %>