From 04f99a9653fe476d099ac49020b0ece43ad22d41 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 12 Oct 2023 19:56:01 +0000
Subject: [PATCH] implemented `setBackgroundColorValues`

---
 .../Layout/draggableDrawer/index.jsx          | 20 ++++-
 .../Layout/draggableDrawer/index.less         | 83 ++++++++++++-------
 2 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/packages/app/src/components/Layout/draggableDrawer/index.jsx b/packages/app/src/components/Layout/draggableDrawer/index.jsx
index 742d72f3..cd305f45 100755
--- a/packages/app/src/components/Layout/draggableDrawer/index.jsx
+++ b/packages/app/src/components/Layout/draggableDrawer/index.jsx
@@ -56,7 +56,8 @@ export default class DraggableDrawer extends Component {
         start: 0,
         position: 0,
         touching: false,
-        listenersAttached: false
+        listenersAttached: false,
+        useBackgroundColorValues: null,
     }
 
     DESKTOP_MODE = false
@@ -65,11 +66,21 @@ export default class DraggableDrawer extends Component {
     MAX_NEGATIVE_SCROLL = -50
     PX_TO_CLOSE_FROM_BOTTOM = 200
 
+    interface = {
+        setBackgroundColorValues: (values) => {
+            this.setState({ useBackgroundColorValues: values })
+        },
+    }
+
     componentDidMount() {
+        app.currentDragger = this.interface
+
         this.DESKTOP_MODE = !app.isMobile
     }
 
     componentWillUnmount() {
+        delete app.currentDragger
+
         this.removeListeners()
     }
 
@@ -312,7 +323,8 @@ export default class DraggableDrawer extends Component {
         const position = this.getPosition(hiddenPosition)
 
         let containerStyle = {
-            backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`
+            backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`,
+            "--body-background": this.state.useBackgroundColorValues ? `rgba(${this.state.useBackgroundColorValues}, 1)` : "var(--background-color-primary)",
         }
 
         return createPortal(
@@ -362,6 +374,10 @@ export default class DraggableDrawer extends Component {
                                     />
                                 </div>
 
+                                <div
+                                    className="draggable-drawer_body_background"
+                                />
+
                                 {this.props.children}
                             </div>
                         </div>
diff --git a/packages/app/src/components/Layout/draggableDrawer/index.less b/packages/app/src/components/Layout/draggableDrawer/index.less
index ec50f20f..0bfdd6c7 100755
--- a/packages/app/src/components/Layout/draggableDrawer/index.less
+++ b/packages/app/src/components/Layout/draggableDrawer/index.less
@@ -1,3 +1,5 @@
+@body_border_radius: 24px;
+
 .draggable-drawer {
 	position: fixed;
 
@@ -9,21 +11,66 @@
 	display: flex;
 	justify-content: center;
 
-	flex-shrink: 0;
 	align-items: center;
 
-	z-index: 40;
+	z-index: 50;
 
 	transition: background-color 0.2s linear;
 
 	overflow-y: hidden;
 	overscroll-behavior: none;
 
-	.draggable-drawer_body {
+	box-sizing: border-box;
+
+	.draggable-drawer_body_background {
+		box-sizing: border-box;
+
 		position: absolute;
 
 		z-index: 50;
 
+		top: 0;
+		left: 0;
+
+		width: 100%;
+		height: 100%;
+
+		border-top-left-radius: @body_border_radius;
+		border-top-right-radius: @body_border_radius;
+
+		transition: all 150ms ease-in-out;
+
+		background-color: var(--body-background);
+
+		opacity: 0.4;
+
+		&::after {
+			content: "";
+
+			display: block;
+			position: absolute;
+
+			left: 0;
+			bottom: 0;
+
+			width: 100%;
+			height: 120px;
+
+			z-index: 45;
+
+			background-color: var(--body-background);
+
+			transform: translateY(95%);
+		}
+	}
+
+	.draggable-drawer_body {
+		box-sizing: border-box;
+
+		position: absolute;
+
+		z-index: 55;
+
 		bottom: 0px;
 
 		width: 100%;
@@ -36,8 +83,8 @@
 
 		padding: 30px 10px 10px 10px;
 
-		border-top-left-radius: 8px;
-		border-top-right-radius: 8px;
+		border-top-left-radius: @body_border_radius;
+		border-top-right-radius: @body_border_radius;
 
 		.dragger-area {
 			width: 100%;
@@ -57,15 +104,14 @@
 
 			.dragger-indicator {
 				background-color: var(--background-color-contrast);
+
 				width: 100px;
 				height: 8px;
 
 				border-radius: 8px;
 			}
 		}
-	}
 
-	.draggable-drawer_body {
 		&::after {
 			content: "";
 
@@ -85,27 +131,4 @@
 			transform: translateY(95%);
 		}
 	}
-
-	&.fill-end {
-		.draggable-drawer_body {
-			&::after {
-				content: "";
-
-				display: block;
-				position: absolute;
-
-				left: 0;
-				bottom: 0;
-
-				width: 100%;
-				height: 120px;
-
-				z-index: 45;
-
-				background-color: var(--background-color-primary);
-
-				transform: translateY(95%);
-			}
-		}
-	}
 }
\ No newline at end of file