Change design of "New collection" button in "Add to collection" dialog (#40133)

app/javascript/mastodon/features/collection_adder/index.tsx

@@ -174,12 +174,17 @@ export const CollectionAdder: React.FC<{
                 />
               }
             >
-              <NewCollectionButton onClick={handleNewCollection} />
+              <NewCollectionButton compact onClick={handleNewCollection} />
             </EmptyState>
           ) : (
             <>
               <div className={classes.newCollection}>
-                <NewCollectionButton onClick={handleNewCollection} />
+                <NewCollectionButton secondary onClick={handleNewCollection}>
+                  <FormattedMessage
+                    id='collections.create_new_collection'
+                    defaultMessage='Create new collection'
+                  />
+                </NewCollectionButton>
               </div>
               {collections.map((item) => (
                 <ListItem key={item.id} collection={item} account={account} />

app/javascript/mastodon/features/collection_adder/styles.module.scss

@@ -1,5 +1,3 @@
 .newCollection {
-  display: flex;
-  justify-content: center;
-  padding-block: 16px;
+  padding: 16px;
 }

app/javascript/mastodon/features/collections/overview/created_by_account.tsx

@@ -1,7 +1,9 @@
+import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
@@ -26,16 +28,23 @@ import {
 } from '../editor';
 import classes from '../styles.module.scss';
 
-export const NewCollectionButton: React.FC<{ onClick?: () => void }> = ({
-  onClick,
-}) => (
+export const NewCollectionButton: React.FC<{
+  compact?: boolean;
+  secondary?: boolean;
+  onClick?: () => void;
+  children?: ReactNode;
+}> = ({ compact, secondary, onClick, children }) => (
   <Link
     to='/collections/new'
-    className='button button--compact'
+    className={classNames(
+      'button',
+      compact && 'button--compact',
+      secondary && 'button-secondary',
+    )}
     onClick={onClick}
   >
     <Icon id='plus' icon={AddIcon} />
-    <FormattedMessage {...editorMessages.newCollection} />
+    {children ?? <FormattedMessage {...editorMessages.newCollection} />}
   </Link>
 );
 
@@ -103,7 +112,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
             />
           }
         >
-          <NewCollectionButton />
+          <NewCollectionButton compact />
         </EmptyState>
       );
     } else {
@@ -135,7 +144,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
             }}
           />
         </h2>
-        {showCreateButton && <NewCollectionButton />}
+        {showCreateButton && <NewCollectionButton compact />}
       </div>
       <ItemList>
         {isOwnCollectionPage && !canCreateMoreCollections && (

app/javascript/mastodon/locales/en.json

@@ -391,6 +391,7 @@
   "collections.create.basic_details_title": "Basic details",
   "collections.create.steps": "Step {step}/{total}",
   "collections.create_collection": "Create collection",
+  "collections.create_new_collection": "Create new collection",
   "collections.delete_collection": "Delete collection",
   "collections.description_length_hint": "100 characters limit",
   "collections.detail.author_added_you_on_date": "{author} added you on {date}",