diff --git a/src/modules/mindset/components/header/Icon/Logo.tsx b/src/modules/mindset/components/header/Icon/Logo.tsx new file mode 100644 index 000000000..70b13f9be --- /dev/null +++ b/src/modules/mindset/components/header/Icon/Logo.tsx @@ -0,0 +1,49 @@ +/* eslint-disable */ +import React from 'react' + +export const Logo: React.FC> = (props) => ( + + + + + + + + + + + + +) + +export default Logo diff --git a/src/modules/mindset/components/header/index.tsx b/src/modules/mindset/components/header/index.tsx index eb2b5a733..5feb22db4 100644 --- a/src/modules/mindset/components/header/index.tsx +++ b/src/modules/mindset/components/header/index.tsx @@ -1,12 +1,17 @@ import styled from 'styled-components' import { Flex } from '~/components/common/Flex' import { Text } from '~/components/common/Text' +import { colors } from '~/utils/colors' +import { Logo } from './Icon/Logo' export const Header = () => ( - - Graph Mindset - + + + + + + Graph Mindset ) @@ -18,4 +23,37 @@ const Head = styled(Flex).attrs({ })` height: 64px; padding: 20px 23px; + gap: 0px; +` + +const LogoButton = styled(Flex)` + align-items: center; + justify-content: center; + cursor: pointer; +` + +const IconWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 30px; + height: 27px; + color: ${colors.white}; + } +` + +const StyledText = styled(Text)` + width: 127px; + height: 24px; + color: ${colors.white}; + font-family: Barlow; + font-size: 22px; + font-style: normal; + font-weight: 700; + line-height: 24px; + letter-spacing: 0.22px; + margin-left: 16px; + white-space: nowrap; `