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:
parent
94a5fa4ac7
commit
a9b69638a6
|
@ -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
27
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)})`;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue