From 08736601147c4c50578d083eb179e8f8d18474c3 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Thu, 31 Aug 2017 21:39:32 +0200
Subject: [PATCH] Toggle buttons improved.

---
 src/Squidex/Views/Account/Login.cshtml | 14 +++----
 src/Squidex/app/theme/_bootstrap.scss  | 10 ++---
 src/Squidex/app/theme/_mixins.scss     |  4 +-
 src/Squidex/app/theme/_static.scss     | 16 +-------
 src/Squidex/app/theme/_vars.scss       |  6 ++-
 src/Squidex/wwwroot/theme.html         | 55 ++++++++++++++++++++++++++
 6 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/src/Squidex/Views/Account/Login.cshtml b/src/Squidex/Views/Account/Login.cshtml
index 505aaa3e7..d64812b2a 100644
--- a/src/Squidex/Views/Account/Login.cshtml
+++ b/src/Squidex/Views/Account/Login.cshtml
@@ -11,25 +11,23 @@
     <img class="profile-logo" src="~/images/logo-small.png" />
     
     <div class="container">
-        <div class="row">
-            <div class="col-6">
+        <div class="row text-center">
+            <div class="btn-group profile-headline">
                 @if (Model.IsLogin)
                 {
-                    <a class="profile-headline active" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
+                    <a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
                 }
                 else
                 {
-                    <a class="profile-headline" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
+                    <a class="btn btn-toggle" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">Login</a>
                 }
-            </div>
-            <div class="col-6 profile-headline">
                 @if (!Model.IsLogin)
                 {
-                    <a class="profile-headline active" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
+                    <a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
                 }
                 else
                 {
-                    <a class="profile-headline" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
+                    <a class="btn btn-toggle" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">Signup</a>
                 }
             </div>
         </div>
diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss
index d67876219..7ada9cc3c 100644
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@@ -325,23 +325,23 @@ a {
             }
 
             &.btn-primary {
-                @include build-toggle-button($color-theme-blue);
+                @include build-toggle-button($color-theme-blue, $color-badge-primary-background);
             }
 
             &.btn-info {
-                @include build-toggle-button($color-theme-blue);
+                @include build-toggle-button($color-theme-info, $color-badge-info-background);
             }
 
             &.btn-danger {
-                @include build-toggle-button($color-theme-error);
+                @include build-toggle-button($color-theme-error, $color-badge-danger-background);
             }
 
             &.btn-success {
-                @include build-toggle-button($color-theme-green);
+                @include build-toggle-button($color-theme-green, $color-badge-success-background);
             }
 
             &.btn-warning {
-                @include build-toggle-button($color-theme-orange);
+                @include build-toggle-button($color-theme-orange, $color-badge-warning-background);
             }
         }
 
diff --git a/src/Squidex/app/theme/_mixins.scss b/src/Squidex/app/theme/_mixins.scss
index 1320dca2e..52904cf95 100644
--- a/src/Squidex/app/theme/_mixins.scss
+++ b/src/Squidex/app/theme/_mixins.scss
@@ -10,11 +10,11 @@
     }
 }
 
-@mixin build-toggle-button($color) {
+@mixin build-toggle-button($color, $background) {
     & {
         color: $color;
         border-color: $color;
-        background: lighten($color, 40%);
+        background: $background;
         z-index: 1000;
     }
 }
diff --git a/src/Squidex/app/theme/_static.scss b/src/Squidex/app/theme/_static.scss
index d3302a243..ddb92fbee 100644
--- a/src/Squidex/app/theme/_static.scss
+++ b/src/Squidex/app/theme/_static.scss
@@ -24,21 +24,7 @@ noscript {
 
     // Lightweight, table like headline.
     &-headline {
-        & {
-            color: $color-text-decent;
-            display: block;
-            margin-bottom: 1rem;
-            font-size: 1.3rem;
-            font-weight: normal;
-            text-align: center;
-            text-transform: uppercase;
-        }
-
-        &.active {
-            color: $color-text;
-            cursor: pointer;
-            pointer-events: none;
-        }
+        margin: 0 auto 2rem;
     }
 
     // Fix logo on the top right corner of the screen.
diff --git a/src/Squidex/app/theme/_vars.scss b/src/Squidex/app/theme/_vars.scss
index 6d9b7d035..187aafb58 100644
--- a/src/Squidex/app/theme/_vars.scss
+++ b/src/Squidex/app/theme/_vars.scss
@@ -19,8 +19,8 @@ $color-extern-microsoft-icon:   #1b67b7;
 $color-extern-github:           #191919;
 $color-extern-github-icon:      #4a4a4a;
 
-$color-theme-blue:          #398cfb;
-$color-theme-blue-dark:     #3082f2;
+$color-theme-blue:          #3389ff;
+$color-theme-blue-dark:     #297ff6;
 $color-theme-blue-lighter:  #65a6ff;
 $color-theme-blue-light:    #9ebeea;
 $color-theme-blue-lightest: #d9e8fc;
@@ -34,6 +34,8 @@ $color-theme-orange-dark:   #a65b00;
 $color-theme-error:         #eb3142;
 $color-theme-error-dark:    #c00;
 
+$color-theme-info:          #5bc0de;
+
 $color-dark1-background:        #2e3842;
 $color-dark1-foreground:        #6a7681;
 $color-dark1-border1:           #37424c;
diff --git a/src/Squidex/wwwroot/theme.html b/src/Squidex/wwwroot/theme.html
index c154b3833..18b68bcfa 100644
--- a/src/Squidex/wwwroot/theme.html
+++ b/src/Squidex/wwwroot/theme.html
@@ -214,6 +214,61 @@
                         <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                     </p>
 
+                    <div class="bs-component" style="margin-bottom: 15px;">
+                        <div class="btn-group" data-toggle="buttons">
+                            <button class="btn btn-toggle btn-primary">
+                                Active
+                            </button>
+                            <button class="btn btn-toggle">
+                                Inactive
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="bs-component" style="margin-bottom: 15px;">
+                        <div class="btn-group" data-toggle="buttons">
+                            <button class="btn btn-toggle btn-warning">
+                                Active
+                            </button>
+                            <button class="btn btn-toggle">
+                                Inactive
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="bs-component" style="margin-bottom: 15px;">
+                        <div class="btn-group" data-toggle="buttons">
+                            <button class="btn btn-toggle btn-danger">
+                                Active
+                            </button>
+                            <button class="btn btn-toggle">
+                                Inactive
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="bs-component" style="margin-bottom: 15px;">
+                        <div class="btn-group" data-toggle="buttons">
+                            <button class="btn btn-toggle btn-success">
+                                Active
+                            </button>
+                            <button class="btn btn-toggle">
+                                Inactive
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="bs-component" style="margin-bottom: 15px;">
+                        <div class="btn-group" data-toggle="buttons">
+                            <button class="btn btn-toggle btn-info">
+                                Active
+                            </button>
+                            <button class="btn btn-toggle">
+                                Inactive
+                            </button>
+                        </div>
+                    </div>
+
                     <div class="bs-component" style="margin-bottom: 15px;">
                         <div class="btn-group" data-toggle="buttons">
                             <label class="btn btn-primary active">