💄 Customise colors and other updates

app/layout.tsx

@@ -18,8 +18,17 @@ import '@ionic/react/css/text-transformation.css'
 import '@ionic/react/css/flex-utils.css'
 import '@ionic/react/css/display.css'
 
-import '../styles/capacitor-starter/global.css'
-import '../styles/capacitor-starter/variables.css'
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+import '@ionic/react/css/palettes/dark.always.css'
+
+/* Theme variables */
+import '../styles/theme.css'
+import '../styles/globals.css'
 
 export const metadata: Metadata = {
 	title: 'Starfocus',

components/common/Header.tsx

@@ -1,5 +1,3 @@
-import { useObservable } from 'dexie-react-hooks'
-import { db } from '../db'
 import {
 	IonButton,
 	IonButtons,
@@ -14,13 +12,15 @@ import {
 	IonTitle,
 	IonToolbar,
 } from '@ionic/react'
+import { useObservable } from 'dexie-react-hooks'
 import {
 	cloudDoneSharp,
 	cloudDownloadSharp,
 	cloudOfflineSharp,
 	cloudUploadSharp,
 	thunderstormSharp,
 } from 'ionicons/icons'
+import { db } from '../db'
 
 export const Header = ({ title }: { title: string }) => {
 	const user = useObservable(db.cloud.currentUser)
@@ -61,6 +61,22 @@ export const Header = ({ title }: { title: string }) => {
 									triggerAction="click"
 								>
 									<IonContent className="text-xs">
+										<IonHeader>
+											<IonToolbar>
+												<IonTitle>{syncState?.status}</IonTitle>
+												<IonButtons slot="end">
+													<IonButton
+														color="danger"
+														fill="solid"
+														onClick={() => {
+															db.cloud.logout()
+														}}
+													>
+														Unsync
+													</IonButton>
+												</IonButtons>
+											</IonToolbar>
+										</IonHeader>
 										{syncState?.error ? (
 											<p>Sync error: ${syncState.error.message}</p>
 										) : (
@@ -114,14 +130,6 @@ export const Header = ({ title }: { title: string }) => {
 									</IonContent>
 								</IonPopover>
 							</IonButton>
-							<IonButton
-								fill="solid"
-								onClick={() => {
-									db.cloud.logout()
-								}}
-							>
-								Unsync
-							</IonButton>
 						</>
 					) : (
 						<>

components/common/StarRoleIcon.tsx

@@ -0,0 +1,14 @@
+import { IonIcon } from '@ionic/react'
+import { StarRole } from '../db'
+import { getIonIcon } from '../starRoles/icons'
+import { rocketSharp } from 'ionicons/icons'
+
+export const StarRoleIcon = ({ starRole }: { starRole?: StarRole }) => {
+	return (
+		<IonIcon
+			color={starRole ? 'dark' : 'light'}
+			icon={starRole ? getIonIcon(starRole.icon.name) : rocketSharp}
+			slot="end"
+		/>
+	)
+}

components/pages/Constellation.tsx

@@ -96,7 +96,10 @@ export default function Constellation() {
 					vertical="bottom"
 					horizontal="end"
 				>
-					<IonFabButton onClick={openCreateStarRoleModal}>
+					<IonFabButton
+						color="success"
+						onClick={openCreateStarRoleModal}
+					>
 						<IonIcon icon={add}></IonIcon>
 					</IonFabButton>
 				</IonFab>

components/pages/Home.tsx

@@ -36,9 +36,11 @@ import {
 	calendarSharp,
 	chevronDownOutline,
 	chevronUpOutline,
+	cogSharp,
 	filterSharp,
 	locateOutline,
 	rocketSharp,
+	settingsSharp,
 	timeSharp,
 } from 'ionicons/icons'
 import _ from 'lodash'
@@ -67,6 +69,7 @@ import { useCreateTodoModal } from '../todos/create/useCreateTodoModal'
 import { groupTodosByCompletedAt } from '../todos/groupTodosByCompletedAt'
 import { useSnoozeTodoModal } from '../todos/snooze/useSnoozeTodoModal'
 import useView, { ViewProvider } from '../view'
+import { StarRoleIcon } from '../common/StarRoleIcon'
 
 const Home = () => {
 	const searchbarRef = useRef<HTMLIonSearchbarElement>(null)
@@ -111,6 +114,19 @@ const Home = () => {
 									</IonButton>
 								</IonButtons>
 								<Searchbar ref={searchbarRef} />
+								<IonButtons slot="end">
+									<IonButton
+										id="view-menu-button"
+										onClick={() => {
+											menuController.toggle('start')
+										}}
+									>
+										<IonIcon
+											icon={settingsSharp}
+											slot="icon-only"
+										/>
+									</IonButton>
+								</IonButtons>
 							</IonToolbar>
 						</IonFooter>
 					</IonPage>
@@ -283,6 +299,7 @@ export const TodoLists = ({}: {}) => {
 					>
 						<IonFab className="fixed min-[992px]:left-[calc(100vw/12*2-40px-18px)] bottom-16">
 							<IonFabButton
+								color="success"
 								onClick={openCreateTodoModal}
 								size="small"
 							>
@@ -789,6 +806,7 @@ export const ViewMenu = ({
 			</IonHeader>
 			<IonContent className="space-y-4 ion-padding">
 				<IonButton
+					color="warning"
 					expand="block"
 					onClick={() => {
 						if (searchbarRef.current) {
@@ -869,6 +887,7 @@ export const ViewMenu = ({
 							</IonItem>
 							{starRoles.map(starRole => (
 								<IonItem key={starRole.id}>
+									<StarRoleIcon starRole={starRole} />
 									{starRole?.title}
 									<IonButton
 										fill="clear"
@@ -1020,6 +1039,7 @@ export const Searchbar = forwardRef<HTMLIonSearchbarElement>(
 		return (
 			<IonSearchbar
 				ref={ref}
+				className="mx-auto [--background:#121212]"
 				debounce={100}
 				/* Binding to the capture phase allows the searchbar to complete its native behaviour of clearing the input.
 				 * Without this the input would blur but the input would still have a value and the todos would still be filtered. */