feat: update mobile design (#1526)

packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx

@@ -1,43 +1,27 @@
 import { useMemo, ReactNode } from 'react'
-import Icon from '@/Components/Icon/Icon'
-import { AppPaneIcons, AppPaneId, AppPaneTitles } from './AppPaneMetadata'
+import { AppPaneId } from './AppPaneMetadata'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { useResponsiveAppPane } from './ResponsivePaneProvider'
 
 type Props = {
   children: ReactNode
-  contentClassName?: string
+  className?: string
   contentElementId?: string
   paneId: AppPaneId
 }
 
-const ResponsivePaneContent = ({ children, contentClassName, contentElementId, paneId }: Props) => {
-  const { selectedPane, toggleAppPane: togglePane } = useResponsiveAppPane()
+const ResponsivePaneContent = ({ children, className, contentElementId, paneId }: Props) => {
+  const { selectedPane } = useResponsiveAppPane()
 
   const isSelectedPane = useMemo(() => selectedPane === paneId, [paneId, selectedPane])
 
   return (
-    <>
-      <button
-        className={classNames(
-          'flex w-full items-center justify-between border-b border-solid border-border px-4 py-2 focus:shadow-none focus:outline-none md:hidden',
-          isSelectedPane ? 'bg-contrast' : 'bg-default',
-        )}
-        onClick={() => togglePane(paneId)}
-      >
-        <div className="flex items-center gap-2 font-semibold">
-          <Icon type={AppPaneIcons[paneId]} />
-          <span>{AppPaneTitles[paneId]}</span>
-        </div>
-        <Icon type="chevron-down" />
-      </button>
-      <div
-        id={contentElementId}
-        className={classNames('content flex flex-col', isSelectedPane ? 'h-full' : 'hidden md:flex', contentClassName)}
-      >
-        {children}
-      </div>
-    </>
+    <div
+      id={contentElementId}
+      className={classNames('content flex flex-col', isSelectedPane ? 'h-full' : 'hidden md:flex', className)}
+    >
+      {children}
+    </div>
   )
 }