Theme page for simple testing.

.gitignore

@@ -4,6 +4,8 @@
 *.vs
 *.log
 
+.vscode
+
 # Build results
 build/
 bin/
@@ -21,4 +23,4 @@ node_modules/
 
 /src/Squidex/appsettings.Development.json
 /src/Squidex/Assets
-/src/Squidex/Properties/launchSettings.json
+/src/Squidex/Properties/launchSettings.json

src/Squidex/app-config/webpack.run.base.js

@@ -38,6 +38,10 @@ module.exports = webpackMerge(commonConfig, {
          */
         new HtmlWebpackPlugin({
             template: 'wwwroot/index.html', hash: true
+        }),
+        
+        new HtmlWebpackPlugin({
+            template: 'wwwroot/theme.html', hash: true, filename: 'theme.html'
         })
     ]
 });

src/Squidex/app/framework/services/notification.service.spec.ts

@@ -29,7 +29,7 @@ describe('NotificationService', () => {
 
         expect(notification.displayTime).toBe(5000);
         expect(notification.message).toBe('MyError');
-        expect(notification.messageType).toBe('error');
+        expect(notification.messageType).toBe('danger');
     });
 
     it('should create info', () => {

src/Squidex/app/framework/services/notification.service.ts

@@ -21,7 +21,7 @@ export class Notification {
     }
 
     public static error(message: string): Notification {
-        return new Notification(message, 'error');
+        return new Notification(message, 'danger');
     }
 
     public static info(message: string): Notification {

src/Squidex/app/shell/pages/internal/internal-area.component.html

@@ -17,7 +17,9 @@
 </div>
 
 <div class="notification-container">
-    <div class="notification-item notification-{{notification.messageType}}" *ngFor="let notification of notifications" (click)="close(notification)">
+    <div class="alert alert-dismissible alert-{{notification.messageType}}" *ngFor="let notification of notifications" (click)="close(notification)" [@fade]>
+        <button type="button" class="close" data-dismiss="alert" (close)="close(notification)">&times;</button>
+
         {{notification.message}}
     </div>
 </div>

src/Squidex/app/shell/pages/internal/internal-area.component.scss

@@ -54,7 +54,7 @@
     &-icon {
         @include absolute(0, auto, auto, 0);
         @include border-radius-left(3px);
-        @include transition(background .4s ease);
+        @include transition(background-color .4s ease);
         background: lighten($color-extern-github, 10%);
         display: inline-block;
         line-height: 44px;
@@ -69,26 +69,8 @@
 .notification {
     &-container {
         @include fixed(auto, .625rem, .625rem, auto);
-        width: 20rem;
+        max-width: 20rem;
+        min-width: 20rem;
         z-index: 100000;
     }
-
-    &-item {
-        @include border-radius;
-        @include box-shadow;
-        padding: .625rem;
-        margin-top: .625rem;
-        font-size: .8rem;
-        font-weight: normal;
-        color: $color-dark-foreground;
-        cursor: pointer;
-    }
-
-    &-error {
-        background: $color-theme-error;
-    }
-
-    &-info {
-        background: $color-theme-blue;
-    }
 }

src/Squidex/app/shell/pages/internal/internal-area.component.ts

@@ -10,6 +10,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 import {
+    fadeAnimation,
     Notification,
     NotificationService
 } from 'shared';
@@ -17,7 +18,10 @@ import {
 @Component({
     selector: 'sqx-internal-area',
     styleUrls: ['./internal-area.component.scss'],
-    templateUrl: './internal-area.component.html'
+    templateUrl: './internal-area.component.html',
+    animations: [
+        fadeAnimation
+    ]
 })
 export class InternalAreaComponent implements OnInit, OnDestroy {
     private notificationsSubscription: Subscription;

src/Squidex/app/theme/_bootstrap-vars.scss

@@ -1,9 +1,31 @@
 @import '_mixins.scss';
 @import '_vars.scss';
 
+$font-size-h1:              1.25rem;
+$font-size-h2:              1.2rem;
+$font-size-h3:              1.15rem;
+$font-size-h4:              1.1rem;
+$font-size-h5:              1.05rem;
+$font-size-h6:              1rem;
+
+$body-bg:                   $color-background;
+
 $brand-primary:             $color-theme-blue;
 $brand-success:             $color-theme-green;
 $brand-danger:              $color-theme-error;
+$brand-warning:             $color-theme-orange;
+
+$alert-success-bg:          $color-theme-green;
+$alert-success-text:        #fff;
+
+$alert-info-bg:             $color-theme-blue;
+$alert-info-text:           #fff;
+
+$alert-warning-bg:          $color-theme-orange;
+$alert-warning-text:        #fff;
+
+$alert-danger-bg:           $color-theme-error;
+$alert-danger-text:         #fff;
 
 $btn-secondary-bg:          $color-theme-secondary;
 $btn-secondary-border:      $color-theme-secondary;

src/Squidex/app/theme/_bootstrap.scss

@@ -3,21 +3,6 @@
 
 @import './../../node_modules/bootstrap/scss/mixins/_buttons';
 
-//
-// Override most common header sizes
-//
-h1 {
-    font-size: 1.3rem;
-}
-
-h2 {
-    font-size: 1.1rem;
-}
-
-h3 {
-    font-size: 1.05rem;
-}
-
 //
 // Bade colors
 //
@@ -53,6 +38,33 @@ h3 {
     }
 }
 
+// 
+// Alert overrides.
+//
+.alert-info,
+.alert-warning,
+.alert-info,
+.alert-danger {
+    .alert-link {
+        color: $color-dark-foreground;
+        font-size: inherit;
+        font-weight: normal;
+        text-decoration: underline;
+    }
+
+    .close {
+        & {
+            font-weight: 400;
+            font-size: 1.6rem;
+        }
+
+        &:hover,
+        &:focus {
+            color: inherit;
+        }
+    }
+}
+
 a {
     &:disabled,
     &.disabled {
@@ -74,6 +86,10 @@ a {
         line-height: 2.2rem;
     }
 
+    &-toggler {
+        padding: .18rem .6rem;
+    }
+
     // Ensure that dropdown is always under nav bar.
     .dropdown-menu {
         top: 2.6rem;
@@ -335,9 +351,12 @@ a {
     &-header {
         @include border-radius-top(.3rem);
         background: $color-modal-header-background;
+        font-size: 1rem;
+        font-weight: normal;
+        color: $color-modal-header-foreground;
 
-        h4 {
+        h4,
-            color: $color-modal-header-foreground;
+        h5 {
             font-size: 1rem;
             font-weight: normal;
         }

src/Squidex/app/theme/_vars.scss

@@ -30,6 +30,9 @@ $color-theme-secondary: #dce5e8;
 $color-theme-green: #4cc159;
 $color-theme-green-dark: #47b353;
 
+$color-theme-orange: #ffb136;
+$color-theme-orange-dark: #a65b00;
+
 $color-theme-error: #f00;
 $color-theme-error-dark: darken($color-theme-error, 5%);