diff --git a/src/client/components/AppDetail.tsx b/src/client/components/AppDetail.tsx
index 7265797..cf1f34b 100644
--- a/src/client/components/AppDetail.tsx
+++ b/src/client/components/AppDetail.tsx
@@ -6,9 +6,10 @@ import { openAppSelectorModal, openDeleteAppModal, openRenameAppModal } from '..
import { apps, getSelectedTab, isNarrow } from '../state'
import {
ActionBar,
- AppSelectorChevron,
Button,
ClickableAppName,
+ HamburgerButton,
+ HamburgerLine,
HeaderActions,
InfoLabel,
InfoRow,
@@ -56,9 +57,11 @@ export function AppDetail({ app, render }: { app: App, render: () => void }) {
openRenameAppModal(app)}>{app.name}
{isNarrow && (
- openAppSelectorModal(render)}>
- ▼
-
+ openAppSelectorModal(render)} title="Show apps">
+
+
+
+
)}
diff --git a/src/client/components/DashboardLanding.tsx b/src/client/components/DashboardLanding.tsx
index 758f2d3..520b502 100644
--- a/src/client/components/DashboardLanding.tsx
+++ b/src/client/components/DashboardLanding.tsx
@@ -3,7 +3,8 @@ import { openAppSelectorModal } from '../modals'
import { navigate } from '../router'
import { dashboardTab, isNarrow } from '../state'
import {
- AppSelectorChevron,
+ HamburgerButton,
+ HamburgerLine,
DashboardContainer,
DashboardHeader,
DashboardTitle,
@@ -47,9 +48,11 @@ export function DashboardLanding({ render }: { render: () => void }) {
🐾 Toes
{isNarrow && (
- openAppSelectorModal(render)}>
- ▼
-
+ openAppSelectorModal(render)} title="Show apps">
+
+
+
+
)}
diff --git a/src/client/styles/index.ts b/src/client/styles/index.ts
index f9223fa..2d14a7d 100644
--- a/src/client/styles/index.ts
+++ b/src/client/styles/index.ts
@@ -29,7 +29,6 @@ export { Form, FormActions, FormCheckbox, FormCheckboxField, FormCheckboxLabel,
export {
AppItem,
AppList,
- AppSelectorChevron,
ClickableAppName,
DashboardContainer,
DashboardHeader,
diff --git a/src/client/styles/layout.ts b/src/client/styles/layout.ts
index 9ab7b01..450b236 100644
--- a/src/client/styles/layout.ts
+++ b/src/client/styles/layout.ts
@@ -170,20 +170,6 @@ export const MainTitle = define('MainTitle', {
margin: 0,
})
-export const AppSelectorChevron = define('AppSelectorChevron', {
- base: 'button',
- background: 'none',
- border: 'none',
- cursor: 'pointer',
- padding: '4px 8px',
- marginLeft: 4,
- fontSize: 14,
- color: theme('colors-textMuted'),
- selectors: {
- '&:hover': { color: theme('colors-text') },
- },
-})
-
export const ClickableAppName = define('ClickableAppName', {
cursor: 'pointer',
borderRadius: theme('radius-md'),