Merge pull request #2514 from saithsab877/mindset-padding

[Graph Mindset] Border and Padding
stakwork · Dec 9, 2024 · eba847c · eba847c
2 parents c9f6887 + ded1a75
commit eba847c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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,17 +249,24 @@ 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 />
       )}
     </Flex>
   )
 }
+
+const ContentContainer = styled(Flex)`
+  flex-basis: 100%;
+  flex-shrink: 1;
+  flex-grow: 1;
+  padding: 16px 16px 16px 0;
+`