Middle Column: New background for light theme

src/components/common/UiLoader.scss

@@ -19,7 +19,6 @@
     z-index: var(--z-ui-loader-mask);
     display: flex;
 
-
     @media (min-width: 600px) {
       display: grid;
       grid-template-columns: auto 1fr;
@@ -64,62 +63,7 @@
       z-index: 1;
       overflow: hidden;
 
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        background-color: var(--theme-background-color);
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        z-index: -1;
-        transform-origin: left center;
-
-        .theme-light & {
-          background-image: url('../../assets/chat-bg.jpg');
-
-          @media (max-width: 600px) {
-            background-image: url("../../assets/chat-bg-mobile.jpg");
-          }
-        }
-      }
-
-      .theme-dark &:not(.custom-bg-image)::before {
-        background-image: url('../../assets/chat-bg-dark.png');
-        background-position: top left;
-        background-size: 650px;
-        background-repeat: repeat;
-      }
-
-      &.custom-bg-image::before {
-        background-image: var(--custom-background) !important;
-        filter: none;
-        transform: scale(1.1);
-      }
-
-      &.custom-bg-image.blurred::before {
-        filter: blur(12px);
-      }
-
-      &.custom-bg-color:not(.custom-bg-image)::before {
-        opacity: 0;
-      }
-
-      html.theme-light body.animation-level-2 &.with-right-column::before {
-        transform: scale(0.67);
-      }
-
-      @media screen and (min-width: 1276px) {
-        &::before {
-          margin: -16rem -5rem -20rem 0;
-        }
-      }
-
       @media (max-width: 1275px) {
-        flex: 3;
         border-right: none;
       }
 

src/components/common/UiLoader.tsx

@@ -136,8 +136,8 @@ const UiLoader: FC<OwnProps & StateProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const className = buildClassName(
+  const middleClassName = buildClassName(
-    'middle',
+    'middle bg-layers',
     transitionClassNames,
     customBackground && 'custom-bg-image',
     backgroundColor && 'custom-bg-color',
@@ -161,7 +161,7 @@ const UiLoader: FC<OwnProps & StateProps> = ({
                 style={leftColumnWidth ? `width: ${leftColumnWidth}px` : undefined}
               />
               <div
-                className={className}
+                className={middleClassName}
                 style={buildStyle(...inlineStyles)}
               />
               {isRightColumnShown && <div className="right" />}

src/components/middle/MiddleColumn.scss

@@ -6,85 +6,6 @@
   right: 0;
   overflow: hidden;
   z-index: -1;
-  background-color: var(--theme-background-color);
-
-  body:not(.animation-level-0) #root & {
-    transition: background-color 0.2s;
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: var(--theme-background-color);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-    body:not(.animation-level-0) #root & {
-      transition: transform var(--layer-transition), background-image 0.2s;
-    }
-
-    body.animation-level-0 & {
-      transition: none;
-    }
-
-    .theme-light & {
-      background-image: url("../../assets/chat-bg.jpg");
-
-      @media (max-width: 600px) {
-        background-image: url("../../assets/chat-bg-mobile.jpg");
-      }
-    }
-
-    .theme-dark #MiddleColumn:not(.custom-bg-image) & {
-      background-image: url('../../assets/chat-bg-dark.png');
-      background-position: top left;
-      background-size: 650px;
-      background-repeat: repeat;
-    }
-  }
-
-  .custom-bg-color:not(.custom-bg-image) &::after {
-    opacity: 0;
-  }
-
-  .custom-bg-image &::after {
-    background-image: var(--custom-background) !important;
-    filter: none;
-    transform: scale(1.1);
-  }
-
-  .custom-bg-image.blurred &::after {
-    filter: blur(12px);
-  }
-
-  @media screen and (min-width: 1276px) {
-    body.animation-level-2 &::after {
-      margin: -16rem -5rem -20rem 0;
-      overflow: hidden;
-      transform: scale(1);
-      transform-origin: left center;
-      transition: transform var(--layer-transition);
-    }
-
-    html.theme-light body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
-      transform: scale(0.67) !important;
-    }
-  }
-
-  html.theme-light body.animation-level-2 #Main.right-column-open #MiddleColumn:not(.custom-bg-image) &::after {
-    @media screen and (min-width: 1921px) {
-      transform: scale(0.8) !important;
-    }
-
-    @media screen and (min-width: 2600px) {
-      transform: scale(0.95) !important;
-    }
-  }
 }
 
 #MiddleColumn {

src/components/middle/MiddleColumn.tsx

@@ -313,10 +313,15 @@ const MiddleColumn: FC<StateProps> = ({
 
   const className = buildClassName(
     renderingHasTools && 'has-header-tools',
+    MASK_IMAGE_DISABLED ? 'mask-image-disabled' : 'mask-image-enabled',
+  );
+
+  const bgClassName = buildClassName(
+    'bg-layers with-transition',
     customBackground && 'custom-bg-image',
     backgroundColor && 'custom-bg-color',
     customBackground && isBackgroundBlurred && 'blurred',
-    MASK_IMAGE_DISABLED ? 'mask-image-disabled' : 'mask-image-enabled',
+    isRightColumnShown && 'with-right-column',
   );
 
   const messagingDisabledClassName = buildClassName(
@@ -383,6 +388,7 @@ const MiddleColumn: FC<StateProps> = ({
     >
       <div
         id="middle-column-bg"
+        className={bgClassName}
         style={customBackgroundValue ? `--custom-background: ${customBackgroundValue}` : undefined}
       />
       <div id="middle-column-portals" />

src/config.ts

@@ -200,10 +200,10 @@ export const DEFAULT_LANG_CODE = 'en';
 export const DEFAULT_LANG_PACK = 'android';
 export const LANG_PACKS = ['android', 'ios', 'tdesktop', 'macos'] as const;
 export const FEEDBACK_URL = 'https://bugs.telegram.org/?tag_ids=41&sort=time';
-export const LIGHT_THEME_BG_COLOR = '#A2AF8E';
+export const LIGHT_THEME_BG_COLOR = '#99BA92';
 export const DARK_THEME_BG_COLOR = '#0F0F0F';
-export const DARK_THEME_PATTERN_COLOR = '#0a0a0a8c';
+export const DEFAULT_PATTERN_COLOR = '#4A8E3A8C';
-export const DEFAULT_PATTERN_COLOR = 'rgba(90, 110, 70, 0.6)';
+export const DARK_THEME_PATTERN_COLOR = '#0A0A0A8C';
 
 // Group calls
 export const GROUP_CALL_VOLUME_MULTIPLIER = 100;

src/styles/_bg.scss

@@ -0,0 +1,84 @@
+.bg-layers {
+  background-color: var(--theme-background-color);
+
+  body:not(.animation-level-0) &.with-transition {
+    transition: background-color 0.2s;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  html.theme-light &:not(.custom-bg-image)::before {
+    background-image: url('../assets/chat-bg-br.png');
+  }
+
+  &:not(.custom-bg-image).custom-bg-color::before {
+    display: none;
+  }
+
+  &.custom-bg-image::before {
+    background-image: var(--custom-background) !important;
+    transform: scale(1.1);
+  }
+
+  body:not(.animation-level-0) &.custom-bg-image.with-transition::before {
+    transition: background-image var(--layer-transition);
+  }
+
+  &.custom-bg-image.blurred::before {
+    filter: blur(12px);
+  }
+
+  @media screen and (min-width: 1276px) {
+    body.animation-level-2 &::before {
+      overflow: hidden;
+      transform: scale(1);
+      transform-origin: left center;
+    }
+  }
+
+  html.theme-light body.animation-level-2 &:not(.custom-bg-image).with-right-column::before {
+    transition: transform var(--layer-transition);
+
+    @media screen and (min-width: 1276px) {
+      transform: scaleX(0.67) !important;
+    }
+
+    @media screen and (min-width: 1921px) {
+      transform: scaleX(0.8) !important;
+    }
+
+    @media screen and (min-width: 2600px) {
+      transform: scaleX(0.95) !important;
+    }
+  }
+
+  &:not(.custom-bg-image):not(.custom-bg-color)::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background-image: url('../assets/chat-bg-pattern-light.png');
+    background-position: top left;
+    background-size: 510px auto;
+    background-repeat: repeat;
+    mix-blend-mode: overlay;
+
+    html.theme-dark & {
+      background-image: url('../assets/chat-bg-pattern-dark.png');
+      mix-blend-mode: unset;
+    }
+  }
+}

src/styles/index.scss

@@ -5,6 +5,7 @@
 @import "forms";
 @import "icons";
 @import "common";
+@import "bg";
 @import "../assets/fonts/roboto.css";
 @import "./print";