Merge pull request 'Various UI improvements' (#23) from ux/various_design_changes into master

Reviewed-on: #23

app/assets/stylesheets/layout.scss

@@ -22,20 +22,15 @@
 
       span.project-name {
         display: none;
-        // font-size: .5em;
-        // text-transform: none;
-        // vertical-align: super;
       }
 
-      span.beta {
+      span.icon {
-        font-size: .5em;
+        svg {
-        font-style: italic;
+          height: 1.8rem;
-        text-transform: none;
+          width: auto;
-        vertical-align: super;
+        }
-      }
 
-      span.bolt {
+        margin-right: 0.5rem;
-        color: #ffd000;
       }
     }
 
@@ -123,19 +118,35 @@ main {
     }
   }
 
-  th, td {
-    line-height: 1.5rem;
-    padding-right: 1rem;
-  }
-
   section {
-    border-bottom: 1px dotted #ccc;
     padding-bottom: 3rem;
     margin-bottom: 3rem;
 
-    @include media-max(small) {
+    &:not(:last-of-type) {
-      padding-bottom: 3rem;
+      border-bottom: 1px dotted #ccc;
-      margin-bottom: 3rem;
+    }
+  }
+
+  table {
+    width: 100%;
+
+    th, td {
+      line-height: 1.5rem;
+      padding-right: 1rem;
+
+      &.hide-small {
+        @include media-max(small) {
+          display: none;
+        }
+      }
+    }
+
+    th {
+      color: $text-color-discreet;
+      font-weight: normal;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+      padding-bottom: 0.5rem;
     }
   }
 

app/assets/stylesheets/main_nav.scss

@@ -16,7 +16,7 @@
     @include media-max(large) {
       display: grid;
       grid-template-columns: repeat(1fr);
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 
     li {
@@ -41,6 +41,10 @@
           padding-right: 0;
         }
 
+        @include media-max(small) {
+          font-size: 0.85rem;
+        }
+
         &.active {
           color: $text-color-body;
           border-bottom: 2px solid #ffd000;

app/controllers/security_controller.rb

@@ -0,0 +1,7 @@
+class SecurityController < ApplicationController
+  before_action :require_user_signed_in
+
+  def index
+    @current_section = :security
+  end
+end

app/views/dashboard/index.html.erb

@@ -37,12 +37,3 @@
     </div>
   </div>
 </section>
-
-<section>
-  <h3>Password change</h3>
-  <p>
-    <%= form_with(url: settings_reset_password_path, method: :post) do %>
-      <%= submit_tag("Send me a password reset link") %>
-    <% end %>
-  </p>
-</section>

app/views/invitations/index.html.erb

@@ -29,7 +29,7 @@
     <table>
       <thead>
         <tr>
-          <th>URL</th>
+          <th class="hide-small">ID</th>
           <th>Accepted</th>
           <th>Invited user</th>
         </tr>
@@ -37,7 +37,7 @@
       <tbody>
         <% @invitations_used.each do |invitation| %>
           <tr>
-            <td class="overflow-ellipsis"><%= invitation_url(invitation.token) %></td>
+            <td class="hide-small"><%= invitation.token %></td>
             <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
             <td><%= User.find(invitation.invited_user_id).address %></td>
           </tr>

app/views/layouts/admin.html.erb

@@ -15,9 +15,9 @@
     <div id="wrapper">
       <header>
         <h1>
+          <span class ="icon"><%= render partial: "shared/icons/comet" %></span>
           <span class ="project-name">Kosmos</span>
-          <span class ="site-name">Akkounts</span>
+          <span class ="site-name">Accounts</span>
-          <span class="beta"><span class="bolt">⚡</span> beta</span>
         </h1>
         <% if user_signed_in? %>
           <p class="current-user">

app/views/layouts/application.html.erb

@@ -15,9 +15,9 @@
     <div id="wrapper">
       <header>
         <h1>
+          <span class ="icon"><%= render partial: "shared/icons/comet" %></span>
           <span class ="project-name">Kosmos</span>
-          <span class ="site-name">Akkounts</span>
+          <span class ="site-name">Account</span>
-          <span class="beta"><span class="bolt">⚡</span> beta</span>
         </h1>
         <% if user_signed_in? %>
           <p class="current-user">

app/views/layouts/signup.html.erb

@@ -15,9 +15,9 @@
     <div id="wrapper">
       <header>
         <h1>
+          <span class ="icon"><%= render partial: "shared/icons/comet" %></span>
           <span class ="project-name">Kosmos</span>
           <span class ="site-name">Sign Up</span>
-          <!-- <span class="beta"><span class="bolt">⚡</span> beta</span> -->
         </h1>
         <% if user_signed_in? %>
           <p class="current-user">

app/views/security/index.html.erb

@@ -0,0 +1,12 @@
+<section>
+  <h2>Security</h2>
+</section>
+
+<section>
+  <h3>Password change</h3>
+  <p>
+    <%= form_with(url: settings_reset_password_path, method: :post) do %>
+      <%= submit_tag("Send me a password reset link") %>
+    <% end %>
+  </p>
+</section>

app/views/shared/_main_nav.html.erb

@@ -13,6 +13,10 @@
         <%= link_to "Donations", donations_path,
               class: @current_section == :contributions ? "active" : nil %>
       </li>
+      <li>
+        <%= link_to "Security", security_path,
+              class: @current_section == :security ? "active" : nil %>
+      </li>
     </ul>
   </div>
 </nav>

app/views/shared/icons/_comet.html.erb

@@ -0,0 +1 @@
+<svg id="icon-comet" width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#fff"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#fff" stroke-width=".65365"/></g></svg>

config/routes.rb

@@ -12,6 +12,8 @@ Rails.application.routes.draw do
   get 'settings', to: 'settings#index'
   post 'settings_reset_password', to: 'settings#reset_password'
 
+  get 'security', to: 'security#index'
+
   resources :invitations, only: ['index', 'show', 'create', 'destroy']
 
   namespace :admin do