Refactored the user experience by changing the color scheme and chang…

…ing view logic plus styling Signed-off-by: M-HRL <haertl.marco@web.de>
amosproj · Feb 6, 2024 · 4ad9dc4 · 4ad9dc4
1 parent 52aeef6
commit 4ad9dc4
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 92 deletions.
diff --git a/Frontend/src/app/app.component.css b/Frontend/src/app/app.component.css
@@ -46,11 +46,11 @@ body{
 }
 
 .record-button {
-  background-color: #0D9A0B;
+  background-color: #7f7f7f;
 }
 
 .gen-ticket {
-  background-color:  #08726F;
+  background-color: #0D9A0B;
 }
 
 /* Left Card - Make this smaller */
@@ -63,17 +63,6 @@ body{
   width: 55%; /* Larger width for the right card */
 }
 
-/* Styles for the speech button */
-.speech-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 18px;
-  color: #10ddd3;
-  margin-bottom: 20px; /* Adjust spacing as needed */
-}
-/* Existing styles for text-field-div and history-div */
-
 .text-field-div {
   margin: auto;
   width: 80%;
@@ -92,11 +81,6 @@ body{
   position: relative;
 }
 
-.user-message {
-  background-color: #008028;
-  align-self: flex-end;
-}
-
 .other-message {
   background-color: #383a3b;
   align-self: flex-start;
@@ -191,11 +175,12 @@ body{
 }
 
 .user-message {
-  background-color: #008028;
+  background-color: #08726f;
   color: #fff;
   text-align: right;
   padding: 10px;
   margin-bottom: 5px;
+  align-self: flex-end;
 }
 
 .server-message {

diff --git a/Frontend/src/app/app.component.html b/Frontend/src/app/app.component.html
@@ -15,23 +15,27 @@
   {{ title }}
 </h1>
 
-  <div class="login-container" *ngIf="!isLoggedIn">
-    <button
-    mat-button (click)="openLoginDialog()"><span class="white">Login</span></button>
-    <button mat-button class="button-border" color="primary" (click)="openSignupDialog()">
-      <span class="white">Sign Up</span>
-    </button>
-  </div>
-  <div class="login-container" *ngIf="isLoggedIn">
-    <button mat-button class="signup-button" (click)="openEditDialog()">
-      <span class="white">{{accountName}}</span>
+<div class="login-container flex space-x-2" *ngIf="!isLoggedIn">
+  <button mat-button (click)="openLoginDialog()">
+    <div class="white flex m-auto">Login</div>
+  </button>
+  <button mat-button class="button-border" color="primary" (click)="openSignupDialog()">
+    <div class="white flex m-auto">Sign Up</div>
+  </button>
+</div>
+<div class="login-container flex space-x-2" *ngIf="isLoggedIn">
+  <button mat-button class="signup-button" (click)="openEditDialog()">
+    <div class="flex place-content-center space-x-2">
+      <div class="white flex m-auto">{{ accountName }}</div>
       <mat-icon class="white" iconPositionEnd>account_circle</mat-icon>
-    </button>
-    <button
-    mat-button (click)="clicklogout()">
+    </div>
+  </button>
+  <button mat-button (click)="clicklogout()">
+    <div class="flex place-content-center space-x-2">
       <mat-icon class="white">logout</mat-icon>
-    </button>
-  </div>
+    </div>
+  </button>
+</div>
 
 <div class="cards-container">
   <mat-card class="history-div">
@@ -51,7 +55,8 @@
       </mat-form-field>
 
       <button class="record-button" mat-button (click)="startSpeechRecognition()">
-        {{ recordingState === 'idle' ? 'Record voice message' : 'Stop recording voice message' }}
+        <span
+          class="white">{{ recordingState === 'idle' ? 'Record voice message' : 'Stop recording voice message' }}</span>
       </button>
       <br>
 
@@ -60,7 +65,7 @@
         class="gen-ticket"
         (click)="handleSend(chatInput, emailInput)"
       >
-        Generate Ticket
+        <span class="white">Generate Ticket</span>
       </button>
     </div>
 
@@ -83,8 +88,8 @@ <h2>Message history</h2>
           'other-message': !chatMessage.isUser
         }"
     >
-      <div class="message-content">
-        <p *ngIf="chatMessage.messageContent">{{ chatMessage.messageContent }}</p>
+      <div class="message-content m-2">
+        <span *ngIf="chatMessage.messageContent">{{ chatMessage.messageContent }}</span>
         <app-ticket-form *ngIf="chatMessage.wrappedTicket"
                          [wrappedTicket]="chatMessage.wrappedTicket"
                          (msgAfterButtonClick)="setMessageAfterticketSubmission($event)"

diff --git a/Frontend/src/app/edit-dialog/edit-dialog.component.css b/Frontend/src/app/edit-dialog/edit-dialog.component.css
@@ -9,7 +9,7 @@
     background-color: var(--main-bg-color);
     text-align: center;
     font-size: 24px;
-    color: #0D9A0B;
+  color: #10ddd3;
     margin-bottom: 20px;
 }
 

diff --git a/Frontend/src/app/login-dialog/login-dialog.component.css b/Frontend/src/app/login-dialog/login-dialog.component.css
@@ -18,7 +18,7 @@
 
   .dialog-title {
     font-size: 24px;
-    color: var(--accent-color);
+    color: #10ddd3;
     margin-bottom: 20px;
   }
 
@@ -50,7 +50,7 @@
   }
 
   .login-button {
-    background-color: var(--accent-color);
+    background-color: #0D9A0B;
     color: var(--text-color);
     font-size: 18px;
     text-transform: capitalize;
@@ -60,7 +60,3 @@
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
   }
-
-  .login-button:hover {
-    background-color: var(--hover-color);
-  }
diff --git a/Frontend/src/app/logout-dialog/logout-dialog.component.css b/Frontend/src/app/logout-dialog/logout-dialog.component.css
@@ -1,24 +1,19 @@
 :host {
   --main-bg-color: #313131;
-  --accent-color: #10ddd3;
-  --hover-color: #00828f;
   --text-color: #fff;
 }
 
-.dialog-title {
-  background-color: var(--main-bg-color);
-  text-align: center;
-}
-
 .dialog-content {
   background-color: var(--main-bg-color);
   text-align: center;
-  width: 400px; 
+  width: 400px;
 }
 
 .dialog-title {
+  background-color: var(--main-bg-color);
+  text-align: center;
   font-size: 24px;
-  color: var(--accent-color);
+  color: #10ddd3;
   margin-bottom: 20px;
 }
 
@@ -42,7 +37,7 @@ mat-dialog-content {
 }
 
 .login-button {
-  background-color: var(--accent-color);
+  background-color: #0d9a0b;
   color: var(--text-color);
   font-size: 18px;
   text-transform: capitalize;
@@ -52,7 +47,3 @@ mat-dialog-content {
   cursor: pointer;
   transition: background-color 0.3s ease-in-out;
 }
-
-.login-button:hover {
-  background-color: var(--hover-color);
-}
diff --git a/Frontend/src/app/session-expired-dialog/session-expired-dialog.component.css b/Frontend/src/app/session-expired-dialog/session-expired-dialog.component.css
@@ -1,24 +1,19 @@
 :host {
   --main-bg-color: #313131;
-  --accent-color: #10ddd3;
-  --hover-color: #00828f;
   --text-color: #fff;
 }
 
-.dialog-title {
-  background-color: var(--main-bg-color);
-  text-align: center;
-}
-
 .dialog-content {
   background-color: var(--main-bg-color);
   text-align: center;
-  width: 400px; 
+  width: 400px;
 }
 
 .dialog-title {
+  background-color: var(--main-bg-color);
+  text-align: center;
   font-size: 24px;
-  color: var(--accent-color);
+  color: #10ddd3;
   margin-bottom: 20px;
 }
 
@@ -42,7 +37,7 @@ mat-dialog-content {
 }
 
 .login-button {
-  background-color: var(--accent-color);
+  background-color: #0d9a0b;
   color: var(--text-color);
   font-size: 18px;
   text-transform: capitalize;
@@ -52,7 +47,3 @@ mat-dialog-content {
   cursor: pointer;
   transition: background-color 0.3s ease-in-out;
 }
-
-.login-button:hover {
-  background-color: var(--hover-color);
-}
diff --git a/Frontend/src/app/signup-dialog/signup-dialog.component.css b/Frontend/src/app/signup-dialog/signup-dialog.component.css
@@ -9,7 +9,7 @@
     background-color: var(--main-bg-color);
     text-align: center;
     font-size: 24px;
-    color: #0D9A0B;
+  color: #10ddd3;
     margin-bottom: 20px;
 }
 
@@ -52,7 +52,3 @@ mat-dialog-content {
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
 }
-
-.signup-button:hover {
-    background-color: var(--hover-color);
-}
diff --git a/Frontend/src/app/ticket-form/ticket-form.component.css b/Frontend/src/app/ticket-form/ticket-form.component.css
@@ -1,9 +1,9 @@
 .submit-button {
-  background-color: #08726F;
+  background-color: #0d9a0b;
   color: white;
 }
 
 .cancel-button {
-  background-color: #0C33A0;
+  background-color: #7f7f7f;
   color: white;
 }
diff --git a/Frontend/src/app/ticket-form/ticket-form.component.html b/Frontend/src/app/ticket-form/ticket-form.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="ticketFormGroup!">
-  <div class="grid grid-cols-2 gap-4 text-center">
+  <div class="grid grid-cols-2 gap-2 text-center">
     <div class="col-span-2">
-      <mat-form-field class="w-11/12 pt-2" appearance="fill">
+      <mat-form-field class="w-full" appearance="fill">
         <mat-label>Title</mat-label>
         <input matInput id="title" type="text" formControlName="title">
         <mat-error *ngIf="ticketFormGroup!.hasError('required', 'title')">Title is <strong>required</strong>
@@ -10,7 +10,7 @@
     </div>
 
     <div class="col-span-2">
-      <mat-form-field class="w-11/12" appearance="fill">
+      <mat-form-field class="w-full" appearance="fill">
         <mat-label>Description</mat-label>
         <textarea matInput id="description" type="text" formControlName="description"></textarea>
         <mat-error *ngIf="ticketFormGroup!.hasError('required', 'description')">Description is <strong>required</strong>
@@ -19,7 +19,7 @@
     </div>
 
     <div class="col-span-2">
-      <mat-form-field class="w-11/12">
+      <mat-form-field class="w-full">
         <mat-label>Keywords</mat-label>
         <mat-chip-grid #chipGrid aria-label="Enter keywords" [disabled]="isFormDisabled">
           <mat-chip-row *ngFor="let keyword of ticketFormGroup!.value.keywords"
@@ -44,7 +44,7 @@
     </div>
 
     <div class="col-start-1 col-span-1">
-      <mat-form-field class="w-11/12">
+      <mat-form-field class="w-full">
         <mat-label>Service</mat-label>
         <mat-select id="service" formControlName="service">
           <mat-option *ngFor="let service of serviceValues" [value]="service">{{ service }}</mat-option>
@@ -55,7 +55,7 @@
     </div>
 
     <div class="col-start-2 col-span-1">
-      <mat-form-field class="w-11/12">
+      <mat-form-field class="w-full">
         <mat-label>Category</mat-label>
         <mat-select id="category" formControlName="category">
           <mat-option *ngFor="let category of categoryValues" [value]="category">{{ category }}</mat-option>
@@ -66,7 +66,7 @@
     </div>
 
     <div class="col-start-1 col-span-1">
-      <mat-form-field class="w-11/12">
+      <mat-form-field class="w-full">
         <mat-label>Request type</mat-label>
         <mat-select id="requestType" formControlName="requestType">
           <mat-option *ngFor="let requestType of RequestType | keyvalue"
@@ -79,7 +79,7 @@
     </div>
 
     <div class="col-start-2 col-span-1">
-      <mat-form-field class="w-11/12">
+      <mat-form-field class="w-full">
         <mat-label>Priority</mat-label>
         <mat-select id="priority" formControlName="priority">
           <mat-option *ngFor="let prio of Prio | keyvalue" [value]="prio.value">{{ prio.value }}</mat-option>
@@ -88,13 +88,13 @@
         </mat-error>
       </mat-form-field>
     </div>
-    <div class="col-start-1 col-span-1">
-      <button class="submit-button" mat-button type="submit" (click)="submitTicket()" [disabled]="isFormDisabled">
+    <div *ngIf="!isFormDisabled" class="col-start-1 col-span-1">
+      <button class="submit-button w-full" mat-button type="submit" (click)="submitTicket()">
         Submit
       </button>
     </div>
-    <div class="col-start-2 col-span-1">
-      <button mat-raised-button (click)="onCancelTicket()" class="cancel-button" [disabled]="isFormDisabled">Cancel</button>
+    <div *ngIf="!isFormDisabled" class="col-start-2 col-span-1">
+      <button mat-raised-button (click)="onCancelTicket()" class="cancel-button w-full">Cancel</button>
     </div>
   </div>
 </form>
diff --git a/Frontend/tailwind.config.js b/Frontend/tailwind.config.js
@@ -4,6 +4,14 @@ module.exports = {
     "./src/**/*.{html,ts}",
   ],
   theme: {
+    colors: {
+      'turquoise-light': '#10ddd3',
+      'turquoise-dark': '#08726f',
+      'blue': '#0c33a0',
+      'green': '#0d9a0b',
+      'gray-dark': '#313131',
+      'gray-light': '#7f7f7f',
+    },
     extend: {},
   },
   plugins: [],