Merge pull request #169 from joecohens/feature/new-palette-favicon-webicons

Update to new palette and some fixes

app/assets/sass/_palette.scss

@@ -1,23 +1,41 @@
-$green: #2ECC71;
-$dark-green: darken($green, 10%);
+// Theme colours.
+$cachet-base-light: #fff;
+$cachet-base-medium: #f0f3f4;
+$cachet-base-dark: #333;
 
-$blue: #3498db;
-$dark-blue: darken($blue, 10%);
+$cachet-primary: #7ED321;
+$cachet-secondary: #6DB81C;
 
-$red: #ff6f6f;
-$dark-red: darken($red, 10%);
+$cachet-link: #7ed321;
+$cachet-link-hover: #01579b;
 
-$teal: #0dccc0;
-$dark-teal: darken($teal, 10%);
+$cachet-gray-light: #e8e8e8;
+$cachet-gray: #999;
+$cachet-gray-darker: #666;
 
-$yellow: #F7CA18;
-$dark-yellow: darken($yellow, 10%);
+$cachet-icons: #5e5e5e;
 
-$pink: #b23f73;
-$dark-pink: darken($pink, 10%);
+// Statuses
+$cachet-green: $cachet-primary;
+$cachet-dark-green: darken($cachet-green, 10%);
 
-$grey: #ecf0f1;
-$dark-grey: darken($grey, 10%);
+$cachet-blue: #3498db;
+$cachet-dark-blue: darken($cachet-blue, 10%);
 
-$orange: #FF8800;
-$dark-orange: darken($orange, 10%);
+$cachet-red: #ff6f6f;
+$cachet-dark-red: darken($cachet-red, 10%);
+
+$cachet-teal: #0dccc0;
+$cachet-dark-teal: darken($cachet-teal, 10%);
+
+$cachet-yellow: #F7CA18;
+$cachet-dark-yellow: darken($cachet-yellow, 10%);
+
+$cachet-pink: #b23f73;
+$cachet-dark-pink: darken($cachet-pink, 10%);
+
+$cachet-grey: #ecf0f1;
+$cachet-dark-grey: darken($cachet-grey, 10%);
+
+$cachet-orange: #FF8800;
+$dark-orange: darken($cachet-orange, 10%);

app/assets/sass/_status-page.scss

@@ -1,5 +1,3 @@
-@import 'palette';
-
 body.status-page {
     font-family: 'Lato', 'Helevetic Neue', Arial, sans-serif;
     background-color: #F0F3F4;
@@ -24,19 +22,19 @@ body.status-page {
     }
 
     .text-success, .text-component-1 {
-        color: $green;
+        color: $cachet_green;
     }
 
     .text-info, .text-component-2 {
-        color: $blue;
+        color: $cachet_blue;
     }
 
     .text-alert, .text-component-3 {
-        color: $yellow;
+        color: $cachet_yellow;
     }
 
     .text-danger, .text-component-4 {
-        color: $red;
+        color: $cachet_red;
     }
 
     .container {
@@ -61,20 +59,20 @@ body.status-page {
         border-radius: 0;
         font-size: 1.2em;
         &.alert-success {
-            background-color: $green;
-            border-color: $dark-green;
+            background-color: $cachet_green;
+            border-color: $cachet_dark-green;
             color: white;
         }
 
         &.alert-info {
-            background: $blue;
-            border-color: $dark-blue;
+            background: $cachet_blue;
+            border-color: $cachet_dark-blue;
             color: #FFF;
         }
 
         &.alert-danger {
-            background: $red;
-            border-color: $dark-red;
+            background: $cachet_red;
+            border-color: $cachet_dark-red;
             color: #FFF;
         }
     }
@@ -117,7 +115,7 @@ body.status-page {
                     top: -20px;
                     width: 7px;
                     height: 7px;
-                    background: $grey;
+                    background: $cachet_gray_light;
                     border-radius: 50%;
                 }
             }
@@ -159,16 +157,16 @@ body.status-page {
                     }
                 }
                 &.status-1 {
-                    color: $orange;
+                    color: $cachet_orange;
                 }
                 &.status-2 {
-                    color: $yellow;
+                    color: $cachet_yellow;
                 }
                 &.status-3 {
-                    color: $blue;
+                    color: $cachet_blue;
                 }
                 &.status-4 {
-                    color: $green;
+                    color: $cachet_green;
                 }
             }
             &.last:before {
@@ -234,7 +232,7 @@ body.status-page {
         .list-group-item {
             border-radius: 0;
             background-color: #ffffff;
-            border: 1px solid $grey;
+            border: 1px solid $cachet_gray_light;
             font-size: 1.1em;
             padding: 15px 15px;
 
@@ -266,8 +264,8 @@ body.status-page {
         padding-bottom: 40px;
         color: #777;
         text-align: center;
-        border-top: 1px solid $grey;
-        background-color: lighten($grey, 5%);
+        border-top: 1px solid $cachet_gray_light;
+        background-color: lighten($cachet_gray_light, 5%);
     }
 }
 

app/assets/sass/main.scss

@@ -1,6 +1,6 @@
-@import "modules/bootstrap";
+@import "palette";
 
-@import "partials/variables";
+@import "modules/bootstrap";
 
 html, body {
 	height: 100%;

app/assets/sass/modules/_variables.scss

@@ -1,5 +1,46 @@
-$brand-success: #7ed321 !default;
+// Brand colours.
+$brand-primary:         darken(#428bca, 6.5%) !default;
+$brand-success:         $cachet-primary !default;
+$brand-info:            $cachet-blue !default;
+$brand-warning:         $cachet-orange !default;
+$brand-danger:          $cachet-red !default;
+
+// Default border radius
+$border-radius-base:        2px !default;
+$border-radius-large:       4px !default;
+$border-radius-small:       1px !default;
 
 //** Tooltip background color
 $tooltip-bg:                  #333 !default;
 $tooltip-opacity:             .9 !default;
+$base-background-color: #f1f1f1;
+
+$base-font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$base-font-weight: 400;
+$base-letter-spacing: 0.08em;
+$base-font-size: 14px;
+$base-line-height: 1.42857143;
+
+$base-link-color: #ffffff;
+$base-link-hover-color: #e9e9e9;
+
+$header-background-color: lighten(#00695C, 10%);
+$header-border-color: 1px solid darken($header-background-color, 10%);
+
+$sidebar-transition-speed: .2s;
+$sidebar-background-color: #F0F3F4;
+$sidebar-border-color: 1px solid rgba(255, 255, 255, .1);
+$sidebar-border-shadow: inset 0px -2px 3px rgba(0,0,0,0.25);
+$sidebar-text-size: 0.9em;
+$sidebar-text-color: #333;
+$sidebar-text-active-color: #333;
+$sidebar-normal-width: 230px;
+$sidebar-phone-width: 75%;
+$sidebar-active-color: #00695C;
+
+$screen-xs-max: "(max-width: 549px)";
+$screen-sm-min: "(min-width: 550px)";
+$screen-sm-max: "(max-width: 991px)";
+$screen-md-min: "(min-width: 992px)";
+$screen-md-max: "(max-width: 1199px)";
+$screen-lg-min: "(min-width: 1200px)";

app/assets/sass/partials/_sidebar.scss

@@ -129,11 +129,11 @@ body.dashboard {
                     text-decoration: none;
 
                     &.active {
-                        color: #6787DA;
+                        color: $cachet-secondary;
                     }
 
                     &:hover {
-                        color: #6787DA;
+                        color: $cachet-secondary;
                     }
                 }
             }

app/assets/sass/partials/_variables.scss

@@ -1,31 +0,0 @@
-$base-background-color: #f1f1f1;
-
-$base-font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-$base-font-weight: 400;
-$base-letter-spacing: 0.08em;
-$base-font-size: 14px;
-$base-line-height: 1.42857143;
-
-$base-link-color: #ffffff;
-$base-link-hover-color: #e9e9e9;
-
-$header-background-color: lighten(#00695C, 10%);
-$header-border-color: 1px solid darken($header-background-color, 10%);
-
-$sidebar-transition-speed: .2s;
-$sidebar-background-color: #F0F3F4;
-$sidebar-border-color: 1px solid rgba(255, 255, 255, .1);
-$sidebar-border-shadow: inset 0px -2px 3px rgba(0,0,0,0.25);
-$sidebar-text-size: 0.9em;
-$sidebar-text-color: #333;
-$sidebar-text-active-color: #333;
-$sidebar-normal-width: 230px;
-$sidebar-phone-width: 75%;
-$sidebar-active-color: #00695C;
-
-$screen-xs-max: "(max-width: 549px)";
-$screen-sm-min: "(min-width: 550px)";
-$screen-sm-max: "(max-width: 991px)";
-$screen-md-min: "(min-width: 992px)";
-$screen-md-max: "(max-width: 1199px)";
-$screen-lg-min: "(min-width: 1200px)";

app/views/layout/master.blade.php

@@ -19,6 +19,17 @@
     <!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
     <meta http-equiv="cleartype" content="on">
 
+    <link rel="icon" type="image/png" href="{{ URL::to('img/favicon.ico') }}">
+    <link rel="shortcut icon" href="{{ URL::to('img/favicon.png') }}" type="image/x-icon" />
+
+    <link rel="apple-touch-icon" href="{{ URL::to('img/apple-touch-icon.png') }}" />
+    <link rel="apple-touch-icon" sizes="57x57" href="{{ URL::to('img/apple-touch-icon-57x57.png') }}" />
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ URL::to('img/apple-touch-icon-72x72.png') }}" />
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ URL::to('img/apple-touch-icon-114x114.png') }}" />
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ URL::to('img/apple-touch-icon-120x120.png') }}" />
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ URL::to('img/apple-touch-icon-144x144.png') }}" />
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ URL::to('img/apple-touch-icon-152x152.png') }}" />
+
     <title>{{ $pageTitle ?: Setting::get('app_name') }} Status</title>
 
     <link href='//fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

app/views/partials/dashboard/head.blade.php

@@ -4,9 +4,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <link rel="icon" type="image/png" href="{{ URL::to('img/favicon.ico') }}">
+    <link rel="shortcut icon" href="{{ URL::to('img/favicon.png') }}" type="image/x-icon" />
+
+    <link rel="apple-touch-icon" href="{{ URL::to('img/apple-touch-icon.png') }}" />
+    <link rel="apple-touch-icon" sizes="57x57" href="{{ URL::to('img/apple-touch-icon-57x57.png') }}" />
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ URL::to('img/apple-touch-icon-72x72.png') }}" />
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ URL::to('img/apple-touch-icon-114x114.png') }}" />
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ URL::to('img/apple-touch-icon-120x120.png') }}" />
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ URL::to('img/apple-touch-icon-144x144.png') }}" />
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ URL::to('img/apple-touch-icon-152x152.png') }}" />
+
     <title>{{ isset($pageTitle) ? $pageTitle : Setting::get('app_name') }} | Cachet</title>
 
     <link href='//fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="{{ elixir('css/all.css') }}">
     <script src="{{ elixir('js/all.js') }}"></script>
+
 </head>

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "css/all.css": "css/all-e92d01c2.css",
-  "js/all.js": "js/all-4554a981.js"
+  "css/all.css": "css/all-e60d5cc3.css",
+  "js/all.js": "js/all-1604355c.js"
 }