From a9b69638a6e50af8fca77ede88ffb13952f81473 Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Tue, 22 Aug 2023 12:04:47 +1200
Subject: [PATCH] Fix color of progress bar in Timer page

React native paper update made the dark theme color into RGBA
instead of hex, so adding the string '80' no longer works.
---
 TimerPage.tsx |  8 +++++++-
 colors.ts     | 27 ++++-----------------------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/TimerPage.tsx b/TimerPage.tsx
index bd96cd9..e987216 100644
--- a/TimerPage.tsx
+++ b/TimerPage.tsx
@@ -4,6 +4,7 @@ import { Dimensions, NativeModules, View } from "react-native";
 import { Button, Text, useTheme } from "react-native-paper";
 import { ProgressCircle } from "react-native-svg-charts";
 import AppFab from "./AppFab";
+import { darkenRgba } from "./colors";
 import { MARGIN, PADDING } from "./constants";
 import { settingsRepo } from "./db";
 import DrawerHeader from "./DrawerHeader";
@@ -43,6 +44,11 @@ export default function TimerPage() {
     return Dimensions.get("screen").width * 0.5 - 60;
   }, []);
 
+  const backgroundColor = useMemo(() => {
+    if (colors.primary.match(/rgba/)) return darkenRgba(colors.primary, 0.6);
+    return colors.primary + "80";
+  }, [colors.primary]);
+
   return (
     <>
       <DrawerHeader name="Timer" />
@@ -62,7 +68,7 @@ export default function TimerPage() {
             progress={progress}
             strokeWidth={10}
             progressColor={colors.primary}
-            backgroundColor={colors.primary + "80"}
+            backgroundColor={backgroundColor}
           />
         </View>
       </View>
diff --git a/colors.ts b/colors.ts
index 2b3b949..f669f80 100644
--- a/colors.ts
+++ b/colors.ts
@@ -16,26 +16,7 @@ export const darkColors = [
   { hex: "#1c6000", name: "Kermit" },
 ];
 
-export const colorShade = (color: any, amount: number) => {
-  color = color.replace(/^#/, "");
-  if (color.length === 3) {
-    color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-  }
-
-  let [r, g, b] = color.match(/.{2}/g);
-  [r, g, b] = [
-    parseInt(r, 16) + amount,
-    parseInt(g, 16) + amount,
-    parseInt(b, 16) + amount,
-  ];
-
-  r = Math.max(Math.min(255, r), 0).toString(16);
-  g = Math.max(Math.min(255, g), 0).toString(16);
-  b = Math.max(Math.min(255, b), 0).toString(16);
-
-  const rr = (r.length < 2 ? "0" : "") + r;
-  const gg = (g.length < 2 ? "0" : "") + g;
-  const bb = (b.length < 2 ? "0" : "") + b;
-
-  return `#${rr}${gg}${bb}`;
-};
+export function darkenRgba(rgba: string, amount: number) {
+  let [r, g, b, a] = rgba.match(/\d+/g).map(Number);
+  return `rgba(${r}, ${g}, ${b}, ${Math.max(0, a - amount)})`;
+}