RIFFMASTER: add sign up link to login page and style navigation bar (orange theme)

Backend/Spring/.idea/workspace.xml

@@ -14,8 +14,10 @@
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/6fc734508214cf082987b690b9c397dd93e8a65f/index.pack" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/6fc734508214cf082987b690b9c397dd93e8a65f/index.pack" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/6fc734508214cf082987b690b9c397dd93e8a65f/index.pack.old" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.angular/cache/16.0.4/angular-webpack/6fc734508214cf082987b690b9c397dd93e8a65f/index.pack.old" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/main-page/main-page.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/app.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/login-page/login-page.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/styles.css" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />

Frontend/RiffMasterFront/.idea/workspace.xml

@@ -83,7 +83,7 @@
       <workItem from="1686320426184" duration="4172000" />
       <workItem from="1686487159086" duration="10000" />
       <workItem from="1686487225522" duration="522000" />
-      <workItem from="1686571863797" duration="4325000" />
+      <workItem from="1686571863797" duration="5621000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

Frontend/RiffMasterFront/src/app/app.component.css

@@ -0,0 +1,13 @@
+.riffmaster-home-button {
+  background-color: orange;
+  color: black !important;
+}
+
+.mat-toolbar a {
+  color: orange;
+}
+
+.mat-toolbar .example-icon mat-icon {
+  color: orange;
+}
+

Frontend/RiffMasterFront/src/app/app.component.html

@@ -6,7 +6,7 @@
   <span class="example-spacer"></span>
 
   <div>
-    <a mat-button [routerLink]="'/main'">RiffMaster</a>
+    <a mat-button [routerLink]="'/main'" class="riffmaster-home-button">RiffMaster</a>
     <a mat-button [routerLink]="'/login'">Login</a>
     <a mat-button [routerLink]="'/register'">Sign up</a>
     <a mat-button >Logout</a>

Frontend/RiffMasterFront/src/app/login-page/login-page.component.html

@@ -1 +1,42 @@
-<p>login-page works!</p>
+<!-- login.component.html -->
+
+<div class="container">
+  <div class="margin-column"></div> <!-- First margin column -->
+
+  <div class="col-left">
+    <mat-card class="login-card">
+      <mat-card-header>
+        <mat-card-title>Login</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <mat-form-field appearance="fill">
+          <mat-label>Email</mat-label>
+          <input matInput type="email" placeholder="Enter your email">
+        </mat-form-field>
+
+        <mat-form-field appearance="fill">
+          <mat-label>Password</mat-label>
+          <input matInput type="password" placeholder="Enter your password">
+        </mat-form-field>
+
+        <div class="signup-link">
+          Don't have an account? <a [routerLink]="['/register']">Sign Up</a>
+        </div>
+
+        <button mat-raised-button color="primary" class="login-button">
+          Login
+        </button>
+
+
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <div class="col-right">
+    <div class="buttons-container">
+      <!-- Empty column for alignment purposes -->
+    </div>
+  </div>
+
+  <div class="margin-column"></div> <!-- Second margin column -->
+</div>

Frontend/RiffMasterFront/src/styles.css

@@ -46,5 +46,5 @@ button[type="submit"] {
 }
 
 button[type="submit"]:hover {
-  background-color: #45a049;
+  background-color: orange;
 }