refactor(core): use custom scrollbar for editor and adjust shared page style (#5752)

Close TOV-481
- Use a custom scrollbar component for editor
- Modified the header of the share page and added a new footer

packages/frontend/component/src/components/auth-components/share.css.ts

@@ -4,7 +4,7 @@ export const modalHeaderWrapper = style({});
 globalStyle(`${modalHeaderWrapper} .logo`, {
   fontSize: cssVar('fontH3'),
   fontWeight: 600,
-  color: cssVar('blue'),
+  color: cssVar('black'),
   marginRight: '6px',
   verticalAlign: 'middle',
 });
@@ -32,7 +32,7 @@ export const authInputWrapper = style({
 });
 globalStyle(`${authInputWrapper} label`, {
   display: 'block',
-  color: 'var(--light-text-color-text-secondary-color, #8E8D91)',
+  color: cssVar('textSecondaryColor'),
   marginBottom: '4px',
   fontSize: cssVar('fontSm'),
   fontWeight: 600,

packages/frontend/component/src/theme/global.css

@@ -222,30 +222,6 @@ input[type='number']::-webkit-outer-spin-button {
   height: 0;
 }
 
-.affine-doc-viewport::-webkit-scrollbar {
-  width: 20px;
-  /* Chrome Safari */
-  height: 20px;
-}
-
-.affine-doc-viewport::-webkit-scrollbar-thumb {
-  border-radius: 12px;
-  background-clip: padding-box;
-  border-style: solid;
-  border-width: 7px;
-  border-color: transparent;
-  transition: all 0.2s;
-}
-
-.affine-doc-viewport:hover::-webkit-scrollbar-thumb {
-  background-color: var(--affine-divider-color);
-}
-
-.affine-doc-viewport:hover::-webkit-scrollbar-thumb:hover {
-  background-color: var(--affine-icon-color);
-  border-width: 5px;
-}
-
 .editor-wrapper {
   position: relative;
   padding-right: 0;
@@ -282,7 +258,6 @@ affine-block-hub {
 
   .editor-wrapper {
     width: 100%;
-    height: 100%;
   }
 
   /* issue: https://github.com/toeverything/AFFiNE/issues/2004 */