Design fixes

src/Squidex/app/components/layout/app-form.component.html

@@ -30,8 +30,8 @@
         </span>
 	</div>
 
-    <div class="form-group">
+    <div class="form-group clearfix">
-        <button type="reset" class="btn btn-link" (click)="cancel()">Cancel</button>
+        <button type="reset" class="pull-left btn btn-secondary" (click)="cancel()">Cancel</button>
-        <button type="submit" class="btn btn-success" [disabled]="createForm.invalid">Create</button>
+        <button type="submit" class="pull-right btn btn-primary" [disabled]="createForm.invalid">Create</button>
     </div>
 </form>

src/Squidex/app/theme/_bootstrap.scss

@@ -56,13 +56,36 @@
     }
 }
 
-.modal-content {
+.form-group {
-    @include box-shadow(0, 6px, 16px, .2px);
+    &:last-child {
+        margin: 0;
+    }
 }
 
-.modal-content,
+.modal {
-.modal-header {
+    &-content,
-    border: 0;
+    &-header {
+        border: 0;
+    }
+
+    &-header {
+        @include border-radius-top(.3rem);
+        background: $color-modal-header-background;
+
+        h4 {
+            color: $color-modal-header-foreground;
+            font-size: 1rem;
+            font-weight: normal;
+        }
+
+        .close {
+            color: $color-modal-header-foreground;
+        }
+    }
+
+    &-content {
+        @include box-shadow(0, 6px, 16px, .2px);
+    }
 }
 
 .dropdown-menu {

src/Squidex/app/theme/_vars.scss

@@ -5,6 +5,9 @@ $color-border: #eaeeef;
 
 $color-text: #373a3c;
 
+$color-modal-header-background: #1d262f;
+$color-modal-header-foreground: #a8aaac;
+
 $color-section-media: #ab6eee;
 $color-section-settings: #ff5800;
 $color-section-content: #07a6ff;

src/Squidex/app/theme/_vendor-overrides.scss

@@ -4,4 +4,7 @@
 $fa-font-path: '~font-awesome/fonts';
 
 $brand-primary: $color-theme-blue;
-$brand-success: $color-theme-green;
+$brand-success: $color-theme-green;
+
+$btn-secondary-bg: #dce5e8;
+$btn-secondary-border: #dce5e8;