RIFFMASTER: add orange theme to login and register page

Backend/Spring/.idea/workspace.xml

@@ -14,9 +14,9 @@
       <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/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/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/register-page/register-page.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-page.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../../Frontend/RiffMasterFront/src/app/register-page/register-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" />

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="5621000" />
+      <workItem from="1686571863797" duration="7208000" />
     </task>
     <task id="LOCAL-00001" summary="RIFFMASTER: add frontend project">
       <created>1685976235580</created>

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

@@ -0,0 +1,54 @@
+/* global.css */
+
+.container {
+  display: flex;
+}
+
+.margin-column {
+  flex: 1;
+}
+
+.col-left {
+  flex: 1;
+}
+
+.col-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-card mat-card-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.mat-form-field {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.signup-link {
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.signup-link a {
+  color: orange;
+  text-decoration: none;
+}
+
+.login-button {
+  width: 100%;
+  background-color: orange;
+  color: black;
+  margin-bottom: 10px;
+}

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

@@ -26,8 +26,6 @@
         <button mat-raised-button color="primary" class="login-button">
           Login
         </button>
-
-
       </mat-card-content>
     </mat-card>
   </div>

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

@@ -40,12 +40,12 @@
 
       <div class="button-row">
 
-        <button mat-raised-button color="primary" (click)="download()">
+        <button mat-raised-button  (click)="download()">
           <mat-icon>cloud_download</mat-icon>
           Download
         </button>
 
-        <button mat-raised-button color="primary" (click)="upload()">
+        <button mat-raised-button color="accent" (click)="upload()">
           <mat-icon>cloud_upload</mat-icon>
           Upload
         </button>

Frontend/RiffMasterFront/src/app/register-page/register-page.component.css

@@ -0,0 +1,54 @@
+/* global.css */
+
+.container {
+  display: flex;
+}
+
+.margin-column {
+  flex: 1;
+}
+
+.col-left {
+  flex: 1;
+}
+
+.col-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.login-card mat-card-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.mat-form-field {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.signup-link {
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.signup-link a {
+  color: orange;
+  text-decoration: none;
+}
+
+.login-button {
+  width: 100%;
+  background-color: orange;
+  color: black;
+  margin-bottom: 10px;
+}

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

@@ -1 +1,46 @@
-<p>register-page works!</p>
+<!-- register.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>Register</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>
+
+        <mat-form-field appearance="fill">
+          <mat-label>Confirm Password</mat-label>
+          <input matInput type="password" placeholder="Confirm your password">
+        </mat-form-field>
+
+        <div class="signup-link">
+          Already have an account? <a [routerLink]="['/login']">Login</a>
+        </div>
+
+        <button mat-raised-button color="primary" class="login-button">
+          Register
+        </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

@@ -1,5 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
+
+
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
@@ -38,13 +40,15 @@ button[type="submit"] {
   width: 100%;
   padding: 10px;
   font-size: 16px;
-  background-color: #4CAF50;
+  background-color: orange !important;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }
 
+
+
 button[type="submit"]:hover {
   background-color: orange;
 }