feat: NCS-63 User account implementation (#2)

User Profile info, no game before login/register, menu bar

---------

Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de>
Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Reviewed-on: #2

src/app/components/input-card/input-card.component.css

@@ -1,3 +1,5 @@
+@import '../../button-template.css';
+
 .input-card {
   background: var(--color-bg-card);
   border: var(--border-width) solid var(--color-border);
@@ -40,22 +42,6 @@
 
 }
 
-.input-card .btn {
-  border: var(--button-border);
-  border-radius: var(--border-radius-sm);
-  background: var(--color-bg-button);
-  color: var(--color-text-primary);
-  padding: var(--button-padding);
-  cursor: pointer;
-  font-weight: 600;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.input-card .btn:hover {
-  background: var(--color-bg-button-hover);
-  color: var(--color-text-button-hover);
-}
-
 .hint-text {
   margin: 0;
   color: var(--color-text-primary);

src/app/components/input-card/input-card.component.html

@@ -2,30 +2,18 @@
   <label>{{ label }}</label>
 
   @if (inputType === 'textarea') {
-    <textarea
-      #textareaInput
-      [placeholder]="placeholder"
-      [value]="value"
-      [rows]="rows"
-      (input)="onValueChange(textareaInput.value)"
-      class="form-input"
-    ></textarea>
+  <textarea #textareaInput [placeholder]="placeholder" [value]="value" [rows]="rows"
+    (input)="onValueChange(textareaInput.value)" class="form-input"></textarea>
   } @else {
-    <input
-      #textInput
-      type="text"
-      [placeholder]="placeholder"
-      [value]="value"
-      (input)="onValueChange(textInput.value)"
-      class="form-input"
-    />
+  <input #textInput type="text" [placeholder]="placeholder" [value]="value" (input)="onValueChange(textInput.value)"
+    class="form-input" />
   }
 
-  <button type="button" class="btn w-100" (click)="onButtonClick()">
+  <button type="button" class="app-btn w-100" (click)="onButtonClick()">
     {{ buttonLabel }}
   </button>
 
   @if (hintText) {
-    <p class="hint-text">{{ hintText }}</p>
+  <p class="hint-text">{{ hintText }}</p>
   }
-</section>
+</section>