fix privacy screen

frontend/src/components/atoms/text.ts

@@ -86,6 +86,7 @@ export const TitleText = styled.h3<TextProps>`
 
   @media screen and (max-width: ${breakpoints.tablet}) {
     font-size: 16px;
+    line-height: 23px;
   }
 `;
 

frontend/src/navigation/routes.tsx

@@ -12,6 +12,7 @@ import { useIsMobile } from "../hooks";
 import { breakpoints } from "../design";
 import { OnboardingMobile } from "../pages/onboarding-mobile/onboarding-mobile";
 import { ConnectWalletMobile } from "../pages/connect-wallet-mobile/connect-wallet-mobile";
+import { PrivacyMobile } from "../pages/content-mobile";
 
 export const InternalAppWrapper = () => {
   return (
@@ -69,7 +70,7 @@ export const ExternalAppRoutes: FC = () => {
       <MainContainer>
         <Routes>
           <Route path={routes.root} element={isMobile ? <OnboardingMobile /> : <Onboarding />} />
-          <Route path={routes.privacy} element={<Privacy />} />
+          <Route path={routes.privacy} element={isMobile ? <PrivacyMobile /> : <Privacy />} />
           <Route path="*" element={<InternalAppWrapper />} />
         </Routes>
       </MainContainer>

frontend/src/pages/content-mobile/index.ts

@@ -0,0 +1 @@
+export * from "./privacy-mobile";

frontend/src/pages/content-mobile/privacy-mobile.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { text } from "../../assets";
+import { Footer, FormText, MenuText, TitleText } from "../../components";
+import { KreadIcon } from "../../components/logo/styles";
+import { color } from "../../design";
+import { ContentWrapper, FooterContainer, GeneralInfo, InfoContainer, KreadContainer, Title } from "./styles";
+
+// TODO: make content for privacy page
+export const PrivacyMobile: FC = () => {
+  return (
+    <>
+      <KreadContainer>
+        <KreadIcon />
+      </KreadContainer>
+      <ContentWrapper>
+        <InfoContainer>
+          <MenuText>{text.content.privacyAndTerms}</MenuText>
+          <TitleText customColor={color.darkGrey}>{text.content.weAreCommittedTo}</TitleText>
+          <GeneralInfo>
+            <Title>{text.content.whatInformationDoWe}</Title>
+            <FormText customColor={color.darkGrey}>{text.content.weCollectPersonal}</FormText>
+            <Title>{text.content.whatInformationDoWe}</Title>
+            <FormText customColor={color.darkGrey}>{text.content.weUseTheInformation}</FormText>
+          </GeneralInfo>
+        </InfoContainer>
+      </ContentWrapper>
+      <Footer />
+    </>
+  );
+};

frontend/src/pages/content-mobile/styles.ts

@@ -0,0 +1,43 @@
+import styled from "@emotion/styled";
+import { FormText, TitleText } from "../../components";
+import { KreadIcon } from "../../components/logo/styles";
+import { margins } from "../../design";
+
+export const ContentWrapper = styled.div`
+  padding: 10px;
+  overflow-y: scroll;
+  width: 100vw;
+`;
+export const Title = styled(FormText)``;
+
+export const InfoContainer = styled.div`
+  padding-left: 20px;
+  padding-top: 4%;
+  ${TitleText} {
+    margin-top: ${margins.mini};
+    margin-bottom: 28px;
+  }
+  ${Title} {
+    margin-top: ${margins.mini};
+  }
+  ${FormText} {
+    margin-top: ${margins.mini};
+    margin-bottom: 28px;
+  }
+  width: 100%;
+`;
+
+export const GeneralInfo = styled.div`
+  width: 100%;
+`;
+
+export const KreadContainer = styled.div`
+display: flex;
+flex: 1;
+justify-content: center;
+margin-top: 30px;
+${KreadIcon} {
+  width: 100px;
+  height: 24px;
+}
+`;

frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx

@@ -14,6 +14,7 @@ import {
   OnboardingCharacterMobile,
   Overlay,
   PrimaryButton,
+  TitleText,
 } from "../../components";
 import {
   ArrowUp,
@@ -78,7 +79,7 @@ export const OnboardingMobile: FC = () => {
       <OnboardingContainer showAnimation={showAnimation}>
         <InfoText>
           <SectionContainer>
-            <TextContainer customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TextContainer>
+            <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
           </SectionContainer>
           <OnboardingCharacterWrapper>
             <OnboardingCharacterMobile/>
@@ -97,6 +98,8 @@ export const OnboardingMobile: FC = () => {
         </InfoText>
         <MiddleContent height={height} ref={ref}>
           <SectionContainer>
+            <MenuText>{text.general.sagesBy}</MenuText>
+            <TextContainer customColor={color.darkGrey}>{text.general.sagesIsTheFirst}</TextContainer>
             <MenuText>{text.general.whoWeAre}</MenuText>
             <TextContainer>
               {text.general.isPartOfAgoric}

frontend/src/pages/onboarding-mobile/styles.ts

@@ -125,9 +125,7 @@ export const TextContainer = styled.span<TextProps>`
   :first-letter {
     text-transform: capitalize;
   }
-  :first-of-type {
-    margin-top: 8px;
-  }
+
   margin-top: 24px;
   display: inline-block;
   ${({ customColor }): string => `color: ${customColor || color.darkGrey};`};