[Glitch] Change design of "New collection" button in "Add to collection" dialog

Port b55b426dfb5471ec4601279a44f3ed4471d69cda to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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/flavours/glitch/features/collection_adder/styles.module.scss

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

app/javascript/flavours/glitch/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';
@@ -29,16 +31,23 @@ import {
 } from '../editor';
 import classes from '../styles.module.scss';
 
-export const NewCollectionButton: React.FC<{ onClick?: () => void }> = ({
+export const NewCollectionButton: React.FC<{
-  onClick,
+  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>
 );
 
@@ -106,7 +115,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
             />
           }
         >
-          <NewCollectionButton />
+          <NewCollectionButton compact />
         </EmptyState>
       );
     } else {
@@ -138,7 +147,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
             }}
           />
         </h2>
-        {showCreateButton && <NewCollectionButton />}
+        {showCreateButton && <NewCollectionButton compact />}
       </div>
       <ItemList>
         {isOwnCollectionPage && !canCreateMoreCollections && (