From 8a2a3e2c4c8eb06e469b168aac420830789f9b76 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 21 Oct 2022 16:55:29 +0800 Subject: [PATCH] feat: modify styles --- packages/app/package.json | 2 +- .../app/src/components/contact-modal/style.ts | 25 +++++++++++++------ .../components/editor-mode-switch/style.ts | 7 +++++- packages/app/src/pages/_app.tsx | 2 +- packages/app/src/styles/theme.ts | 12 ++++++++- packages/app/src/styles/types.ts | 10 ++++++++ pnpm-lock.yaml | 8 +++--- 7 files changed, 50 insertions(+), 16 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 713e3489cc..47ffa2f723 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -17,7 +17,7 @@ "@emotion/react": "^11.10.4", "@emotion/server": "^11.10.0", "@emotion/styled": "^11.10.4", - "@fontsource/roboto-mono": "^4.5.8", + "@fontsource/space-mono": "^4.5.10", "@mui/base": "^5.0.0-alpha.87", "@mui/icons-material": "^5.10.9", "@mui/material": "^5.8.6", diff --git a/packages/app/src/components/contact-modal/style.ts b/packages/app/src/components/contact-modal/style.ts index 32468d9734..e1bb82d2fe 100644 --- a/packages/app/src/components/contact-modal/style.ts +++ b/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, + }, + }, }, }; }); diff --git a/packages/app/src/components/editor-mode-switch/style.ts b/packages/app/src/components/editor-mode-switch/style.ts index 72b0ab3340..ac7050e94e 100644 --- a/packages/app/src/components/editor-mode-switch/style.ts +++ b/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}`, + }, }; } ); diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index 5bb02b2ccc..0eebd0b64d 100644 --- a/packages/app/src/pages/_app.tsx +++ b/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, diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index d10c8e1471..9f91b0e533 100644 --- a/packages/app/src/styles/theme.ts +++ b/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, }; }; diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts index 3e70ffc340..b95dd38fcd 100644 --- a/packages/app/src/styles/types.ts +++ b/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' { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8fbeb5d0c1..880cc8bc41 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,7 +25,7 @@ importers: '@emotion/react': ^11.10.4 '@emotion/server': ^11.10.0 '@emotion/styled': ^11.10.4 - '@fontsource/roboto-mono': ^4.5.8 + '@fontsource/space-mono': ^4.5.10 '@mui/base': ^5.0.0-alpha.87 '@mui/icons-material': ^5.10.9 '@mui/material': ^5.8.6 @@ -55,7 +55,7 @@ importers: '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34 '@emotion/server': 11.10.0_@emotion+css@11.10.0 '@emotion/styled': 11.10.4_yiaqs725o7pcd7rteavrnhgj4y - '@fontsource/roboto-mono': 4.5.8 + '@fontsource/space-mono': 4.5.10 '@mui/base': 5.0.0-alpha.101_7ey2zzynotv32rpkwno45fsx4e '@mui/icons-material': 5.10.9_5fncb4nagb4cvvcnwamw2rozfa '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4 @@ -379,8 +379,8 @@ packages: - supports-color dev: true - /@fontsource/roboto-mono/4.5.8: - resolution: {integrity: sha512-AW44UkbQD0w1CT5mzDbsvhGZ6/bb0YmZzoELj6Sx8vcVEzcbYGUdt2Dtl5zqlOuYMWQFY1mniwWyVv+Bm/lVxw==} + /@fontsource/space-mono/4.5.10: + resolution: {integrity: sha512-OTrWNdcPp01bZjEbSu52vMu9PaReUFylHAMI4lctKVbYUnm+e7a4eG6YcnRvDrJEMYHBDtEWLAsqGVldV5r1EQ==} dev: false /@humanwhocodes/config-array/0.10.4: