add new "btn-large" component and move "btn-small" to buttons folder

src/app/components/main-chat/channel-information/channel-information.component.scss

@@ -21,6 +21,7 @@
     height: fit-content;
     overflow: none;
     .content {
+      padding-right: 8px;
       overflow: auto;
       max-height: 580px;
     }

src/app/components/main-chat/channel-information/channel-information.component.ts

@@ -7,7 +7,7 @@ import { UserService } from '../../../service/user.service';
 import { Router } from '@angular/router';
 import { User } from '../../../interface/user.interface';
 import { SharedService } from '../../../service/shared.service';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { OpenSendPrvMessageWindowComponent } from '../show-channel-member/open-send-prv-message-window/open-send-prv-message-window.component';
 import { TranslateModule } from '@ngx-translate/core';
 

src/app/components/main-chat/chat-msg-box/chat-msg-box.component.ts

@@ -13,7 +13,7 @@ import { Firestore, addDoc, collection } from '@angular/fire/firestore';
 import { DownloadFilesService } from '../../../service/files.service';
 import { UserService } from '../../../service/user.service';
 import { EmojiPickerComponent } from '../../../shared/components/emoji-picker/emoji-picker.component';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { ChatService } from '../../../service/chat.service';
 import { Router } from '@angular/router';
 import { ChannelService } from '../../../service/channel.service';

src/app/components/main-chat/main-chat.component.ts

@@ -16,7 +16,7 @@ import { SingleChatComponent } from './single-chat/single-chat.component';
 import { ToggleBooleanService } from '../../service/toggle-boolean.service';
 import { ChatMsgBoxComponent } from './chat-msg-box/chat-msg-box.component';
 import { FormsModule } from '@angular/forms';
-import { SmallBtnComponent } from '../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../shared/components/buttons/small-btn/small-btn.component';
 import { ShowChannelMemberComponent } from './show-channel-member/show-channel-member.component';
 import { SharedService } from '../../service/shared.service';
 import { ChannelInformationComponent } from './channel-information/channel-information.component';

src/app/components/main-chat/show-channel-member/show-channel-member.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { ToggleBooleanService } from '../../../service/toggle-boolean.service';
 import { CommonModule } from '@angular/common';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { User } from '../../../interface/user.interface';
 import { FormsModule } from '@angular/forms';
 import { ChannelService } from '../../../service/channel.service';

src/app/components/main-chat/single-chat/edit-msg/edit-msg.component.ts

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, NgForm } from '@angular/forms';
 import { ChatService } from '../../../../service/chat.service';
 import { PickerComponent } from '@ctrl/ngx-emoji-mart';
-import { SmallBtnComponent } from '../../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../../shared/components/buttons/small-btn/small-btn.component';
 import { DownloadFilesService } from '../../../../service/files.service';
 import { EmojiPickerComponent } from '../../../../shared/components/emoji-picker/emoji-picker.component';
 import { UserService } from '../../../../service/user.service';

src/app/components/main-chat/single-chat/options-menu/options-menu.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { SingleChatComponent } from '../single-chat.component';
-import { SmallBtnComponent } from '../../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../../shared/components/buttons/small-btn/small-btn.component';
 import { ChatService } from '../../../../service/chat.service';
 import { EmojiPickerComponent } from '../../../../shared/components/emoji-picker/emoji-picker.component';
 import { UserService } from '../../../../service/user.service';

src/app/components/main-chat/single-chat/reaction-emojis/reaction-emojis.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { SmallBtnComponent } from '../../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../../shared/components/buttons/small-btn/small-btn.component';
 import { CommonModule } from '@angular/common';
 import {
   Chat,

src/app/components/main-chat/single-chat/single-chat.component.ts

@@ -9,7 +9,7 @@ import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
 import { OptionsMenuComponent } from './options-menu/options-menu.component';
 import { AttachmentsComponent } from './attachments/attachments.component';
 import { ChatMsgBoxComponent } from '../chat-msg-box/chat-msg-box.component';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { PickerComponent } from '@ctrl/ngx-emoji-mart';
 import { EditMsgComponent } from './edit-msg/edit-msg.component';

src/app/components/main-login/choose-avatar/choose-avatar.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { FooterComponent } from '../../../shared/components/login/footer/footer.component';
 import { RouterModule } from '@angular/router';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 import { Firestore } from '@angular/fire/firestore';
 import { CommonModule } from '@angular/common';

src/app/components/main-login/password-forget/password-forget.component.ts

@@ -3,7 +3,7 @@ import { FooterComponent } from '../../../shared/components/login/footer/footer.
 import { FormsModule, NgForm } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { getAuth, sendPasswordResetEmail } from 'firebase/auth';
 import { Firestore } from '@angular/fire/firestore';
 import { Router } from '@angular/router';

src/app/components/main-login/password-reset/password-reset.component.ts

@@ -4,7 +4,7 @@ import { FormsModule, NgForm } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { StartHeaderComponent } from '../../../shared/components/login/start-header/start-header.component';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { Router, ActivatedRoute } from '@angular/router';
 import { getAuth } from 'firebase/auth';
 import { confirmPasswordReset } from 'firebase/auth';

src/app/components/main-login/register/register.component.ts

@@ -3,7 +3,7 @@ import { FormsModule, NgForm } from '@angular/forms';
 import { Firestore } from '@angular/fire/firestore';
 import { CommonModule } from '@angular/common';
 import { RouterLink, Router } from '@angular/router';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { FooterComponent } from '../../../shared/components/login/footer/footer.component';
 import { loginService } from '../../../service/login.service';
 import { StartHeaderComponent } from '../../../shared/components/login/start-header/start-header.component';

src/app/components/sidebar/show-all-users/show-all-users.component.ts

@@ -4,7 +4,7 @@ import { UserService } from '../../../service/user.service';
 import { User } from '../../../interface/user.interface';
 import { ChannelService } from '../../../service/channel.service';
 import { Router } from '@angular/router';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { ChatService } from '../../../service/chat.service';
 import { SharedService } from '../../../service/shared.service';
 import { ToggleBooleanService } from '../../../service/toggle-boolean.service';

src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.html

@@ -56,16 +56,11 @@
       placeholder="{{ 'add-new-channel.placeholder2' | translate }}"
     ></textarea>
     <div class="btnBox">
-      <button
+      <app-btn-large
         (click)="createNewChannel()"
+        [value]="'add-new-channel.create' | translate"
         [disabled]="!channelService.btnIsValid"
-        [ngClass]="{
+      ></app-btn-large>
-          disabledBtn: !channelService.btnIsValid,
-          enableBtn: channelService.btnIsValid
-        }"
-      >
-        {{ "add-new-channel.create" | translate }}
-      </button>
     </div>
   </div>
   } @if (showNextWindow || showNextWindowMobile) {
@@ -145,9 +140,10 @@
       </div>
     </div>
     <div class="positionCreateBtn">
-      <button class="btnBox" (click)="addNewChannel()">
+      <app-btn-large
-        {{ "add-new-channel.create" | translate }}
+        (click)="addNewChannel()"
-      </button>
+        [value]="'add-new-channel.create' | translate"
+      ></app-btn-large>
     </div>
   </div>
   }

src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { ChannelService } from '../../../../service/channel.service';
-import { SmallBtnComponent } from '../../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../../shared/components/buttons/small-btn/small-btn.component';
 import { FormsModule } from '@angular/forms';
 import { UserService } from '../../../../service/user.service';
 import { User } from '../../../../interface/user.interface';
@@ -10,11 +10,18 @@ import { Router } from '@angular/router';
 import { SharedService } from '../../../../service/shared.service';
 import { ToggleBooleanService } from '../../../../service/toggle-boolean.service';
 import { TranslateModule } from '@ngx-translate/core';
+import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
 
 @Component({
   selector: 'app-add-new-channel',
   standalone: true,
-  imports: [CommonModule, SmallBtnComponent, FormsModule, TranslateModule],
+  imports: [
+    CommonModule,
+    SmallBtnComponent,
+    BtnLargeComponent,
+    FormsModule,
+    TranslateModule,
+  ],
   templateUrl: './add-new-channel.component.html',
   styleUrl: './add-new-channel.component.scss',
 })

src/app/components/sidebar/sidebar-channels/sidebar-channels.component.ts

@@ -3,7 +3,7 @@ import { ChannelService } from '../../../service/channel.service';
 import { Channel, publicChannels } from '../../../interface/channel.interface';
 import { RouterLink } from '@angular/router';
 import { ChatService } from '../../../service/chat.service';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AddNewChannelComponent } from './add-new-channel/add-new-channel.component';

src/app/components/sidebar/sidebar-direct-messages/sidebar-direct-messages.component.ts

@@ -2,7 +2,7 @@ import { Component, HostListener, Input } from '@angular/core';
 import { SidebarDirectMessagesUserComponent } from '../sidebar-direct-messages-user/sidebar-direct-messages-user.component';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { SmallBtnComponent } from '../../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../shared/components/buttons/small-btn/small-btn.component';
 import { ShowAllUsersComponent } from '../show-all-users/show-all-users.component';
 
 @Component({

src/app/components/sidebar/sidebar.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { SidebarChannelsComponent } from './sidebar-channels/sidebar-channels.component';
 import { SidebarDirectMessagesComponent } from './sidebar-direct-messages/sidebar-direct-messages.component';
-import { SmallBtnComponent } from '../../shared/components/small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../shared/components/buttons/small-btn/small-btn.component';
 import { CommonModule } from '@angular/common';
 import { ChannelService } from '../../service/channel.service';
 import { ToggleBooleanService } from '../../service/toggle-boolean.service';

src/app/shared/components/buttons/btn-large/btn-large.component.html

@@ -0,0 +1,3 @@
+<button class="btn" type="{{ type }}" [disabled]="disabled">
+  <p>{{ value }}</p>
+</button>

src/app/shared/components/buttons/btn-large/btn-large.component.scss

@@ -0,0 +1,33 @@
+.btn {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px;
+  width: fit-content;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 24px;
+  background-color: #444df2;
+  border: 1px solid #444df2;
+  transition: 300ms ease-in-out;
+  cursor: pointer;
+  p {
+    color: white;
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 4px 0 0;
+  }
+  &:not(:disabled):hover {
+    background-color: white;
+    border: 1px solid #444df2;
+    transition: 300ms ease-in-out;
+    color: #444df2;
+    p {
+      color: #444df2;
+    }
+  }
+  &:disabled {
+    background-color: gray;
+    color: darken(white, 10%);
+    border: 1px solid gray;
+    cursor: default;
+  }
+}

src/app/shared/components/buttons/btn-large/btn-large.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BtnLargeComponent } from './btn-large.component';
+
+describe('BtnLargeComponent', () => {
+  let component: BtnLargeComponent;
+  let fixture: ComponentFixture<BtnLargeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BtnLargeComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(BtnLargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/buttons/btn-large/btn-large.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-large',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './btn-large.component.html',
+  styleUrl: './btn-large.component.scss',
+})
+export class BtnLargeComponent {
+  @Input() type: string = '';
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+}

src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.ts

@@ -12,7 +12,7 @@ import { UserService } from '../../../../../service/user.service';
 import { FormsModule, NgForm } from '@angular/forms';
 import { ChannelService } from '../../../../../service/channel.service';
 import { TranslateModule } from '@ngx-translate/core';
-import { SmallBtnComponent } from '../../../small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../../buttons/small-btn/small-btn.component';
 
 @Component({
   selector: 'app-edit-user-details',

src/app/shared/components/header/edit-user/edit-user.component.ts

@@ -3,7 +3,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { EditUserDetailsComponent } from './edit-user-details/edit-user-details.component';
 import { UserService } from '../../../../service/user.service';
 import { TranslateModule } from '@ngx-translate/core';
-import { SmallBtnComponent } from '../../small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../buttons/small-btn/small-btn.component';
 
 @Component({
   selector: 'app-edit-user',

src/app/shared/components/header/header.component.ts

@@ -6,7 +6,7 @@ import { SearchBarComponent } from './search-bar/search-bar.component';
 import { ToggleBooleanService } from '../../../service/toggle-boolean.service';
 import { ChatService } from '../../../service/chat.service';
 import { SharedService } from '../../../service/shared.service';
-import { SmallBtnComponent } from '../small-btn/small-btn.component';
+import { SmallBtnComponent } from '../buttons/small-btn/small-btn.component';
 import { LanguageService } from '../../../service/language.service';
 import { TranslateModule } from '@ngx-translate/core';
 

src/app/shared/components/imprint/imprint.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { Location } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { HeaderComponent } from "../login/header/header.component";
+import { HeaderComponent } from '../login/header/header.component';
-import { SmallBtnComponent } from "../small-btn/small-btn.component";
+import { SmallBtnComponent } from '../buttons/small-btn/small-btn.component';
 import { RouterLink } from '@angular/router';
 
 @Component({
@@ -10,12 +10,11 @@ import { RouterLink } from '@angular/router';
   standalone: true,
   templateUrl: './imprint.component.html',
   styleUrl: './imprint.component.scss',
-    imports: [TranslateModule, HeaderComponent, SmallBtnComponent,RouterLink]
+  imports: [TranslateModule, HeaderComponent, SmallBtnComponent, RouterLink],
 })
 export class ImprintComponent {
   constructor(private location: Location) {}
 
-
   /**
    * Navigates back to the previous location.
    */

src/app/shared/components/login/start-header/start-header.component.ts

@@ -4,7 +4,7 @@ import { RouterLink } from '@angular/router';
 import { loginService } from '../../../../service/login.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { LanguageService } from '../../../../service/language.service';
-import { SmallBtnComponent } from '../../small-btn/small-btn.component';
+import { SmallBtnComponent } from '../../buttons/small-btn/small-btn.component';
 import { SharedService } from '../../../../service/shared.service';
 
 @Component({

src/app/shared/components/overlay/overlay.component.ts

@@ -1,7 +1,7 @@
 import { Component, HostListener, OnInit } from '@angular/core';
 import { OverlayService } from '../../../service/overlay.service';
 import { CommonModule } from '@angular/common';
-import { SmallBtnComponent } from '../small-btn/small-btn.component';
+import { SmallBtnComponent } from '../buttons/small-btn/small-btn.component';
 
 @Component({
   selector: 'app-overlay',

src/app/shared/components/privacy-policy/privacy-policy.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { Location } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { HeaderComponent } from "../login/header/header.component";
+import { HeaderComponent } from '../login/header/header.component';
-import { SmallBtnComponent } from "../small-btn/small-btn.component";
+import { SmallBtnComponent } from '../buttons/small-btn/small-btn.component';
 import { RouterLink } from '@angular/router';
 
 @Component({
@@ -10,12 +10,11 @@ import { RouterLink } from '@angular/router';
   standalone: true,
   templateUrl: './privacy-policy.component.html',
   styleUrl: './privacy-policy.component.scss',
-    imports: [TranslateModule, HeaderComponent, SmallBtnComponent, RouterLink]
+  imports: [TranslateModule, HeaderComponent, SmallBtnComponent, RouterLink],
 })
 export class PrivacyPolicyComponent {
   constructor(private location: Location) {}
 
-
   /**
    * Navigates back to the previous location in the browser history.
    */