From c7e64d34c333217f2ac40fa722fc6c22ef358e87 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 26 May 2024 19:51:04 +0200
Subject: [PATCH] clean code

---
 src/app/app.component.ts                      |  5 +-
 .../main-login/login/login.component.html     | 13 ++-
 .../main-login/login/login.component.scss     |  4 +-
 .../password-forget.component.html            | 16 ++--
 .../password-forget.component.scss            |  4 +-
 .../password-reset.component.html             | 12 +--
 .../password-reset.component.scss             |  4 +-
 .../searchbar/searchbar.component.html        |  9 --
 .../searchbar/searchbar.component.scss        | 54 ------------
 .../searchbar/searchbar.component.spec.ts     | 23 -----
 .../sidebar/searchbar/searchbar.component.ts  | 38 --------
 .../show-all-users.component.spec.ts          |  8 +-
 .../add-new-channel.component.html            | 44 +++++-----
 .../add-new-channel.component.scss            | 10 +--
 .../components/sidebar/sidebar.component.ts   |  2 -
 .../edit-user-details.component.ts            | 14 +--
 .../header/edit-user/edit-user.component.ts   |  6 +-
 .../components/header/header.component.html   |  4 +-
 .../search-bar/search-bar.component.html      | 25 +++---
 .../search-bar/search-bar.component.scss      | 14 +--
 .../components/user/user.component.html       | 28 ------
 .../components/user/user.component.scss       | 88 -------------------
 .../components/user/user.component.spec.ts    | 23 -----
 .../shared/components/user/user.component.ts  | 22 -----
 24 files changed, 90 insertions(+), 380 deletions(-)
 delete mode 100644 src/app/components/sidebar/searchbar/searchbar.component.html
 delete mode 100644 src/app/components/sidebar/searchbar/searchbar.component.scss
 delete mode 100644 src/app/components/sidebar/searchbar/searchbar.component.spec.ts
 delete mode 100644 src/app/components/sidebar/searchbar/searchbar.component.ts
 delete mode 100644 src/app/shared/components/user/user.component.html
 delete mode 100644 src/app/shared/components/user/user.component.scss
 delete mode 100644 src/app/shared/components/user/user.component.spec.ts
 delete mode 100644 src/app/shared/components/user/user.component.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 90ae32d..d5eef9f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,9 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { UserComponent } from './shared/components/user/user.component';
-import { EditUserDetailsComponent } from './shared/components/header/edit-user/edit-user-details/edit-user-details.component';
-import { ToggleBooleanService } from './service/toggle-boolean.service';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, UserComponent, EditUserDetailsComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
diff --git a/src/app/components/main-login/login/login.component.html b/src/app/components/main-login/login/login.component.html
index 4476587..5b542fc 100644
--- a/src/app/components/main-login/login/login.component.html
+++ b/src/app/components/main-login/login/login.component.html
@@ -1,4 +1,4 @@
-<div class="loginSektion startIntroScrollProtect">
+<section class="startIntroScrollProtect">
   <app-start-header></app-start-header>
   <div class="loginContainer">
     <div class="loginTop">
@@ -32,7 +32,7 @@
           class="inputField"
           #passwordField="ngModel"
           minlength="6"
-          maxlength="16" 
+          maxlength="16"
           [(ngModel)]="this.loginService.password"
           name="password"
           [type]="loginService.passwordFieldType"
@@ -45,7 +45,12 @@
           cols="30"
           rows="10"
         />
-        <img class="passwordEye" (click)="loginService.togglePasswordVisibility()" [src]="loginService.passwordIcon" alt="Toggle visibility">
+        <img
+          class="passwordEye"
+          (click)="loginService.togglePasswordVisibility()"
+          [src]="loginService.passwordIcon"
+          alt="Toggle visibility"
+        />
         @if (!passwordField.valid && passwordField.touched) {
         <p class="error">{{ "login.errorText2" | translate }}</p>
         } @if (loginService.errorMessage) {
@@ -99,4 +104,4 @@
     </div>
   </div>
   <app-footer></app-footer>
-</div>
+</section>
diff --git a/src/app/components/main-login/login/login.component.scss b/src/app/components/main-login/login/login.component.scss
index ed43036..dc78665 100644
--- a/src/app/components/main-login/login/login.component.scss
+++ b/src/app/components/main-login/login/login.component.scss
@@ -3,8 +3,8 @@
   overflow-x: hidden;
   overflow-y: hidden;
 }
-.loginSektion {
-  @include SektionBody;
+section {
+  @include SectionBody;
 }
 .loginContainer {
   @include Card;
diff --git a/src/app/components/main-login/password-forget/password-forget.component.html b/src/app/components/main-login/password-forget/password-forget.component.html
index 7015664..7cf2d32 100644
--- a/src/app/components/main-login/password-forget/password-forget.component.html
+++ b/src/app/components/main-login/password-forget/password-forget.component.html
@@ -1,4 +1,4 @@
-<div class="passwordSektion">
+<section>
   <app-start-header [display]="'none'"></app-start-header>
   <div class="passwordContainer">
     <div class="passwordTop">
@@ -11,10 +11,10 @@
         >
         </app-small-btn>
       </div>
-      <span>{{ 'passwordForget.header' | translate }}</span>
+      <span>{{ "passwordForget.header" | translate }}</span>
     </div>
     <div class="passwordInfoText">
-      <span>{{ 'passwordForget.infoText' | translate }}</span>
+      <span>{{ "passwordForget.infoText" | translate }}</span>
     </div>
     <form
       (ngSubmit)="onSubmit(contactForm)"
@@ -36,20 +36,18 @@
           pattern="[^@]+@[^.]+\..+"
         />
         @if (!emailField.valid && emailField.touched) {
-        <p class="error">{{ 'login.errorText' | translate }}</p>
+        <p class="error">{{ "login.errorText" | translate }}</p>
         }
       </div>
       <div class="bottomInfoText">
-        <span>
-          {{ 'passwordForget.infoTextBottom' | translate }}</span
-        >
+        <span> {{ "passwordForget.infoTextBottom" | translate }}</span>
       </div>
       <div class="passwordBottom">
         <button
           [ngClass]="{ aktivButton: contactForm.valid }"
           [disabled]="!contactForm.valid"
         >
-        {{ 'passwordForget.Btn' | translate }}
+          {{ "passwordForget.Btn" | translate }}
         </button>
       </div>
     </form>
@@ -58,4 +56,4 @@
     <img src="./assets/img/login/email-send-btn.svg" alt="" />
   </div>
   <app-footer></app-footer>
-</div>
+</section>
diff --git a/src/app/components/main-login/password-forget/password-forget.component.scss b/src/app/components/main-login/password-forget/password-forget.component.scss
index 8a6dec6..1cd54cf 100644
--- a/src/app/components/main-login/password-forget/password-forget.component.scss
+++ b/src/app/components/main-login/password-forget/password-forget.component.scss
@@ -1,7 +1,7 @@
 @import "../../../shared/components/login/mixins/mixin.scss";
 
-.passwordSektion {
-  @include SektionBody;
+section {
+  @include SectionBody;
 }
 
 .passwordContainer {
diff --git a/src/app/components/main-login/password-reset/password-reset.component.html b/src/app/components/main-login/password-reset/password-reset.component.html
index 238e083..5b39ee8 100644
--- a/src/app/components/main-login/password-reset/password-reset.component.html
+++ b/src/app/components/main-login/password-reset/password-reset.component.html
@@ -1,4 +1,4 @@
-<div class="passwordSektion">
+<section>
   <app-start-header [display]="'none'"></app-start-header>
   <div class="passwordContainer">
     <div class="passwordTop">
@@ -11,7 +11,7 @@
         >
         </app-small-btn>
       </div>
-      <span>{{ 'passwordReset.header' | translate }}</span>
+      <span>{{ "passwordReset.header" | translate }}</span>
     </div>
 
     <form
@@ -39,7 +39,7 @@
         />
         @if (!passwordField.valid && passwordField.touched) {
         <p class="error">
-          {{ 'passwordReset.errorText' | translate }}
+          {{ "passwordReset.errorText" | translate }}
         </p>
         }
       </div>
@@ -66,7 +66,7 @@
           class="error"
           *ngIf="passwordRepeatField.touched && !passwordsMatch()"
         >
-        {{ 'passwordReset.errorText2' | translate }}
+          {{ "passwordReset.errorText2" | translate }}
         </p>
       </div>
       <div class="passwordBottom">
@@ -74,10 +74,10 @@
           [ngClass]="{ aktivButton: contactForm.valid && passwordsMatch() }"
           [disabled]="!contactForm.valid || !passwordsMatch()"
         >
-        {{ 'passwordReset.Btn' | translate }}
+          {{ "passwordReset.Btn" | translate }}
         </button>
       </div>
     </form>
   </div>
   <app-footer></app-footer>
-</div>
+</section>
diff --git a/src/app/components/main-login/password-reset/password-reset.component.scss b/src/app/components/main-login/password-reset/password-reset.component.scss
index d3d3657..30c316a 100644
--- a/src/app/components/main-login/password-reset/password-reset.component.scss
+++ b/src/app/components/main-login/password-reset/password-reset.component.scss
@@ -1,6 +1,6 @@
 @import "../../../shared/components/login/mixins/mixin.scss";
-.passwordSektion {
-  @include SektionBody;
+section {
+  @include SectionBody;
 }
 .passwordContainer {
   max-width: 606px;
diff --git a/src/app/components/sidebar/searchbar/searchbar.component.html b/src/app/components/sidebar/searchbar/searchbar.component.html
deleted file mode 100644
index c2d538f..0000000
--- a/src/app/components/sidebar/searchbar/searchbar.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<section (click)="openSearchbar($event)">
-    <div class="whiteBox">
-        <input type="text" placeholder="To: #channel or @someone" [(ngModel)]="inputValue">
-        <img src="./assets/img/search-icon.svg" (click)="closeSearchWindow($event)">
-    </div>
-    @if (inputValue) {
-        <div class="suggestions"></div>
-    }
-</section>
diff --git a/src/app/components/sidebar/searchbar/searchbar.component.scss b/src/app/components/sidebar/searchbar/searchbar.component.scss
deleted file mode 100644
index 1b10a30..0000000
--- a/src/app/components/sidebar/searchbar/searchbar.component.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@import "./../../../../styles.scss";
-
-section{
-    position: relative;
-    @include displayFlex();
-    .whiteBox{
-        z-index: 1;
-        position: absolute;
-        top: -16px;
-        left: 322px;
-        @include displayFlex();
-        width: auto;
-        height: 56px;
-        background-color: #fff;
-        padding: 2px 8px 2px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 34px;
-        border-top-left-radius: 0;
-        box-shadow: rgb(111 139 169) 0px 20px 30px -10px;
-        input{
-            width: 30vw;
-            height: 46px;
-            border-radius: 26px;
-            padding-right: 40px;
-            padding-left: 8px;
-            margin-right: 2px;
-            font-size: larger;
-            border: 1px solid #888dec;
-            font-family: "Nunito", sans-serif;
-            outline: none;
-            &:hover{
-                border: 1px solid #5f66e7;
-            }
-        }
-        img{
-            margin-left: -36px;
-            padding-right: 4px;
-            cursor: pointer;
-        }
-    }
-}
-
-.suggestions{
-    width: 200px;
-    height: 300px;
-    background-color: coral;
-    position: absolute;
-    top: 46px;
-    left: 360px;
-    border-bottom-left-radius: 25px;
-    border-bottom-right-radius: 25px;
-    z-index: 1;
-    box-shadow: rgb(111 139 169) 0px 20px 30px -10px;
-}
\ No newline at end of file
diff --git a/src/app/components/sidebar/searchbar/searchbar.component.spec.ts b/src/app/components/sidebar/searchbar/searchbar.component.spec.ts
deleted file mode 100644
index 5031dad..0000000
--- a/src/app/components/sidebar/searchbar/searchbar.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SearchbarComponent } from './searchbar.component';
-
-describe('SearchbarComponent', () => {
-  let component: SearchbarComponent;
-  let fixture: ComponentFixture<SearchbarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SearchbarComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(SearchbarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/components/sidebar/searchbar/searchbar.component.ts b/src/app/components/sidebar/searchbar/searchbar.component.ts
deleted file mode 100644
index fff28e9..0000000
--- a/src/app/components/sidebar/searchbar/searchbar.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { ToggleBooleanService } from '../../../service/toggle-boolean.service';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-searchbar',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  templateUrl: './searchbar.component.html',
-  styleUrl: './searchbar.component.scss',
-})
-export class SearchbarComponent {
-  inputValue: string = '';
-
-  constructor(private toggleBoolean: ToggleBooleanService) {}
-
-
-  /**
-   * Closes the search window.
-   * @param event The event object.
-   */
-  closeSearchWindow(event: Event) {
-    this.toggleBoolean.openSearchWindow = false;
-    event.stopPropagation();
-    this.inputValue = '';
-  }
-
-  /**
-   * Opens the search bar.
-   * @param event The event object.
-   */
-  openSearchbar(event: Event){
-    this.toggleBoolean.openSearchWindow = true;
-    event.stopPropagation();
-  }
-  
-}
diff --git a/src/app/components/sidebar/show-all-users/show-all-users.component.spec.ts b/src/app/components/sidebar/show-all-users/show-all-users.component.spec.ts
index 441ed21..cc51c8d 100644
--- a/src/app/components/sidebar/show-all-users/show-all-users.component.spec.ts
+++ b/src/app/components/sidebar/show-all-users/show-all-users.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ShowAllUsersComponent } from './show-all-users.component';
 
 describe('ShowAllUsersComponent', () => {
@@ -8,10 +7,9 @@ describe('ShowAllUsersComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ShowAllUsersComponent]
-    })
-    .compileComponents();
-    
+      imports: [ShowAllUsersComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ShowAllUsersComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.html b/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.html
index 2b39068..e25162e 100644
--- a/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.html
+++ b/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.html
@@ -10,8 +10,8 @@
 <div class="newChannelDescription">
   @if (!showNextWindow) {
   <div class="whiteWindow">
-    <div class="posiotionHeader">
-      <p>{{ 'add-new-channel.header' | translate }}</p>
+    <div class="positionHeader">
+      <p>{{ "add-new-channel.header" | translate }}</p>
       <app-small-btn
         [imgSrc]="'closeIcon.svg'"
         [imgSize]="'16px'"
@@ -20,21 +20,15 @@
         (click)="toggleShowAddChannelBox()"
       ></app-small-btn>
     </div>
-    <span class="infoMsg"
-      >{{ 'add-new-channel.info' | translate }}</span
-    >
+    <span class="infoMsg">{{ "add-new-channel.info" | translate }}</span>
     <div class="descriptionBox">
-      <p>{{ 'add-new-channel.header2' | translate }}</p>
+      <p>{{ "add-new-channel.header2" | translate }}</p>
       &nbsp;
-      <span>{{ 'add-new-channel.required' | translate }}</span>
+      <span>{{ "add-new-channel.required" | translate }}</span>
       @if (chechIfChannelExist(channelName)) {
-        <p class="warning">{{ 'add-new-channel.warning' | translate }}</p>
+      <p class="warning">{{ "add-new-channel.warning" | translate }}</p>
       }
-      <img
-        class="hashtag"
-        src="./assets/img/hashtag.svg"
-        alt=""
-      />
+      <img class="hashtag" src="./assets/img/hashtag.svg" alt="" />
     </div>
     <input
       type="text"
@@ -45,9 +39,9 @@
       (keyup)="checkIfChannelNameIsValid(channelName)"
     />
     <div class="descriptionBox">
-      <p>{{ 'add-new-channel.description' | translate }}</p>
+      <p>{{ "add-new-channel.description" | translate }}</p>
       &nbsp;
-      <span>{{ 'add-new-channel.optional' | translate }}</span>
+      <span>{{ "add-new-channel.optional" | translate }}</span>
     </div>
     <textarea
       id=""
@@ -63,17 +57,17 @@
         [disabled]="!channelService.btnIsValid"
         [ngClass]="{
           disabledBtn: !channelService.btnIsValid,
-          furterBtnClass: channelService.btnIsValid
+          enableBtn: channelService.btnIsValid
         }"
       >
-      {{ 'add-new-channel.create' | translate }}
+        {{ "add-new-channel.create" | translate }}
       </button>
     </div>
   </div>
   } @if (showNextWindow || showNextWindowMobile) {
-  <div class="smalWhiteBox" (click)="toggleAddedUserBox()">
+  <div class="smallWhiteBox" (click)="toggleAddedUserBox()">
     <div class="headerAddPeople">
-      <h2> {{ 'add-new-channel.addPeople' | translate }}</h2>
+      <h2>{{ "add-new-channel.addPeople" | translate }}</h2>
       <app-small-btn
         [imgSrc]="'closeIcon.svg'"
         [imgSize]="'16px'"
@@ -90,7 +84,11 @@
         alt=""
         (click)="toggleBtnFalse()"
       />
-      <p> {{ 'add-new-channel.addAll' | translate }}&nbsp;<span> {{ 'add-new-channel.devspace' | translate }}</span></p>
+      <p>
+        {{ "add-new-channel.addAll" | translate }}&nbsp;<span>
+          {{ "add-new-channel.devspace" | translate }}</span
+        >
+      </p>
     </div>
     <div class="positionSelectionBtn">
       <img
@@ -99,7 +97,7 @@
         }}"
         (click)="toggleBtnTrue()"
       />
-      <p> {{ 'add-new-channel.add' | translate }}</p>
+      <p>{{ "add-new-channel.add" | translate }}</p>
     </div>
     <div class="addedUserBox" *ngIf="changeImg">
       <div
@@ -143,7 +141,9 @@
       </div>
     </div>
     <div class="positionCreateBtn">
-      <button class="btnBox" (click)="addNewChannel()"> {{ 'add-new-channel.create' | translate }}</button>
+      <button class="btnBox" (click)="addNewChannel()">
+        {{ "add-new-channel.create" | translate }}
+      </button>
     </div>
   </div>
   }
diff --git a/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.scss b/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.scss
index 77f049e..6b16ec4 100644
--- a/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.scss
+++ b/src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.scss
@@ -49,7 +49,7 @@
   padding: 32px;
 }
 
-.posiotionHeader {
+.positionHeader {
   @include displayFlex($j: space-between);
   width: 100%;
   p {
@@ -93,7 +93,7 @@ textarea {
     font-weight: 400;
     padding-top: 6px;
   }
-  .warning{
+  .warning {
     font-size: 18px;
     font-weight: 500;
     padding-top: 6px;
@@ -116,7 +116,7 @@ textarea {
 .btnBox {
   width: 100%;
   @include displayFlex($j: flex-end);
-  .furterBtnClass {
+  .enableBtn {
     width: 120px;
     height: 48px;
     background-color: white;
@@ -133,7 +133,7 @@ textarea {
   }
 }
 
-.smalWhiteBox {
+.smallWhiteBox {
   padding: 32px;
   width: 48vw;
   height: auto;
@@ -322,7 +322,7 @@ textarea {
     border-radius: 0;
   }
 
-  .smalWhiteBox {
+  .smallWhiteBox {
     position: absolute;
     bottom: 0;
     left: 0;
diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts
index 0946046..d8c0046 100644
--- a/src/app/components/sidebar/sidebar.component.ts
+++ b/src/app/components/sidebar/sidebar.component.ts
@@ -5,7 +5,6 @@ import { SidebarDirectMessagesComponent } from './sidebar-direct-messages/sideba
 import { SmallBtnComponent } from '../../shared/components/small-btn/small-btn.component';
 import { CommonModule } from '@angular/common';
 import { ChannleService } from '../../service/channle.service';
-import { SearchbarComponent } from './searchbar/searchbar.component';
 import { ToggleBooleanService } from '../../service/toggle-boolean.service';
 import { ChatService } from '../../service/chat.service';
 import { SharedService } from '../../service/shared.service';
@@ -19,7 +18,6 @@ import { SearchBarComponent } from '../../shared/components/header/search-bar/se
     SidebarDirectMessagesComponent,
     SmallBtnComponent,
     CommonModule,
-    SearchbarComponent,
     SearchBarComponent,
   ],
   templateUrl: './sidebar.component.html',
diff --git a/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.ts b/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.ts
index 48b2a14..a19e689 100644
--- a/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.ts
+++ b/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.ts
@@ -28,18 +28,18 @@ import { SmallBtnComponent } from '../../../small-btn/small-btn.component';
   styleUrl: './edit-user-details.component.scss',
 })
 export class EditUserDetailsComponent {
+  @Input() openEditUserValue!: boolean;
+  @Input() showCurrentProfile!: boolean;
+  @Output() closeEditWindow = new EventEmitter<boolean>();
+  @Output() saveUserData = new EventEmitter<boolean>();
+  @ViewChild('inputName') inputName!: ElementRef;
+  @ViewChild('inputEmail') inputEmail!: ElementRef;
+
   asGuestOnline: boolean = false;
   nameValueBoolean: boolean = false;
   emailValueBoolean: boolean = false;
   changedName: string = '';
   changedEmail: string = '';
-  @Input() openEditUserValue!: boolean;
-  @Input() showCurrentProfile!: boolean;
-  @ViewChild('inputName') inputName!: ElementRef;
-  @ViewChild('inputEmail') inputEmail!: ElementRef;
-
-  @Output() closeEditWindow = new EventEmitter<boolean>();
-  @Output() saveUserData = new EventEmitter<boolean>();
 
   constructor(
     public userService: UserService,
diff --git a/src/app/shared/components/header/edit-user/edit-user.component.ts b/src/app/shared/components/header/edit-user/edit-user.component.ts
index b81c51a..ce202bc 100644
--- a/src/app/shared/components/header/edit-user/edit-user.component.ts
+++ b/src/app/shared/components/header/edit-user/edit-user.component.ts
@@ -18,12 +18,12 @@ import { SmallBtnComponent } from '../../small-btn/small-btn.component';
   styleUrl: './edit-user.component.scss',
 })
 export class EditUserComponent {
+  @Input() showCurrentProfile!: boolean;
+  @Output() testValueChange = new EventEmitter<boolean>();
+
   isOnline = true;
   openProfil = false;
   openEditUserValue = false;
-  @Input() showCurrentProfile!: boolean;
-
-  @Output() testValueChange = new EventEmitter<boolean>();
 
   constructor(public userService: UserService) {}
 
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index 1d99c93..7403c90 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -17,7 +17,7 @@
   <div>
     <div class="rightSide">
       @for(i of userService.getCurentUsers(); track i){
-      <p class="fontNunito">{{ i.firstName }} {{ i.lastName }}</p>
+      <p>{{ i.firstName }} {{ i.lastName }}</p>
 
       <div class="img" (click)="showSideMenu()">
         <img src="{{ i.avatar }}" class="profileImg" />
@@ -48,7 +48,7 @@
   [ngClass]="{ dBlock: openMenu, dNone: !openMenu }"
   (click)="showSideMenu()"
 >
-  <div class="whiteBox fontNunito">
+  <div class="whiteBox">
     <p (click)="showProfile()" class="profilBtn">
       {{ "login-header.profil" | translate }}
     </p>
diff --git a/src/app/shared/components/header/search-bar/search-bar.component.html b/src/app/shared/components/header/search-bar/search-bar.component.html
index e810ad3..4e8f8d1 100644
--- a/src/app/shared/components/header/search-bar/search-bar.component.html
+++ b/src/app/shared/components/header/search-bar/search-bar.component.html
@@ -3,7 +3,6 @@
     type="text"
     maxlength="24"
     placeholder="{{ 'search-bar.placeholder' | translate }}"
-    class="fontNunito"
     [(ngModel)]="inputValue"
     (keyup)="filterAllInfo(inputValue)"
   />
@@ -17,9 +16,9 @@
   >
     <!-----Search output------>
     @if (filteredUsers.length > 0 && inputValue != '') {
-    <div class="contantBox">
-      <h4>{{ 'search-bar-header.user' | translate }}:</h4>
-      <div class="ansersBox">
+    <div class="contentBox">
+      <h4>{{ "search-bar-header.user" | translate }}:</h4>
+      <div class="answersBox">
         @for (user of filteredUsers; track user) {
         <div
           class="userDiv"
@@ -43,9 +42,9 @@
       </div>
     </div>
     } @if (filteredChannels.length > 0 && inputValue != '') {
-    <div class="contantBox">
-      <h4>{{ 'search-bar-header.channels' | translate }}:</h4>
-      <div class="ansersBox">
+    <div class="contentBox">
+      <h4>{{ "search-bar-header.channels" | translate }}:</h4>
+      <div class="answersBox">
         @for (channel of filteredChannels; track channel) {
         <p
           class="channelName"
@@ -59,15 +58,15 @@
       </div>
     </div>
     } @if (filteredChats.length > 0 && inputValue != '') {
-    <div class="contantBoxChats">
-      <h4>{{ 'search-bar-header.thread' | translate }}:</h4>
+    <div class="contentBoxChats">
+      <h4>{{ "search-bar-header.thread" | translate }}:</h4>
       <div class="channelAnswers">
         @for (chat of filteredChats; track chat) {
-        <div class="ansersBoxChats">
+        <div class="answersBoxChats">
           <p class="threadNmae">[ {{ getChannel(chat.channelId) }} ]</p>
-          <div class="threadContetntBox">
+          <div class="threadContentBox">
             <p
-              class="threadContetnt"
+              class="threadContent"
               [innerHTML]="chat.message | highlight : inputValue"
               routerLink="/main/{{ chat.channelId }}"
               (click)="closeSecondaryChatAndSidebar()"
@@ -80,7 +79,7 @@
     } @if ((filteredUsers.length === 0 && inputValue != '') &&
     (filteredChannels.length === 0 && inputValue != '') && (filteredChats.length
     === 0 && inputValue != '')) {
-    <p class="threadContetnt">{{ "search-bar.errorMessage" | translate }}</p>
+    <p class="threadContent">{{ "search-bar.errorMessage" | translate }}</p>
     }
   </div>
 </div>
diff --git a/src/app/shared/components/header/search-bar/search-bar.component.scss b/src/app/shared/components/header/search-bar/search-bar.component.scss
index 5aeabd3..4cb9a75 100644
--- a/src/app/shared/components/header/search-bar/search-bar.component.scss
+++ b/src/app/shared/components/header/search-bar/search-bar.component.scss
@@ -27,26 +27,26 @@
   background-color: white;
   box-shadow: rgb(79 98 117) 0px 20px 30px -10px;
   scrollbar-width: none;
-  overflow: scroll;
+  overflow: auto;
   -ms-overflow-style: none;
   display: flex;
   gap: 20px;
   flex-direction: column;
 }
-.contantBox {
+.contentBox {
   @include displayFlex($j: space-between, $a: flex-start);
   width: 100%;
   h4 {
     width: 30%;
   }
-  .ansersBox {
+  .answersBox {
     @include displayFlex($a: flex-start, $g: 4px);
     flex-direction: column;
     width: 70%;
   }
 }
 
-.contantBoxChats {
+.contentBoxChats {
   @include displayFlex($j: space-between, $a: flex-start);
   flex-direction: column;
   width: 100%;
@@ -54,15 +54,15 @@
     width: 100%;
     @include displayFlex($g: 4px);
     flex-direction: column;
-    .ansersBoxChats {
+    .answersBoxChats {
       width: 100%;
       @include displayFlex($j: space-between, $a: flex-start);
       .threadNmae {
         width: 30%;
       }
-      .threadContetntBox {
+      .threadContentBox {
         width: 70%;
-        .threadContetnt {
+        .threadContent {
           width: fit-content;
           padding: 4px;
           &:hover {
diff --git a/src/app/shared/components/user/user.component.html b/src/app/shared/components/user/user.component.html
deleted file mode 100644
index cf90ddb..0000000
--- a/src/app/shared/components/user/user.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="mainBox" [ngClass]="{'dBlock': openProfil, 'dNone': !openProfil}">
-    <div class="whiteBox">
-        <div class="boxHeader fontNunito">
-            <p>Profile</p>
-            <img src="./assets/img/closeIcon.svg">
-        </div>
-
-        <img src="./assets/img/charater1.svg" class="profileImg" (click)="showSideMenu()">
-
-        <div class="detailsBox">
-            <h1 class="fontNunito">Max Müller</h1>
-            <div class="statusBox">
-                <img src="./assets/img/{{ isOnline? 'onlineRing.svg' : 'offlineRing.svg'}}">
-                <p [ngClass]="{'fontColorGreen': isOnline }">Aktiv</p>
-            </div>
-
-            <div class="emailBox">
-                <img src="./assets/img/mail-icon.svg">
-                <div class="emailH2">
-                    <h2>{{ 'user.email' | translate }}</h2>
-                    <a href="mailto:wwweewefeff&#64;dede.de" target="_blank" class="fontNunito">maxMüller&#64;ffe.de</a>
-                </div>
-            </div>
-        </div>
-
-        <button><img src="./assets/img/messageIcon.svg">{{ 'user.message' | translate }}</button>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/app/shared/components/user/user.component.scss b/src/app/shared/components/user/user.component.scss
deleted file mode 100644
index 8b97e69..0000000
--- a/src/app/shared/components/user/user.component.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-@import '../../../../styles.scss';
-
-.mainBox{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.3);
-    @include displayFlex();
-    z-index: 5;
-    .whiteBox{
-        width: 400px;
-        height: auto;
-        background-color: whitesmoke;
-        border-radius: 15px;
-        @include displayFlex();
-        flex-direction: column;
-        padding-top: 32px;
-        .boxHeader{
-            width: 360px;
-            @include displayFlex($j: space-between);
-            >p{
-                font-size: 20px;
-                font-weight: 600;
-                margin: 0;
-            }
-            >img{
-                cursor: pointer;
-            }
-
-        }
-        .profileImg{
-            width: 200px;
-            object-fit: cover;
-            border-radius: 50%;
-            margin: 56px;
-        }
-        >button{
-            @include displayFlex($g: 12px);
-            background-color: #444df2;
-            border: none;
-            border-radius: 25px;
-            padding: 12px;
-            padding-left: 22px;
-            padding-right: 22px;
-            font-size: larger;
-            font-weight: 500;
-            color: white;
-            margin: 32px;
-            cursor: pointer;
-        }
-    }
-}
-
-.detailsBox{
-    width: 360px;
-    h1{
-        font-size: 32px;
-        font-weight: 700;
-        margin-bottom: 20px;
-    }
-    .statusBox{
-        @include displayFlex($j:flex-start, $g: 12px);
-        margin-bottom: 40px;
-        >p{
-            margin: 0;
-            font-size: medium;
-            font-weight: 500;
-        }
-    }
-
-}
-
-.fontColorGreen{
-    color: #92C83E;
-}
-
-.emailBox{
-    @include displayFlex($j: flex-start, $a: flex-start, $g: 20px);
-    .emailH2{
-        >a{
-            color: #4EA1FF;
-            font-size: 16px;
-            text-decoration: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/app/shared/components/user/user.component.spec.ts b/src/app/shared/components/user/user.component.spec.ts
deleted file mode 100644
index 04025f1..0000000
--- a/src/app/shared/components/user/user.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { UserComponent } from './user.component';
-
-describe('UserComponent', () => {
-  let component: UserComponent;
-  let fixture: ComponentFixture<UserComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [UserComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(UserComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/shared/components/user/user.component.ts b/src/app/shared/components/user/user.component.ts
deleted file mode 100644
index edc8b2a..0000000
--- a/src/app/shared/components/user/user.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-user',
-  standalone: true,
-  imports: [CommonModule, TranslateModule],
-  templateUrl: './user.component.html',
-  styleUrl: './user.component.scss'
-})
-export class UserComponent {
-  isOnline = true;
-  openProfil = false;
-
-  /**
-   * Toggles the display of the side menu for user profile.
-   */
-  showSideMenu() {
-    this.openProfil = !this.openProfil;
-  }
-}