episode list changed

Author: SergeyPirogov

src/app/auth-error/auth-error.component.css

@@ -0,0 +1,4 @@
+.error-text {
+    color: red;
+    font-size: 2em;
+}

src/app/auth-error/auth-error.component.html

@@ -1,7 +1,5 @@
-<div class="container">
-  <div class="row align-items-center">
-    <div class="col">
-        You are not allowed to access this resource! Admin role required!
+<div class="d-flex justify-content-center align-items-center login-form">
+    <div class="col-7 centered error-text">
+        You are not allowed to access this resource! Admin role is required!
     </div>
-  </div>
 </div>

src/app/episode-list/episode-list.component.html

@@ -1,11 +1,16 @@
-<div class="container">
-  <div class="row mb-3"></div>
-  <div class="row align-items-center">
-    <div class="col">
+<!-- <div class="container"> -->
+  <div class="row mb-3">
+      <div class="col-6">
         <button *ngIf="currentUser.isAdmin" type="button" class="btn btn-block btn btn-warning mb-3" (click)="userManagement()">User management</button>
+      </div>
+      <div class="col-6">
         <button type="button" class="btn btn-block btn-dark mb-3" (click)="addTheme()">Add theme</button>
+      </div>  
+  </div>
+  <div class="row">
+    <div class="col">
         <form *ngIf="currentUser.isAdmin" [formGroup]="addForm" (ngSubmit)="onSubmit()" class="add-episode-form">
-            <div class="form-row md-3">
+            <div class="form-row">
               <div class="col-8">
                 <input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="episodeName">
                 <div *ngIf="added" class="valid-feedback">
@@ -20,7 +25,8 @@
               </div>
             </div>
         </form>
-      
+    </div>
+    <div class="col">
         <ul *ngFor="let episode of episodes" class="list-group">
             <li class="list-group-item d-flex justify-content-between align-items-center" [ngClass]="{'active': episode?.id == selectedEpisode?.id}">
               <span (click)="onSelect(episode)" class="episode-name justify-content-between"> 
@@ -34,4 +40,4 @@
         </ul>  
     </div>
   </div>
-</div>
+<!-- </div> -->