From a6cdac14e6e4090504053089c04584b48b7ff2d3 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 17 Aug 2023 17:52:22 +0000
Subject: [PATCH] make tool bar style acording to sidebar

---
 .../src/components/Layout/toolsBar/index.jsx  | 55 ++++++++++---------
 .../src/components/Layout/toolsBar/index.less | 28 +++++++---
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/packages/app/src/components/Layout/toolsBar/index.jsx b/packages/app/src/components/Layout/toolsBar/index.jsx
index d85ebfd4..0e42075b 100644
--- a/packages/app/src/components/Layout/toolsBar/index.jsx
+++ b/packages/app/src/components/Layout/toolsBar/index.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-import * as antd from "antd"
 import classnames from "classnames"
 import { Motion, spring } from "react-motion"
 import { Translation } from "react-i18next"
@@ -45,43 +44,47 @@ export default class ToolsBar extends React.Component {
         }}>
             {({ x, width }) => {
                 return <div
-                    id="tools_bar"
-                    className={classnames(
-                        "tools-bar",
-                        {
-                            visible: this.state.visible,
-                        }
-                    )}
+                    className="tools-bar-wrapper"
                     style={{
                         width: `${width}%`,
                         transform: `translateX(${x}%)`,
                     }}
                 >
-                    <FeaturedEventsAnnouncements />
+                    <div
+                        id="tools_bar"
+                        className={classnames(
+                            "tools-bar",
+                            {
+                                visible: this.state.visible,
+                            }
+                        )}
+                    >
+                        <FeaturedEventsAnnouncements />
 
-                    <div className="card" id="trendings">
-                        <div className="header">
-                            <h2>
-                                <Icons.TrendingUp />
-                                <Translation>{(t) => t("Trendings")}</Translation>
-                            </h2>
+                        <div className="card" id="trendings">
+                            <div className="header">
+                                <h2>
+                                    <Icons.TrendingUp />
+                                    <Translation>{(t) => t("Trendings")}</Translation>
+                                </h2>
+                            </div>
+
+                            <HashtagTrendings />
                         </div>
 
-                        <HashtagTrendings />
-                    </div>
+                        <div className="card" id="onlineFriends">
+                            <div className="header">
+                                <h2>
+                                    <Icons.MdPeopleAlt />
+                                    <Translation>{(t) => t("Online Friends")}</Translation>
+                                </h2>
+                            </div>
 
-                    <div className="card" id="onlineFriends">
-                        <div className="header">
-                            <h2>
-                                <Icons.MdPeopleAlt />
-                                <Translation>{(t) => t("Online Friends")}</Translation>
-                            </h2>
+                            <ConnectedFriends />
                         </div>
 
-                        <ConnectedFriends />
+                        <WidgetsWrapper />
                     </div>
-
-                    <WidgetsWrapper />
                 </div>
             }}
         </Motion>
diff --git a/packages/app/src/components/Layout/toolsBar/index.less b/packages/app/src/components/Layout/toolsBar/index.less
index 3b9766f7..06678ef2 100644
--- a/packages/app/src/components/Layout/toolsBar/index.less
+++ b/packages/app/src/components/Layout/toolsBar/index.less
@@ -1,30 +1,44 @@
-.tools-bar {
+@import "theme/vars.less";
+
+.tools-bar-wrapper {
     position: sticky;
 
     top: 0;
     right: 0;
 
-    display: flex;
-    flex-direction: column;
-
     max-width: 20vw;
 
     height: 100vh;
     height: 100dvh;
 
-    border-left: 1px solid var(--border-color);
+    padding: 10px;
+}
+
+.tools-bar {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+
+    border-radius: 12px;
+
+    border-radius: @sidebar_borderRadius;
+    box-shadow: @card-shadow;
+
+    background-color: var(--background-color-accent);
 
     gap: 20px;
 
     &.visible {
-        padding: 20px;
+        padding: 10px;
     }
 
     .card {
         display: flex;
         flex-direction: column;
 
-        background-color: var(--background-color-accent);
+        background-color: var(--background-color-primary);
         border-radius: 12px;
 
         padding: 20px;