Styling to adminpanel

src/app/admin/admin.component.html

@@ -7,12 +7,10 @@ <h2>Administrering</h2>
         <b>Brukernavn</b>
       </label>
       <input #username type="text" name="Uname" id="Uname" placeholder="Brukernavn" />
-      <br /><br />
       <label for="Pass">
         <b>Passord</b>
       </label>
       <input #password type="Password" name="Pass" id="Pass" placeholder="Passord" />
-      <br /><br />
       <input
         type="button"
         class="login-button"

src/app/admin/admin.component.scss

@@ -6,47 +6,61 @@
 }
 
 .wrapper {
-  text-align: center;
+  display: flex;
+  justify-content: center; 
+  align-items: center; 
+  min-height: 100vh; 
 }
 
 .login {
-  width: 382px;
+  width: 50vw;
   overflow: hidden;
   margin: auto;
-  margin: 20 0 0 450px;
   padding: 80px;
-  background: linear-gradient(0.5deg, #195272 -0.56%, #05a3c7 138.78%);
+  background: linear-gradient(0.5deg, #9f68b5 -0.56%, #c78bde 138.78%);
   border-radius: 15px;
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+}
+
+#login {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
 }
 
 h2 {
   text-align: center;
   color: black;
   padding: 20px;
+  font-family: AeonikMedium;
 }
 
 label {
   color: black;
-  font-size: 17px;
-  float: left;
-  padding-left: 36px;
+  font-size: 20px;
+  margin: 1rem;
+  text-align: left;
+  width: 100%;
 }
 
-#Uname {
-  width: 300px;
-  height: 30px;
-  border: none;
-  border-radius: 3px;
-  padding-left: 8px;
+label b {
+  font-family: AeonikMedium;
+}
+
+input {
+  font-family: AeonikMedium;
 }
 
-#Pass {
-  width: 300px;
+#Uname, #Pass {
+  width: 100%;
   height: 30px;
   border: none;
   border-radius: 3px;
   padding-left: 8px;
+  margin-bottom: 1rem;
 }
 
 span {
@@ -60,41 +74,46 @@ a {
 }
 
 .login-button {
-  background: #fa852f;
+  background: #38176d;
   color: #f4f4f4;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
   margin-top: 30px;
   font-size: 20px;
   border-radius: 50px;
   height: 40px;
-  min-width: 240px;
-  max-width: 400px;
+  width: 40%;
   border: none;
   cursor: pointer;
+  font-family: AeonikMedium;
 }
+
 .login-button:hover {
   border-color: #f4f4f4;
   border: 1px solid #f4f4f4;
+  background-color: #195272;
 }
 
 .back-button {
-  background: #fa852f;
+  background: #71ada1;
   color: #f4f4f4;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
   margin-top: 30px;
   font-size: 16px;
   border-radius: 50px;
   height: 35px;
-  min-width: 140px;
-  max-width: 300px;
+  width: 30%;
   border: none;
   cursor: pointer;
+  font-family: AeonikMedium;
+  justify-content: left;
 }
 
 .back-button:hover {
   border-color: #f4f4f4;
   border: 1px solid #f4f4f4;
+  background-color: #195272;
 }
+
 @media (min-width: 600px) {
   .login-button {
     font-size: 32px;

src/app/admin/error-dialog/error-dialog.component.html

@@ -1,10 +1,13 @@
 <div mat-dialog-content class="content">
-  <div id="logMessage"> @for (log of logs; track log.time) {
-    <p>{{log.date}} {{log.time}} {{ log.level }} {{log.message}}</p>
-    <br>
+  <div id="logMessages">
+    <div class="log-entry"> @for (log of logs; track log.time) {
+      <p class="log-text">
+        <span class="log-date">{{log.date}}</span>
+        <span class="log-time">{{log.time}}</span>
+        <span class="log-level">{{ log.level }}</span>
+        <span class="log-message"> {{log.message}}</span>
+      </p>
+      <p> </p>
     }</div>
-    <p></p>
-  <button mat-button mat-dialog-close>Close</button>
-</div>
-
-
+  <button mat-button mat-dialog-close (click)="closeDialog()">Lukk</button></div>
+</div>

src/app/admin/error-dialog/error-dialog.component.scss

@@ -3,30 +3,88 @@
     border-radius: 56px;
     width: 698px;
     height: 546px;
-  
+
     display: flex;
     align-items: center;
     justify-content: center;
     overflow-y: auto;
   }
-
-  #logMessage {
-    margin-bottom: 16px; // Add some space below the log messages
-    p {
-      font-size: 16px; 
-      margin: 4px 0; 
-      padding: 4px; 
-      background-color: #ffffff; 
-      border-left: 4px solid #2196F3; 
+
+  .content {
+    padding: 20px;
+    background-color: #f5f5f5; 
+    border-radius: 8px; 
+  }
+
+  #logMessages {
+    max-height: 400px;
+    overflow-y: auto; 
+    margin-bottom: 20px;
+  }
+
+  .log-entry {
+    padding: 10px;
+    margin-bottom: 10px;
+    border-left: 4px solid #b587e9; 
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .log-entry p {
+    margin: 0; 
+    padding: 5px 0; 
+  }  
+
+  .log-text {
+    margin: 0; 
+    font-family: 'Roboto', sans-serif; 
+    color: #333; 
+    font-size: 14px;
+  }
+
+  .log-date, .log-time {
+    font-weight: bold;
+    color: #47424c; 
+    margin-right: 10px; 
+  }
+
+  .log-level {
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-weight: bold;
+
+    /* Dynamic coloring based on log level - not in use yet */
+    &.INFO {
+      color: #25c232; 
+    }
+
+    &.ERROR {
+      color: #f44336; 
+    }
+
+    &.WARN {
+      color: #ff9800; 
     }
   }
 
-  button {
-    margin-top: 16px; 
-    background-color: #2196F3; 
-    color: white; 
+  .log-message {
+    margin-left: 10px;
+  }
+
+  button[mat-dialog-close] {
+    margin-top: 20px;
+    background-color: #38176d;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 4px;
+    font-weight: bold;
+    border: none;
+    cursor: pointer;
+
     &:hover {
-      background-color: #1976D2; 
+      background-color: #195272;
     }
   }
 
+

src/app/admin/error-dialog/error-dialog.component.ts

@@ -1,14 +1,20 @@
 import { LogData } from '@/app/shared/models/backend-interfaces';
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'app-error-dialog',
   templateUrl: 'error-dialog.component.html',
   styleUrls: ['./error-dialog.component.scss']}
 )
 export class ErrorLogDialogComponent {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: LogData[]) {}
+  constructor(
+    public dialogRef: MatDialogRef<ErrorLogDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: LogData[]) {}
 
   logs = this.data
 
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
+
 }

src/app/admin/info/info.component.html

@@ -5,10 +5,6 @@ <h3 align="center">Advarsel!</h3>
 <div class="btn-group" align="center">
   <button class="btn btn-lg btn-outline-primary" (click)="getInformation()">Vis informasjon</button>
   <p></p>
-  <button (click)="revertDataset()">{{ this.datasetString }}</button>
-  <p></p>
-  <button (click)="retrain()">{{ this.retrainString }}</button>
-  <p></p>
   <button (click)="clearHighScore()">{{ this.highScoreString }}</button>
   <p></p>
   <button (click)="getLogger()">Hent feilmeldingsloggen (backend)</button>