From 9cedd91309a88f8255caa19253a248356d6d9ac4 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Tue, 1 Oct 2024 14:30:29 +0300
Subject: [PATCH] REMOVE material-dashboard and bootstrap from angular json,
 add boostrap overwrite files to styles.scss, relevant fixes

---
 frontend/angular.json                         |   3 -
 ...n-template-editor-field-set.component.scss |   1 -
 .../app/ui/dashboard/dashboard.component.scss |   4 -
 ...cription-base-fields-editor.component.scss |   2 +-
 .../src/app/ui/navbar/navbar.component.html   |   6 +-
 .../src/app/ui/navbar/navbar.component.scss   |  11 +-
 .../plan-editor.component.scss                |   2 +-
 .../src/app/ui/sidebar/sidebar.component.scss | 282 +++++++++---------
 frontend/src/assets/scss/core/_type.scss      | 101 ++++---
 .../src/assets/scss/core/variables/_type.scss |  85 +-----
 frontend/src/styles.scss                      |  88 +++---
 11 files changed, 266 insertions(+), 319 deletions(-)

diff --git a/frontend/angular.json b/frontend/angular.json
index a2fde21c5..1c9383062 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -25,8 +25,6 @@
 							{ "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
 						],
 						"styles": [
-							"node_modules/bootstrap/dist/css/bootstrap.min.css",
-							"src/assets/scss/material-dashboard.scss",
 							"src/styles.scss",
 							"node_modules/cookieconsent/build/cookieconsent.min.css"
 						],
@@ -113,7 +111,6 @@
 						"tsConfig": "src/tsconfig.spec.json",
 						"scripts": [],
 						"styles": [
-                            "src/assets/scss/material-dashboard.scss",
 							"src/styles.scss",
 							"node_modules/tinymce/tinymce.min.js"
 						],
diff --git a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
index fd42b1e7d..cf04a2904 100644
--- a/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
+++ b/frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
@@ -1,5 +1,4 @@
 @use 'sass:math';
-@import "assets/scss/core/_variables.scss";
 
 .full-width{
     width: 100%;
diff --git a/frontend/src/app/ui/dashboard/dashboard.component.scss b/frontend/src/app/ui/dashboard/dashboard.component.scss
index e54aaf194..80439ced0 100644
--- a/frontend/src/app/ui/dashboard/dashboard.component.scss
+++ b/frontend/src/app/ui/dashboard/dashboard.component.scss
@@ -31,8 +31,6 @@
 
 .card-content {
 	text-align: left;
-	font-weight: 300;
-	font-size: 1rem;
 	letter-spacing: 0px;
 	color: var(--dark-gray);
 	padding-left: 40px;
@@ -56,7 +54,6 @@
 
 .personal-usage {
 	text-align: left;
-	font-weight: 300;
 	font-size: 1.25rem;
 	letter-spacing: 0px;
 	color: #000000;
@@ -348,7 +345,6 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
 .new-releases-content {
 	text-align: left;
 	font-weight: 300;
-	font-size: 1rem;
 	letter-spacing: 0px;
 	color: var(--dark-gray);
 	padding-left: 40px;
diff --git a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
index 54f5ef76d..fd50bc6ff 100644
--- a/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
+++ b/frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
@@ -6,7 +6,7 @@
 		letter-spacing: 0px;
 		color: var(--dark-gray);
 		opacity: 1;
-		margin: 3rem 0rem 3rem 0rem;
+		margin: 2rem 0rem 1.5rem 0rem;
 	}
 
 	.heading {
diff --git a/frontend/src/app/ui/navbar/navbar.component.html b/frontend/src/app/ui/navbar/navbar.component.html
index eee5e187f..38e68ffc6 100644
--- a/frontend/src/app/ui/navbar/navbar.component.html
+++ b/frontend/src/app/ui/navbar/navbar.component.html
@@ -1,6 +1,6 @@
 <ng-container>
-	<nav class="navbar navbar-expand-lg fixed-navbar">
-		<div class="container-fluid h-100">
+	<nav class="fixed-navbar">
+		<div class="container-fluid d-flex align-items-center h-100">
             <button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" [attr.aria-label]="'ALT-TEXT.HAMBURGER' | translate">
                 <div class="icon-bar1"></div>
                 <div class="icon-bar2"></div>
@@ -74,7 +74,7 @@
 
             <ng-template #userSettingsTemplate>
                 @if(this.isAuthenticated()) {
-                    <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
+                    <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent; min-width: 48px; min-height: 48px">
                         <img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
                     </button>
                 }@else {
diff --git a/frontend/src/app/ui/navbar/navbar.component.scss b/frontend/src/app/ui/navbar/navbar.component.scss
index 1293fd141..7a5a89d53 100644
--- a/frontend/src/app/ui/navbar/navbar.component.scss
+++ b/frontend/src/app/ui/navbar/navbar.component.scss
@@ -17,6 +17,7 @@ $mat-card-header-size: 40px !default;
         display: block;
     }
 }
+
 .my-mat-card-avatar {
   height: $mat-card-header-size;
   width: $mat-card-header-size;
@@ -87,11 +88,11 @@ $mat-card-header-size: 40px !default;
 
 .hamburger {
     all:unset;
-  display: inline-block;
-  cursor: pointer;
-  padding: 0.6rem;
-  margin-left: 0.8rem;
-  margin-right: 0.8rem;
+    display: inline-block;
+    cursor: pointer;
+    padding: 0.6rem;
+    margin-left: 0.8rem;
+    margin-right: 0.8rem;
 }
 
 .hamburger:hover, .hamburger:focus {
diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
index 7a791de3c..ccde9059d 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
@@ -253,7 +253,7 @@ a:hover {
 		letter-spacing: 0px;
 		color: var(--dark-gray);
 		opacity: 1;
-		margin: 3rem 0rem 3rem 0rem;
+		margin: 2rem 0rem 1.5rem 0rem;
 	}
     
     .link-icon {
diff --git a/frontend/src/app/ui/sidebar/sidebar.component.scss b/frontend/src/app/ui/sidebar/sidebar.component.scss
index 660f32495..e58c9d113 100644
--- a/frontend/src/app/ui/sidebar/sidebar.component.scss
+++ b/frontend/src/app/ui/sidebar/sidebar.component.scss
@@ -1,143 +1,147 @@
 $mat-card-header-size: 30px !default;
-
-.logo-img {
-	width: 60px;
-	display: block;
-	max-height: none;
-	margin-left: 50px;
-}
-
-.logo-img img {
-	width: 155px;
-	top: 0px;
-	position: inherit;
-}
-
-.sidebarSubtitle p {
-	margin-left: 20px;
-	color: rgb(166, 166, 166);
-}
-
-.nav hr {
-	border-top: 1px solid #fff;
-    border-bottom: 1px solid #E1E1E1;
-}
-
-.sidebar-footer {
-	margin-top: auto;
-}
-
-.sidebar-nav {
-	background: white;
-    height: 70px;
-}
-
-.nav-row {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	width: 100%;
-	padding: 0.5rem 0.8rem 0.5rem 1.2rem;
-	text-align: left;
-    letter-spacing: 0px;
-    color: #000000;
-    opacity: 1;
-	font-size:0.93rem;
-}
-
-.nav-subrow {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	width: 100%;
-	text-align: left;
-	letter-spacing: 0px;
-	color: #000000;
-	opacity: 1;
-    font-size:0.93rem;
-}
-
-.nav-row:hover, .nav-row:focus {
-	background-color: #ececec;
-	border-radius: 6px;
-}
-
-.icon {
-	width: 24px;
-	height: 24px;
-	vertical-align: middle;
-	color: #6B6B6B;
-}
-
-.nav-row span {
-	padding-left: 1.5rem;
-}
-
-.mat-list {
-	padding-top: 0px !important;
-	display: flex !important;
-}
-
-.mat-list div {
-	width: 100%;
-}
-
-
-.my-mat-card-avatar {
-  height: $mat-card-header-size;
-  width: $mat-card-header-size;
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin-right: 7px;
-}
-
-.nav-list-item-hidden {
-	display: none !important;
-  }
-
-.login {
-  margin-top: 15px !important;
-}
-
-.login-label {
-  text-transform: uppercase;
-}
-
-.firstSubtitle {
-  margin-top: 20px;
-}
-
-.icon-mask {
-  color: #6b6b6b;
-  transform: translate(-8px, 8px);
-}
-
-.active a {
-  font-weight: 700;
-}
-
-.active a i {
-  color: var(--primary-color);
-}
-
-.inner-line {
-  margin-left: 12px;
-  margin-right: 10px;
-  width: 20px;
-  height: 13px;
-  border-left: 1px solid #cccccc;
-  border-bottom: 1px solid #cccccc;
-}
-
-.icon-external {
-  font-size: 1rem;
-  padding-left: 0.4rem !important;
-  color: #6b6b6b;
-}
-
-mat-list-item {
-  display: flex !important;
-  height: auto !important;
+.sidebar-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .logo-img {
+        width: 60px;
+        display: block;
+        max-height: none;
+        margin-left: 50px;
+    }
+    
+    .logo-img img {
+        width: 155px;
+        top: 0px;
+        position: inherit;
+    }
+    
+    .sidebarSubtitle p {
+        margin-left: 20px;
+        color: rgb(166, 166, 166);
+    }
+    
+    .nav hr {
+        border-top: 1px solid #fff;
+        border-bottom: 1px solid #E1E1E1;
+    }
+    
+    .sidebar-footer {
+        margin-top: auto;
+    }
+    
+    .sidebar-nav {
+        background: white;
+        height: 70px;
+    }
+    
+    .nav-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        padding: 0.5rem 0.8rem 0.5rem 1.2rem;
+        text-align: left;
+        letter-spacing: 0px;
+        color: #000000;
+        opacity: 1;
+        font-size:0.93rem;
+    }
+    
+    .nav-subrow {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        text-align: left;
+        letter-spacing: 0px;
+        color: #000000;
+        opacity: 1;
+        font-size:0.93rem;
+    }
+    
+    .nav-row:hover, .nav-row:focus {
+        background-color: #ececec;
+        border-radius: 6px;
+    }
+    
+    .icon {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+        color: #6B6B6B;
+    }
+    
+    .nav-row span {
+        padding-left: 1.5rem;
+    }
+    
+    .mat-list {
+        padding-top: 0px !important;
+        display: flex !important;
+    }
+    
+    .mat-list div {
+        width: 100%;
+    }
+    
+    
+    .my-mat-card-avatar {
+      height: $mat-card-header-size;
+      width: $mat-card-header-size;
+      border-radius: 50%;
+      flex-shrink: 0;
+      margin-right: 7px;
+    }
+    
+    .nav-list-item-hidden {
+        display: none !important;
+      }
+    
+    .login {
+      margin-top: 15px !important;
+    }
+    
+    .login-label {
+      text-transform: uppercase;
+    }
+    
+    .firstSubtitle {
+      margin-top: 20px;
+    }
+    
+    .icon-mask {
+      color: #6b6b6b;
+      transform: translate(-8px, 8px);
+    }
+    
+    .active a {
+      font-weight: 700;
+    }
+    
+    .active a i {
+      color: var(--primary-color);
+    }
+    
+    .inner-line {
+      margin-left: 12px;
+      margin-right: 10px;
+      width: 20px;
+      height: 13px;
+      border-left: 1px solid #cccccc;
+      border-bottom: 1px solid #cccccc;
+    }
+    
+    .icon-external {
+      font-size: 1rem;
+      padding-left: 0.4rem !important;
+      color: #6b6b6b;
+    }
+    
+    mat-list-item {
+      display: flex !important;
+      height: auto !important;
+    }
 }
 
 ::ng-deep .mat-list-item-content {
diff --git a/frontend/src/assets/scss/core/_type.scss b/frontend/src/assets/scss/core/_type.scss
index a46c698be..65685f80a 100644
--- a/frontend/src/assets/scss/core/_type.scss
+++ b/frontend/src/assets/scss/core/_type.scss
@@ -12,7 +12,7 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
 
 h1, .h1 {
     font-size: $font-size-h1;
-    line-height: 1.15em;
+    line-height: 1.5em;
 }
 h2, .h2{
     font-size: $font-size-h2;
@@ -34,59 +34,62 @@ h5, .h5 {
 }
 h6, .h6{
     font-size: $font-size-h6;
-    text-transform: uppercase;
     font-weight: $font-weight-bold;
 }
 
-.title,
-.card-title,
-.info-title,
-.footer-brand,
-.footer-big h5,
-.footer-big h4,
-.media .media-heading{
-    //font-weight: $font-weight-extra-bold;
-    // font-family: $font-family-serif;
-
-    &,
-    a{
-        color: $black-color;
-        text-decoration: none;
-    }
+small {
+    font-size: $font-size-small;
 }
 
-.card-blog .card-title{
-    font-weight: $font-weight-extra-bold;
-}
+// .title,
+// .card-title,
+// .info-title,
+// .footer-brand,
+// .footer-big h5,
+// .footer-big h4,
+// .media .media-heading{
+//     //font-weight: $font-weight-extra-bold;
+//     // font-family: $font-family-serif;
 
-h2.title{
-    margin-bottom: $margin-base * 2;
-}
+//     &,
+//     a{
+//         color: $black-color;
+//         text-decoration: none;
+//     }
+// }
 
-.description,
-.card-description,
-.footer-big p{
-    color: $gray-light;
-}
+// .card-blog .card-title{
+//     font-weight: $font-weight-extra-bold;
+// }
 
-.text-warning {
-  color: $brand-warning !important;
-}
-.text-primary {
-  color: $brand-primary !important;
-}
-.text-danger {
-  color: $brand-danger !important;
-}
-.text-success {
-  color: $brand-success !important;
-}
-.text-info {
-  color: $brand-info !important;
-}
-.text-rose{
-    color: $brand-rose !important;
-}
-.text-gray{
-    color: $gray-color !important;
-}
+// h2.title{
+//     margin-bottom: $margin-base * 2;
+// }
+
+// .description,
+// .card-description,
+// .footer-big p{
+//     color: $gray-light;
+// }
+
+// .text-warning {
+//   color: $brand-warning !important;
+// }
+// .text-primary {
+//   color: $brand-primary !important;
+// }
+// .text-danger {
+//   color: $brand-danger !important;
+// }
+// .text-success {
+//   color: $brand-success !important;
+// }
+// .text-info {
+//   color: $brand-info !important;
+// }
+// .text-rose{
+//     color: $brand-rose !important;
+// }
+// .text-gray{
+//     color: $gray-color !important;
+// }
diff --git a/frontend/src/assets/scss/core/variables/_type.scss b/frontend/src/assets/scss/core/variables/_type.scss
index 43614bc76..afc62682b 100644
--- a/frontend/src/assets/scss/core/variables/_type.scss
+++ b/frontend/src/assets/scss/core/variables/_type.scss
@@ -5,6 +5,7 @@
 // https://www.google.com/design/spec/style/typography.html#typography-styles
 // http://www.getmdl.io/styles/index.html
 
+
 $font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $font-family-serif:      'Roboto Slab', 'Times New Roman', serif !default;
 //$font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !default;
@@ -19,89 +20,19 @@ $font-size-sm:               .875rem !default;
 $font-size-xs:               .75rem !default;
 
 
-$font-size-h1:                 3.3125rem;
+$font-size-h1:                 2.5rem;
 $font-size-h2:                 2.25rem !default;
 $font-size-h3:                 1.5625rem;
 $font-size-h4:                 1.125rem !default;
 $font-size-h5:                 1.0625rem !default;
-$font-size-h6:                 0.75rem !default;
+$font-size-h6:                 1rem !default;
 $font-paragraph:               14px !default;
 $font-size-navbar:             16px !default;
-$font-size-small:              12px !default;
+$font-size-small:              13px !default;
 
 
-//
-$display1-size: 7rem !default; // md display-4 112px was 6rem;
-$display2-size: 3.5rem !default; // md display-3 56px was 5.5rem
-$display3-size: 2.8125rem !default; // md display-2 45px was 4.5rem
-$display4-size: 2.125rem !default; // md display-1 34px was 3.5rem
-//
-//$display1-weight:             300 !default;
-//$display2-weight:             300 !default;
-//$display3-weight:             300 !default;
-//$display4-weight:             300 !default;
-//
-$line-height-base:                1.5 !default;
-//
-$headings-margin-bottom:     math.div($spacer, 2) !default;
-//$headings-font-family:       inherit !default;
-$headings-font-weight:         400 !default; // was 500
 
-$font-weight-light: 300 !default;
-$font-weight-default: 400 !default;
-$font-weight-bold:    500 !default;
-$font-weight-extra-bold: 700 !default;
-
-$font-size-large:              1em          !default;
-$font-size-large-navbar:       20px         !default;
-
-//$headings-line-height:       1.1 !default;
-//$headings-color:             inherit !default;
-//
-//$lead-font-size:             1.25rem !default;
-//$lead-font-weight:           300 !default;
-//
-//$text-muted:                  $gray-light !default;
-//
-//$abbr-border-color:           $gray-light !default;
-//
-//$blockquote-small-color:      $gray-light !default;
-//$blockquote-font-size:        ($font-size-base * 1.25) !default;
-//$blockquote-border-color:     $gray-lighter !default;
-//
-//$hr-border-color:             rgba(0,0,0,.1) !default;
-//$hr-border-width:             $border-width !default;
-//
-//$list-inline-padding:         5px !default;
-//
-//$dt-font-weight:              bold !default;
-//
-//$nested-kbd-font-weight:      bold !default;
-
-$padding-input-vertical:        11px !default;
-$padding-input-horizontal:      19px !default;
-
-$padding-btn-vertical:         11px !default;
-$padding-btn-horizontal:       22px !default;
-
-$padding-base-vertical:        .5rem !default;
-$padding-base-horizontal:      .7rem !default;
-
-$padding-round-horizontal:     23px !default;
-
-$padding-simple-vertical:      10px !default;
-$padding-simple-horizontal:    17px !default;
-
-$padding-large-vertical:       15px !default;
-$padding-large-horizontal:     48px !default;
-
-$padding-small-vertical:        5px !default;
-$padding-small-horizontal:     15px !default;
-
-$padding-label-vertical:        2px !default;
-$padding-label-horizontal:     12px !default;
-
-$margin-large-vertical:        30px !default;
-$margin-base-vertical:         15px !default;
-
-$margin-base-horizontal:       15px !default;
+$font-weight-light: 200 !default;
+$font-weight-default: 300 !default;
+$font-weight-bold:    400 !default;
+$font-weight-extra-bold: 500 !default;
\ No newline at end of file
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 66d4168f1..a459eaa76 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,13 +1,12 @@
 @use '@angular/material'as mat;
 
-
 // @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 // @import "src/assets/scss/material-dashboard.scss";
 
 
 //Material-Bootstrap configuration
+@import '../node_modules/bootstrap/scss/bootstrap.scss';
 @import "assets/scss/bootstrap-material";
-// @import "/node_modules/bootstrap/scss/bootstrap";
 
 // @import "@covalent/core/theming/all-theme";
 // @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
@@ -19,9 +18,14 @@
 // Guided Tour style
 @import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
 
+
 // Be sure that you only ever include this mixin once!
 @include mat.core();
 
+// styles moved from material-dashboard.scss -> overwrite bootstrap default styles 
+@import "assets/scss/core/variables/type";
+@import "assets/scss/core/type";
+
 
 :root {
 	--primary-color: #18488F;
@@ -82,30 +86,35 @@ $mat-dark-theme-warn: mat.m2-define-palette($mat-dark-theme-warn-palette,
 	$darker: A700,
 	$text: 100);
 
+
+//including the typography rules from _type.scss here
 $mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
-	//   $display-4:     mat.m2-define-typography-level($font-size: 96px, $font-weight: 300, $font-family: 'Roboto, sans-serif;'),
-	//   $display-3:     mat.m2-define-typography-level($font-size: 60px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
-	//   $display-2:     mat.m2-define-typography-level($font-size: 48px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
-	//   $display-1:     mat.m2-define-typography-level($font-size: 34px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
-	//   $headline:      mat.m2-define-typography-level($font-size: 24px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
-	//   $title:         mat.m2-define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
-	//   $subheading-2:  mat.m2-define-typography-level($font-size: 18px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
-	//   $subheading-1:  mat.m2-define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
-	$body-2: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
-	$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
-	// $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'),
-	$button: mat.m2-define-typography-level($font-size: 0.87rem, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
+    $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
+    $headline-2: mat.m2-define-typography-level($font-size: 2.25rem),
+    $headline-3: mat.m2-define-typography-level($font-size: 1.5625rem),
+    $headline-4: mat.m2-define-typography-level($font-size: 1.125rem),
+    $headline-5: mat.m2-define-typography-level($font-size: 1.0625rem),
+    $headline-6: mat.m2-define-typography-level($font-size: 1rem ),
+	$body-1: mat.m2-define-typography-level($font-size: 1.125rem),
+	$body-2: mat.m2-define-typography-level($font-size: 0.9rem),
+	$button: mat.m2-define-typography-level($font-size: 0.87rem),
+    $caption: mat.m2-define-typography-level($font-size: 0.77rem),
 	// Line-height must be unit-less fraction of the font-size.
-	//   $input:         mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
+	//   $input:         mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125),
 );
 
 
 
 $mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
-	$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
-	$body-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
-	$button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
-    $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
+    $headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
+    $headline-2: mat.m2-define-typography-level($font-size: 2.38rem),
+    $headline-3: mat.m2-define-typography-level($font-size: 1.6925rem),
+    $headline-4: mat.m2-define-typography-level($font-size: 1.255rem),
+    $headline-5: mat.m2-define-typography-level($font-size: 1.1925rem),
+    $headline-6: mat.m2-define-typography-level($font-size: 1.13rem ),
+    $body-1: mat.m2-define-typography-level($font-size: 1.255rem),
+    $body-2: mat.m2-define-typography-level($font-size: 1.15rem),
+	$button: mat.m2-define-typography-level($font-size: 1rem),
 );
 
 $mat-density: 0;
@@ -140,25 +149,32 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
 
 .accessibility-theme {
     @include mat.all-component-themes($mat-accessibility-theme);
+
     // change individual classes set in components' scss
     .frame-txt, .action-list-text, .stepper-back, .nav-row, .nav-subrow, .center-content, .form-check,
-    .nav-row, .nav-subrow, .sidebar-footer .option, label.mdc-label,.description-label {
-        font-size: max(1rem, 16px) !important;
+    .nav-row, .nav-subrow, .sidebar-footer .option {
+        font-size: 1rem !important;
     }
     .action-list-label, .actions-list, small {
-        font-size: max(1rem, 13px) !important;
+        font-size: 0.8em !important;
     }
     .status-chip {
-        font-size: 14px;
+        font-size: 14px !important;
+    }
+    .plan-title, .plan-title-draft, .description-title, .description-title-draft {
+        font-size: 1.2rem !important;
+    }
+    .plan-subtitle, .description-subtitle {
+        font-size: 1rem !important;
+    }
+    .heading {
+        font-size: 1.255rem !important;
     }
 }
 
-// styles moved from material-dashboard.scss
-body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
-    font-family: Roboto, sans-serif;
-    font-weight: 300;
-  }
-  
+
+
+
 
 a {
     color: var(--link-color);
@@ -169,12 +185,15 @@ a {
     &.color-unset {
         color: #000000;
     }
+    & .material-icons { //_misc.scss
+        vertical-align: middle;
+    }
 }
 
-
-.required-text {
-    font-size: 13px;
+.card {
+    border: 0;
 }
+
 //TODO: angular update @import '../node_modules/dragula/dist/dragula.css';
 /* in-flight clone */
 .gu-mirror {
@@ -326,10 +345,6 @@ a {
 	}
 }
 
-// .gray-container {
-// 	background: linear-gradient(180deg, #f6f6f6, #fff);
-// 	margin: 5px 0px;
-// }
 
 .main-content {
 	background-color: #f5f5f5;
@@ -675,6 +690,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
 ////////*////////
 /// 
 /// 
+/// 
 ul.horizontal-list {
     list-style-type: none;
     margin: 0;