From c178c017cc5499195e6f389a63d7dbc3ad8f6ba7 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Wed, 21 Dec 2022 10:54:48 +0800
Subject: [PATCH] feat: modify contact modal text

---
 packages/app/src/components/contact-modal/index.tsx | 11 ++++-------
 packages/app/src/components/contact-modal/style.ts  |  7 ++++---
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/components/contact-modal/index.tsx b/packages/app/src/components/contact-modal/index.tsx
index cae11c7e79..96110f2a2a 100644
--- a/packages/app/src/components/contact-modal/index.tsx
+++ b/packages/app/src/components/contact-modal/index.tsx
@@ -60,9 +60,9 @@ const rightLinkList = [
   },
   {
     icon: <DocIcon />,
-    title: 'Check Our Docs',
-    subTitle: 'docs.AFFiNE.pro',
-    link: 'https://docs.affine.pro',
+    title: 'AFFiNE Community',
+    subTitle: 'community.affine.pro',
+    link: 'https://community.affine.pro',
   },
 ];
 
@@ -109,10 +109,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
             })}
           </StyledLeftContainer>
           <StyledRightContainer>
-            <StyledSubTitle>
-              Get in touch! <br />
-              Join our community.
-            </StyledSubTitle>
+            <StyledSubTitle>Get in touch!</StyledSubTitle>
             {linkList.map(({ icon, title, link }) => {
               return (
                 <StyledSmallLink key={title} href={link} target="_blank">
diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts
index e0954a194d..f1188359f2 100644
--- a/packages/app/src/components/contact-modal/style.ts
+++ b/packages/app/src/components/contact-modal/style.ts
@@ -2,10 +2,10 @@ import { absoluteCenter, displayFlex, styled } from '@/styles';
 
 export const StyledBigLink = styled('a')(({ theme }) => {
   return {
-    width: '320px',
+    width: '334px',
     height: '100px',
     marginBottom: '48px',
-    paddingLeft: '114px',
+    paddingLeft: '90px',
     fontSize: '24px',
     lineHeight: '36px',
     fontWeight: '600',
@@ -29,7 +29,7 @@ export const StyledBigLink = styled('a')(({ theme }) => {
       height: '50px',
       marginRight: '40px',
       color: theme.colors.primaryColor,
-      ...absoluteCenter({ vertical: true, position: { left: '32px' } }),
+      ...absoluteCenter({ vertical: true, position: { left: '20px' } }),
     },
     p: {
       width: '100%',
@@ -85,6 +85,7 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
 });
 export const StyledSubTitle = styled('div')(({ theme }) => {
   return {
+    width: '190px',
     fontSize: '18px',
     fontWeight: '600',
     color: theme.colors.textColor,