feat: more homepage additions

2025-02-22 14:22:33 +01:00 · 2020-01-30 21:24:57 +01:00 · 2020-01-30 21:24:57 +01:00 · 6d936544f7
commit 6d936544f7
parent c0abc94563
18 changed files with 359 additions and 130 deletions
--- a/src/components/generic/Styled.tsx
+++ b/src/components/generic/Styled.tsx
@ -1,4 +1,3 @@
-import React, { ReactNode } from 'react';
 import styled, { css } from 'styled-components';
 import {
    cardColor,
@ -11,7 +10,6 @@ import {
    chartLinkColor,
    inverseTextColor,
 } from '../../styles/Themes';
-import { ThemeSet } from 'styled-theming';

 export const CardWithTitle = styled.div`
    display: flex;
@ -166,48 +164,6 @@ export const ColorButton = styled(SimpleButton)`
    }
 `;

-interface FullWidthProps {
-    withColor?: boolean;
-    color?: string | ThemeSet;
-    textColor?: string | ThemeSet;
-}
-
-const FullWidth = styled.div`
-    width: 100%;
-    ${({ textColor }: FullWidthProps) =>
-        textColor &&
-        css`
-            color: ${textColor};
-        `}
-    background-color: ${({ withColor, color }: FullWidthProps) =>
-        withColor && (color ? color : cardColor)};
-`;
-
-const FixedWidth = styled.div`
-    max-width: 1000px;
-    margin: 0 auto 0 auto;
-
-    @media (max-width: 1035px) {
-        padding: 0 16px;
-    }
-`;
-
-export const Wrapper = ({
-    withColor,
-    children,
-    color,
-    textColor,
-}: {
-    withColor?: boolean;
-    color?: any;
-    textColor?: any;
-    children: ReactNode;
-}) => (
-    <FullWidth withColor={withColor} color={color} textColor={textColor}>
-        <FixedWidth>{children}</FixedWidth>
-    </FullWidth>
-);
-
 export const OverflowText = styled.div`
    margin-left: 16px;
    overflow: hidden;
--- a/src/components/scrollToTop/ScrollToTop.tsx
+++ b/src/components/scrollToTop/ScrollToTop.tsx
@ -11,7 +11,7 @@ export const ScrollToTop = () => {
        return () => {
            unlisten();
        };
-    }, []);
+    }, [history]);

    return null;
 };
--- a/src/components/section/Section.tsx
+++ b/src/components/section/Section.tsx
@ -24,6 +24,10 @@ const FullWidth = styled.div`
        `}
    background-color: ${({ withColor, color }: FullWidthProps) =>
        withColor && (color ? color : backgroundColor)};
+
+    @media (max-width: 578px) {
+        padding: 16px 0;
+    }
 `;

 const FixedWidth = styled.div`
--- a/src/sections/content/Content.tsx
+++ b/src/sections/content/Content.tsx
@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Navigation } from '../../sections/navigation/Navigation';
-import { Wrapper } from '../../components/generic/Styled';
 import { Switch, Route } from 'react-router';

 import { Home } from '../../views/home/Home';
@ -16,6 +15,7 @@ import { ForwardsList } from '../../views/forwards/ForwardList';
 import { TermsView } from '../../views/other/terms/TermsView';
 import { PrivacyView } from '../../views/other/privacy/PrivacyView';
 import { FaqView } from '../../views/other/faq/FaqView';
+import { Section } from 'components/section/Section';

 const Container = styled.div`
    display: grid;
@ -59,14 +59,14 @@ const Content = () => {
 };

 const getGrid = (Content: any) => (
-    <Wrapper>
+    <Section padding={'16px 0 32px'}>
        <Container>
            <Navigation />
            <ContentStyle>
                <Content />
            </ContentStyle>
        </Container>
-    </Wrapper>
+    </Section>
 );

 export default Content;
--- a/src/sections/footer/Footer.tsx
+++ b/src/sections/footer/Footer.tsx
@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Wrapper } from '../../components/generic/Styled';
 import { Link } from 'react-router-dom';
 import { headerColor, headerTextColor } from 'styles/Themes';
+import { Section } from 'components/section/Section';

 const FooterStyle = styled.div`
    padding: 40px 0;
@ -12,13 +12,13 @@ const FooterStyle = styled.div`

 export const Footer = () => {
    return (
-        <Wrapper withColor={true} color={headerColor}>
+        <Section withColor={true} color={headerColor}>
            <FooterStyle>
                ThunderHub
                <Link to={'/faq'}>FAQ</Link>
                <Link to={'/terms'}>Terms of Use</Link>
                <Link to={'/privacy'}>Privacy Policy</Link>
            </FooterStyle>
-        </Wrapper>
+        </Section>
    );
 };
--- a/src/sections/header/Header.tsx
+++ b/src/sections/header/Header.tsx
@ -4,15 +4,12 @@ import { headerColor, headerTextColor } from '../../styles/Themes';
 import { HomeButton } from '../../views/entry/homepage/HomePage.styled';
 import { Link } from 'react-router-dom';
 import { useAccount } from '../../context/AccountContext';
-import {
-    SingleLine,
-    Sub4Title,
-    Wrapper,
-} from '../../components/generic/Styled';
-import { Cpu, MenuIcon, XSvg } from '../../components/generic/Icons';
+import { SingleLine, Sub4Title } from '../../components/generic/Styled';
+import { Cpu, MenuIcon, XSvg, Zap } from '../../components/generic/Icons';
 import { BurgerMenu } from 'components/burgerMenu/BurgerMenu';
 import { useSize } from 'hooks/UseSize';
 import { useTransition, animated } from 'react-spring';
+import { Section } from 'components/section/Section';

 const HeaderStyle = styled.div`
    padding: 16px 0;
@ -65,13 +62,15 @@ export const Header = () => {

    const renderLoggedOut = () => (
        <Link to="/login" style={{ textDecoration: 'none' }}>
-            <HomeButton>Login</HomeButton>
+            <HomeButton>
+                <Zap fillcolor={'white'} color={'white'} />
+            </HomeButton>
        </Link>
    );

    return (
        <>
-            <Wrapper
+            <Section
                withColor={true}
                color={headerColor}
                textColor={headerTextColor}
@ -89,7 +88,7 @@ export const Header = () => {
                        </SingleLine>
                    </SingleLine>
                </HeaderStyle>
-            </Wrapper>
+            </Section>
            {open && width <= 578 && (
                <BurgerMenu open={open} setOpen={setOpen} />
            )}
--- a/src/styles/Themes.ts
+++ b/src/styles/Themes.ts
@ -164,7 +164,7 @@ export const navTextColor = theme('mode', {
 });

 // ---------------------------------------
-// ICON COLORS
+// INPUT COLORS
 // ---------------------------------------
 export const inputBackgroundColor = theme('mode', {
    light: themeColors.grey,
@ -172,7 +172,7 @@ export const inputBackgroundColor = theme('mode', {
 });

 export const inputBorderColor = theme('mode', {
-    light: themeColors.grey8,
+    light: themeColors.grey3,
    dark: themeColors.grey7,
 });

--- a/src/views/entry/homepage/HomePage.styled.ts
+++ b/src/views/entry/homepage/HomePage.styled.ts
@ -1,11 +1,12 @@
 import styled from 'styled-components';
 import { ReactComponent as HeadlineImage } from '../../../assets/images/MoshingDoodle.svg';
+import { fontColors } from 'styles/Themes';

 export const Headline = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 32px 0 120px;
+    padding: 48px 0 140px;

    @media (max-width: 578px) {
        flex-direction: column-reverse;
@ -45,6 +46,20 @@ export const HomeButton = styled.button`
    justify-content: center;
    border-radius: 8px;
    white-space: nowrap;
-    min-width: 100px;
    width: 100%;
 `;
+
+export const Title = styled.h1`
+    width: 100%;
+    text-align: center;
+    color: ${({ textColor }: { textColor?: string }) =>
+        textColor ? textColor : fontColors.white};
+    font-size: 32px;
+    margin-bottom: 0;
+`;
+
+export const Text = styled.p`
+    color: ${fontColors.white};
+    text-align: justify;
+    max-width: 400px;
+`;
--- a/src/views/entry/homepage/HomePage.tsx
+++ b/src/views/entry/homepage/HomePage.tsx
@ -1,65 +1,42 @@
 import React from 'react';
-import { Wrapper } from '../../../components/generic/Styled';
 import {
    Headline,
    LeftHeadline,
    StyledImage,
    HomeButton,
+    Title,
+    Text,
 } from './HomePage.styled';
-import styled from 'styled-components';
 import { Zap } from '../../../components/generic/Icons';
 import { headerColor, inverseTextColor } from '../../../styles/Themes';
 import { Link } from 'react-router-dom';
-import { DetailSection } from './DetailSection';
-
-const Padding = styled.div`
-    padding: 4px 4px 0 0;
-`;
-
-const SlantedWrapper = styled.div`
-    width: 100%;
-    height: 200px;
-    margin-bottom: -260px;
-    overflow: hidden;
-    z-index: -5;
-`;
-
-const SlantedEdge = styled.div`
-    content: '';
-    width: 100%;
-    height: 100%;
-    background: ${headerColor};
-    -webkit-transform-origin: 100% 0;
-    -ms-transform-origin: 100% 0;
-    transform-origin: 100% 0;
-    -webkit-transform: skew(84deg);
-    -ms-transform: skew(84deg);
-    transform: skew(88deg);
-    z-index: -5;
-`;
-
-const FullWidth = styled.div`
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-top: 18px;
-`;
+import { DetailSection } from './Sections/DetailSection';
+import { ContactSection } from 'views/other/ContactSection';
+import { Compatible } from './Sections/Compatible';
+import { Section } from 'components/section/Section';
+import { InfoSection } from './Sections/InfoSection';
+import { CallToAction } from './Sections/CallToAction';
+import {
+    FullWidth,
+    SlantedWrapper,
+    SlantedEdge,
+    Padding,
+} from './Sections/Sections.styled';

 export const HomePageView = () => {
    return (
        <>
-            <Wrapper
-                withColor={true}
-                color={headerColor}
-                textColor={inverseTextColor}
-            >
+            <Section color={headerColor} textColor={inverseTextColor}>
                <Headline>
                    <LeftHeadline>
-                        <h1>Control The Power of Lighting</h1>
-                        <p>
-                            Take full control of your lightning node. Think of
-                            something else to place here. Think Think Think
-                        </p>
+                        <Title>Control The Power of Lighting</Title>
+                        <FullWidth>
+                            <Text>
+                                Take full control of your lightning node for
+                                quick monitoring and management inside your
+                                browser.
+                            </Text>
+                        </FullWidth>
                        <FullWidth>
                            <Link
                                to="/login"
@ -79,14 +56,15 @@ export const HomePageView = () => {
                    </LeftHeadline>
                    <StyledImage />
                </Headline>
-            </Wrapper>
+            </Section>
            <SlantedWrapper>
                <SlantedEdge />
            </SlantedWrapper>
            <DetailSection />
-            <Wrapper>
-                <div>Another Line</div>
-            </Wrapper>
+            <Compatible />
+            <InfoSection />
+            <CallToAction />
+            <ContactSection />
        </>
    );
 };
--- a/src/views/entry/homepage/Sections/CallToAction.tsx
+++ b/src/views/entry/homepage/Sections/CallToAction.tsx
@ -0,0 +1,33 @@
+import React from 'react';
+import { Center } from 'views/other/OtherViews.styled';
+import { Section } from 'components/section/Section';
+import { Padding } from './Sections.styled';
+import { themeColors } from 'styles/Themes';
+import { Link } from 'react-router-dom';
+import { HomeButton } from '../HomePage.styled';
+import { Zap } from 'components/generic/Icons';
+import styled from 'styled-components';
+
+const CallToActionButton = styled(HomeButton)`
+    margin: 16px 0 0;
+`;
+
+export const CallToAction = () => {
+    return (
+        <Section color={themeColors.grey2} padding={'80px 0'}>
+            <Center>
+                <h2>Ready to take control of your Lightning Node?</h2>
+            </Center>
+            <Center>
+                <Link to="/login" style={{ textDecoration: 'none' }}>
+                    <CallToActionButton>
+                        <Padding>
+                            <Zap fillcolor={'white'} color={'white'} />
+                        </Padding>
+                        Control The Lightning
+                    </CallToActionButton>
+                </Link>
+            </Center>
+        </Section>
+    );
+};
--- a/src/views/entry/homepage/Sections/Compatible.tsx
+++ b/src/views/entry/homepage/Sections/Compatible.tsx
@ -0,0 +1,22 @@
+import React from 'react';
+import { Center } from 'views/other/OtherViews.styled';
+import { Section } from 'components/section/Section';
+import { WrapSingleLine } from './Sections.styled';
+import { themeColors } from 'styles/Themes';
+
+export const Compatible = () => {
+    return (
+        <Section color={themeColors.grey2} padding={'80px 0 40px'}>
+            <Center>
+                <h2>Compatible with the latest LND node versions.</h2>
+            </Center>
+            <WrapSingleLine>
+                <p>v0.7.1-beta</p>
+                <p>v0.8.0-beta</p>
+                <p>v0.8.1-beta</p>
+                <p>v0.8.2-beta</p>
+                <p>v0.9.0-beta</p>
+            </WrapSingleLine>
+        </Section>
+    );
+};
--- a/src/views/entry/homepage/Sections/DetailSection.tsx
+++ b/src/views/entry/homepage/Sections/DetailSection.tsx
@ -1,12 +1,11 @@
 import React from 'react';
 import {
-    Wrapper,
    Card,
    SubTitle,
    ColumnLine,
    Sub4Title,
    SingleLine,
-} from '../../../components/generic/Styled';
+} from '../../../../components/generic/Styled';
 import styled from 'styled-components';
 import {
    Eye,
@ -15,8 +14,9 @@ import {
    Server,
    Sliders,
    Users,
-} from '../../../components/generic/Icons';
-import { cardColor } from '../../../styles/Themes';
+} from '../../../../components/generic/Icons';
+import { cardColor } from '../../../../styles/Themes';
+import { Section } from 'components/section/Section';

 const Padding = styled.div`
    padding: ${({ padding }: { padding?: string }) =>
@ -62,7 +62,7 @@ const detailCardContent = (title: string, text: string, Icon: any) => (

 export const DetailSection = () => {
    return (
-        <Wrapper>
+        <Section withColor={false}>
            <DetailLine>
                {detailCardContent(
                    'Make Payments',
@ -95,6 +95,6 @@ export const DetailSection = () => {
                    Sliders,
                )}
            </DetailLine>
-        </Wrapper>
+        </Section>
    );
 };
--- a/src/views/entry/homepage/Sections/InfoSection.tsx
+++ b/src/views/entry/homepage/Sections/InfoSection.tsx
@ -0,0 +1,135 @@
+import React from 'react';
+import { Section } from 'components/section/Section';
+import {
+    InfoRow,
+    ImageSection,
+    ImagePlace,
+    TextSection,
+} from './Sections.styled';
+import { Text } from 'views/other/OtherViews.styled';
+
+export const InfoSection = () => {
+    return (
+        <>
+            <Section padding={'80px 0 40px'}>
+                <InfoRow>
+                    <TextSection>
+                        <h2>Send and Receive</h2>
+                        <Text>
+                            Send and receive both Lightning and Bitcoin payments
+                            in a simple and easy to use interface with both
+                            basic and advanced features.
+                        </Text>
+                    </TextSection>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                </InfoRow>
+            </Section>
+            <Section padding={'48px 0'}>
+                <InfoRow reverse={true}>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                    <TextSection>
+                        <h2>Transaction Reports</h2>
+                        <Text>
+                            Have a quick overview of the invoices coming into
+                            your node and payments being made. Check both the
+                            amount and value of your transactions. See total
+                            amount together with confirmed and unconfirmed
+                            invoices.
+                        </Text>
+                    </TextSection>
+                </InfoRow>
+            </Section>
+            <Section padding={'48px 0'}>
+                <InfoRow>
+                    <TextSection>
+                        <h2>Forwarded Payments</h2>
+                        <Text>
+                            Quick glance at the forwarded payments that have
+                            been going through your node. See the incoming and
+                            outgoing channels being used.
+                        </Text>
+                    </TextSection>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                </InfoRow>
+            </Section>
+            <Section padding={'48px 0'}>
+                <InfoRow reverse={true}>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                    <TextSection>
+                        <h2>Channel Management</h2>
+                        <Text>
+                            See all your channels and get a quick preview of how
+                            balanced and active they are. Open new channels or
+                            close them.
+                        </Text>
+                    </TextSection>
+                </InfoRow>
+            </Section>
+            <Section padding={'48px 0'}>
+                <InfoRow>
+                    <TextSection>
+                        <h2>Forward Fees</h2>
+                        <Text>
+                            Manage the fees charged for using your channels to
+                            forward payments. Change them for individual
+                            channels or all of them at once.
+                        </Text>
+                    </TextSection>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                </InfoRow>
+            </Section>
+            <Section padding={'48px 0'}>
+                <InfoRow reverse={true}>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                    <TextSection>
+                        <h2>Transactions</h2>
+                        <Text>
+                            See in detail all your transactions. When they were
+                            created, confirmed or if they expired.
+                        </Text>
+                    </TextSection>
+                </InfoRow>
+            </Section>
+            <Section padding={'48px 0'}>
+                <InfoRow>
+                    <TextSection>
+                        <h2>Backups</h2>
+                        <Text>
+                            Backup your channels, verify the backup and recover
+                            channels if needed.
+                        </Text>
+                    </TextSection>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                </InfoRow>
+            </Section>
+            <Section padding={'48px 0 80px'}>
+                <InfoRow reverse={true}>
+                    <ImageSection>
+                        <ImagePlace src={'https://www.placecage.com/500/300'} />
+                    </ImageSection>
+                    <TextSection>
+                        <h2>Night Mode</h2>
+                        <Text>
+                            Prefer working in the dark? We have an awesome night
+                            mode just for your needs.
+                        </Text>
+                    </TextSection>
+                </InfoRow>
+            </Section>
+        </>
+    );
+};
--- a/src/views/entry/homepage/Sections/Sections.styled.tsx
+++ b/src/views/entry/homepage/Sections/Sections.styled.tsx
@ -0,0 +1,86 @@
+import styled from 'styled-components';
+import { SingleLine } from 'components/generic/Styled';
+import { headerColor } from 'styles/Themes';
+
+export const Padding = styled.div`
+    padding: 4px 4px 0 0;
+`;
+
+export const SlantedWrapper = styled.div`
+    width: 100%;
+    height: 200px;
+    margin-bottom: -260px;
+    overflow: hidden;
+    z-index: -5;
+`;
+
+export const SlantedEdge = styled.div`
+    content: '';
+    width: 100%;
+    height: 100%;
+    background: ${headerColor};
+    -webkit-transform-origin: 100% 0;
+    -ms-transform-origin: 100% 0;
+    transform-origin: 100% 0;
+    -webkit-transform: skew(84deg);
+    -ms-transform: skew(84deg);
+    transform: skew(88deg);
+    z-index: -5;
+`;
+
+export const FullWidth = styled.div`
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-top: 18px;
+`;
+
+export const InfoRow = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    align-items: stretch;
+
+    @media (max-width: 578px) {
+        flex-direction: ${({ reverse }: { reverse?: boolean }) =>
+            reverse ? 'column-reverse' : 'column'};
+    }
+`;
+
+export const HalfSection = styled.div`
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+
+    @media (max-width: 578px) {
+        width: 100%;
+        text-align: center;
+    }
+`;
+
+export const ImageSection = styled(HalfSection)`
+    align-self: center;
+`;
+
+export const TextSection = styled(HalfSection)`
+    padding: 0 32px;
+
+    @media (max-width: 578px) {
+        padding: 0 8px;
+    }
+`;
+
+export const ImagePlace = styled.img`
+    display: flex;
+    width: 100%;
+    height: auto;
+    justify-content: center;
+    align-items: center;
+    background-color: grey;
+`;
+
+export const WrapSingleLine = styled(SingleLine)`
+    flex-wrap: wrap;
+    justify-content: space-around;
+    flex-grow: 1;
+`;
--- a/src/views/entry/login/Login.tsx
+++ b/src/views/entry/login/Login.tsx
@ -3,7 +3,6 @@ import {
    Card,
    SubTitle,
    ColorButton,
-    Wrapper,
 } from '../../../components/generic/Styled';
 import styled from 'styled-components';
 import { LoginForm } from '../../../components/auth/NormalLogin';
@ -12,6 +11,7 @@ import { getNextAvailable } from '../../../utils/storage';
 import { BTCLoginForm } from '../../../components/auth/BTCLogin';
 import { useSettings } from '../../../context/SettingsContext';
 import { textColorMap } from '../../../styles/Themes';
+import { Section } from 'components/section/Section';

 const ConnectButton = styled(ColorButton)`
    width: 100%;
@ -48,8 +48,8 @@ export const LoginView = () => {
        </>
    );
    return (
-        <Wrapper>
-            <Card padding={'50px 100px'}>
+        <Section padding={'48px 0 60px'}>
+            <Card padding={'50px 100px'} bottom={'0'}>
                {isType === 'none' && (
                    <SubTitle> How do you want to connect?</SubTitle>
                )}
@ -64,6 +64,6 @@ export const LoginView = () => {
                    <BTCLoginForm available={next} withRedirect={true} />
                )}
            </Card>
-        </Wrapper>
+        </Section>
    );
 };
--- a/src/views/entry/login/SessionLogin.tsx
+++ b/src/views/entry/login/SessionLogin.tsx
@ -6,13 +6,13 @@ import {
    CardWithTitle,
    Card,
    SubTitle,
-    Wrapper,
 } from '../../../components/generic/Styled';
 import CryptoJS from 'crypto-js';
 import { toast } from 'react-toastify';
 import { saveSessionAuth } from '../../../utils/auth';
 import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
 import { Input } from 'components/input/Input';
+import { Section } from 'components/section/Section';

 export const SessionLogin = () => {
    const { name, admin, refreshAccount } = useAccount();
@ -31,7 +31,7 @@ export const SessionLogin = () => {
    };

    return (
-        <Wrapper>
+        <Section>
            <CardWithTitle>
                <SubTitle>{`Please Login (${name}):`}</SubTitle>
                <Card>
@ -55,6 +55,6 @@ export const SessionLogin = () => {
                    )}
                </Card>
            </CardWithTitle>
-        </Wrapper>
+        </Section>
    );
 };
--- a/src/views/home/account/AccountInfo.tsx
+++ b/src/views/home/account/AccountInfo.tsx
@ -14,7 +14,7 @@ import { useQuery } from '@apollo/react-hooks';
 import { GET_BALANCES } from '../../../graphql/query';
 import styled from 'styled-components';
 import {
-    Send,
+    UpArrow,
    Zap,
    Anchor,
    Pocket,
@ -158,7 +158,7 @@ export const AccountInfo = () => {
                                color={sectionColor}
                                onClick={() => setState('send_ln')}
                            >
-                                <Send />
+                                <UpArrow />
                            </ColorButton>
                            <ColorButton
                                color={sectionColor}
@ -210,7 +210,7 @@ export const AccountInfo = () => {
                                color={sectionColor}
                                onClick={() => setState('send_chain')}
                            >
-                                <Send />
+                                <UpArrow />
                            </ColorButton>
                            <ColorButton
                                color={sectionColor}
--- a/src/views/other/OtherViews.styled.ts
+++ b/src/views/other/OtherViews.styled.ts
@ -6,6 +6,7 @@ export const Center = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
+    text-align: center;
 `;

 export const Title = styled.h1`