From 1a3c3674a1fa4ff08d3c2151094e2d2f30616583 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Mon, 26 Jun 2023 18:22:05 +0000
Subject: [PATCH] improve layout of bottom bar

---
 .../src/components/Layout/bottomBar/index.jsx | 116 +++++++++---------
 .../components/Layout/bottomBar/index.less    |  43 ++++---
 2 files changed, 86 insertions(+), 73 deletions(-)

diff --git a/packages/app/src/components/Layout/bottomBar/index.jsx b/packages/app/src/components/Layout/bottomBar/index.jsx
index f878f1a4..b765f466 100755
--- a/packages/app/src/components/Layout/bottomBar/index.jsx
+++ b/packages/app/src/components/Layout/bottomBar/index.jsx
@@ -372,68 +372,72 @@ export class BottomBar extends React.Component {
             />
 
             <Motion style={{ y: spring(this.state.show ? 0 : 300) }}>
-                {({ y }) => <div
-                    className="bottomBar"
-                    style={{
-                        WebkitTransform: `translate3d(0, ${y}px, 0)`,
-                        transform: `translate3d(0, ${y}px, 0)`,
-                    }}
-                >
-                    <div className="items">
+                {({ y }) =>
+                    <div className="bottomBar_wrapper">
                         <div
-                            key="creator"
-                            id="creator"
-                            className={classnames("item", "primary")}
-                            onClick={openCreator}
-                        >
-                            <div className="icon">
-                                {createIconRender("PlusCircle")}
-                            </div>
-                        </div>
-
-                        {
-                            this.context.currentManifest && <div
-                                className="item"
-                            >
-                                <PlayerButton
-                                    manifest={this.context.currentManifest}
-                                    playback={this.context.playbackStatus}
-                                    colorAnalysis={this.context.coverColorAnalysis}
-                                />
-                            </div>
-                        }
-
-                        <div
-                            key="navigator"
-                            id="navigator"
-                            className="item"
-                            onClick={() => app.location.push("/")}
-                            onTouchMove={this.handleNavTouchMove}
-                            onTouchStart={this.handleNavTouchStart}
-                            onTouchEnd={this.handleNavTouchEnd}
-                            onTouchCancel={() => {
-                                this.setState({ quickNavVisible: false })
+                            className="bottomBar"
+                            style={{
+                                WebkitTransform: `translate3d(0, ${y}px, 0)`,
+                                transform: `translate3d(0, ${y}px, 0)`,
                             }}
                         >
-                            <div className="icon">
-                                {createIconRender("Home")}
+                            <div className="items">
+                                <div
+                                    key="creator"
+                                    id="creator"
+                                    className={classnames("item", "primary")}
+                                    onClick={openCreator}
+                                >
+                                    <div className="icon">
+                                        {createIconRender("PlusCircle")}
+                                    </div>
+                                </div>
+
+                                {
+                                    this.context.currentManifest && <div
+                                        className="item"
+                                    >
+                                        <PlayerButton
+                                            manifest={this.context.currentManifest}
+                                            playback={this.context.playbackStatus}
+                                            colorAnalysis={this.context.coverColorAnalysis}
+                                        />
+                                    </div>
+                                }
+
+                                <div
+                                    key="navigator"
+                                    id="navigator"
+                                    className="item"
+                                    onClick={() => app.location.push("/")}
+                                    onTouchMove={this.handleNavTouchMove}
+                                    onTouchStart={this.handleNavTouchStart}
+                                    onTouchEnd={this.handleNavTouchEnd}
+                                    onTouchCancel={() => {
+                                        this.setState({ quickNavVisible: false })
+                                    }}
+                                >
+                                    <div className="icon">
+                                        {createIconRender("Home")}
+                                    </div>
+                                </div>
+
+                                <div
+                                    key="searcher"
+                                    id="searcher"
+                                    className="item"
+                                    onClick={app.controls.openSearcher}
+                                >
+                                    <div className="icon">
+                                        {createIconRender("Search")}
+                                    </div>
+                                </div>
+
+                                <AccountButton />
                             </div>
                         </div>
-
-                        <div
-                            key="searcher"
-                            id="searcher"
-                            className="item"
-                            onClick={app.controls.openSearcher}
-                        >
-                            <div className="icon">
-                                {createIconRender("Search")}
-                            </div>
-                        </div>
-
-                        <AccountButton />
                     </div>
-                </div>}
+                }
             </Motion>
         </>
     }
diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/components/Layout/bottomBar/index.less
index f5635ee3..5ac453fc 100755
--- a/packages/app/src/components/Layout/bottomBar/index.less
+++ b/packages/app/src/components/Layout/bottomBar/index.less
@@ -23,7 +23,7 @@
 	height: 0;
 	opacity: 0;
 
-	background-color: var(--background-color-accent);
+	background-color: var(--background-color-primary);
 
 	box-shadow: @card-shadow-top;
 
@@ -130,44 +130,53 @@
 	}
 }
 
+.bottomBar_wrapper {
+	//position: absolute;
+	position: relative;
+
+	bottom: 0;
+	left: 0;
+
+	z-index: 550;
+
+	display: flex;
+	flex-direction: row;
+	
+	align-items: center;
+	justify-content: center;
+
+	width: 100vw;
+
+	//padding: 10px;
+}
+
 .bottomBar {
-	position: absolute;
 	display: flex;
 	flex-direction: row;
 
 	align-items: center;
 	justify-content: center;
 
-	position: relative;
-
-	z-index: 550;
-
-	left: 0;
-	bottom: 0;
-
-	width: 100vw;
-	min-width: 100vw;
-	max-width: 100vw;
-
+	width: 100%;
 	height: @app_bottomBar_height;
 
-	padding: 10px;
 	overflow: hidden;
 
 	background-color: var(--background-color-accent);
+
+	//border-radius: 12px;
 	border-radius: 12px 12px 0 0;
 
+	//box-shadow: @card-shadow;
 	box-shadow: @card-shadow-top;
 
 	.items {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		//white-space: nowrap;
-		//overflow-x: overlay;
 
 		height: 100%;
-		width: 100vw;
+		width: 100%;
 
 		.item {
 			display: inline-flex;