Restyle login and signup screens

app/assets/stylesheets/application.tailwind.css

@@ -43,11 +43,9 @@
 
 @import 'actiontext.css';
 
-/* @layer components {
-  trix-toolbar .trix-button {
-    @apply bg-midnight-200;
-    @apply text-midnight-800;
-  }
-} */
+
+input[type="email"], input[type="password"], input[type="text"] {
+  @apply border-gray-200 rounded-md bg-midnight-200;
+}
 
 

app/components/login/action_arrow_component.rb

@@ -3,11 +3,7 @@
 module Login
   class ActionArrowComponent < ApplicationComponent
     def call
-      inline_svg(
-        'hero/20/arrow-sm-right.svg',
-        class: 'flex-shrink-0 ml-1 mt-px group-hover:translate-x-1 group-active:translate-x-1 transition duration-300',
-        aria_hidden: true
-      )
+      heroicon @icon, options: { class: 'flex-shrink-0 ml-1 mt-px group-hover:translate-x-1 group-active:translate-x-1 transition duration-300', aria_hidden: true }
     end
   end
 end

app/components/login/button_component.rb

@@ -3,7 +3,7 @@
 module Login
   class ButtonComponent < ActionButtonComponent
     def initialize(form:)
-      super(form:, type: :submit, color: :primary, size: :lg, class: 'w-full !py-3')
+      super(form:, type: :submit, color: :primary, size: :lg, class: 'w-full !py-3 mt-5 bg-midnight-600')
     end
   end
 end

app/components/login/devise_footer_link_component.rb

@@ -5,15 +5,14 @@ class DeviseFooterLinkComponent < ApplicationComponent
     include CssClasses
 
     DEFAULT_CLASSES = %w[
-      font-medium
       inline-block
       px-2 py-1
       rounded
-      text-gray-500 text-sm
+      text-midnight-800 text-sm
       transition
 
-      active:bg-gray-300 active:text-gray-700
-      hover:bg-gray-200 hover:text-gray-700
+      active:bg-midnight-600 active:text-midnight-800
+      hover:bg-midnight-600 hover:text-midnight-800
     ].freeze
 
     def initialize(path:, **attributes)

app/components/login/floating_field_component.html.erb

@@ -1,9 +1,8 @@
-<div class="floating-label-field">
+<div class="floating-label-field flex flex-col">
+  <%= @form.label @name, @title, class: "pb-2 text-midnight-400 text-sm transition-all" %>
   <% if field? %>
     <%= field %>
   <% else %>
     <%= @form.public_send("#{@type}_field", @name, placeholder: @title, class: "peer", **@field_attributes) %>
   <% end %>
-
-  <%= @form.label @name, @title, class: "absolute bg-white px-1.5 left-3 -top-2.5 text-gray-500 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3.5 peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text" %>
 </div>

app/components/login/header_component.html.erb

@@ -1,6 +1,6 @@
-<div class="mb-6 -mt-4 text-center">
-  <h2 class="font-semibold pb-2 text-2xl mr-auto"><%= @title %></h2>
+<div class="mb-6 -mt-4">
+  <h2 class="pb-2 text-xl mr-auto text-midnight-800"><%= @title %></h2>
   <% unless @subtext.nil? %>
-    <p class="text-center mx-6 leading-relaxed text-gray-500"><%= @subtext %></p>
+    <p class="leading-relaxed text-midnight-400"><%= @subtext %></p>
   <% end %>
 </div>

app/controllers/saved_scenarios_controller.rb

@@ -1,5 +1,19 @@
 class SavedScenariosController < ApplicationController
-  before_action :set_saved_scenario, only: %i[ show edit update destroy publish unpublish]
+  load_resource only: %i[discard undiscard publish unpublish]
+  load_and_authorize_resource only: %i[show new create edit update destroy]
+  # before_action :set_saved_scenario, only: %i[ show edit update destroy publish unpublish]
+
+  before_action only: %i[load] do
+    authorize!(:read, @saved_scenario)
+  end
+
+  before_action only: %i[publish unpublish] do
+    authorize!(:update, @saved_scenario)
+  end
+
+  before_action only: %i[discard undiscard] do
+    authorize!(:destroy, @saved_scenario)
+  end
 
   # GET /saved_scenarios or /saved_scenarios.json
   def index
@@ -91,6 +105,36 @@ def unpublish
     redirect_to saved_scenario_path(@saved_scenario)
   end
 
+  # Soft-deletes the scenario so that it no longer appears in listings.
+  #
+  # PUT /saved_scenarios/:id/discard
+  def discard
+    unless @saved_scenario.discarded?
+      @saved_scenario.discarded_at = Time.zone.now
+      @saved_scenario.save(touch: false)
+
+      flash.notice = t('scenario.trash.discarded_flash')
+      flash[:undo_params] = [undiscard_saved_scenario_path(@saved_scenario), { method: :put }]
+    end
+
+    redirect_back(fallback_location: saved_scenarios_path)
+  end
+
+  # Removes the soft-deletes of the scenario.
+  #
+  # PUT /saved_scenarios/:id/undiscard
+  def undiscard
+    unless @saved_scenario.kept?
+      @saved_scenario.discarded_at = nil
+      @saved_scenario.save(touch: false)
+
+      flash.notice = t('scenario.trash.undiscarded_flash')
+      flash[:undo_params] = [discard_saved_scenario_path(@saved_scenario), { method: :put }]
+    end
+
+    redirect_back(fallback_location: discarded_saved_scenarios_path)
+  end
+
   private
     # Use callbacks to share common setup or constraints between actions.
     def set_saved_scenario

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -43,7 +43,7 @@
 <body>
   <div class="container">
     <div class="header">
-        <img src="<%= asset_path('inverted_logo.png') %>" alt="Logo" class="logo">
+        <img src="<%= asset_path('header/logo-round.png') %>" alt="Logo" class="logo">
         <h1>Welcome</h1>
         <p>You must confirm your account through the link below to finish setting up.</p>
     </div>

app/views/devise/registrations/new.html.erb

@@ -18,7 +18,7 @@
   </div>
 
   <div class="mb-4">
-    <%= render(Login::FloatingFieldComponent.new(form: f, name: :password, title: t('activerecord.attributes.user.password'))) do |c| %>
+    <%= render(Login::FloatingFieldComponent.new(form: f, name: :password, type: :password, title: t('activerecord.attributes.user.password'))) do |c| %>
       <% c.field do %>
         <%= render(PasswordFieldComponent.new(form: f, name: :password, autocomplete: "new-password", class: "peer mb-1", placeholder: t('activerecord.attributes.user.password'), required: true)) %>
       <% end %>

app/views/devise/sessions/new.html.erb

@@ -12,13 +12,13 @@
   </div>
 
   <div class="mb-4">
-    <%= render(Login::FloatingFieldComponent.new(form: f, name: :password, title: t('activerecord.attributes.user.password'))) do |c| %>
+    <%= render(Login::FloatingFieldComponent.new(form: f, name: :password, type: :password, title: t('activerecord.attributes.user.password'))) do |c| %>
       <% c.field do %>
         <%= render(PasswordFieldComponent.new(form: f, name: :password, autocomplete: "current-password", class: "peer mb-1", placeholder: t('activerecord.attributes.user.password'), required: true)) %>
       <% end %>
     <% end %>
 
-    <%= link_to t('.forgot_password'), new_password_path(resource_name), class: "font-medium p-1 -m-1 mt-0 inline-block" %>
+    <%= link_to t('.forgot_password'), new_password_path(resource_name), class: "text-sm p-1 -m-1 mt-2 inline-block hover:underline" %>
   </div>
 
   <% if devise_mapping.rememberable? %>
@@ -27,8 +27,8 @@
 
   <%= render(Login::ButtonComponent.new(form: f).with_content(t('.submit'))) %>
 
-  <p class="mt-4 text-gray-600 text-center">
+  <p class="mt-5 text-midnight-800 text-center">
     <%= t('.dont_have_account') %>
-    <%= render(Login::DeviseFooterLinkComponent.new(path: new_registration_path(resource_name), class: 'text-midnight-600 hover:text-midnight-800 active:text-midnight-800').with_content(t('.sign_up'))) %>
+    <%= render(Login::DeviseFooterLinkComponent.new(path: new_registration_path(resource_name), class: 'text-midnight-900 hover:underline active:underline').with_content(t('.sign_up'))) %>
   </p>
 <% end %>

app/views/layouts/login.html.erb

@@ -15,38 +15,37 @@
     <%= javascript_importmap_tags "identity" %>
   </head>
 
-  <body class="with-bg guest text-sm">
+  <body class="guest">
     <div class="min-h-screen flex items-center justify-center">
       <div class="container mx-auto">
-        <main class="w-[30rem] mb-24 mx-auto mt-12 bg-white rounded-lg shadow-xl">
+        <main class="w-[30rem] mb-24 mx-auto mt-12 bg-midnight-300 rounded-lg shadow-xl">
           <div
             class="
-              bg-gray-500
-              bg-gradient-to-b
-              from-[rgba(255,255,255,0.2)]
-              to-transparent
-              flex
-              items-center
-              justify-center
+              px-5
               py-4
+              pt-6
               rounded-t-md
+              text-midnight-800
+              logo
+              inline-block
+              ml-5
             "
           >
-            <%= image_tag 'logo.png', height: 30, width: 284, alt: '' %>
+            <%= image_tag 'header/logo-round.png', class: 'h-8 inline mb-1 mr-2 hover:animate-spin'%>
+            <span> Energy Transition Model </span>
           </div>
           <div class="p-12">
             <%= yield(:header) %>
 
             <% if flash[:notice].present? %>
               <p
                 class="
-                  bg-green-100
                   border
-                  border-green-300
+                  border-gray-200
                   p-2
                   rounded
                   font-medium
-                  text-green-800
+                  text-midnight-980
                   mt-4
                   mb-8
                   text-center