App: Update default pattern image (#6586)

src/components/App.module.scss

@@ -1,3 +1,5 @@
+@use "../styles/mixins";
+
 .bg {
   height: 100%;
 
@@ -6,26 +8,9 @@
   background-position: center;
   background-size: 100% 100%;
 
+  @include mixins.chat-pattern-background("../assets/pattern.svg");
+
   &::before {
-    content: "";
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    background-image: url('../assets/chat-bg-pattern-light.png');
-    background-repeat: repeat;
-    background-position: top right;
-    background-size: 510px auto;
-    mix-blend-mode: overlay;
-
-    :global(html.theme-dark) & {
-      background-image: url('../assets/chat-bg-pattern-dark.png');
-      mix-blend-mode: unset;
-    }
-
     @media (max-width: 600px) {
       bottom: auto;
       height: calc(var(--vh, 1vh) * 100);

src/components/modals/gift/GiftComposer.module.scss

@@ -86,31 +86,7 @@
   background-position: center;
   background-size: 100% 100%;
 
-  &::before {
+  @include mixins.chat-pattern-background("../../../assets/pattern.svg");
-    content: "";
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    background-image: url('../../../assets/chat-bg-pattern-light.png');
-    background-repeat: repeat;
-    background-position: top right;
-    background-size: 510px auto;
-    mix-blend-mode: overlay;
-
-    :global(html.theme-dark) & {
-      background-image: url('../../../assets/chat-bg-pattern-dark.png');
-      mix-blend-mode: unset;
-    }
-
-    @media (max-width: 600px) {
-      bottom: auto;
-      height: calc(var(--vh, 1vh) * 100);
-    }
-  }
 
   :global(html.theme-light) & {
     background-image: url('../../../assets/chat-bg-br.png');
@@ -248,24 +224,7 @@
   }
 
   &:not(.customBgImage):not(.customBgColor)::after {
-    content: "";
+    @include mixins.chat-pattern-styles("../../../assets/pattern.svg");
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    background-image: url('../../../assets/chat-bg-pattern-light.png');
-    background-repeat: repeat;
-    background-position: top right;
-    background-size: 510px auto;
-    mix-blend-mode: overlay;
-
-    :global(html.theme-dark) & {
-      background-image: url('../../../assets/chat-bg-pattern-dark.png');
-      mix-blend-mode: unset;
-    }
   }
 
   @media screen and (min-width: 1276px) {

src/components/modals/preparedMessage/PreparedMessageModal.module.scss

@@ -47,31 +47,7 @@
   background-position: center;
   background-size: 100% 100%;
 
-  &::before {
+  @include mixins.chat-pattern-background("../../../assets/pattern.svg");
-    content: "";
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    background-image: url('../../../assets/chat-bg-pattern-light.png');
-    background-repeat: repeat;
-    background-position: top right;
-    background-size: 510px auto;
-    mix-blend-mode: overlay;
-
-    :global(html.theme-dark) & {
-      background-image: url('../../../assets/chat-bg-pattern-dark.png');
-      mix-blend-mode: unset;
-    }
-
-    @media (max-width: 600px) {
-      bottom: auto;
-      height: calc(var(--vh, 1vh) * 100);
-    }
-  }
 
   :global(.Message) {
     padding: 1rem;
@@ -162,24 +138,7 @@
   }
 
   &:not(.customBgImage):not(.customBgColor)::after {
-    content: "";
+    @include mixins.chat-pattern-styles("../../../assets/pattern.svg");
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    background-image: url('../../../assets/chat-bg-pattern-light.png');
-    background-repeat: repeat;
-    background-position: top right;
-    background-size: 510px auto;
-    mix-blend-mode: overlay;
-
-    :global(html.theme-dark) & {
-      background-image: url('../../../assets/chat-bg-pattern-dark.png');
-      mix-blend-mode: unset;
-    }
   }
 
   @media screen and (min-width: 1276px) {

src/styles/_mixins.scss

@@ -221,3 +221,38 @@
     view-transition-name: var(--_vtn);
   }
 }
+
+@mixin chat-pattern-styles($path) {
+  content: "";
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  opacity: 0.6;
+  background-image: url($path);
+  background-repeat: repeat;
+  background-position: center;
+  background-size: 430px auto;
+  mix-blend-mode: soft-light;
+
+  :global(html.theme-dark) & {
+    opacity: 0.3;
+    background: linear-gradient(135deg, #4f5bd5 0%, #962fbf 25%, #dd6cb9 50%, #fec496 100%) !important;
+    background-image: none;
+    mix-blend-mode: unset;
+
+    mask-image: url($path);
+    mask-position: center;
+    mask-repeat: repeat;
+    mask-size: 430px auto;
+  }
+}
+
+@mixin chat-pattern-background($path) {
+  &::before {
+    @include chat-pattern-styles($path);
+  }
+}

src/styles/_patternBackground.module.scss

@@ -1,3 +1,5 @@
+@use "./mixins";
+
 .background {
   position: absolute;
   z-index: -1;
@@ -69,24 +71,7 @@
   }
 
   &:not(.customBgImage):not(.customBgColor)::after {
-    content: "";
+    @include mixins.chat-pattern-styles("../assets/pattern.svg");
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    background-image: url('../assets/chat-bg-pattern-light.png');
-    background-repeat: repeat;
-    background-position: top right;
-    background-size: 510px auto;
-    mix-blend-mode: overlay;
-
-    :global(html.theme-dark) & {
-      background-image: url('../assets/chat-bg-pattern-dark.png');
-      mix-blend-mode: unset;
-    }
   }
 
   @media screen and (min-width: 1276px) {