From a8ecba472aaeb565a039161c05c558bdcc2cfdb2 Mon Sep 17 00:00:00 2001
From: Oscar Beaumont <oscar@otbeaumont.me>
Date: Tue, 30 Aug 2022 15:01:24 +0800
Subject: [PATCH] add more tooltips

---
 apps/mobile/src/components/drawer/DrawerContent.tsx | 9 ++++++---
 packages/interface/src/components/layout/TopBar.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/mobile/src/components/drawer/DrawerContent.tsx b/apps/mobile/src/components/drawer/DrawerContent.tsx
index 0a727600b..37984f7d4 100644
--- a/apps/mobile/src/components/drawer/DrawerContent.tsx
+++ b/apps/mobile/src/components/drawer/DrawerContent.tsx
@@ -8,6 +8,7 @@ import { CogIcon } from 'react-native-heroicons/solid';
 import Layout from '../../constants/Layout';
 import tw from '../../lib/tailwind';
 import CollapsibleView from '../layout/CollapsibleView';
+import { Tooltip } from '../tooltip/Tooltip';
 import DrawerLocationItem from './DrawerLocationItem';
 import DrawerLogo from './DrawerLogo';
 import DrawerTagItem from './DrawerTagItem';
@@ -107,9 +108,11 @@ const DrawerContent = ({ navigation, state }: DrawerContentComponentProps) => {
 					</CollapsibleView>
 				</View>
 				{/* Settings */}
-				<Pressable onPress={() => navigation.navigate('Settings')}>
-					<CogIcon color="white" size={24} />
-				</Pressable>
+				<Tooltip label="Settings">
+					<Pressable onPress={() => navigation.navigate('Settings')}>
+						<CogIcon color="white" size={24} />
+					</Pressable>
+				</Tooltip>
 			</View>
 		</DrawerContentScrollView>
 	);
diff --git a/packages/interface/src/components/layout/TopBar.tsx b/packages/interface/src/components/layout/TopBar.tsx
index 9ceb587bf..be960123a 100644
--- a/packages/interface/src/components/layout/TopBar.tsx
+++ b/packages/interface/src/components/layout/TopBar.tsx
@@ -127,8 +127,12 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 				className="flex h-[2.95rem] -mt-0.5 max-w z-10 pl-3 flex-shrink-0 items-center border-b dark:bg-gray-600 border-gray-100 dark:border-gray-800 !bg-opacity-90 backdrop-blur"
 			>
 				<div className="flex ">
-					<TopBarButton icon={ChevronLeftIcon} onClick={() => navigate(-1)} />
-					<TopBarButton icon={ChevronRightIcon} onClick={() => navigate(1)} />
+					<Tooltip label="Navigate back">
+						<TopBarButton icon={ChevronLeftIcon} onClick={() => navigate(-1)} />
+					</Tooltip>
+					<Tooltip label="Navigate forward">
+						<TopBarButton icon={ChevronRightIcon} onClick={() => navigate(1)} />
+					</Tooltip>
 				</div>
 
 				{/* <div className="flex mx-8 space-x-[1px]">