From 951906335adefd160eda3497c046d260a0b6a11f Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 1 Jun 2024 13:35:29 +0200
Subject: [PATCH] clean code

---
 .../channel-informations.component.scss              |  2 +-
 .../chat-content/chat-content.component.scss         |  4 ++--
 .../chat-msg-box/chat-msg-box.component.scss         |  2 +-
 .../components/main-chat/info/info.component.scss    |  2 +-
 .../components/main-chat/main-chat.component.scss    |  2 +-
 .../open-send-prv-message-window.component.scss      |  2 +-
 .../show-channel-member.component.scss               |  2 +-
 .../attachments/attachments.component.html           |  4 ----
 .../attachments/attachments.component.scss           |  2 +-
 .../single-chat/attachments/attachments.component.ts |  8 +++++++-
 .../single-chat/edit-msg/edit-msg.component.scss     |  2 +-
 .../options-menu/options-menu.component.scss         |  2 +-
 .../reaction-emojis/reaction-emojis.component.scss   |  2 +-
 .../main-chat/single-chat/single-chat.component.scss |  2 +-
 src/app/components/main/main.component.scss          |  2 +-
 .../secondary-chat/secondary-chat.component.scss     |  2 +-
 .../show-all-users/show-all-users.component.scss     |  2 +-
 .../add-new-channel/add-new-channel.component.scss   |  2 +-
 .../sidebar-channels/sidebar-channels.component.scss |  2 +-
 .../sidebar-direct-messages-user.component.scss      |  5 ++---
 src/app/components/sidebar/sidebar.component.scss    |  2 +-
 src/app/interface/channel.interface.ts               |  1 +
 .../edit-user-details.component.scss                 |  2 +-
 .../header/edit-user/edit-user.component.scss        |  2 +-
 .../shared/components/header/header.component.scss   |  2 +-
 .../header/search-bar/search-bar.component.scss      |  2 +-
 src/assets/mixins/responsive.scss                    | 12 ++++++++++++
 src/styles.scss                                      |  6 ------
 28 files changed, 45 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/mixins/responsive.scss

diff --git a/src/app/components/main-chat/channel-informations/channel-informations.component.scss b/src/app/components/main-chat/channel-informations/channel-informations.component.scss
index 960a915..91ec484 100644
--- a/src/app/components/main-chat/channel-informations/channel-informations.component.scss
+++ b/src/app/components/main-chat/channel-informations/channel-informations.component.scss
@@ -1,4 +1,4 @@
-@import "./../../../../styles.scss";
+@import "./../../../../assets/mixins/responsive.scss";
 
 .menu {
   position: absolute;
diff --git a/src/app/components/main-chat/chat-content/chat-content.component.scss b/src/app/components/main-chat/chat-content/chat-content.component.scss
index 7c08158..8e02997 100644
--- a/src/app/components/main-chat/chat-content/chat-content.component.scss
+++ b/src/app/components/main-chat/chat-content/chat-content.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 section {
   display: flex;
@@ -52,7 +52,7 @@ section {
   section {
     height: calc(100vh - 144px);
   }
-  
+
   .privatChatHeight {
     height: calc(100vh - 158px);
   }
diff --git a/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.scss b/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.scss
index d627f6d..f546a5d 100644
--- a/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.scss
+++ b/src/app/components/main-chat/chat-msg-box/chat-msg-box.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 section {
   width: auto;
diff --git a/src/app/components/main-chat/info/info.component.scss b/src/app/components/main-chat/info/info.component.scss
index f1b9e37..06033df 100644
--- a/src/app/components/main-chat/info/info.component.scss
+++ b/src/app/components/main-chat/info/info.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 section {
   padding: 32px 48px;
diff --git a/src/app/components/main-chat/main-chat.component.scss b/src/app/components/main-chat/main-chat.component.scss
index a5ddc60..525ed42 100644
--- a/src/app/components/main-chat/main-chat.component.scss
+++ b/src/app/components/main-chat/main-chat.component.scss
@@ -1,4 +1,4 @@
-@import "./../../../styles.scss";
+@import "./../../../assets/mixins/responsive.scss";
 
 section {
   height: 100%;
diff --git a/src/app/components/main-chat/show-channel-member/open-send-prv-message-window/open-send-prv-message-window.component.scss b/src/app/components/main-chat/show-channel-member/open-send-prv-message-window/open-send-prv-message-window.component.scss
index bdd54d9..2a21946 100644
--- a/src/app/components/main-chat/show-channel-member/open-send-prv-message-window/open-send-prv-message-window.component.scss
+++ b/src/app/components/main-chat/show-channel-member/open-send-prv-message-window/open-send-prv-message-window.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../../styles.scss";
+@import "../../../../../assets/mixins/responsive.scss";
 
 .darkBackground {
   position: absolute;
diff --git a/src/app/components/main-chat/show-channel-member/show-channel-member.component.scss b/src/app/components/main-chat/show-channel-member/show-channel-member.component.scss
index 9da2dbb..1a9122b 100644
--- a/src/app/components/main-chat/show-channel-member/show-channel-member.component.scss
+++ b/src/app/components/main-chat/show-channel-member/show-channel-member.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 .darkBackground {
   position: absolute;
diff --git a/src/app/components/main-chat/single-chat/attachments/attachments.component.html b/src/app/components/main-chat/single-chat/attachments/attachments.component.html
index d69290c..a916f00 100644
--- a/src/app/components/main-chat/single-chat/attachments/attachments.component.html
+++ b/src/app/components/main-chat/single-chat/attachments/attachments.component.html
@@ -5,7 +5,6 @@
     <img
       src="{{ imageUrl }}"
       alt="image"
-      loading="lazy"
       [ngStyle]="{
         height:
           openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
@@ -20,7 +19,6 @@
         class="otherFiles"
         src="./assets/img/attachments/{{ getFileType(imageUrl) }}.png"
         alt="image"
-        loading="lazy"
         [ngStyle]="{
           height:
             openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
@@ -33,7 +31,6 @@
       controls
       preload="auto"
       src="{{ imageUrl }}"
-      loading="lazy"
       [ngStyle]="{
         width:
           openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
@@ -46,7 +43,6 @@
       <video
         src="{{ imageUrl }}"
         alt="video"
-        loading="lazy"
         [ngStyle]="{
           height:
             openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
diff --git a/src/app/components/main-chat/single-chat/attachments/attachments.component.scss b/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
index c824f3a..d051c70 100644
--- a/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
+++ b/src/app/components/main-chat/single-chat/attachments/attachments.component.scss
@@ -1,4 +1,4 @@
-@import "./../../../../../styles.scss";
+@import "./../../../../../assets/mixins/responsive.scss";
 
 .files {
   display: flex;
diff --git a/src/app/components/main-chat/single-chat/attachments/attachments.component.ts b/src/app/components/main-chat/single-chat/attachments/attachments.component.ts
index a6949e9..c1cc2ef 100644
--- a/src/app/components/main-chat/single-chat/attachments/attachments.component.ts
+++ b/src/app/components/main-chat/single-chat/attachments/attachments.component.ts
@@ -28,7 +28,13 @@ export class AttachmentsComponent {
 
   RESPONSIVE_THRESHOLD = this.sharedService.RESPONSIVE_THRESHOLD;
 
-  async ngOnInit() {}
+  async ngOnInit() {
+    if (this.filePath) {
+      this.imageUrl = await this.downloadFilesService.downloadFiles(
+        this.filePath
+      );
+    }
+  }
 
   // Type of files:
   // Img: PNG, GIF, JPG, JPEG
diff --git a/src/app/components/main-chat/single-chat/edit-msg/edit-msg.component.scss b/src/app/components/main-chat/single-chat/edit-msg/edit-msg.component.scss
index 608fe1e..742f445 100644
--- a/src/app/components/main-chat/single-chat/edit-msg/edit-msg.component.scss
+++ b/src/app/components/main-chat/single-chat/edit-msg/edit-msg.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../../styles.scss";
+@import "../../../../../assets/mixins/responsive.scss";
 
 form {
   position: relative;
diff --git a/src/app/components/main-chat/single-chat/options-menu/options-menu.component.scss b/src/app/components/main-chat/single-chat/options-menu/options-menu.component.scss
index dd15bc9..d662134 100644
--- a/src/app/components/main-chat/single-chat/options-menu/options-menu.component.scss
+++ b/src/app/components/main-chat/single-chat/options-menu/options-menu.component.scss
@@ -1,4 +1,4 @@
-@import "./../../../../../styles.scss";
+@import "./../../../../../assets/mixins/responsive.scss";
 
 .content {
   display: flex;
diff --git a/src/app/components/main-chat/single-chat/reaction-emojis/reaction-emojis.component.scss b/src/app/components/main-chat/single-chat/reaction-emojis/reaction-emojis.component.scss
index 0cb7b78..9fbefa4 100644
--- a/src/app/components/main-chat/single-chat/reaction-emojis/reaction-emojis.component.scss
+++ b/src/app/components/main-chat/single-chat/reaction-emojis/reaction-emojis.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../../styles.scss";
+@import "../../../../../assets/mixins/responsive.scss";
 
 section {
   display: flex;
diff --git a/src/app/components/main-chat/single-chat/single-chat.component.scss b/src/app/components/main-chat/single-chat/single-chat.component.scss
index 69f75fb..9062300 100644
--- a/src/app/components/main-chat/single-chat/single-chat.component.scss
+++ b/src/app/components/main-chat/single-chat/single-chat.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 section {
   display: flex;
diff --git a/src/app/components/main/main.component.scss b/src/app/components/main/main.component.scss
index c7f52f4..8188272 100644
--- a/src/app/components/main/main.component.scss
+++ b/src/app/components/main/main.component.scss
@@ -1,4 +1,4 @@
-@import "../../../styles.scss";
+@import "../../../assets/mixins/responsive.scss";
 
 app-header {
   display: block;
diff --git a/src/app/components/secondary-chat/secondary-chat.component.scss b/src/app/components/secondary-chat/secondary-chat.component.scss
index c670016..869763e 100644
--- a/src/app/components/secondary-chat/secondary-chat.component.scss
+++ b/src/app/components/secondary-chat/secondary-chat.component.scss
@@ -1,4 +1,4 @@
-@import "./../../../styles.scss";
+@import "./../../../assets/mixins/responsive.scss";
 
 section {
   height: 100%;
diff --git a/src/app/components/sidebar/show-all-users/show-all-users.component.scss b/src/app/components/sidebar/show-all-users/show-all-users.component.scss
index 61c9caf..90ca08b 100644
--- a/src/app/components/sidebar/show-all-users/show-all-users.component.scss
+++ b/src/app/components/sidebar/show-all-users/show-all-users.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 section {
   position: absolute;
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 9ebe202..5d6d88f 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
@@ -1,4 +1,4 @@
-@import "../../../../../styles.scss";
+@import "../../../../../assets/mixins/responsive.scss";
 
 .darkBackground {
   position: absolute;
diff --git a/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.scss b/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.scss
index 3266cbd..0adbe9f 100644
--- a/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.scss
+++ b/src/app/components/sidebar/sidebar-channels/sidebar-channels.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 section {
   display: flex;
diff --git a/src/app/components/sidebar/sidebar-direct-messages-user/sidebar-direct-messages-user.component.scss b/src/app/components/sidebar/sidebar-direct-messages-user/sidebar-direct-messages-user.component.scss
index ba48864..651874c 100644
--- a/src/app/components/sidebar/sidebar-direct-messages-user/sidebar-direct-messages-user.component.scss
+++ b/src/app/components/sidebar/sidebar-direct-messages-user/sidebar-direct-messages-user.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 section {
   display: flex;
@@ -51,9 +51,8 @@ section {
   border-radius: 36px;
 }
 
-
 @media screen and (max-width: $RESPONSIVE_THRESHOLD_MOBILE380px) {
   section {
     max-height: 22vh;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss
index ba59d12..5a3afe6 100644
--- a/src/app/components/sidebar/sidebar.component.scss
+++ b/src/app/components/sidebar/sidebar.component.scss
@@ -1,4 +1,4 @@
-@import "./../../../styles.scss";
+@import "./../../../assets/mixins/responsive.scss";
 
 section {
   height: 100%;
diff --git a/src/app/interface/channel.interface.ts b/src/app/interface/channel.interface.ts
index 16a676a..531a520 100644
--- a/src/app/interface/channel.interface.ts
+++ b/src/app/interface/channel.interface.ts
@@ -1,6 +1,7 @@
 export const publicChannels: string[] = [
   'ktoVhTjif9OndCsLfEF7',
   't0zOHsjKzq0uYSqsMx8j',
+  'UVeEk7NxpRZjdaNdNWom',
 ];
 export interface Channel {
   id?: string;
diff --git a/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.scss b/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.scss
index d4c4c68..7fc2c07 100644
--- a/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.scss
+++ b/src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../../../styles.scss";
+@import "../../../../../../assets/mixins/responsive.scss";
 
 .whiteBox {
   width: 400px;
diff --git a/src/app/shared/components/header/edit-user/edit-user.component.scss b/src/app/shared/components/header/edit-user/edit-user.component.scss
index d1492d0..ab03777 100644
--- a/src/app/shared/components/header/edit-user/edit-user.component.scss
+++ b/src/app/shared/components/header/edit-user/edit-user.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../../styles.scss";
+@import "../../../../../assets/mixins/responsive.scss";
 
 .grayBackground {
   position: absolute;
diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss
index 1efba98..bdef968 100644
--- a/src/app/shared/components/header/header.component.scss
+++ b/src/app/shared/components/header/header.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles.scss";
+@import "../../../../assets/mixins/responsive.scss";
 
 header {
   height: 100%;
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 4cb9a75..607fcf1 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
@@ -1,4 +1,4 @@
-@import "./../../../../../styles.scss";
+@import "./../../../../../assets/mixins/responsive.scss";
 
 .inputPosition {
   @include displayFlex();
diff --git a/src/assets/mixins/responsive.scss b/src/assets/mixins/responsive.scss
new file mode 100644
index 0000000..71e5b42
--- /dev/null
+++ b/src/assets/mixins/responsive.scss
@@ -0,0 +1,12 @@
+$RESPONSIVE_THRESHOLD_MOBILE380px: 380px;
+$RESPONSIVE_THRESHOLD_MOBILE: 600px;
+$RESPONSIVE_THRESHOLD: 1300px;
+$RESPONSIVE_THRESHOLD_MAX: 1900px;
+$RESPONSIVE_THRESHOLD_SEARCHBAR: 1100px;
+
+@mixin displayFlex($d: flex, $j: center, $a: center, $g: 0) {
+  display: $d;
+  justify-content: $j;
+  align-items: $a;
+  gap: $g;
+}
diff --git a/src/styles.scss b/src/styles.scss
index 5d3fcb8..e2d9c48 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,9 +1,3 @@
-$RESPONSIVE_THRESHOLD_MOBILE380px: 380px;
-$RESPONSIVE_THRESHOLD_MOBILE: 600px;
-$RESPONSIVE_THRESHOLD: 1300px;
-$RESPONSIVE_THRESHOLD_MAX: 1900px;
-$RESPONSIVE_THRESHOLD_SEARCHBAR: 1100px;
-
 * {
   margin: 0;
   scroll-behavior: smooth;