WIP wizard

src/Ombi/ClientApp/src/app/media-details/media-details.component.scss

@@ -235,7 +235,7 @@
     text-align:right;
     display:flex;
     justify-content: flex-end;
-    padding-right:2em;
+    padding-right:2.5%
 }
 
 .viewon-btn {

src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.html

@@ -1,12 +1,27 @@
-<div class="container">
+<div class="wizard-background">
+  <div class="container wizard-inner">
       
       <mat-horizontal-stepper linear #stepper>
         <mat-step >
           <form >
             <ng-template matStepLabel>Welcome</ng-template>
-            <p>Welcome to Ombi, this wizard will quickly take you through the inital setup!</p>
+            <div class="welcome-container">
-            <div>
+              <div class="left-container logo">
-              <button mat-button matStepperNext>Next</button>
+                OMBI
+              </div>
+              <div class="right-container">
+                <div class="right-container-content">
+                  <p>Welcome to Ombi, this wizard will quickly take you through the inital setup!</p>
+                  <br />
+                  <p>If you encounter any problems you can find help on the following platforms:</p>
+                  <div class="social-media">
+                    <a href="https://discord.gg/Sa7wNWb" target="_blank"><i class="fab fa-discord"></i></a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="welcome-buttons">
+              <button mat-button matStepperNext class="mat-raised-button mat-accent">Next</button>
             </div>
           </form>
         </mat-step>
@@ -64,4 +79,5 @@
           </div>
         </mat-step>
       </mat-horizontal-stepper>
+  </div>
 </div>

src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.scss

@@ -0,0 +1,47 @@
+@import "~styles/variables.scss";
+.welcome-container{
+    display:flex;
+    height:100%;
+    width:100%;
+}
+
+.welcome-container .logo{
+    display:flex;
+    font-family: Montserrat,sans-serif;
+    text-transform: uppercase;
+    color: #62d2fa;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 5em;
+    padding: 40px 20px;
+    min-height: 300px;
+}
+
+.welcome-container .left-container{
+    width:20%;
+    //border: 1px solid $ombi-background-primary;
+}
+
+.welcome-container .right-container{
+    width:70%;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.welcome-buttons{
+    float:right;
+}
+
+.fab {
+    font-family: 'Font Awesome 5 Brands';
+    font-size: 28px !important;
+    padding: 5px;
+    margin-bottom: 5px;
+    border: 1px solid;
+}
+
+.fa-discord:before {
+    content: "\f392";
+}

src/Ombi/ClientApp/src/app/wizard/welcome/welcome.component.ts

@@ -3,8 +3,10 @@ import { Router } from "@angular/router";
 import { ICreateWizardUser } from "../../interfaces";
 import { IdentityService, NotificationService } from "../../services";
 
+
 @Component({
     templateUrl: "./welcome.component.html",
+    styleUrls: ["./welcome.component.scss"],
 })
 export class WelcomeComponent implements OnInit {
     

src/Ombi/ClientApp/src/styles/Styles.scss

@@ -100,3 +100,35 @@
             background: $ombi-background-accent;
         }
     }
+
+    .mat-tooltip{
+        background: $ombi-background-accent;
+    } 
+
+    //Wizard CSS
+    .mat-stepper-horizontal, .mat-stepper-vertical{
+        background: $ombi-background-accent;
+    }
+
+    .wizard-background{
+        background-color: $ombi-background-primary;
+        width:100%;
+        height:100vh;
+        display:flex;
+        align-items:center;
+        justify-content: center;
+    }
+
+    .wizard-inner{
+        color:#FFF;
+        min-height: 450px;
+    }
+
+    .wizard-inner .mat-stepper-horizontal {
+        min-height: 450px;
+    }
+
+    .mat-step-header .mat-step-icon{
+        background-color:$ombi-active;
+        color: $ombi-active-text;
+    }