Feat/cloud integration (#569)

* Chore/unit test (#538)

* chore: add unit test

* chore: add github action for unit test

* feat: init firebase

* chore: add development secrets

* fix: rename auth -> data-services

* feat: update blocksuite 0.3.0-alpha.4 (#543)

* feat: add requests

* feat: optimize  swr cache

* feat: add Authorization

* feat: add confirm-invitation page

* feat: add account sdk api and proxy

* docs: update contributing (#550)

* docs: update contributing

* Update CONTRIBUTING.md

* Update CONTRIBUTING.md

Co-authored-by: ShortCipher5 <me@shortcipher.me>

* feat: update api

* feat: remove babelrc setting

* feat: add create workspace ui

* feat: choose workspaces

* feat: login modal

* feat: authorization api

* feat: login status

* fix: remove unused variables

* feat: login button

* fix: lint

* fix: workspace id

* fix: i18n type error

Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: ShortCipher5 <me@shortcipher.me>

packages/app/src/ui/button/styles.ts

@@ -21,7 +21,7 @@ export const StyledIconButton = styled('button', {
   height: number;
   borderRadius: number;
   disabled?: boolean;
-  hoverBackground?: string;
+  hoverBackground?: CSSProperties['background'];
   hoverColor?: string;
   hoverStyle?: CSSProperties;
 }>(
@@ -68,6 +68,70 @@ export const StyledIconButton = styled('button', {
     };
   }
 );
+
+export const StyledTextButton = styled('button', {
+  shouldForwardProp: prop => {
+    return ![
+      'borderRadius',
+      'top',
+      'right',
+      'width',
+      'height',
+      'hoverBackground',
+      'hoverColor',
+      'hoverStyle',
+    ].includes(prop);
+  },
+})<
+  Pick<
+    ButtonProps,
+    | 'size'
+    | 'disabled'
+    | 'hoverBackground'
+    | 'hoverColor'
+    | 'hoverStyle'
+    | 'shape'
+    | 'type'
+    | 'bold'
+  >
+>(
+  ({
+    theme,
+    size = 'default',
+    disabled,
+    hoverBackground,
+    hoverColor,
+    hoverStyle,
+    bold = false,
+    shape = 'default',
+    // TODO: Implement type
+    type = 'default',
+  }) => {
+    const { fontSize, borderRadius, padding, height } = getSize(size);
+    console.log('size', size, height);
+
+    return {
+      height,
+      paddingLeft: padding,
+      paddingRight: padding,
+      ...displayInlineFlex('flex-start', 'center'),
+      position: 'relative',
+      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      transition: 'background .15s',
+      // TODO: Implement circle shape
+      borderRadius: shape === 'default' ? borderRadius : height / 2,
+      fontSize,
+      fontWeight: bold ? '500' : '400',
+
+      ':hover': {
+        color: hoverColor ?? theme.colors.primaryColor,
+        background: hoverBackground ?? theme.colors.hoverBackground,
+        ...(hoverStyle ?? {}),
+      },
+    };
+  }
+);
+
 export const StyledButton = styled('button', {
   shouldForwardProp: prop => {
     return !['hoverBackground', 'hoverColor', 'hoverStyle', 'type'].includes(