make settings icon a canvas now for consistency

Psiphon-Inc · Sep 20, 2024 · fa25247 · fa25247
1 parent 61dfc51
commit fa25247
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 17 deletions.
diff --git a/assets/images/settings.svg b/assets/images/settings.svg
diff --git a/src/components/ConduitSettings.tsx b/src/components/ConduitSettings.tsx
@@ -1,7 +1,24 @@
-import { FontAwesome, Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome, MaterialIcons } from "@expo/vector-icons";
+import {
+    BlendMode,
+    Canvas,
+    ColorMatrix,
+    Group,
+    ImageSVG,
+    Paint,
+    Skia,
+    useSVG,
+} from "@shopify/react-native-skia";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Modal, Pressable, ScrollView, Text, View } from "react-native";
+import {
+    Modal,
+    Pressable,
+    ScrollView,
+    Text,
+    View,
+    useWindowDimensions,
+} from "react-native";
 
 import { useAccountContext } from "@/src/account/context";
 import { handleError, wrapError } from "@/src/common/errors";
@@ -11,9 +28,16 @@ import { ProxyID } from "@/src/components/ProxyID";
 import { InProxyParametersSchema, getProxyId } from "@/src/psiphon/inproxy";
 import { useInProxyContext } from "@/src/psiphon/mockContext";
 import { lineItemStyle, palette, sharedStyles as ss } from "@/src/styles";
+import {
+    useDerivedValue,
+    useSharedValue,
+    withDelay,
+    withTiming,
+} from "react-native-reanimated";
 
 export function ConduitSettings() {
     const { t } = useTranslation();
+    const win = useWindowDimensions();
     const { conduitKeyPair } = useAccountContext();
     const {
         inProxyParameters,
@@ -300,21 +324,78 @@ export function ConduitSettings() {
         );
     }
 
+    // fadeIn on first load
+    const fadeIn = useSharedValue(0);
+    React.useEffect(() => {
+        const inProxyStatus = getInProxyStatus();
+        if (inProxyStatus.status === "running") {
+            // fade in right away
+            fadeIn.value = withTiming(1, { duration: 2000 });
+        } else if (inProxyStatus.status === "stopped") {
+            // fade in after a delay for particle animation
+            fadeIn.value = withDelay(2800, withTiming(1, { duration: 2000 }));
+        }
+        // implicit do nothing on status unknown
+    }, [getInProxyStatus]);
+
+    const settingsIconSvg = useSVG(require("@/assets/images/settings.svg"));
+    const settingsIconSize = win.width * 0.2;
+    const paint = React.useMemo(() => Skia.Paint(), []);
+    paint.setColorFilter(
+        Skia.ColorFilter.MakeBlend(
+            Skia.Color(palette.redTint2),
+            BlendMode.SrcIn,
+        ),
+    );
+    const opacityMatrix = useDerivedValue(() => {
+        // prettier-ignore
+        return [
+         // R, G, B, A, Bias
+            1, 0, 0, 0, 0,
+            0, 1, 0, 0, 0,
+            0, 0, 1, 0, 0,
+            0, 0, 0, fadeIn.value, 0,
+        ];
+    });
+
     return (
         <>
-            <View style={[ss.absolute, { bottom: 0, right: 0 }]}>
+            <View
+                style={[
+                    ss.absolute,
+                    {
+                        bottom: 0,
+                        right: 0,
+                        width: settingsIconSize,
+                        height: settingsIconSize,
+                    },
+                ]}
+            >
+                <Canvas style={[ss.flex]}>
+                    <Group
+                        layer={
+                            <Paint>
+                                <ColorMatrix matrix={opacityMatrix} />
+                            </Paint>
+                        }
+                    >
+                        <Group layer={paint}>
+                            <ImageSVG
+                                svg={settingsIconSvg}
+                                width={settingsIconSize * 0.6}
+                                height={settingsIconSize * 0.6}
+                                y={settingsIconSize * 0.2}
+                                x={settingsIconSize * 0.2}
+                            />
+                        </Group>
+                    </Group>
+                </Canvas>
                 <Pressable
-                    style={[ss.padded]}
+                    style={[ss.absoluteFill]}
                     onPress={() => {
                         setModalOpen(true);
                     }}
-                >
-                    <Ionicons
-                        name="settings-outline"
-                        color={palette.redShade4}
-                        size={40}
-                    />
-                </Pressable>
+                />
             </View>
             {/* this empty modal fades in the opacity overlay */}
             <Modal animationType="fade" visible={modalOpen} transparent={true}>

diff --git a/src/components/ConduitStatus.tsx b/src/components/ConduitStatus.tsx
@@ -112,6 +112,8 @@ export function ConduitStatus({
         font.measureText(totalBytesTransferredText).height +
         connectedPeersTextOffsetY +
         padY;
+    const bytesTransferredGraphOffsetY =
+        totalBytesTransferredTextOffsetY + padY;
 
     return (
         <View
@@ -158,26 +160,22 @@ export function ConduitStatus({
                     <Group
                         transform={[
                             {
-                                translateY: height * 0.9 + 4,
+                                translateY: bytesTransferredGraphOffsetY,
                             },
                             {
-                                translateX: (width - 288) / 2,
+                                translateX: width * 0.05,
                             },
                         ]}
                     >
                         <Path
                             path={bytesReceivedPath}
                             color={palette.transparentBlue}
                             style="fill"
-                            strokeWidth={2}
-                            strokeJoin={"round"}
                         />
                         <Path
                             path={bytesSentPath}
                             color={palette.transparentPurple}
                             style="fill"
-                            strokeWidth={2}
-                            strokeJoin={"round"}
                         />
                     </Group>
                 </Group>