a bit more stylish (#431)

Co-authored-by: Thomas Gaudin <[email protected]>

.rubocop.yml

@@ -27,10 +27,18 @@ Minitest/MultipleAssertions:
   Max: 10
 
 Metrics/MethodLength:
-  Max: 12
+  Max: 15
 
 Metrics/AbcSize:
   Max: 20
 
 Rails/HelperInstanceVariable:
   Enabled: false
+
+# TODO: enable these rules when starting doing i18n
+
+Rails/I18nLocaleTexts:
+  Enabled: false
+
+I18n/RailsI18n/DecorateString:
+  Enabled: false

app/assets/stylesheets/layouts/_header.css

@@ -0,0 +1,55 @@
+header {
+    background-color: var(--primary-700);
+    padding: var(--padding-md);
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--padding-md);
+}
+
+nav ul {
+    list-style: none;
+}
+
+nav li {
+    display: inline-block;
+}
+
+nav a {
+    text-decoration: none;
+    color: var(--primary-200);
+    font-size: var(--text-md);
+}
+
+.logo {
+    font-weight: var(--font-bold);
+    margin-right: calc(2 * var(--padding-md));
+}
+
+.login_button {
+    background-color: var(--primary-600);
+    color: var(--primary-200);
+    border-radius: var(--rounded-lg);
+    letter-spacing: var(--spacing-lg);
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    border: none;
+    font-weight: var(--font-bold);
+    padding: var(--padding-xs) var(--padding-md);
+}
+
+.logout_button {
+    background-color: transparent;
+    color: var(--primary-200);
+    border-radius: var(--rounded-lg);
+    letter-spacing: var(--spacing-lg);
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    border: none;
+    box-shadow: inset 0px 0px 0px 2px var(--primary-200);
+    font-weight: var(--font-bold);
+    padding: var(--padding-xs) var(--padding-md);
+}

app/assets/stylesheets/subscriptions/_subscription.css

@@ -1,6 +1,6 @@
 .subscription {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: auto auto;
     column-gap: calc(var(--padding-md)*2);
 }
 

app/assets/stylesheets/theme/alert.css

@@ -0,0 +1,32 @@
+.alert {
+    border-radius: var(--rounded-lg);
+    border: 2px solid;
+    padding: var(--padding-sm) var(--padding-md);
+    margin: var(--padding-md) 0;
+    display: flex;
+    align-items: center;
+}
+
+.alert svg {
+    padding-right: var(--padding-sm);
+}
+
+.alert-success {
+    border-color: var(--green-300);
+    background-color: var(--green-50);
+    color: var(--green-900);
+}
+
+.alert-success svg {
+    fill: var(--green-700);
+}
+
+.alert-error {
+    border-color: var(--red-300);
+    background-color: var(--red-50);
+    color: var(--red-900);
+}
+
+.alert-error svg {
+    fill: var(--red-700);
+}

app/assets/stylesheets/theme/constants.css

@@ -33,4 +33,12 @@
     --gray-700: rgb(55 65 81);
     --gray-800: rgb(31 41 55);
     --gray-900: rgb(17 24 39);
+    --green-50: #e8f5e9;
+    --green-300: #81c784;
+    --green-700: #388e3c;
+    --green-900: #1b5e20;
+    --red-50: #ffebee;
+    --red-300: #e57373;
+    --red-700: #d32f2f;
+    --red-900: #b71c1c;
 }

app/assets/stylesheets/theme/form.css

@@ -0,0 +1,41 @@
+.form {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--text-md);
+    margin-top: var(--padding-md);
+}
+
+.form div {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--padding-md);
+}
+
+.form label {
+    font-weight: var(--font-medium);
+}
+
+.form input {
+    border: 2px solid var(--primary-500);
+    border-radius: var(--rounded-lg);
+    font-size: var(--text-md);
+    padding: var(--padding-xs);
+    background-color: var(--primary-50);
+}
+
+.form input:focus {
+    border-color: var(--primary-800);
+}
+
+.form div:last-child input[type="submit"] {
+    background-color: var(--primary-600);
+    color: var(--primary-50);
+    border-radius: var(--rounded-lg);
+    letter-spacing: var(--spacing-lg);
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    border: none;
+    font-weight: var(--font-bold);
+    padding: var(--padding-sm) 0;
+    cursor: pointer;
+}

app/assets/stylesheets/users/_user.css

@@ -0,0 +1,8 @@
+.user {
+    display: grid;
+    grid-template-columns: max(20ch) 1fr 1fr auto;
+    column-gap: var(--padding-md);
+    align-items: center;
+    text-decoration: none;
+    color: var(--black);
+}

app/assets/stylesheets/users/index.css

@@ -0,0 +1,14 @@
+.users {
+    list-style: none;
+    font-size: var(--text-md);
+    color: var(--gray-800);
+    font-weight: var(--font-medium);
+    display: grid;
+    row-gap: var(--padding-md);
+    margin-top: var(--padding-md);
+}
+
+.users > * + * {
+    border-top: solid var(--primary-200) 2px;
+    padding-top: var(--padding-md);
+}

app/assets/stylesheets/users/show.css

@@ -7,8 +7,6 @@
 
 .container {
     display: grid;
-    grid-template-columns: repeat(3,1fr);
-    grid-template-rows: repeat(2, auto);
 }
 
 .divider {
@@ -36,7 +34,7 @@
 }
 
 .card-content {
-    grid-column: 2 / 4;
+    grid-column: 2 / 3;
     display: flex;
     flex-direction: row;
     padding-left: 0;
@@ -74,10 +72,10 @@
     grid-template-columns: 1fr 1fr;
     grid-template-rows: repeat(3, 1fr);
     row-gap: var(--padding-xs);
+    column-gap: var(--padding-md);
     font-size: var(--text-md);
     color: var(--gray-800);
     font-weight: var(--font-medium);
-    grid-column: 2 / 3;
 }
 
 .card-machines {

app/assets/stylesheets/utils/_error_messages.css

@@ -0,0 +1,15 @@
+.error_messages {
+    list-style: none;
+}
+
+.form .field_with_errors {
+    margin: 0;
+}
+
+.field_with_errors label {
+    color: var(--red-900);
+}
+
+.field_with_errors input {
+    border-color: var(--red-300);
+}

app/controllers/free_accesses_controller.rb

@@ -17,6 +17,7 @@ def create
     @free_access = @owner.free_accesses.new(free_access_params)
     authorize! :create, @free_access
     if @free_access.save
+      flash[:success] = 'Free access added!'
       redirect_to @owner
     else
       render 'new', status: :unprocessable_entity
@@ -27,6 +28,7 @@ def update
     authorize! :update, @free_access
     owner = @free_access.user
     if @free_access.update(free_access_params)
+      flash[:success] = 'Free access updated!'
       redirect_to owner
     else
       render 'edit', status: :unprocessable_entity
@@ -37,6 +39,7 @@ def destroy
     authorize! :destroy, @free_access
     owner = @free_access.user
     @free_access.destroy
+    flash[:success] = 'Free access deleted!'
     redirect_to owner
   end
 

app/controllers/machines_controller.rb

@@ -24,7 +24,10 @@ def create
     authorize! :create, @machine
     respond_to do |format|
       if @machine.save
-        format.html { redirect_to @owner }
+        format.html do
+          flash[:success] = 'Machine added!'
+          redirect_to @owner
+        end
         format.json { render 'show', status: :created, location: @machine }
       else
         format.html { render 'new', status: :unprocessable_entity }
@@ -38,7 +41,10 @@ def update
     owner = @machine.user
     respond_to do |format|
       if @machine.update(machine_params)
-        format.html { redirect_to owner }
+        format.html do
+          flash[:success] = 'Machine updated!'
+          redirect_to owner
+        end
         format.json { render 'show', status: :ok, location: @machine }
       else
         format.html { render 'edit', status: :unprocessable_entity }
@@ -52,7 +58,10 @@ def destroy
     owner = @machine.user
     @machine.destroy
     respond_to do |format|
-      format.html { redirect_to owner }
+      format.html do
+        flash[:success] = 'Machine deleted!'
+        redirect_to owner
+      end
       format.json { head :no_content }
     end
   end

app/controllers/sessions_controller.rb

@@ -4,11 +4,13 @@ class SessionsController < ApplicationController
   def create
     user = User.upsert_from_auth_hash(request.env['omniauth.auth'])
     log_in user
+    flash[:success] = 'You are now logged in!'
     redirect_to user_path user
   end
 
   def destroy
     log_out
-    redirect_to users_path
+    flash[:success] = 'You are now logged out!'
+    redirect_to root_path
   end
 end

app/controllers/static_pages_controller.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class StaticPagesController < ApplicationController
+  def home; end
+end

app/controllers/subscriptions_controller.rb

@@ -12,6 +12,7 @@ def create
     @subscription = @owner.extend_subscription(duration: Integer(subscription_params[:duration]))
     authorize! :create, @subscription
     if @subscription.save
+      flash[:success] = 'New subscription added!'
       redirect_to @owner
     else
       render 'new', status: :unprocessable_entity
@@ -21,6 +22,7 @@ def create
   def destroy
     authorize! :destroy, @owner.current_subscription
     owner.cancel_current_subscription!
+    flash[:success] = 'Last subscription cancelled!'
     redirect_to owner
   end
 

app/controllers/users_controller.rb

@@ -30,7 +30,10 @@ def create
     authorize! :create, @user
     respond_to do |format|
       if @user.save
-        format.html { redirect_to @user }
+        format.html do
+          flash[:success] = 'User created!'
+          redirect_to @user
+        end
         format.json { render 'show', status: :created, location: @user }
       else
         format.html { render 'new', status: :unprocessable_entity }
@@ -44,7 +47,10 @@ def update
     authorize! :update, @user
     respond_to do |format|
       if @user.update(user_params)
-        format.html { redirect_to @user }
+        format.html do
+          flash[:success] = 'User updated!'
+          redirect_to @user
+        end
         format.json { render 'show', status: :ok, location: @user }
       else
         format.html { render 'edit', status: :unprocessable_entity }
@@ -58,7 +64,10 @@ def destroy
     authorize! :destroy, @user
     @user.destroy
     respond_to do |format|
-      format.html { redirect_to users_url }
+      format.html do
+        flash[:success] = 'User deleted!'
+        redirect_to users_url
+      end
       format.json { head :no_content }
     end
   end