From 30b5ae143d57ef4bff9e449d7c4b23e762374a26 Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Fri, 22 Nov 2024 00:06:42 +0500 Subject: [PATCH 1/2] fix(logo): render Icon and Title --- public/svg-icons/Logo.svg | 12 ++++ src/components/Icons/Logo.tsx | 55 ++++++++++++++ .../mindset/components/header/index.tsx | 72 +++++++++++++++++-- 3 files changed, 132 insertions(+), 7 deletions(-) create mode 100644 public/svg-icons/Logo.svg create mode 100644 src/components/Icons/Logo.tsx diff --git a/public/svg-icons/Logo.svg b/public/svg-icons/Logo.svg new file mode 100644 index 000000000..342459b7f --- /dev/null +++ b/public/svg-icons/Logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/Icons/Logo.tsx b/src/components/Icons/Logo.tsx new file mode 100644 index 000000000..2cbae33ad --- /dev/null +++ b/src/components/Icons/Logo.tsx @@ -0,0 +1,55 @@ +/* eslint-disable */ +import React from 'react'; + +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..db7e13a93 100644 --- a/src/modules/mindset/components/header/index.tsx +++ b/src/modules/mindset/components/header/index.tsx @@ -1,14 +1,39 @@ +import { useEffect, useState } from 'react' import styled from 'styled-components' import { Flex } from '~/components/common/Flex' import { Text } from '~/components/common/Text' +import Logo from '~/components/Icons/Logo' +import { getAboutData } from '~/network/fetchSourcesData' +import { colors } from '~/utils/colors' -export const Header = () => ( - - - Graph Mindset - - -) +export const Header = () => { + const [title, setTitle] = useState('') + + useEffect(() => { + const fetchTitle = async () => { + try { + const response = await getAboutData() + + setTitle(response.title || 'Graph Mindset') + } catch (error) { + console.error('Failed to fetch title:', error) + } + } + + fetchTitle() + }, []) + + return ( + + + + + + + {title} + + ) +} const Head = styled(Flex).attrs({ align: 'center', @@ -18,4 +43,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; ` From 64c7b02813c8c7b7fb046745b398c0b63221673e Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Fri, 22 Nov 2024 01:17:33 +0500 Subject: [PATCH 2/2] fix(logo): render Icon and Title --- public/svg-icons/Logo.svg | 12 ----- .../mindset/components/header/Icon}/Logo.tsx | 16 +++---- .../mindset/components/header/index.tsx | 44 +++++-------------- 3 files changed, 17 insertions(+), 55 deletions(-) delete mode 100644 public/svg-icons/Logo.svg rename src/{components/Icons => modules/mindset/components/header/Icon}/Logo.tsx (91%) diff --git a/public/svg-icons/Logo.svg b/public/svg-icons/Logo.svg deleted file mode 100644 index 342459b7f..000000000 --- a/public/svg-icons/Logo.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/components/Icons/Logo.tsx b/src/modules/mindset/components/header/Icon/Logo.tsx similarity index 91% rename from src/components/Icons/Logo.tsx rename to src/modules/mindset/components/header/Icon/Logo.tsx index 2cbae33ad..70b13f9be 100644 --- a/src/components/Icons/Logo.tsx +++ b/src/modules/mindset/components/header/Icon/Logo.tsx @@ -1,14 +1,8 @@ /* eslint-disable */ -import React from 'react'; +import React from 'react' -const Logo: React.FC> = (props) => ( - +export const Logo: React.FC> = (props) => ( + > = (props) => ( fill="currentColor" /> -); +) -export default Logo; +export default Logo diff --git a/src/modules/mindset/components/header/index.tsx b/src/modules/mindset/components/header/index.tsx index db7e13a93..5feb22db4 100644 --- a/src/modules/mindset/components/header/index.tsx +++ b/src/modules/mindset/components/header/index.tsx @@ -1,39 +1,19 @@ -import { useEffect, useState } from 'react' import styled from 'styled-components' import { Flex } from '~/components/common/Flex' import { Text } from '~/components/common/Text' -import Logo from '~/components/Icons/Logo' -import { getAboutData } from '~/network/fetchSourcesData' import { colors } from '~/utils/colors' - -export const Header = () => { - const [title, setTitle] = useState('') - - useEffect(() => { - const fetchTitle = async () => { - try { - const response = await getAboutData() - - setTitle(response.title || 'Graph Mindset') - } catch (error) { - console.error('Failed to fetch title:', error) - } - } - - fetchTitle() - }, []) - - return ( - - - - - - - {title} - - ) -} +import { Logo } from './Icon/Logo' + +export const Header = () => ( + + + + + + + Graph Mindset + +) const Head = styled(Flex).attrs({ align: 'center',