Merge pull request #171 from OS2iot/feature/IoT-1587_StartDialogStyling

Feature/IoT-1587 Welcome dialog styling

Author: augusthjerrild

src/app/applications/applications-list/applications-list.component.ts

@@ -134,7 +134,7 @@ export class ApplicationsListComponent implements OnInit {
           disableClose: true,
           closeOnNavigation: true,
           panelClass: "welcome-screen",
-          maxWidth: "60vw",
+          maxWidth: "40vw",
           data: {
             hasSomePermission: this.hasSomePermission,
           } as WelcomeDialogModel,

src/app/shared/components/welcome-dialog/welcome-dialog.component.html

@@ -11,15 +11,6 @@ <h2>
     </p>
   </header>
   <div mat-dialog-content class="col-md-12 px-md-4" *ngIf="dialogModel?.hasSomePermission">
-    <p class="sub-header">
-      <strong>{{ "WELCOME-DIALOG.SUB-HEADER-1" | translate }}</strong>
-    </p>
-    <p>
-      {{ "WELCOME-DIALOG.WELCOME-MESSAGE" | translate }}
-      <span>
-        <a href="https://OS2iot.os2.eu" target="_blank">{{ "WELCOME-DIALOG.LINK-1" | translate }}</a> </span
-      >{{ "WELCOME-DIALOG.WELCOME-MESSAGE-2" | translate }}
-    </p>
     <p class="sub-header">
       <strong>{{ "WELCOME-DIALOG.SUB-HEADER-2" | translate }}</strong>
     </p>

src/app/shared/components/welcome-dialog/welcome-dialog.component.scss

@@ -1,6 +1,6 @@
 @import "src/assets/scss/setup/variables";
 
-$spacing: 5rem;
+$spacing: 3rem;
 
 .container {
   padding-left: $spacing;
@@ -17,7 +17,7 @@ $spacing: 5rem;
   }
 }
 
-.mat-dialog-content {
+.mat-mdc-dialog-content {
   p {
     &.sub-header {
       strong {

src/assets/i18n/da.json

@@ -1139,13 +1139,9 @@
   "WELCOME-DIALOG": {
     "WELCOME": "VELKOMMEN TIL OS2iot",
     "WELCOME-SUB": " Din indgang til administration af IoT enheder",
-    "LINK-1": "OS2iot's brugerforum",
     "LINK-2": "produktsiden",
     "LINK-3": "Github",
-    "SUB-HEADER-1": "Brugerforum",
     "SUB-HEADER-2": "Om OS2iot",
-    "WELCOME-MESSAGE": "Bliv en aktiv del af ",
-    "WELCOME-MESSAGE-2": ". Her kan du stille spørgsmål, indrapportere fejl og dele dine udviklingsønsker. Ved fælles hjælp bliver løsningen bedre.",
     "WELCOME-MESSAGE-3": "OS2iot er en open source løsning organiseret igennem OS2-fællesskabet. Du kan finde mere information om OS2iot på ",
     "WELCOME-MESSAGE-4": " og følge udviklingen på ",
     "NO-ACCESS": "Du har endnu ikke de fornødne rettigheder i OS2iot. Anmod om adgang til en organisation for at få tildelt rettigheder af din administrator.",

src/styles.scss

@@ -99,22 +99,30 @@ body {
   margin-left: 0;
 }
 
-.welcome-screen .mat-dialog-container {
-  background-color: #55b156;
+.line-break {
+  white-space: pre-line;
 }
 
-.hide-checkbox {
-  color: $color-white-001;
+.width100percent {
+  width: 100%;
+}
 
-  .mat-checkbox-frame {
-    border-color: $color-white-001;
-  }
+.welcome-screen .mat-mdc-dialog-surface {
+  background-color: #55b156 !important;
+  overflow: hidden;
+  padding: 12px;
 }
 
-.line-break {
-  white-space: pre-line;
+app-welcome-dialog .hide-checkbox .mdc-checkbox {
+  .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
+    border-color: $color-white-001 !important;
+  }
+  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate="true"])
+    ~ .mdc-checkbox__background {
+    border-color: $color-white-001 !important;
+  }
 }
 
-.width100percent {
-  width: 100%;
+app-welcome-dialog .mdc-label {
+  color: $color-white-001 !important;
 }