From d6dd76009375e8a3195429d726f8f295dac22179 Mon Sep 17 00:00:00 2001
From: Cindy Green <cimigreen@hotmail.com>
Date: Mon, 20 Jan 2025 16:04:51 -0500
Subject: [PATCH] More styles and theme updates.

---
 src/renderer/src/Theme.ts                     | 19 ++++++++++++++++
 src/renderer/src/colors.ts                    |  1 +
 src/renderer/src/components/Button.tsx        |  6 ++---
 .../Observations/ObservationListItem.tsx      |  5 +++--
 .../Observations/ObservationListView.tsx      | 22 ++++++++++---------
 src/renderer/src/components/Text.tsx          |  3 ++-
 6 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/renderer/src/Theme.ts b/src/renderer/src/Theme.ts
index bd55a48..cfe2ff2 100644
--- a/src/renderer/src/Theme.ts
+++ b/src/renderer/src/Theme.ts
@@ -3,6 +3,7 @@ import { createTheme } from '@mui/material/styles'
 import {
 	ALMOST_BLACK,
 	COMAPEO_BLUE,
+	DARKER_ORANGE,
 	DARK_COMAPEO_BLUE,
 	DARK_GREY,
 	DARK_ORANGE,
@@ -13,6 +14,12 @@ import {
 	WHITE,
 } from './colors'
 
+declare module '@mui/material/Button' {
+	interface ButtonPropsVariantOverrides {
+		darkOrange: true
+	}
+}
+
 const theme = createTheme({
 	typography: {
 		fontFamily: 'Rubik, sans-serif',
@@ -72,6 +79,18 @@ const theme = createTheme({
 	},
 	components: {
 		MuiButton: {
+			variants: [
+				{
+					props: { variant: 'darkOrange' },
+					style: {
+						backgroundColor: DARK_ORANGE,
+						color: WHITE,
+						'&:hover': {
+							backgroundColor: DARKER_ORANGE,
+						},
+					},
+				},
+			],
 			defaultProps: {
 				variant: 'contained',
 			},
diff --git a/src/renderer/src/colors.ts b/src/renderer/src/colors.ts
index cb011bb..e726e06 100644
--- a/src/renderer/src/colors.ts
+++ b/src/renderer/src/colors.ts
@@ -9,6 +9,7 @@ export const VERY_LIGHT_GREY = '#ededed'
 
 export const ORANGE = '#FF9933'
 export const DARK_ORANGE = '#E86826'
+export const DARKER_ORANGE = '#D95F28'
 
 export const GREEN = '#59A553'
 export const RED = '#D92222'
diff --git a/src/renderer/src/components/Button.tsx b/src/renderer/src/components/Button.tsx
index 8a38135..0a40994 100644
--- a/src/renderer/src/components/Button.tsx
+++ b/src/renderer/src/components/Button.tsx
@@ -3,15 +3,15 @@ import {
 	type MouseEventHandler,
 	type PropsWithChildren,
 } from 'react'
-import { Button as MuiButton } from '@mui/material'
+import { Button as MuiButton, type ButtonProps } from '@mui/material'
 
 type CustomButtonProps = PropsWithChildren<{
 	name?: string
 	className?: string
-	color?: 'primary' | 'secondary' | 'success' | 'error'
+	color?: ButtonProps['color']
 	size?: 'medium' | 'large' | 'fullWidth'
 	testID?: string
-	variant?: 'contained' | 'outlined' | 'text'
+	variant?: 'contained' | 'outlined' | 'text' | 'darkOrange'
 	style?: CSSProperties
 	onClick?: MouseEventHandler<HTMLButtonElement>
 	disabled?: boolean
diff --git a/src/renderer/src/components/Observations/ObservationListItem.tsx b/src/renderer/src/components/Observations/ObservationListItem.tsx
index e246501..230744e 100644
--- a/src/renderer/src/components/Observations/ObservationListItem.tsx
+++ b/src/renderer/src/components/Observations/ObservationListItem.tsx
@@ -42,6 +42,7 @@ const PhotoContainer = styled('img')({
 
 export function ObservationListItem({ observation, onClick }: Props) {
 	const projectId = useActiveProjectIdStoreState((s) => s.activeProjectId)
+	// TODO: Ideally, the fallback shouldn't be necessary
 	const preset = useObservationWithPreset(observation, projectId ?? '')
 	const createdAt = observation.createdAt
 		? new Date(observation.createdAt)
@@ -54,10 +55,10 @@ export function ObservationListItem({ observation, onClick }: Props) {
 	return (
 		<Container onClick={onClick}>
 			<TextContainer>
-				<Text style={{ fontWeight: 500 }}>
+				<Text bold>
 					<FormattedPresetName preset={preset} />
 				</Text>
-				<Text style={{ fontSize: 10, fontWeight: 400 }}>
+				<Text kind="caption">
 					<FormattedDate
 						value={createdAt}
 						month="short"
diff --git a/src/renderer/src/components/Observations/ObservationListView.tsx b/src/renderer/src/components/Observations/ObservationListView.tsx
index adb1055..2f19567 100644
--- a/src/renderer/src/components/Observations/ObservationListView.tsx
+++ b/src/renderer/src/components/Observations/ObservationListView.tsx
@@ -2,7 +2,7 @@ import type { Observation, Track } from '@comapeo/schema'
 import { styled } from '@mui/material/styles'
 import { defineMessages, useIntl } from 'react-intl'
 
-import { ALMOST_BLACK, DARK_ORANGE, VERY_LIGHT_GREY, WHITE } from '../../colors'
+import { ALMOST_BLACK, VERY_LIGHT_GREY, WHITE } from '../../colors'
 import AddPersonIcon from '../../images/AddPerson.svg'
 import LightningIcon from '../../images/Lightning.svg'
 import { Button } from '../Button'
@@ -71,12 +71,8 @@ export function ObservationListView({
 			<ContentWrapper>
 				<ButtonsRow>
 					<Button
-						variant="contained"
-						style={{
-							backgroundColor: DARK_ORANGE,
-							color: WHITE,
-							minWidth: 170,
-						}}
+						variant="darkOrange"
+						style={{ flex: 1 }}
 						startIcon={<LightningIcon color={WHITE} width={16} height={16} />}
 						onClick={onViewExchange}
 					>
@@ -87,7 +83,7 @@ export function ObservationListView({
 						style={{
 							borderColor: VERY_LIGHT_GREY,
 							color: ALMOST_BLACK,
-							minWidth: 170,
+							flex: 1,
 						}}
 						startIcon={
 							<AddPersonIcon fill={ALMOST_BLACK} width={16} height={16} />
@@ -109,13 +105,19 @@ export function ObservationListView({
 							<ObservationListItem
 								key={item.docId}
 								observation={item}
-								onClick={() => onSelectObservation?.(item.docId)}
+								onClick={
+									onSelectObservation
+										? () => onSelectObservation(item.docId)
+										: undefined
+								}
 							/>
 						) : (
 							<TrackListItem
 								key={item.docId}
 								track={item}
-								onClick={() => onSelectTrack?.(item.docId)}
+								onClick={
+									onSelectTrack ? () => onSelectTrack(item.docId) : undefined
+								}
 							/>
 						)}
 					</li>
diff --git a/src/renderer/src/components/Text.tsx b/src/renderer/src/components/Text.tsx
index 4167b93..cf4d0fa 100644
--- a/src/renderer/src/components/Text.tsx
+++ b/src/renderer/src/components/Text.tsx
@@ -6,7 +6,7 @@ import {
 import Typography from '@mui/material/Typography'
 import { type Variant } from '@mui/material/styles/createTypography'
 
-type Kind = 'title' | 'subtitle' | 'body'
+type Kind = 'title' | 'subtitle' | 'body' | 'caption'
 
 type TextColor = 'primary' | 'secondary' | 'disabled'
 
@@ -14,6 +14,7 @@ const kindToVariant: { [k in Kind]: Variant } = {
 	title: 'h1',
 	subtitle: 'subtitle1',
 	body: 'body1',
+	caption: 'caption',
 } as const
 
 const textColorToTypographyColor: {