feat(rn): setting page list design

Signed-off-by: Innei <[email protected]>
RSSNext · Jan 16, 2025 · 4ead508 · 4ead508
1 parent 682d1ea
commit 4ead508
Show file tree

Hide file tree

Showing 40 changed files with 625 additions and 108 deletions.
diff --git a/apps/mobile/src/components/common/AnimatedComponents.tsx b/apps/mobile/src/components/common/AnimatedComponents.tsx
@@ -6,3 +6,4 @@ export const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
 export const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)
 
 export const ReAnimatedPressable = Reanimated.createAnimatedComponent(Pressable)
+export const ReAnimatedScrollView = Reanimated.createAnimatedComponent(ScrollView)
diff --git a/apps/mobile/src/components/ui/grouped/GroupedList.tsx b/apps/mobile/src/components/ui/grouped/GroupedList.tsx
@@ -1,15 +1,30 @@
 import { cn } from "@follow/utils"
 import type { FC, PropsWithChildren } from "react"
+import * as React from "react"
+import { Fragment } from "react"
 import type { ViewProps } from "react-native"
-import { Pressable, Text, View } from "react-native"
+import { Pressable, StyleSheet, Text, View } from "react-native"
 
 import { RightCuteReIcon } from "@/src/icons/right_cute_re"
 import { useColor } from "@/src/theme/colors"
 
 export const GroupedInsetListCard: FC<PropsWithChildren> = ({ children }) => {
   return (
     <View className="bg-secondary-system-grouped-background mx-4 flex-1 overflow-hidden rounded-[10px]">
-      {children}
+      {React.Children.map(children, (child, index) => {
+        const isLast = index === React.Children.count(children) - 1
+        return (
+          <Fragment key={index}>
+            {child}
+            {!isLast && (
+              <View
+                className="bg-opaque-separator ml-16"
+                style={{ height: StyleSheet.hairlineWidth }}
+              />
+            )}
+          </Fragment>
+        )
+      })}
     </View>
   )
 }
@@ -48,10 +63,10 @@ export const GroupedInsetListNavigationLink: FC<{
           <View className={"flex-row items-center"}>
             <View className="flex-row items-center">
               {icon}
-              <Text>{label}</Text>
+              <Text className="text-[16px]">{label}</Text>
             </View>
             <View className="-mr-2 ml-auto">
-              <RightCuteReIcon height={20} width={20} color={tertiaryLabelColor} />
+              <RightCuteReIcon height={18} width={18} color={tertiaryLabelColor} />
             </View>
           </View>
         </GroupedInsetListItem>

diff --git a/apps/mobile/src/icons/bell_ringing_cute_fi.tsx b/apps/mobile/src/icons/bell_ringing_cute_fi.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface BellRingingCuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const BellRingingCuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: BellRingingCuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M6.972 3.777a1 1 0 1 0-1.258-1.554 10.038 10.038 0 0 0-2.602 3.19 1 1 0 0 0 1.777.919 8.038 8.038 0 0 1 2.083-2.555m11.315-1.554a1 1 0 0 0-1.258 1.554 8.038 8.038 0 0 1 2.09 2.568 1 1 0 0 0 1.778-.916 10.038 10.038 0 0 0-2.61-3.206M4.5 10.5a7.5 7.5 0 0 1 15 0c0 .233-.004.468-.008.703-.02 1.163-.042 2.335.443 3.42.083.186.183.373.283.561.23.429.463.867.523 1.34a2.2 2.2 0 0 1-1.454 2.352c-.373.13-.782.128-1.176.125L17.938 19H5.89c-.395.004-.804.007-1.177-.124a2.2 2.2 0 0 1-1.454-2.353c.06-.472.294-.91.523-1.339.1-.188.2-.375.284-.561.484-1.085.463-2.257.442-3.42-.004-.235-.008-.47-.008-.703M9.17 20a3.001 3.001 0 0 0 5.66 0z"
+        clipRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/database.tsx b/apps/mobile/src/icons/database.tsx
@@ -0,0 +1,19 @@
+import type { SvgProps } from "react-native-svg"
+import Svg, { Path } from "react-native-svg"
+
+export function DatabaseIcon(
+  props: SvgProps & {
+    width?: number
+    height?: number
+    color?: string
+  },
+) {
+  return (
+    <Svg width={props.width} height={props.height} viewBox="0 0 24 24" {...props}>
+      <Path
+        fill={props.color}
+        d="M12 11q-3.75 0-6.375-1.175T3 7q0-1.65 2.625-2.825Q8.25 3 12 3t6.375 1.175Q21 5.35 21 7q0 1.65-2.625 2.825Q15.75 11 12 11Zm0 5q-3.75 0-6.375-1.175T3 12V9.5q0 1.1 1.025 1.863q1.025.762 2.45 1.237q1.425.475 2.963.687q1.537.213 2.562.213t2.562-.213q1.538-.212 2.963-.687q1.425-.475 2.45-1.237Q21 10.6 21 9.5V12q0 1.65-2.625 2.825Q15.75 16 12 16Zm0 5q-3.75 0-6.375-1.175T3 17v-2.5q0 1.1 1.025 1.863q1.025.762 2.45 1.237q1.425.475 2.963.688q1.537.212 2.562.212t2.562-.212q1.538-.213 2.963-.688t2.45-1.237Q21 15.6 21 14.5V17q0 1.65-2.625 2.825Q15.75 21 12 21Z"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/information_cute_re copy.tsx b/apps/mobile/src/icons/information_cute_re copy.tsx
diff --git a/apps/mobile/src/icons/time_cute_re copy.tsx → apps/mobile/src/icons/magic_2_cute_fi.tsx b/apps/mobile/src/icons/time_cute_re copy.tsx → apps/mobile/src/icons/magic_2_cute_fi.tsx
@@ -1,26 +1,26 @@
 import * as React from "react"
 import Svg, { Path } from "react-native-svg"
 
-interface TimeCuteReCopyIconProps {
+interface Magic2CuteFiIconProps {
   width?: number
   height?: number
   color?: string
 }
 
-export const TimeCuteReCopyIcon = ({
+export const Magic2CuteFiIcon = ({
   width = 24,
   height = 24,
   color = "#10161F",
-}: TimeCuteReCopyIconProps) => {
+}: Magic2CuteFiIconProps) => {
   return (
     <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
       <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
       <Path
         stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M12 7v3.757a3 3 0 0 0 .879 2.122L15 15m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0"
+        strokeWidth={3}
+        d="m6.044 6.05 1.413 1.413M12 12l8.186 8.192M15.944 6.05l-1.411 1.412m-7.071 7.07L6.044 15.95M17.994 11h-2.05m-9.9 0h-2.05m7 7v-2.05m0-9.9V4"
       />
     </Svg>
   )

diff --git a/apps/mobile/src/icons/palette_cute_fi.tsx b/apps/mobile/src/icons/palette_cute_fi.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface PaletteCuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const PaletteCuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: PaletteCuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10c.137 0 .273-.003.409-.008a2.53 2.53 0 0 0 2.222-1.473c.374-.79.368-1.757-.055-2.603-.215-.429-.13-.947.209-1.287l.089-.089a1.29 1.29 0 0 1 1.124-.36l1.74.29c1.685.28 3.696-.566 4.082-2.57.118-.616.18-1.251.18-1.9 0-5.523-4.477-10-10-10M8 8.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m5 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0M7.5 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"
+        clipRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/power_outline.tsx b/apps/mobile/src/icons/power_outline.tsx
@@ -20,7 +20,7 @@ export const PowerOutlineIcon = ({
       />
       <Path
         d="M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.7533 21.5 2.5 17.2467 2.5 12C2.5 6.7533 6.7533 2.5 12 2.5C17.2467 2.5 21.5 6.7533 21.5 12Z"
-        stroke="currentColor"
+        stroke={color}
         strokeWidth={2}
       />
     </Svg>

diff --git a/apps/mobile/src/icons/round_cute_fi.tsx b/apps/mobile/src/icons/round_cute_fi.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface RoundCuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const RoundCuteFiIcon = ({ width = 24, height = 24 }: RoundCuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/round_cute_re.tsx b/apps/mobile/src/icons/round_cute_re.tsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface RoundCuteReIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const RoundCuteReIcon = ({ width = 24, height = 24 }: RoundCuteReIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/safe_lock_filled.tsx b/apps/mobile/src/icons/safe_lock_filled.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface SafeLockFilledIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const SafeLockFilledIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: SafeLockFilledIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M12.702 2.196a2 2 0 0 0-1.404 0l-7 2.625A2 2 0 0 0 3 6.693v5.363a9 9 0 0 0 4.975 8.05l3.354 1.677a1.5 1.5 0 0 0 1.342 0l3.354-1.677A9 9 0 0 0 21 12.056V6.693a2 2 0 0 0-1.298-1.872zM12 8a2 2 0 0 0-1 3.732V15a1 1 0 1 0 2 0v-3.268A2 2 0 0 0 12 8"
+        clipRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/settings_7_cute_fi.tsx b/apps/mobile/src/icons/settings_7_cute_fi.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface Settings7CuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const Settings7CuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: Settings7CuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M13 3a1 1 0 1 0-2 0v1.062a7.946 7.946 0 0 0-2.104.562l-.53-.918a1 1 0 0 0-1.732 1l.531.92c-.58.44-1.098.959-1.54 1.54l-.92-.532a1 1 0 0 0-1 1.732l.92.53A7.946 7.946 0 0 0 4.061 11H3a1 1 0 1 0 0 2h1.062c.092.737.284 1.443.562 2.104l-.918.53a1 1 0 1 0 1 1.732l.92-.531c.44.58.959 1.098 1.54 1.54l-.532.92a1 1 0 1 0 1.732 1l.53-.92c.661.279 1.367.471 2.104.563V21a1 1 0 1 0 2 0v-1.062a7.948 7.948 0 0 0 2.104-.562l.53.918a1 1 0 1 0 1.732-1l-.531-.92a8.044 8.044 0 0 0 1.54-1.54l.92.532a1 1 0 1 0 1-1.732l-.92-.53c.279-.661.471-1.367.563-2.104H21a1 1 0 1 0 0-2h-1.062a7.948 7.948 0 0 0-.562-2.104l.918-.53a1 1 0 1 0-1-1.732l-.92.531a8.046 8.046 0 0 0-1.54-1.54l.532-.92a1 1 0 1 0-1.732-1l-.53.92A7.946 7.946 0 0 0 13 4.061zm-2 8.423L7.246 13.59c-.503.29-.732.913-.44 1.415.29.502.938.607 1.44.317L12 13.155l3.754 2.167c.502.29 1.15.185 1.44-.317.292-.502.063-1.125-.44-1.415L13 11.423V7.088C13 6.508 12.58 6 12 6c-.58 0-1 .508-1 1.088z"
+        clipRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/trophy_cute_fi.tsx b/apps/mobile/src/icons/trophy_cute_fi.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface TrophyCuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const TrophyCuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: TrophyCuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M14.946 3.001A4 4 0 0 1 18.725 6h.893a2.133 2.133 0 0 1 2.092 2.552l-.337 1.683a3.44 3.44 0 0 1-2.92 2.735A7.183 7.183 0 0 1 13 16.931V19h3a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2h3V16.93a7.183 7.183 0 0 1-5.454-3.96 3.44 3.44 0 0 1-2.919-2.736l-.336-1.683A2.133 2.133 0 0 1 4.383 6h.892a4 4 0 0 1 3.779-2.999c1.96-.046 3.932-.046 5.892 0M4.992 8c-.134 0-.794-.11-.74.16.14.704.147 1.659.591 2.258-.066-.815.049-1.613.15-2.418m14.165 2.418c.444-.6.45-1.554.591-2.259.054-.27-.605-.16-.74-.16.1.806.216 1.604.149 2.419"
+        clipRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/icons/user_3_cute_fi.tsx b/apps/mobile/src/icons/user_3_cute_fi.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface User3CuteFiIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const User3CuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: User3CuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10m0 11c-2.395 0-4.575.694-6.178 1.672-.8.488-1.484 1.064-1.978 1.69C3.358 16.976 3 17.713 3 18.5c0 .845.411 1.511 1.003 1.986.56.45 1.299.748 2.084.956C7.665 21.859 9.771 22 12 22s4.335-.14 5.913-.558c.785-.208 1.524-.506 2.084-.956C20.59 20.01 21 19.345 21 18.5c0-.787-.358-1.523-.844-2.139-.494-.625-1.177-1.2-1.978-1.69C16.575 13.695 14.395 13 12 13"
+        clipRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/modules/settings/SettingNavigationLink.tsx b/apps/mobile/src/modules/settings/SettingNavigationLink.tsx
@@ -0,0 +1,19 @@
+import type { FC, PropsWithChildren } from "react"
+import { View } from "react-native"
+
+export const SettingNavigationLinkIcon: FC<
+  {
+    backgroundColor: string
+  } & PropsWithChildren
+> = ({ backgroundColor, children }) => {
+  return (
+    <View
+      className="mr-4 items-center justify-center rounded-[5px] p-1"
+      style={{
+        backgroundColor,
+      }}
+    >
+      {children}
+    </View>
+  )
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,3 +6,4 @@ export const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
		export const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)

		export const ReAnimatedPressable = Reanimated.createAnimatedComponent(Pressable)
		export const ReAnimatedScrollView = Reanimated.createAnimatedComponent(ScrollView)