refactor: unify theme (#1303)

2026-02-14 21:27:20 +00:00 · 2023-03-04 01:36:20 -06:00
parent fe0d78b2d6
commit 4e9f0c97a1
43 changed files with 779 additions and 543 deletions
--- a/apps/web/src/components/pure/contact-modal/style.ts
+++ b/apps/web/src/components/pure/contact-modal/style.ts
@@ -121,7 +121,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
  };
 });

-export const StyledPrivacyContainer = styled.div(({ theme }) => {
+export const StyledPrivacyContainer = styled('div')(({ theme }) => {
  return {
    marginTop: '4px',
    position: 'relative',
--- a/apps/web/src/components/pure/footer/styles.ts
+++ b/apps/web/src/components/pure/footer/styles.ts
@@ -6,7 +6,7 @@ import {
 } from '@affine/component';
 import { Button } from '@affine/component';

-export const StyledSplitLine = styled.div(({ theme }) => {
+export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
@@ -15,7 +15,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceInfo = styled.div(({ theme }) => {
+export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
  return {
    marginLeft: '15px',
    width: '202px',
@@ -37,7 +37,7 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceTitle = styled.div(({ theme }) => {
+export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.base,
    fontWeight: 600,
@@ -48,7 +48,7 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => {
  };
 });

-export const StyledCard = styled.div<{
+export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
  const borderColor = active ? theme.colors.primaryColor : 'transparent';
@@ -63,7 +63,7 @@ export const StyledCard = styled.div<{
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
    transition: 'background .2s',
-    background: theme.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
      background: theme.colors.cardHoverBackground,
      '.add-icon': {
@@ -81,7 +81,7 @@ export const StyledFooter = styled('div')({
  ...displayFlex('space-between', 'center'),
 });

-export const StyleUserInfo = styled.div(({ theme }) => {
+export const StyleUserInfo = styled('div')(({ theme }) => {
  return {
    textAlign: 'left',
    marginLeft: '16px',
@@ -97,17 +97,17 @@ export const StyleUserInfo = styled.div(({ theme }) => {
  };
 });

-export const StyledModalHeaderLeft = styled.div(() => {
+export const StyledModalHeaderLeft = styled('div')(() => {
  return { ...displayFlex('flex-start', 'center') };
 });
-export const StyledModalTitle = styled.div(({ theme }) => {
+export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
    fontSize: theme.font.h6,
  };
 });

-export const StyledHelperContainer = styled.div(({ theme }) => {
+export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
    color: theme.colors.iconColor,
    marginLeft: '15px',
@@ -125,13 +125,13 @@ export const StyledModalContent = styled('div')({
  ...displayFlex('space-between', 'flex-start', 'flex-start'),
  flexWrap: 'wrap',
 });
-export const StyledOperationWrapper = styled.div(() => {
+export const StyledOperationWrapper = styled('div')(() => {
  return {
    ...displayFlex('flex-end', 'center'),
  };
 });

-export const StyleWorkspaceAdd = styled.div(() => {
+export const StyleWorkspaceAdd = styled('div')(() => {
  return {
    width: '58px',
    height: '58px',
--- a/apps/web/src/components/pure/loading/styled.ts
+++ b/apps/web/src/components/pure/loading/styled.ts
@@ -3,7 +3,7 @@ import { styled } from '@affine/component';
 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
 export const StyledLoadingWrapper = styled('div', {
  shouldForwardProp: prop => {
-    return !['size'].includes(prop);
+    return !['size'].includes(prop as string);
  },
 })<{ size?: number }>(({ size = 40 }) => {
  return {
@@ -12,7 +12,7 @@ export const StyledLoadingWrapper = styled('div', {
    position: 'relative',
  };
 });
-export const StyledLoading = styled.div`
+export const StyledLoading = styled('div')`
  position: absolute;
  left: 25%;
  top: 50%;
@@ -31,7 +31,7 @@ export const StyledLoading = styled.div`
  }
 `;

-export const StyledLoadingItem = styled.div<{ size: number }>(
+export const StyledLoadingItem = styled('div')<{ size: number }>(
  ({ size = 40 }) => {
    return `
  position: absolute;
--- a/apps/web/src/components/pure/quick-search-modal/style.ts
+++ b/apps/web/src/components/pure/quick-search-modal/style.ts
@@ -123,7 +123,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
    },
  };
 });
-export const StyledModalFooterContent = styled.button(({ theme }) => {
+export const StyledModalFooterContent = styled('button')(({ theme }) => {
  return {
    width: '612px',
    height: '32px',
@@ -140,7 +140,7 @@ export const StyledModalFooterContent = styled.button(({ theme }) => {
    },
  };
 });
-export const StyledListItem = styled.button(({ theme }) => {
+export const StyledListItem = styled('button')(({ theme }) => {
  return {
    width: '612px',
    height: '32px',
--- a/apps/web/src/components/pure/shortcuts-modal/style.ts
+++ b/apps/web/src/components/pure/shortcuts-modal/style.ts
@@ -1,6 +1,6 @@
 import { displayFlex, styled } from '@affine/component';

-export const StyledShortcutsModal = styled.div(({ theme }) => ({
+export const StyledShortcutsModal = styled('div')(({ theme }) => ({
  width: '288px',
  height: '74vh',
  paddingBottom: '28px',
@@ -17,7 +17,7 @@ export const StyledShortcutsModal = styled.div(({ theme }) => ({
  margin: 'auto',
  zIndex: theme.zIndex.modal,
 }));
-export const StyledTitle = styled.div(({ theme }) => ({
+export const StyledTitle = styled('div')(({ theme }) => ({
  color: theme.colors.textColor,
  fontWeight: '500',
  fontSize: theme.font.sm,
@@ -29,7 +29,7 @@ export const StyledTitle = styled.div(({ theme }) => ({
    color: theme.colors.primaryColor,
  },
 }));
-export const StyledSubTitle = styled.div(({ theme }) => ({
+export const StyledSubTitle = styled('div')(({ theme }) => ({
  color: theme.colors.popoverColor,
  fontWeight: '500',
  fontSize: theme.font.sm,
@@ -38,7 +38,7 @@ export const StyledSubTitle = styled.div(({ theme }) => ({
  marginTop: '28px',
  padding: '0 16px',
 }));
-export const StyledModalHeader = styled.div(() => ({
+export const StyledModalHeader = styled('div')(() => ({
  ...displayFlex('space-between', 'center'),
  paddingTop: '8px 4px 0 4px',
  width: '100%',
@@ -51,7 +51,7 @@ export const StyledModalHeader = styled.div(() => ({
  transition: 'background-color 0.5s',
 }));

-export const StyledListItem = styled.div(({ theme }) => ({
+export const StyledListItem = styled('div')(({ theme }) => ({
  height: '34px',
  ...displayFlex('space-between', 'center'),
  fontSize: theme.font.sm,
--- a/apps/web/src/components/pure/workspace-card/styles.ts
+++ b/apps/web/src/components/pure/workspace-card/styles.ts
@@ -6,7 +6,7 @@ import {
 } from '@affine/component';
 import { Button } from '@affine/component';

-export const StyledSplitLine = styled.div(({ theme }) => {
+export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
@@ -15,7 +15,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceInfo = styled.div(({ theme }) => {
+export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
  return {
    marginLeft: '15px',
    width: '202px',
@@ -37,7 +37,7 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceTitle = styled.div(({ theme }) => {
+export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.base,
    fontWeight: 600,
@@ -48,7 +48,7 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => {
  };
 });

-export const StyledCard = styled.div<{
+export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
  const borderColor = active ? theme.colors.primaryColor : 'transparent';
@@ -63,7 +63,7 @@ export const StyledCard = styled.div<{
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
    transition: 'background .2s',
-    background: theme.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
      background: theme.colors.cardHoverBackground,
      '.add-icon': {
@@ -81,7 +81,7 @@ export const StyledFooter = styled('div')({
  ...displayFlex('space-between', 'center'),
 });

-export const StyleUserInfo = styled.div(({ theme }) => {
+export const StyleUserInfo = styled('div')(({ theme }) => {
  return {
    textAlign: 'left',
    marginLeft: '16px',
@@ -97,17 +97,17 @@ export const StyleUserInfo = styled.div(({ theme }) => {
  };
 });

-export const StyledModalHeaderLeft = styled.div(() => {
+export const StyledModalHeaderLeft = styled('div')(() => {
  return { ...displayFlex('flex-start', 'center') };
 });
-export const StyledModalTitle = styled.div(({ theme }) => {
+export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
    fontSize: theme.font.h6,
  };
 });

-export const StyledHelperContainer = styled.div(({ theme }) => {
+export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
    color: theme.colors.iconColor,
    marginLeft: '15px',
@@ -125,13 +125,13 @@ export const StyledModalContent = styled('div')({
  ...displayFlex('space-between', 'flex-start', 'flex-start'),
  flexWrap: 'wrap',
 });
-export const StyledOperationWrapper = styled.div(() => {
+export const StyledOperationWrapper = styled('div')(() => {
  return {
    ...displayFlex('flex-end', 'center'),
  };
 });

-export const StyleWorkspaceAdd = styled.div(() => {
+export const StyleWorkspaceAdd = styled('div')(() => {
  return {
    width: '58px',
    height: '58px',
--- a/apps/web/src/components/pure/workspace-list-modal/styles.ts
+++ b/apps/web/src/components/pure/workspace-list-modal/styles.ts
@@ -1,12 +1,6 @@
-import {
-  displayFlex,
-  displayInlineFlex,
-  styled,
-  textEllipsis,
-} from '@affine/component';
-import { Button } from '@affine/component';
+import { displayFlex, styled, textEllipsis } from '@affine/component';

-export const StyledSplitLine = styled.div(({ theme }) => {
+export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
@@ -15,7 +9,7 @@ export const StyledSplitLine = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceInfo = styled.div(({ theme }) => {
+export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
  return {
    marginLeft: '15px',
    width: '202px',
@@ -37,7 +31,7 @@ export const StyleWorkspaceInfo = styled.div(({ theme }) => {
  };
 });

-export const StyleWorkspaceTitle = styled.div(({ theme }) => {
+export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
    fontSize: theme.font.base,
    fontWeight: 600,
@@ -48,7 +42,7 @@ export const StyleWorkspaceTitle = styled.div(({ theme }) => {
  };
 });

-export const StyledCard = styled.div<{
+export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
  const borderColor = active ? theme.colors.primaryColor : 'transparent';
@@ -63,7 +57,7 @@ export const StyledCard = styled.div<{
    ...displayFlex('flex-start', 'flex-start'),
    marginBottom: '24px',
    transition: 'background .2s',
-    background: theme.mode === 'light' ? '#FFF' : '#2C2C2C',
+    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
      background: theme.colors.cardHoverBackground,
      '.add-icon': {
@@ -74,40 +68,17 @@ export const StyledCard = styled.div<{
  };
 });

-export const StyledFooter = styled('div')({
-  height: '84px',
-  padding: '0 40px',
-  flexShrink: 0,
-  ...displayFlex('space-between', 'center'),
-});
-
-export const StyleUserInfo = styled.div(({ theme }) => {
-  return {
-    textAlign: 'left',
-    marginLeft: '16px',
-    flex: 1,
-    p: {
-      lineHeight: '24px',
-      color: theme.colors.iconColor,
-    },
-    'p:first-of-type': {
-      color: theme.colors.textColor,
-      fontWeight: 600,
-    },
-  };
-});
-
-export const StyledModalHeaderLeft = styled.div(() => {
+export const StyledModalHeaderLeft = styled('div')(() => {
  return { ...displayFlex('flex-start', 'center') };
 });
-export const StyledModalTitle = styled.div(({ theme }) => {
+export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
    fontSize: theme.font.h6,
  };
 });

-export const StyledHelperContainer = styled.div(({ theme }) => {
+export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
    color: theme.colors.iconColor,
    marginLeft: '15px',
@@ -125,13 +96,13 @@ export const StyledModalContent = styled('div')({
  ...displayFlex('space-between', 'flex-start', 'flex-start'),
  flexWrap: 'wrap',
 });
-export const StyledOperationWrapper = styled.div(() => {
+export const StyledOperationWrapper = styled('div')(() => {
  return {
    ...displayFlex('flex-end', 'center'),
  };
 });

-export const StyleWorkspaceAdd = styled.div(() => {
+export const StyleWorkspaceAdd = styled('div')(() => {
  return {
    width: '58px',
    height: '58px',
@@ -154,19 +125,3 @@ export const StyledModalHeader = styled('div')(() => {
    ...displayFlex('space-between', 'center'),
  };
 });
-
-export const StyledSignInButton = styled(Button)(({ theme }) => {
-  return {
-    fontWeight: 700,
-    paddingLeft: 0,
-    '.circle': {
-      width: '40px',
-      height: '40px',
-      borderRadius: '20px',
-      backgroundColor: theme.colors.innerHoverBackground,
-      flexShrink: 0,
-      marginRight: '16px',
-      ...displayInlineFlex('center', 'center'),
-    },
-  };
-});
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts
@@ -1,7 +1,7 @@
 import { displayFlex, styled, textEllipsis } from '@affine/component';
 import Link from 'next/link';

-export const StyledSliderBar = styled.div<{ show: boolean }>(
+export const StyledSliderBar = styled('div')<{ show: boolean }>(
  ({ theme, show }) => {
    return {
      width: show ? '256px' : '0',
@@ -17,7 +17,7 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
    };
  }
 );
-export const StyledSliderBarWrapper = styled.div(() => {
+export const StyledSliderBarWrapper = styled('div')(() => {
  return {
    height: '100%',
    overflowX: 'hidden',
@@ -26,7 +26,7 @@ export const StyledSliderBarWrapper = styled.div(() => {
  };
 });

-export const StyledArrowButton = styled.button<{ isShow: boolean }>(
+export const StyledArrowButton = styled('button')<{ isShow: boolean }>(
  ({ theme, isShow }) => {
    return {
      width: '32px',
@@ -51,7 +51,7 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
  }
 );

-export const StyledListItem = styled.div<{
+export const StyledListItem = styled('div')<{
  active?: boolean;
  disabled?: boolean;
 }>(({ theme, active, disabled }) => {
@@ -109,7 +109,7 @@ export const StyledNewPageButton = styled(StyledListItem)(() => {
  };
 });

-export const StyledSubListItem = styled.button<{
+export const StyledSubListItem = styled('button')<{
  disable?: boolean;
  active?: boolean;
 }>(({ theme, disable, active }) => {