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 { Button, Text, useTheme } from "react-native-paper";
|
||||||
import { ProgressCircle } from "react-native-svg-charts";
|
import { ProgressCircle } from "react-native-svg-charts";
|
||||||
import AppFab from "./AppFab";
|
import AppFab from "./AppFab";
|
||||||
|
import { darkenRgba } from "./colors";
|
||||||
import { MARGIN, PADDING } from "./constants";
|
import { MARGIN, PADDING } from "./constants";
|
||||||
import { settingsRepo } from "./db";
|
import { settingsRepo } from "./db";
|
||||||
import DrawerHeader from "./DrawerHeader";
|
import DrawerHeader from "./DrawerHeader";
|
||||||
|
@ -43,6 +44,11 @@ export default function TimerPage() {
|
||||||
return Dimensions.get("screen").width * 0.5 - 60;
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<DrawerHeader name="Timer" />
|
<DrawerHeader name="Timer" />
|
||||||
|
@ -62,7 +68,7 @@ export default function TimerPage() {
|
||||||
progress={progress}
|
progress={progress}
|
||||||
strokeWidth={10}
|
strokeWidth={10}
|
||||||
progressColor={colors.primary}
|
progressColor={colors.primary}
|
||||||
backgroundColor={colors.primary + "80"}
|
backgroundColor={backgroundColor}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
27
colors.ts
27
colors.ts
|
@ -16,26 +16,7 @@ export const darkColors = [
|
||||||
{ hex: "#1c6000", name: "Kermit" },
|
{ hex: "#1c6000", name: "Kermit" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const colorShade = (color: any, amount: number) => {
|
export function darkenRgba(rgba: string, amount: number) {
|
||||||
color = color.replace(/^#/, "");
|
let [r, g, b, a] = rgba.match(/\d+/g).map(Number);
|
||||||
if (color.length === 3) {
|
return `rgba(${r}, ${g}, ${b}, ${Math.max(0, a - amount)})`;
|
||||||
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}`;
|
|
||||||
};
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user