brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

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.
This commit is contained in:
Brandon Presley 2023-08-22 12:04:47 +12:00
parent 94a5fa4ac7
commit a9b69638a6
2 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
TimerPage.tsx
View File

@ -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>

27
colors.ts
View File

@ -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)})`;
}