Refine logo 🎨 (#45)

Author: markets

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.12.2]
+
+- Refine logo and UI (#45)
+
 ## [0.12.1]
 
 - Sprockets v4 fixes (#44)
@@ -131,6 +135,7 @@ All notable changes to this project will be documented in this file.
 
 - First real usable release :tada:
 
+[0.12.2]: https://github.com/markets/maily/compare/v0.12.1...v0.12.2
 [0.12.1]: https://github.com/markets/maily/compare/v0.12.0...v0.12.1
 [0.12.0]: https://github.com/markets/maily/compare/v0.11.0...v0.12.0
 [0.11.0]: https://github.com/markets/maily/compare/v0.10.1...v0.11.0

app/assets/images/maily/logo.png

@@ -1,6 +1,5 @@
 $blue: #59abc6;
-$red: #a94442;
 $grey: #ccc;
 $darkgrey: #666;
-$textColor: #444;
+$textColor: #333;
 $linkColor: $blue;

app/assets/stylesheets/maily/_variables.scss

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:light");
-
 @import "maily/variables";
 
 /* Body */
@@ -23,19 +21,17 @@ input {
   font-family: inherit;
   height: 1.2em;
   border: solid 1px $grey;
-  border-radius: 2px;
+  border-radius: 6px;
   background: #fff;
   line-height: 1;
+  padding-left: 0.5em;
 }
 
-::-webkit-input-placeholder {
-  padding: 0 .2em;
-  vertical-align: bottom;
+::-webkit-input-placeholder, ::-moz-placeholder {
   font-weight: 300;
+  font-size: 0.8em;
+  color: red;
 }
-:-moz-placeholder { font-size: 0.6em; }
-::-moz-placeholder { font-size: 0.6em; }
-:-ms-input-placeholder { font-size: 0.6em; }
 
 /* Header */
 header.header, footer.footer {
@@ -47,27 +43,31 @@ header.header, footer.footer {
 }
 
 header.header {
-  padding: 1em;
+  padding: 0.6em;
   top: 0;
   box-shadow: 0 .0625em .3125em rgba(0,0,0, .15);
 
   .logo_link {
-    color: $textColor;
-    font: 400 2em/1 'Josefin Sans';
-    margin-left: 10px;
+    margin-left: 1em;
 
-    img, span {
-      vertical-align: text-bottom;
+    img {
+      height: 45px;
     }
   }
+
+  .back_to_app {
+    float: right;
+    margin-right: 2em;
+    margin-top: 1em;
+  }
 }
 
 /* Footer */
 footer.footer {
   padding: 0 1em;
   bottom: 0;
   box-shadow: 0 -.0625em .3125em rgba(0,0,0, .15);
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-family: inherit;
   font-size: .9em;
 }
 
@@ -110,6 +110,8 @@ footer.footer {
 
     li.languages {
       float: right;
+
+      a { font-size: 0.9em; }
     }
   }
 
@@ -175,7 +177,7 @@ footer.footer {
       padding-top: 1em;
       border: none;
       border-top: solid 1px $grey;
-      border-radius: 2px;
+      border-radius: 3px;
       min-height: 100px;
     }
   }
@@ -186,6 +188,7 @@ footer.footer {
   }
 
   .button {
+    cursor: pointer;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     padding: 0;
@@ -262,19 +265,9 @@ aside.sidebar {
           text-decoration: none;
           font-size: .9em;
 
-          &.selected_mail {
+          &:hover, &.selected_mail {
             color: darken($linkColor, 20%);
             font-weight: bold;
-
-            &:before {
-              content: "\003E";
-              font-weight: bolder;
-              font-size: 1.2em;
-              margin-right: 2px;
-            }
-          }
-          &:hover {
-            color: darken($linkColor, 20%);
           }
         }
       }
@@ -287,12 +280,6 @@ aside.sidebar {
   border-radius: 3px;
   padding: 16px;
   margin-bottom: 1.1em;
-}
-.alert-warning {
-  color: $red;
-  background-color: lighten($red, 40%);
-}
-.alert-success {
   color: #fff;
   background-color: darken($blue, 20%);
 }
@@ -302,4 +289,4 @@ img.icon {
   width: 20px;
   font-size: .9em;
   vertical-align: bottom;
-}
+}

app/assets/stylesheets/maily/application.scss

@@ -1,7 +1,7 @@
 <% if flash[:alert].present? %>
-  <div class="alert alert-warning"><%= flash[:alert].html_safe %></div>
+  <div class="alert"><%= flash[:alert].html_safe %></div>
 <% end %>
 
 <% if flash[:notice].present? %>
-  <div class="alert alert-success"><%= flash[:notice].html_safe %></div>
-<% end %>
+  <div class="alert"><%= flash[:notice].html_safe %></div>
+<% end %>

app/views/maily/shared/_flash_messages.html.erb

@@ -1,6 +1,9 @@
 <header class="header">
   <a href="<%= root_path %>" class="logo_link">
-    <%= image_tag 'maily/logo.png', align: 'center', width: 40 %>
-    <span>Maily</span>
+    <%= image_tag 'maily/logo.png' %>
+  </a>
+
+  <a href="<%= main_app.root_path %>" class="back_to_app">
+    Back to app
   </a>
 </header>

app/views/maily/shared/_header.html.erb

@@ -1,3 +1,3 @@
 module Maily
-  VERSION = "0.12.1"
+  VERSION = "0.12.2"
 end

lib/maily/version.rb

@@ -1,56 +1,3 @@
 Dummy::Application.routes.draw do
-  # The priority is based upon order of creation: first created -> highest priority.
-  # See how all your routes lay out with "rake routes".
-
-  # You can have the root of your site routed with "root"
-  # root 'welcome#index'
-
-  # Example of regular route:
-  #   get 'products/:id' => 'catalog#view'
-
-  # Example of named route that can be invoked with purchase_url(id: product.id)
-  #   get 'products/:id/purchase' => 'catalog#purchase', as: :purchase
-
-  # Example resource route (maps HTTP verbs to controller actions automatically):
-  #   resources :products
-
-  # Example resource route with options:
-  #   resources :products do
-  #     member do
-  #       get 'short'
-  #       post 'toggle'
-  #     end
-  #
-  #     collection do
-  #       get 'sold'
-  #     end
-  #   end
-
-  # Example resource route with sub-resources:
-  #   resources :products do
-  #     resources :comments, :sales
-  #     resource :seller
-  #   end
-
-  # Example resource route with more complex sub-resources:
-  #   resources :products do
-  #     resources :comments
-  #     resources :sales do
-  #       get 'recent', on: :collection
-  #     end
-  #   end
-
-  # Example resource route with concerns:
-  #   concern :toggleable do
-  #     post 'toggle'
-  #   end
-  #   resources :posts, concerns: :toggleable
-  #   resources :photos, concerns: :toggleable
-
-  # Example resource route within a namespace:
-  #   namespace :admin do
-  #     # Directs /admin/products/* to Admin::ProductsController
-  #     # (app/controllers/admin/products_controller.rb)
-  #     resources :products
-  #   end
+  root "welcome#index"
 end