From 90ece157e65331deceebe0e4c71f164afca633a3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 31 Aug 2022 12:05:01 -0500
Subject: [PATCH] ChatIndex: improve the desktop layout

---
 app/soapbox/components/ui/stack/stack.tsx |  3 ++-
 app/soapbox/features/chats/index.tsx      | 23 +++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index bac3ce89b..33f3a20c8 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/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',
 };
 
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index 43ab6160b..58f84f284 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/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'>
-          <div className='column__switch'>
-            <AudioToggle />
-          </div>
+        <Stack className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100' space={6}>
+          <CardTitle title={intl.formatMessage(messages.title)} />
 
           <AccountSearch
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             onSelected={handleSuggestion}
           />
 
-          <ChatList
-            onClickChat={handleClickChat}
-            useWindowScroll
-          />
+          <div className='-mx-3'>
+            <ChatList
+              onClickChat={handleClickChat}
+              useWindowScroll
+            />
+          </div>
         </Stack>
         <Stack className='col-span-6'>Message area</Stack>
       </div>
-    </Column>
+    </Card>
   );
 };