ChatIndex: improve the desktop layout

app/soapbox/components/ui/stack/stack.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 
-type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
+type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 10
 
 const spaces = {
   0: 'space-y-0',
@@ -12,6 +12,7 @@ const spaces = {
   3: 'space-y-3',
   4: 'space-y-4',
   5: 'space-y-5',
+  6: 'space-y-6',
   10: 'space-y-10',
 };
 

app/soapbox/features/chats/index.tsx

@@ -5,9 +5,8 @@ import { useHistory } from 'react-router-dom';
 
 import { launchChat } from 'soapbox/actions/chats';
 import AccountSearch from 'soapbox/components/account_search';
-import AudioToggle from 'soapbox/features/chats/components/audio-toggle';
 
-import { Column, Stack } from '../../components/ui';
+import { Card, CardTitle, Stack } from '../../components/ui';
 
 import ChatList from './components/chat-list';
 
@@ -30,26 +29,26 @@ const ChatIndex: React.FC = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)}>
+    <Card className='p-0' variant='rounded'>
       <div className='grid grid-cols-9'>
-        <Stack className='col-span-3'>
+        <Stack className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100' space={6}>
-          <div className='column__switch'>
+          <CardTitle title={intl.formatMessage(messages.title)} />
-            <AudioToggle />
-          </div>
 
           <AccountSearch
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             onSelected={handleSuggestion}
           />
 
+          <div className='-mx-3'>
             <ChatList
               onClickChat={handleClickChat}
               useWindowScroll
             />
+          </div>
         </Stack>
         <Stack className='col-span-6'>Message area</Stack>
       </div>
-    </Column>
+    </Card>
   );
 };