Added flash notification and header styling

app/assets/javascripts/application.js.coffee

@@ -26,4 +26,5 @@ $ ->
         $wrapper.removeClass 'disabled'
 
     $select.trigger 'DOMSubtreeModified'
-    
+
+  $('#notification').delay(3000).fadeOut()    

app/assets/stylesheets/components/_flashes.scss

@@ -62,4 +62,51 @@ div#errors {
       }
     }
   }
+}
+
+/*
+  Banner flash messages
+*/
+
+#notification {
+  position: absolute;
+  margin: 0 auto;
+  left: 50%;
+  top: 0;
+
+  .message {
+    background: image-url('layout/flash-notice-background.png');
+    position: relative;
+    width: 730px;
+    height: 60px;
+    left: -50%;
+    text-align: center;
+    font-family: $header-font-family;
+    font-size: 22px;
+    color: white;
+    line-height: 45px;
+    padding: 0 100px;
+    z-index: 2;
+
+    &:before {
+      background: image-url('layout/flash-notice-icon.png');
+      content: '';
+      display: block;
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      top: 5px;
+      left: 60px;
+    }
+
+    &.warning,
+    &.error,
+    &.alert {
+      background: image-url('layout/flash-error-background.png');
+
+      &:before {
+        background: image-url('layout/flash-error-icon.png');
+      }
+    }
+  }
 }

app/assets/stylesheets/components/_forms.scss

@@ -298,6 +298,28 @@ form.square {
   }
 }
 
+/*
+  Dark Forms
+*/
+
+form.dark {
+
+  input[type=text],
+  input[type=password] {
+    font-family: $header-font-family;
+    border-radius: 10px;
+    box-shadow: inset 3px 3px 5px 0px transparentize(black, 0.5);
+    border: 1px solid transparentize(#5a8da3, 0.5);
+    background: transparentize(black, 0.5);
+    color: white;
+
+    &:hover,
+    &:focus {
+      border: 1px solid transparentize(#5a8da3, 0.5);
+    }
+  }
+}
+
 form.search {
   margin-bottom: 10px;
 

app/assets/stylesheets/layout/_body.scss

@@ -44,7 +44,7 @@ body#tinymce {
 
 #main {
   @include span-columns(9 of 12);
-  padding: 20px 25px 20px 15px;
+  padding: 20px 25px 20px 10px;
 
   &.no-body {
     box-shadow: none;

app/assets/stylesheets/layout/_footer.scss

@@ -1,4 +1,4 @@
-.footer {
+footer.footer {
   $footer-link-color: #5a5a5a;
 
   background: image-url('layout/footer-background.png');

app/assets/stylesheets/layout/_header.scss

@@ -6,7 +6,7 @@ header .banner {
   height: 125px;
 
   #logo {
-    @include span-columns(9 of 12);
+    @include span-columns(7 of 12);
     min-height: 180px;
     position: relative;
 
@@ -20,11 +20,20 @@ header .banner {
   }
 
   #authentication {
-    @include span-columns(3 of 12);
+    @include span-columns(5 of 12);
     padding: 30px 0;
+    padding-top: 50px;
     color: white;
     line-height: 16px;
 
+    .fields {
+      input[type=text],
+      input[type=password] {
+        text-align: right;
+        margin-bottom: 3px;
+      }
+    }
+
     .logged {
       position: relative;
     }
@@ -84,6 +93,7 @@ header .banner {
         text-align: center;
         margin: 0 5px;
       }
+
     }
 
     .avatar {
@@ -104,5 +114,46 @@ header .banner {
       height: 75px;
       width: 75px;
     }
+
+    .buttons {
+      @include span-columns(12);
+      font-family: $header-font-family;
+      text-align: right;
+      text-transform: uppercase;
+      font-size: 12px;
+
+      .login,
+      .register {
+        @include span-columns(6);
+      }
+
+      .login input {
+        background: none;
+        border: 0;
+        font-family: $header-font-family;
+        color: #73d5f7;
+        font-size: 14px;
+        padding: 0;
+        text-transform: uppercase;
+      }
+
+      .register a {
+        float: right;
+        display: block;
+        clear: both;
+      }
+    }
+  }
+
+  &.authenticated {
+
+    #logo {
+      @include span-columns(9 of 12);
+    }
+
+    #authentication {
+      @include span-columns(3 of 12);
+      padding: 30px 0;
+    }
   }
 }

app/assets/stylesheets/layout/_navigation.scss

@@ -25,12 +25,14 @@ ul.navigation {
   list-style: none;
   float: right;
   max-width: $max-width;
-  max-height: $navigation-height;
+  max-height: 60px;
   margin-top: 5px;
 
   > li {
     float: left;
     border: none;
+    height: 60px;
+    position: relative;
 
     a {
       font-weight: 400;
@@ -38,8 +40,19 @@ ul.navigation {
       height: $navigation-height;
       line-height: $navigation-height;
       padding: 0 20px;
-      color: #5f5f5f;
       text-transform: uppercase;
+      color: #5f5f5f;
+
+      &:hover,
+      &.active {
+        color: #3dcfff;
+      }
+    }
+
+    > a {
+      width: 100%;
+      float: left;
+      position: relative;
       border-top: 1px solid #54585b;
 
       &:before,
@@ -62,18 +75,11 @@ ul.navigation {
         @include linear-gradient(#54585b, #15181a);
         right: -1px;
       }
-    }
-
-    > a {
-      width: 100%;
-      float: left;
-      position: relative;
-      border-top: 1px solid #266d98;
 
       &:hover,
       &.active {
         @include background-image(radial-gradient(50% -10%, ellipse cover, transparentize(#2abdfb, 0.6), transparent 60%));
-        color: #3dcfff;
+        border-top: 1px solid #266d98;
 
         &:before,
         &:after {
@@ -87,13 +93,15 @@ ul.navigation {
       position: relative;
 
       ul {
+        background: image-url('layout/drop-menu-background.png') top center repeat-y;
+        width: 130px;
         position: absolute;
         box-shadow: $content-shadow;
         visibility: hidden;
         pointer-events: none;
         opacity: 0;
         z-index: 10;
-        top: $navigation-height;
+        top: 60px;
         left: 0;
         min-width: 100%;
         list-style: none;
@@ -104,17 +112,20 @@ ul.navigation {
       &:hover {
 
         ul {
-          display: none;
+          visibility: visible;
           opacity: 1;
           pointer-events: auto;
+          border-radius: $base-border-radius;
 
           li {
             
             a {
               white-space: nowrap;
               display: block;
-              color: $navbar-text;
               padding: 0 20px;
+              line-height: 40px;
+              height: 40px;
+              font-size: 12px;
             }
 
             &:hover a {

app/assets/stylesheets/layout/_sidebar.scss

@@ -86,6 +86,14 @@
   }
 
   .calendar {
+    .widget-content-wrapper {
+      
+    }
+
+    &:before {
+      display: none;
+    }
+
     .entry {
       margin-bottom: 20px;
     }

app/assets/stylesheets/pages/_matches.scss

@@ -109,12 +109,12 @@ div#match {
       }
 
       .score-1 {
-        padding-left: $title-height/6;
+        padding-left: 10px;
         left: 0;
       }
       
       .score-2 {
-        padding-right: $title-height/6;
+        padding-right: 10px;
         right: 0;
       }
     }

app/views/application/_header.html.erb

@@ -1,8 +1,8 @@
 <header>
-  <div class="banner">
+  <div class="banner <%= 'authenticated' if cuser %>">
     <div class="wrapper">
       <div id="logo">
-        <%= link_to image_tag("logo.png"), root_path %>
+        <%= link_to image_tag('logo.png'), root_path %>
       </div>
       <div id="authentication" class="<%= 'admin' if cuser && cuser.admin? %>">
         <% if cuser %>

app/views/application/_messages.html.erb

@@ -1,7 +1,9 @@
 <% [:notice, :success, :error, :warning, :alert].each do |type| %>
   <% if flash.key?(type) %>
-    <div class="flash <%= type %>">
-      <%= flash[type] %>
+    <div id="notification">
+      <div class="message <%= type %>">
+        <%= flash[type] %>  
+      </div>
     </div>
   <% end %>
 <% end %>

app/views/layouts/application.html.erb

@@ -12,12 +12,12 @@
   </head>
   <body>
     <div id="container">
+      <%= render partial: "messages" %>
       <%= render partial: "header" %>
       <%= render partial: "navigation" %>
       <div class="wrapper">
         <div id="content">
           <div id="main" class="<%= yield :main_class %>">
-            <%= render partial: "messages" %>
             <%= yield %>
           </div>
           <div id="sidebar">

app/views/widgets/_login.html.erb

@@ -1,11 +1,15 @@
-<%= form_tag controller: "users", action: "login" do %>
+<%= form_tag({ controller: "users", action: "login" }, { class: 'dark' }) do %>
   <div class="fields">
     <%= text_field "login", "username", placeholder: "Username" %>
     <%= password_field "login", "password", placeholder: "Password" %>
   </div>
-  <div class="controls">  
-    <%= submit_tag t('helpers.submit.user.login') %>
-    <%= link_to t('helpers.submit.user.create'), new_user_path %>
-    <%= link_to t('sessions.form.forgot_password'), "/users/forgot/1", class: "password-reset" %>
+  <div class="buttons">
+    <div class="login">
+      <%= submit_tag t('helpers.submit.user.login') %>
+    </div>
+    <div class="register">
+      <%= link_to t('helpers.submit.user.create'), new_user_path %>
+      <%= link_to t('sessions.form.forgot_password'), "/users/forgot/1", class: "password-reset" %>  
+    </div>
   </div>
 <% end %>