feat: modify styles

packages/app/src/components/contact-modal/style.ts

@@ -14,7 +14,7 @@ export const StyledModalContainer = styled('div')(({ theme }) => {
 export const StyledModalWrapper = styled('div')(({ theme }) => {
   return {
     width: '860px',
-    height: '626px',
+    height: '540px',
     backgroundColor: theme.colors.popoverBackground,
     backgroundImage: `url(${bg.src})`,
     borderRadius: '20px',
@@ -112,7 +112,6 @@ export const StyledSmallLink = styled('a')(({ theme }) => {
 });
 export const StyledSubTitle = styled('div')(({ theme }) => {
   return {
-    width: '189px',
     fontSize: '18px',
     fontWeight: '600',
     color: theme.colors.textColor,
@@ -121,10 +120,13 @@ export const StyledSubTitle = styled('div')(({ theme }) => {
 });
 
 export const StyledLeftContainer = styled('div')({
+  width: '320px',
   flexDirection: 'column',
   ...displayFlex('space-between', 'center'),
 });
 export const StyledRightContainer = styled('div')({
+  width: '214px',
+  flexShrink: '0',
   flexDirection: 'column',
   ...displayFlex('center', 'flex-end'),
 });
@@ -132,10 +134,11 @@ export const StyledRightContainer = styled('div')({
 export const StyledContent = styled('div')({
   height: '276px',
   width: '100%',
-  padding: '0 145px',
+  padding: '0 140px',
   ...displayFlex('space-between', 'center'),
   color: '#3A4C5C',
-  marginTop: '100px',
+  marginTop: '58px',
+  letterSpacing: '0.06em',
 });
 
 export const StyledBackdrop = styled('div')(({ theme }) => {
@@ -148,8 +151,8 @@ export const StyledLogo = styled('img')({
 
 export const StyledModalHeader = styled('div')(({ theme }) => {
   return {
-    height: '30px',
-    marginTop: '54px',
+    height: '20px',
+    marginTop: '36px',
     padding: '0 48px',
     ...displayFlex('space-between', 'center'),
   };
@@ -197,10 +200,16 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     textAlign: 'center',
     color: theme.colors.textColor,
 
-    marginTop: '75px',
+    marginTop: '40px',
     'p:first-of-type': {
       color: theme.colors.primaryColor,
-      marginBottom: '10px',
+      letterSpacing: '0.06em',
+      marginBottom: '25px',
+      a: {
+        ':visited': {
+          color: theme.colors.linkColor,
+        },
+      },
     },
   };
 });

packages/app/src/components/editor-mode-switch/style.ts

@@ -30,8 +30,13 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
       background: theme.colors.hoverBackground,
       position: 'relative',
       display: 'flex',
-      transition: `background ${ANIMATE_DURATION}ms`,
+      transition: `background ${ANIMATE_DURATION}ms, border ${ANIMATE_DURATION}ms`,
+      border: '1px solid transparent',
+
       ...shrinkStyle,
+      ':hover': {
+        border: `1px solid ${theme.colors.primaryColor}`,
+      },
     };
   }
 );

packages/app/src/pages/_app.tsx

@@ -7,7 +7,7 @@ import { EditorProvider } from '@/components/editor-provider';
 import { ModalProvider } from '@/components/global-modal-provider';
 import { Logger } from '@toeverything/pathfinder-logger';
 
-import '@fontsource/roboto-mono';
+import "@fontsource/space-mono";
 
 const ThemeProvider = dynamic(() => import('@/styles/themeProvider'), {
   ssr: false,

packages/app/src/styles/theme.ts

@@ -23,13 +23,15 @@ export const lightTheme: AffineTheme = {
     quoteColor: '#4C6275',
     placeHolderColor: '#C7C7C7',
     selectedColor: 'rgba(104, 128, 255, 0.1)',
+    borderColor: '#D0D7E3',
   },
   font: {
     xs: '12px',
     sm: '16px',
     base: '18px',
     family: `Avenir Next, ${basicFontFamily}`,
-    family2: `Roboto Mono, ${basicFontFamily}`,
+    family2: `Space Mono, ${basicFontFamily}`,
+    lineHeightBase: '26px',
   },
   zIndex: {
     modal: 1000,
@@ -41,6 +43,9 @@ export const lightTheme: AffineTheme = {
     modal:
       '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06);',
   },
+  space: {
+    paragraph: '18px',
+  },
 };
 
 export const darkTheme: AffineTheme = {
@@ -63,6 +68,7 @@ export const darkTheme: AffineTheme = {
     quoteColor: '#A9B1C6',
     placeHolderColor: '#C7C7C7',
     selectedColor: 'rgba(240, 242, 255, 0.8)',
+    borderColor: '#4D4C53',
   },
   shadow: {
     popover:
@@ -95,6 +101,7 @@ export const globalThemeVariables: (
     '--affine-quote-color': theme.colors.quoteColor,
     '--affine-selected-color': theme.colors.selectedColor,
     '--affine-placeholder-color': theme.colors.placeHolderColor,
+    '--affine-border-color': theme.colors.borderColor,
 
     '--affine-modal-shadow': theme.shadow.modal,
     '--affine-popover-shadow': theme.shadow.popover,
@@ -102,11 +109,14 @@ export const globalThemeVariables: (
     '--affine-font-xs': theme.font.xs, // tiny
     '--affine-font-sm': theme.font.sm, // small
     '--affine-font-base': theme.font.base,
+    '--affine-line-height-base': theme.font.lineHeightBase,
 
     '--affine-z-index-modal': theme.zIndex.modal,
     '--affine-z-index-popover': theme.zIndex.popover,
 
     '--affine-font-family': theme.font.family,
     '--affine-font-family2': theme.font.family2,
+
+    '--affine-paragraph-space': theme.space.paragraph,
   };
 };

packages/app/src/styles/types.ts

@@ -31,6 +31,7 @@ export interface AffineTheme {
     quoteColor: string;
     placeHolderColor: string;
     selectedColor: string;
+    borderColor: string;
   };
   font: {
     xs: string; // tiny
@@ -39,6 +40,8 @@ export interface AffineTheme {
 
     family: string;
     family2: string;
+
+    lineHeightBase: string | number;
   };
   zIndex: {
     modal: number;
@@ -48,6 +51,9 @@ export interface AffineTheme {
     modal: string;
     popover: string;
   };
+  space: {
+    paragraph: string;
+  };
 }
 
 export interface AffineThemeCSSVariables {
@@ -68,6 +74,7 @@ export interface AffineThemeCSSVariables {
   '--affine-quote-color': AffineTheme['colors']['quoteColor'];
   '--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
   '--affine-selected-color': AffineTheme['colors']['selectedColor'];
+  '--affine-border-color': AffineTheme['colors']['borderColor'];
 
   '--affine-modal-shadow': AffineTheme['shadow']['popover'];
   '--affine-popover-shadow': AffineTheme['shadow']['modal'];
@@ -75,12 +82,15 @@ export interface AffineThemeCSSVariables {
   '--affine-font-xs': AffineTheme['font']['xs']; // tiny
   '--affine-font-sm': AffineTheme['font']['sm']; // small
   '--affine-font-base': AffineTheme['font']['base'];
+  '--affine-line-height-base': AffineTheme['font']['lineHeightBase'];
 
   '--affine-z-index-modal': AffineTheme['zIndex']['modal'];
   '--affine-z-index-popover': AffineTheme['zIndex']['popover'];
 
   '--affine-font-family': AffineTheme['font']['family'];
   '--affine-font-family2': AffineTheme['font']['family2'];
+
+  '--affine-paragraph-space': AffineTheme['space']['paragraph'];
 }
 
 declare module '@emotion/react' {