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 = () => { - + {showTwoD ? : } - + ) : ( @@ -262,3 +263,10 @@ export const MindSet = () => { ) } + +const ContentContainer = styled(Flex)` + flex-basis: 100%; + flex-shrink: 1; + flex-grow: 1; + padding: 16px 16px 16px 0; +`