feat: add new collection button to slider bar (#3369)

packages/component/src/components/app-sidebar/category-divider/index.css.ts

@@ -2,8 +2,11 @@ import { style } from '@vanilla-extract/css';
 
 export const root = style({
   fontSize: 'var(--affine-font-xs)',
-  height: '16px',
+  minHeight: '16px',
   userSelect: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
   selectors: {
     '&:not(:first-of-type)': {
       marginTop: '10px',

packages/component/src/components/page-list/view/collection-list.css.ts

@@ -21,7 +21,6 @@ export const viewButton = style({
   fontSize: 'var(--affine-font-xs)',
   background: 'var(--affine-white)',
   maxWidth: '200px',
-  overflow: 'hidden',
   color: 'var(--affine-text-secondary-color)',
   border: '1px solid var(--affine-border-color)',
   transition: 'margin-left 0.2s ease-in-out',
@@ -41,6 +40,8 @@ export const viewButton = style({
   },
 });
 globalStyle(`${viewButton} > span`, {
+  display: 'block',
+  width: '100%',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -75,6 +76,9 @@ export const filterButton = style({
   padding: '4px 8px',
   fontSize: 'var(--affine-font-xs)',
   background: 'var(--affine-white)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   color: 'var(--affine-text-secondary-color)',
   border: '1px solid var(--affine-border-color)',
   transition: 'margin-left 0.2s ease-in-out',

packages/component/src/components/page-list/view/create-collection.tsx

@@ -243,14 +243,14 @@ export const EditCollection = ({
           marginTop: 40,
         }}
       >
-        <Button className={styles.cancelButton} onClick={onCancel}>
+        <Button size="large" onClick={onCancel}>
           {t['Cancel']()}
         </Button>
         <Button
           style={{
             marginLeft: 20,
-            borderRadius: '8px',
           }}
+          size="large"
           data-testid="save-collection"
           type="primary"
           onClick={() => {
@@ -276,17 +276,13 @@ export const SaveCollectionButton = ({
   return (
     <>
       <Button
-        className={styles.saveButton}
         onClick={() => changeShow(true)}
-        size="large"
         data-testid="save-as-collection"
+        icon={<SaveIcon />}
+        size="large"
+        style={{ padding: '7px 8px' }}
       >
-        <div className={styles.saveButtonContainer}>
-          <div className={styles.saveIcon}>
-            <SaveIcon />
-          </div>
-          <div className={styles.saveText}>Save As Collection</div>
-        </div>
+        Save As Collection
       </Button>
       <EditCollectionModel
         title={t['Save As New Collection']()}

packages/component/src/ui/button/style.css.ts

@@ -67,7 +67,7 @@ export const button = style({
     },
 
     '&.primary': {
-      color: 'var(--affine-white)',
+      color: 'var(--affine-pure-white)',
       background: 'var(--affine-primary-color)',
       borderColor: 'var(--affine-black-10)',
       boxShadow: 'var(--affine-button-inner-shadow)',