From c01a06effb8d3ad2514d07658b2d30d42d2a9281 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Sat, 25 May 2019 18:59:13 +0200
Subject: [PATCH] Add new theme and fixes
---
.../content-list/content-list.component.scss | 4 +-
.../content-presentation.component.scss | 2 +-
.../room-creator-page.component.scss | 12 +++---
.../home/home-page/home-page.component.scss | 2 +-
.../room-participant-page.component.scss | 12 +++---
.../shared/comment/comment.component.scss | 2 +-
.../content-groups.component.scss | 6 +--
.../shared/header/header.component.scss | 8 ++--
.../list-statistic.component.scss | 2 +-
.../shared/room-list/room-list.component.scss | 2 +-
.../shared/statistic/statistic.component.scss | 4 +-
.../statistics-page.component.scss | 4 +-
src/styles.scss | 10 +++--
src/theme/arsnova-theme.const.ts | 8 ++--
src/theme/blue-theme/_blue-theme.scss | 8 ++++
src/theme/blue-theme/blueTheme.const.ts | 27 +++++++++++++
src/theme/dark-Theme/_dark-theme.scss | 39 -------------------
src/theme/dark-theme/_dark-theme.scss | 8 ++++
.../darkTheme.const.ts | 3 +-
.../_form.scss | 0
.../_theme.scss | 0
.../_util.scss | 0
.../_variables.scss | 0
.../defaultTheme.const.ts | 3 +-
24 files changed, 89 insertions(+), 77 deletions(-)
create mode 100644 src/theme/blue-theme/_blue-theme.scss
create mode 100644 src/theme/blue-theme/blueTheme.const.ts
delete mode 100644 src/theme/dark-Theme/_dark-theme.scss
create mode 100644 src/theme/dark-theme/_dark-theme.scss
rename src/theme/{dark-Theme => dark-theme}/darkTheme.const.ts (90%)
rename src/theme/{default-Theme => default-theme}/_form.scss (100%)
rename src/theme/{default-Theme => default-theme}/_theme.scss (100%)
rename src/theme/{default-Theme => default-theme}/_util.scss (100%)
rename src/theme/{default-Theme => default-theme}/_variables.scss (100%)
rename src/theme/{default-Theme => default-theme}/defaultTheme.const.ts (90%)
diff --git a/src/app/components/creator/content-list/content-list.component.scss b/src/app/components/creator/content-list/content-list.component.scss
index 62c7c77e9..0bc0bfa46 100644
--- a/src/app/components/creator/content-list/content-list.component.scss
+++ b/src/app/components/creator/content-list/content-list.component.scss
@@ -1,7 +1,7 @@
mat-card {
width: 800px;
max-width: 90%;
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
}
mat-card-content > :first-child {
@@ -9,7 +9,7 @@ mat-card-content > :first-child {
}
mat-expansion-panel {
- background-color: var(--surface);
+ background-color: var(--grey);
margin-bottom: 5px;
}
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.scss b/src/app/components/creator/content-presentation/content-presentation.component.scss
index 10afc3bd5..57541136c 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.scss
+++ b/src/app/components/creator/content-presentation/content-presentation.component.scss
@@ -11,7 +11,7 @@ mat-card {
width: 800px;
max-width: 90%;
margin-top: 20px;
- background-color: var(--secondary-variant);
+ background-color: var(--surface);
}
h3 {
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index 72b29e68b..de4f002f6 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -2,7 +2,7 @@
mat-card {
width: 800px;
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
}
mat-card-content > :first-child {
@@ -57,22 +57,22 @@ mat-tooltip-component {
p {
font-size: medium;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
}
h2 {
font-size: large;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
}
h3 {
font-size: larger;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
}
h4 {
font-size: medium;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
}
mat-card-header {
@@ -93,6 +93,6 @@ mat-grid-tile {
}
mat-expansion-panel {
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
min-width: 200px;
}
diff --git a/src/app/components/home/home-page/home-page.component.scss b/src/app/components/home/home-page/home-page.component.scss
index b84a2bf8c..d20082412 100644
--- a/src/app/components/home/home-page/home-page.component.scss
+++ b/src/app/components/home/home-page/home-page.component.scss
@@ -10,7 +10,7 @@
font-weight: bold;
text-align: center;
letter-spacing: 10px;
- color: var(--primary);
+ color: var(--secondary);
animation: moveInLeft 2s ease-out;
padding-top: 10px;
}
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.scss b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
index 01c97c9a2..ba4b71ad2 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.scss
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
@@ -3,7 +3,7 @@
mat-card {
width: 100%;
max-width: 800px;
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
}
mat-card-content>:first-child {
@@ -35,24 +35,24 @@ button {
p {
font-size: medium;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
}
h2 {
font-size: large;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
}
h3 {
font-size: larger;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
margin-top: 10px;
margin-bottom: 10px;
}
h4 {
font-size: medium;
- color: var(--text-1)!important;
+ color: var(--on-surface)!important;
}
mat-card-header {
@@ -69,7 +69,7 @@ mat-card-subtitle {
}
mat-expansion-panel {
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
min-width: 200px;
}
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 9e2cb8116..d5386181d 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -29,7 +29,7 @@ mat-card-content > :first-child {
}
.not-marked {
- color: var(--grey);
+ color: var(--on-surface);
}
.correct-icon {
diff --git a/src/app/components/shared/content-groups/content-groups.component.scss b/src/app/components/shared/content-groups/content-groups.component.scss
index edc89098a..4cd4cbd4c 100644
--- a/src/app/components/shared/content-groups/content-groups.component.scss
+++ b/src/app/components/shared/content-groups/content-groups.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../theme/default-Theme/_variables.scss';
+@import '../../../../theme/default-theme/_variables.scss';
#contentGroup {
background-color: var(--primary);
@@ -15,8 +15,8 @@
&:hover {
cursor: pointer;
- background-color: var(--surface);
- color: var(--on-surface);
+ background-color: var(--primary-variant);
+ color: var(--on-primary);
transform: translateZ(20px);
transform: translateY(-5px);
transform: scaleY(1.1);
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index f091a4504..bd5d97f80 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -1,16 +1,16 @@
.app-title {
cursor: pointer;
margin: 0 auto;
- color: var(--on-surface);
+ color: var(--on-primary);
}
mat-toolbar {
- background-color: var(--surface);
+ background-color: var(--primary);
position: relative;
}
.header-icons {
- color: var(--on-surface);
+ color: var(--on-primary);
}
.purple {
@@ -22,7 +22,7 @@ mat-toolbar {
}
.dark {
- color: var(--on-primary);
+ color: var(--black);
}
.default {
diff --git a/src/app/components/shared/list-statistic/list-statistic.component.scss b/src/app/components/shared/list-statistic/list-statistic.component.scss
index 355b5e21b..9d5e36959 100644
--- a/src/app/components/shared/list-statistic/list-statistic.component.scss
+++ b/src/app/components/shared/list-statistic/list-statistic.component.scss
@@ -35,7 +35,7 @@ mat-cell {
mat-toolbar {
height: 20px;
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
}
.positive {
diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss
index 28561c7fb..36f04a865 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -33,7 +33,7 @@ mat-panel-title {
.headerTitle {
width: 8%;
- color: var(--on-secondary)!important;
+ color: var(--on-background)!important;
}
.panelTitle {
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index 3353bb77e..7ecc8110a 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -1,12 +1,12 @@
mat-card {
width: 800px;
max-width: 90%;
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
}
mat-toolbar {
height: 15px;
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
}
.mat-icon-button {
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.scss b/src/app/components/shared/statistics-page/statistics-page.component.scss
index 389817472..e49933b05 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.scss
+++ b/src/app/components/shared/statistics-page/statistics-page.component.scss
@@ -2,9 +2,9 @@ mat-card {
width: 800px;
max-width: 90%;
min-height: 300px;
- background-color: var(--secondary-variant)!important;
+ background-color: var(--surface)!important;
}
h2 {
- color: var(--text-1);
+ color: var(--on-surface);
}
diff --git a/src/styles.scss b/src/styles.scss
index 9d8295a06..e3a5dc1a1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,6 @@
-@import 'theme/default-Theme/_variables.scss';
-@import "theme/dark-Theme/dark-theme";
+@import 'theme/default-theme/_variables.scss';
+@import 'theme/dark-theme/dark-theme';
+@import 'theme/blue-theme/blue-theme';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
@@ -17,5 +18,8 @@
@include angular-material-theme($dark-theme);
}
+.blue {
+ @include angular-material-theme($blue-theme);
+}
-@import 'theme/default-Theme/theme';
+@import 'theme/default-theme/theme';
diff --git a/src/theme/arsnova-theme.const.ts b/src/theme/arsnova-theme.const.ts
index 44fd8b030..0ea72d31c 100644
--- a/src/theme/arsnova-theme.const.ts
+++ b/src/theme/arsnova-theme.const.ts
@@ -1,7 +1,9 @@
-import { dark } from './dark-Theme/darkTheme.const';
-import { arsnova } from './default-Theme/defaultTheme.const';
+import { dark } from './dark-theme/darkTheme.const';
+import { arsnova } from './default-theme/defaultTheme.const';
+import { blue } from './blue-theme/blueTheme.const';
export const themes = {
arsnova: arsnova,
- dark: dark
+ dark: dark,
+ blue: blue
};
diff --git a/src/theme/blue-theme/_blue-theme.scss b/src/theme/blue-theme/_blue-theme.scss
new file mode 100644
index 000000000..2d9ac0f75
--- /dev/null
+++ b/src/theme/blue-theme/_blue-theme.scss
@@ -0,0 +1,8 @@
+@import './../../../node_modules/@angular/material/theming';
+
+$blue-primary: mat-palette($mat-indigo,500);
+$blue-accent: mat-palette($mat-amber, 200); //$mat-blue-gray, A200, A100, A400);
+
+$blue-warn: mat-palette($mat-red, A100);
+
+$blue-theme: mat-light-theme($blue-primary, $blue-accent, $blue-warn);
diff --git a/src/theme/blue-theme/blueTheme.const.ts b/src/theme/blue-theme/blueTheme.const.ts
new file mode 100644
index 000000000..a70bf2a29
--- /dev/null
+++ b/src/theme/blue-theme/blueTheme.const.ts
@@ -0,0 +1,27 @@
+export const blue = {
+
+ '--primary' : '#3f51b5',
+ '--primary-variant': '#757de8',
+
+ '--secondary': '#3f51b5',
+ '--secondary-variant': '#757de8',
+
+ '--background': '#f5f5f5',
+ '--surface': '#bdbdbd',
+ '--dialog': '#c2c2c2',
+
+ '--on-primary': '#FFFFFF',
+ '--on-secondary': '#FFFFFF',
+ '--on-background': '#212121',
+ '--on-surface': '#212121',
+
+ '--green': '#AED581',
+ '--red': '#FF8A80',
+ '--yellow': '#FFD54F',
+ '--blue': '#3f51b5',
+ '--purple': '#9c27b0',
+ '--teal': '#4DB6AC',
+ '--grey': '#BDBDBD',
+ '--grey-light': '#EEEEEE',
+ '--black': '#212121'
+};
diff --git a/src/theme/dark-Theme/_dark-theme.scss b/src/theme/dark-Theme/_dark-theme.scss
deleted file mode 100644
index 052a6d3e6..000000000
--- a/src/theme/dark-Theme/_dark-theme.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../../../node_modules/@angular/material/theming';
-
-html, body {
- font-family: 'Roboto', 'Helvetica Neue', sans-serif;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
-}
-
-.fill-remaining-space {
- /* This fills the remaining space, by using flexbox.
- Every toolbar row uses a flexbox row layout. */
- flex: 1 1 auto;
-}
-
-mat-form-field.input-block {
- display: block;
-}
-
-.mat-fab .mat-button-wrapper {
- padding: 0!important;
-}
-
-.mat-dialog-container {
- background-color: white;
-}
-
-.mat-tab-header {
- border-bottom-style: none!important;
-}
-
-
-$dark-primary: mat-palette($mat-blue-gray, 800);
-$dark-accent: mat-palette($mat-orange, 200);
-$dark-warn: mat-palette($mat-red, A200);
-
-$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
-
diff --git a/src/theme/dark-theme/_dark-theme.scss b/src/theme/dark-theme/_dark-theme.scss
new file mode 100644
index 000000000..4c901c361
--- /dev/null
+++ b/src/theme/dark-theme/_dark-theme.scss
@@ -0,0 +1,8 @@
+@import './../../../node_modules/@angular/material/theming';
+
+$dark-primary: mat-palette($mat-blue-gray, 800);
+$dark-accent: mat-palette($mat-orange, 200);
+$dark-warn: mat-palette($mat-red, A200);
+
+$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
diff --git a/src/theme/dark-Theme/darkTheme.const.ts b/src/theme/dark-theme/darkTheme.const.ts
similarity index 90%
rename from src/theme/dark-Theme/darkTheme.const.ts
rename to src/theme/dark-theme/darkTheme.const.ts
index 6e66c17f8..6aa4c582e 100644
--- a/src/theme/dark-Theme/darkTheme.const.ts
+++ b/src/theme/dark-theme/darkTheme.const.ts
@@ -22,5 +22,6 @@ export const dark = {
'--purple': '#9c27b0',
'--teal': '#4DB6AC',
'--grey': '#BDBDBD',
- '--grey-light': '#9E9E9E'
+ '--grey-light': '#9E9E9E',
+ '--black': '#212121'
};
diff --git a/src/theme/default-Theme/_form.scss b/src/theme/default-theme/_form.scss
similarity index 100%
rename from src/theme/default-Theme/_form.scss
rename to src/theme/default-theme/_form.scss
diff --git a/src/theme/default-Theme/_theme.scss b/src/theme/default-theme/_theme.scss
similarity index 100%
rename from src/theme/default-Theme/_theme.scss
rename to src/theme/default-theme/_theme.scss
diff --git a/src/theme/default-Theme/_util.scss b/src/theme/default-theme/_util.scss
similarity index 100%
rename from src/theme/default-Theme/_util.scss
rename to src/theme/default-theme/_util.scss
diff --git a/src/theme/default-Theme/_variables.scss b/src/theme/default-theme/_variables.scss
similarity index 100%
rename from src/theme/default-Theme/_variables.scss
rename to src/theme/default-theme/_variables.scss
diff --git a/src/theme/default-Theme/defaultTheme.const.ts b/src/theme/default-theme/defaultTheme.const.ts
similarity index 90%
rename from src/theme/default-Theme/defaultTheme.const.ts
rename to src/theme/default-theme/defaultTheme.const.ts
index f27dfde39..27d001ede 100644
--- a/src/theme/default-Theme/defaultTheme.const.ts
+++ b/src/theme/default-theme/defaultTheme.const.ts
@@ -22,5 +22,6 @@ export const arsnova = {
'--purple': '#9c27b0',
'--teal': '#4DB6AC',
'--grey': '#BDBDBD',
- '--grey-light': '#EEEEEE'
+ '--grey-light': '#EEEEEE',
+ '--black': '#212121'
};
--
GitLab