From 0db59ff55e18b14d3f0ca52812db170e8fb57872 Mon Sep 17 00:00:00 2001
From: Mo Beigi <me@mobeigi.com>
Date: Wed, 23 Oct 2024 02:12:56 +1100
Subject: [PATCH 1/2] Center person showcase in mobile breakpoint

---
 app/src/components/PersonShowcase/styled.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/src/components/PersonShowcase/styled.ts b/app/src/components/PersonShowcase/styled.ts
index 77ceed56..cd7c8f0b 100644
--- a/app/src/components/PersonShowcase/styled.ts
+++ b/app/src/components/PersonShowcase/styled.ts
@@ -33,6 +33,10 @@ export const Headshot = styled.div<HeadshotProps>`
 export const HeaderRows = styled.div`
   display: flex;
   flex-direction: column;
+
+  @media (max-width: ${breakpoints.mobile.maxWidth}px) {
+    align-items: center;
+  }
 `;
 
 export const StyledHeading = styled.h2`

From b7a3481b5d706d6ac59371527011c8c196adf1eb Mon Sep 17 00:00:00 2001
From: Mo Beigi <me@mobeigi.com>
Date: Wed, 23 Oct 2024 02:41:18 +1100
Subject: [PATCH 2/2] Tweak dark mode switch colors to better suit system
 thememode that resolves to light mode

---
 .../DarkModeSwitchContainer.tsx                   | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/app/src/components/HeaderContent/DarkModeSwitchContainer/DarkModeSwitchContainer.tsx b/app/src/components/HeaderContent/DarkModeSwitchContainer/DarkModeSwitchContainer.tsx
index ef61f9b6..f8f1f665 100644
--- a/app/src/components/HeaderContent/DarkModeSwitchContainer/DarkModeSwitchContainer.tsx
+++ b/app/src/components/HeaderContent/DarkModeSwitchContainer/DarkModeSwitchContainer.tsx
@@ -9,10 +9,10 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { useTheme } from 'next-themes';
 import { nextThemeToThemeMode } from '@/utils/theme';
 
-export const customColors = {
-  halfSunLeftFill: '#ffca00',
-  halfSunLeftStroke: '#ffca00',
-  halfSunLeftBeamStroke: '#ffe873',
+const customColors = {
+  halfSunLeftFill: '#ebd75b',
+  halfSunLeftStroke: '#ebd75b',
+  halfSunLeftBeamStroke: '#e3cc42',
   halfMoonRightFill: '#44415d',
   halfMoonRightStroke: '#44415d',
   halfMoonRightBeamStroke: '#c0b9c7',
@@ -65,8 +65,7 @@ export const DarkModeSwitchContainer = () => {
   const [mounted, setMounted] = useState(false);
 
   const { theme, setTheme } = useTheme();
-  const themeMode = nextThemeToThemeMode(theme);
-
+  const themeMode = mounted ? nextThemeToThemeMode(theme) : ThemeMode.System;
   const darkModeSwitchRef = useRef<DarkModeSwitchHandle>(null);
 
   useEffect(() => {
@@ -86,10 +85,6 @@ export const DarkModeSwitchContainer = () => {
   const tooltipElement = getTooltip(themeMode);
   const tooltipHtml = useMemo(() => renderToStaticMarkup(tooltipElement), [tooltipElement]);
 
-  if (!mounted) {
-    return null;
-  }
-
   return (
     <IconWrapperBubble onClick={triggerClick} data-tooltip-id="base-tooltip" data-tooltip-html={tooltipHtml}>
       <DarkModeSwitchWrapper>