From ded1a752cdf23cea9217ee0443fba4b58f404e7e Mon Sep 17 00:00:00 2001
From: saithsab877 <saithsab877@gmail.com>
Date: Mon, 9 Dec 2024 12:15:10 +0500
Subject: [PATCH] fix(mindset): border and padding

---
 .../components/PlayerContols/Controls/index.tsx      |  2 +-
 src/components/mindset/components/Sidebar/index.tsx  |  4 +++-
 src/components/mindset/index.tsx                     | 12 ++++++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/mindset/components/PlayerContols/Controls/index.tsx b/src/components/mindset/components/PlayerContols/Controls/index.tsx
index 8abd7e388..1b4a65a7a 100644
--- a/src/components/mindset/components/PlayerContols/Controls/index.tsx
+++ b/src/components/mindset/components/PlayerContols/Controls/index.tsx
@@ -64,7 +64,7 @@ const Wrapper = styled(Flex).attrs({
   height: 54px;
   background: ${colors.BG1};
   border-radius: 40px;
-  margin-right: 54px;
+  margin-right: 30px;
   color: ${colors.white};
   font-size: 20px;
   padding: 12px;
diff --git a/src/components/mindset/components/Sidebar/index.tsx b/src/components/mindset/components/Sidebar/index.tsx
index 22abdce2d..ce63595c3 100644
--- a/src/components/mindset/components/Sidebar/index.tsx
+++ b/src/components/mindset/components/Sidebar/index.tsx
@@ -25,13 +25,15 @@ const Wrapper = styled(Flex)(({ theme }) => ({
 
   [theme.breakpoints.up('sm')]: {
     width: MENU_WIDTH,
+    gap: '10px',
   },
 }))
 
 const MediaWrapper = styled(Flex)(({ theme }) => ({
   width: '100%',
-  margin: '0 auto 16px',
+  marginBottom: '20px',
   [theme.breakpoints.up('sm')]: {
     width: '390px',
+    margin: '0 auto',
   },
 }))
diff --git a/src/components/mindset/index.tsx b/src/components/mindset/index.tsx
index 2c1b24000..29fcad028 100644
--- a/src/components/mindset/index.tsx
+++ b/src/components/mindset/index.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Socket } from 'socket.io-client'
+import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Universe } from '~/components/Universe'
 import { useSocket } from '~/hooks/useSockets'
@@ -248,13 +249,13 @@ export const MindSet = () => {
             </Flex>
             <SideBar />
           </Flex>
-          <Flex basis="100%" grow={1} p={16} shrink={1}>
+          <ContentContainer>
             <Flex basis="100%" grow={1} shrink={1}>
               {showTwoD ? <Scene /> : <Universe />}
             </Flex>
 
             <PlayerControl markers={markers} />
-          </Flex>
+          </ContentContainer>
         </>
       ) : (
         <LandingPage />
@@ -262,3 +263,10 @@ export const MindSet = () => {
     </Flex>
   )
 }
+
+const ContentContainer = styled(Flex)`
+  flex-basis: 100%;
+  flex-shrink: 1;
+  flex-grow: 1;
+  padding: 16px 16px 16px 0;
+`