Some translations are done

src/components/BottomSheet.tsx

@@ -11,8 +11,7 @@ import {
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   children: React.ReactNode
@@ -104,23 +103,23 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end'
   },
   container: {
-    padding: constants.SPACING_L,
-    paddingTop: constants.SPACING_M
+    padding: StyleConstants.Spacing.L,
+    paddingTop: StyleConstants.Spacing.M
   },
   handle: {
     alignSelf: 'center',
-    width: constants.GLOBAL_SPACING_BASE * 8,
-    height: constants.GLOBAL_SPACING_BASE / 2,
+    width: StyleConstants.Spacing.Global.PagePadding * 8,
+    height: StyleConstants.Spacing.Global.PagePadding / 2,
     borderRadius: 100,
-    top: -constants.SPACING_M * 2
+    top: -StyleConstants.Spacing.M * 2
   },
   cancel: {
-    padding: constants.SPACING_S,
+    padding: StyleConstants.Spacing.S,
     borderWidth: 1,
     borderRadius: 100
   },
   text: {
-    fontSize: constants.FONT_SIZE_L,
+    fontSize: StyleConstants.Font.Size.L,
     textAlign: 'center'
   }
 })

src/components/BottomSheet/Row.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Pressable, StyleSheet, Text } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 
-import constants from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   onPressFunction: () => void
@@ -16,7 +16,11 @@ const BottomSheetRow: React.FC<Props> = ({ onPressFunction, icon, text }) => {
 
   return (
     <Pressable onPress={() => onPressFunction()} style={styles.pressable}>
-      <Feather name={icon} color={theme.primary} size={constants.FONT_SIZE_L} />
+      <Feather
+        name={icon}
+        color={theme.primary}
+        size={StyleConstants.Font.Size.L}
+      />
       <Text style={[styles.text, { color: theme.primary }]}>{text}</Text>
     </Pressable>
   )
@@ -25,12 +29,12 @@ const BottomSheetRow: React.FC<Props> = ({ onPressFunction, icon, text }) => {
 const styles = StyleSheet.create({
   pressable: {
     flexDirection: 'row',
-    marginBottom: constants.SPACING_L
+    marginBottom: StyleConstants.Spacing.L
   },
   text: {
-    fontSize: constants.FONT_SIZE_M,
-    lineHeight: constants.FONT_SIZE_L,
-    marginLeft: constants.SPACING_S
+    fontSize: StyleConstants.Font.Size.M,
+    lineHeight: StyleConstants.Font.Size.L,
+    marginLeft: StyleConstants.Spacing.S
   }
 })
 

src/components/Header.tsx

@@ -0,0 +1,4 @@
+import HeaderLeft from './Header/Left'
+import HeaderRight from './Header/Right'
+
+export { HeaderLeft, HeaderRight }

src/components/Header/Left.tsx

@@ -0,0 +1,41 @@
+import { Feather } from '@expo/vector-icons'
+import React from 'react'
+import { Pressable, StyleSheet, Text } from 'react-native'
+
+import { useTheme } from 'src/utils/styles/ThemeManager'
+import { StyleConstants } from 'src/utils/styles/constants'
+
+export interface Props {
+  onPress: () => void
+  text?: string
+  icon?: string
+}
+
+const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
+  const { theme } = useTheme()
+
+  return (
+    <Pressable onPress={onPress} style={styles.base}>
+      {text ? (
+        <Text style={[styles.text, { color: theme.link }]}>{text}</Text>
+      ) : (
+        <Feather
+          name={icon || 'chevron-left'}
+          color={theme.link}
+          size={StyleConstants.Font.Size.L}
+        />
+      )}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    paddingRight: StyleConstants.Spacing.S
+  },
+  text: {
+    fontSize: StyleConstants.Font.Size.L
+  }
+})
+
+export default HeaderLeft

src/components/Header/Right.tsx

@@ -0,0 +1,52 @@
+import { Feather } from '@expo/vector-icons'
+import React from 'react'
+import { Pressable, StyleSheet, Text } from 'react-native'
+
+import { useTheme } from 'src/utils/styles/ThemeManager'
+import { StyleConstants } from 'src/utils/styles/constants'
+
+type PropsBase = {
+  onPress: () => void
+}
+
+export interface PropsText extends PropsBase {
+  text: string
+  icon?: string
+}
+
+export interface PropsIcon extends PropsBase {
+  text?: string
+  icon: string
+}
+
+const HeaderRight: React.FC<PropsText | PropsIcon> = ({
+  onPress,
+  text,
+  icon
+}) => {
+  const { theme } = useTheme()
+
+  return (
+    <Pressable onPress={onPress} style={styles.base}>
+      {text && <Text style={[styles.text, { color: theme.link }]}>{text}</Text>}
+      {icon && (
+        <Feather
+          name={icon}
+          color={theme.link}
+          size={StyleConstants.Font.Size.L}
+        />
+      )}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    paddingLeft: StyleConstants.Spacing.S
+  },
+  text: {
+    fontSize: StyleConstants.Font.Size.L
+  }
+})
+
+export default HeaderRight

src/components/Menu/Button.tsx

@@ -9,8 +9,7 @@ import {
   View
 } from 'react-native'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   text: string
@@ -66,8 +65,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingLeft: constants.GLOBAL_PAGE_PADDING,
-    paddingRight: constants.GLOBAL_PAGE_PADDING
+    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
+    paddingRight: StyleConstants.Spacing.Global.PagePadding
   }
 })
 

src/components/Menu/Container.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   children: React.ReactNode
@@ -18,7 +17,9 @@ const MenuContainer: React.FC<Props> = ({ ...props }) => {
         styles.base,
         {
           borderTopColor: theme.separator,
-          marginTop: props.marginTop ? constants.GLOBAL_PAGE_PADDING : 0
+          marginTop: props.marginTop
+            ? StyleConstants.Spacing.Global.PagePadding
+            : 0
         }
       ]}
     >
@@ -30,7 +31,7 @@ const MenuContainer: React.FC<Props> = ({ ...props }) => {
 const styles = StyleSheet.create({
   base: {
     borderTopWidth: 1,
-    marginBottom: constants.GLOBAL_PAGE_PADDING
+    marginBottom: StyleConstants.Spacing.Global.PagePadding
   }
 })
 

src/components/Menu/Item.tsx

@@ -3,8 +3,8 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { Feather } from '@expo/vector-icons'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 
-import constants from 'src/utils/styles/constants'
 import { ColorDefinitions } from 'src/utils/styles/themes'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   iconFront?: string
@@ -34,7 +34,7 @@ const Core: React.FC<Props> = ({
         {iconFront && (
           <Feather
             name={iconFront}
-            size={constants.FONT_SIZE_M + 2}
+            size={StyleConstants.Font.Size.M + 2}
             color={theme[iconFrontColor]}
             style={styles.iconFront}
           />
@@ -55,7 +55,7 @@ const Core: React.FC<Props> = ({
         {iconBack && (
           <Feather
             name={iconBack}
-            size={constants.FONT_SIZE_M + 2}
+            size={StyleConstants.Font.Size.M + 2}
             color={theme[iconBackColor]}
             style={styles.iconBack}
           />
@@ -90,8 +90,8 @@ const styles = StyleSheet.create({
   core: {
     flex: 1,
     flexDirection: 'row',
-    paddingLeft: constants.GLOBAL_PAGE_PADDING,
-    paddingRight: constants.GLOBAL_PAGE_PADDING
+    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
+    paddingRight: StyleConstants.Spacing.Global.PagePadding
   },
   front: {
     flex: 1,
@@ -108,10 +108,10 @@ const styles = StyleSheet.create({
     marginRight: 8
   },
   text: {
-    fontSize: constants.FONT_SIZE_M
+    fontSize: StyleConstants.Font.Size.M
   },
   content: {
-    fontSize: constants.FONT_SIZE_M
+    fontSize: StyleConstants.Font.Size.M
   },
   iconBack: {
     marginLeft: 8

src/components/NetworkState.tsx

@@ -0,0 +1,3 @@
+import NetworkStateError from './NetworkState/Error'
+
+export { NetworkStateError }

src/components/NetworkState/Error.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+const NetworkStateError = () => {
+  return (
+    <View style={styles.base}>
+      <Text>加载错误</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    // justifyContent: 'center',
+    alignItems: 'center'
+  }
+})
+
+export default NetworkStateError

src/components/Timelines/Timeline/Conversation.tsx

@@ -5,8 +5,7 @@ import { useNavigation } from '@react-navigation/native'
 import Avatar from './Shared/Avatar'
 import HeaderConversation from './Shared/HeaderConversation'
 import Content from './Shared/Content'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   item: Mastodon.Conversation
@@ -60,7 +59,7 @@ const styles = StyleSheet.create({
   statusView: {
     flex: 1,
     flexDirection: 'column',
-    padding: constants.GLOBAL_PAGE_PADDING
+    padding: StyleConstants.Spacing.Global.PagePadding
   },
   status: {
     flex: 1,

src/components/Timelines/Timeline/Default.tsx

@@ -10,8 +10,7 @@ import Poll from './Shared/Poll'
 import Attachment from './Shared/Attachment'
 import Card from './Shared/Card'
 import ActionsStatus from './Shared/ActionsStatus'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   item: Mastodon.Status
@@ -51,7 +50,7 @@ const TimelineDefault: React.FC<Props> = ({ item, queryKey }) => {
             media_attachments={actualStatus.media_attachments}
             sensitive={actualStatus.sensitive}
             width={
-              Dimensions.get('window').width - constants.SPACING_M * 2 - 50 - 8
+              Dimensions.get('window').width - StyleConstants.Spacing.M * 2 - 50 - 8
             }
           />
         )}
@@ -107,7 +106,7 @@ const styles = StyleSheet.create({
   statusView: {
     flex: 1,
     flexDirection: 'column',
-    padding: constants.GLOBAL_PAGE_PADDING
+    padding: StyleConstants.Spacing.Global.PagePadding
   },
   status: {
     flex: 1,

src/components/Timelines/Timeline/Notifications.tsx

@@ -10,8 +10,7 @@ import Poll from './Shared/Poll'
 import Attachment from './Shared/Attachment'
 import Card from './Shared/Card'
 import ActionsStatus from './Shared/ActionsStatus'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   notification: Mastodon.Notification
@@ -98,7 +97,7 @@ const styles = StyleSheet.create({
   notificationView: {
     flex: 1,
     flexDirection: 'column',
-    padding: constants.GLOBAL_PAGE_PADDING
+    padding: StyleConstants.Spacing.Global.PagePadding
   },
   notification: {
     flex: 1,

src/components/Timelines/Timeline/Separator.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import constants from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 const TimelineSeparator = () => {
   const { theme } = useTheme()
@@ -13,8 +13,11 @@ const TimelineSeparator = () => {
 const styles = StyleSheet.create({
   base: {
     borderTopWidth: 1,
-    marginLeft: constants.SPACING_M + constants.AVATAR_S + constants.SPACING_S,
-    marginRight: constants.SPACING_M
+    marginLeft:
+      StyleConstants.Spacing.M +
+      StyleConstants.Avatar.S +
+      StyleConstants.Spacing.S,
+    marginRight: StyleConstants.Spacing.M
   }
 })
 

src/components/Timelines/Timeline/Shared/Actioned.tsx

@@ -4,8 +4,7 @@ import { Feather } from '@expo/vector-icons'
 
 import Emojis from './Emojis'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   action: 'favourite' | 'follow' | 'mention' | 'poll' | 'reblog'
@@ -30,7 +29,7 @@ const Actioned: React.FC<Props> = ({
       icon = (
         <Feather
           name='heart'
-          size={constants.FONT_SIZE_S}
+          size={StyleConstants.Font.Size.S}
           color={iconColor}
           style={styles.icon}
         />
@@ -41,7 +40,7 @@ const Actioned: React.FC<Props> = ({
       icon = (
         <Feather
           name='user-plus'
-          size={constants.FONT_SIZE_S}
+          size={StyleConstants.Font.Size.S}
           color={iconColor}
           style={styles.icon}
         />
@@ -52,7 +51,7 @@ const Actioned: React.FC<Props> = ({
       icon = (
         <Feather
           name='bar-chart-2'
-          size={constants.FONT_SIZE_S}
+          size={StyleConstants.Font.Size.S}
           color='black'
           style={styles.icon}
         />
@@ -63,7 +62,7 @@ const Actioned: React.FC<Props> = ({
       icon = (
         <Feather
           name='repeat'
-          size={constants.FONT_SIZE_S}
+          size={StyleConstants.Font.Size.S}
           color={iconColor}
           style={styles.icon}
         />
@@ -81,7 +80,7 @@ const Actioned: React.FC<Props> = ({
             <Emojis
               content={content}
               emojis={emojis}
-              size={constants.FONT_SIZE_S}
+              size={StyleConstants.Font.Size.S}
             />
           ) : (
             <Text>{content}</Text>
@@ -97,11 +96,11 @@ const Actioned: React.FC<Props> = ({
 const styles = StyleSheet.create({
   actioned: {
     flexDirection: 'row',
-    marginBottom: constants.SPACING_S
+    marginBottom: StyleConstants.Spacing.S
   },
   icon: {
-    marginLeft: constants.AVATAR_S - constants.FONT_SIZE_S,
-    marginRight: constants.SPACING_S
+    marginLeft: StyleConstants.Avatar.S - StyleConstants.Font.Size.S,
+    marginRight: StyleConstants.Spacing.S
   },
   content: {
     flexDirection: 'row'

src/components/Timelines/Timeline/Shared/ActionsStatus.tsx

@@ -14,9 +14,9 @@ import { Feather } from '@expo/vector-icons'
 import client from 'src/api/client'
 import { getLocalAccountId } from 'src/utils/slices/instancesSlice'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import constants from 'src/utils/styles/constants'
 import { toast } from 'src/components/toast'
 import { useSelector } from 'react-redux'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 const fireMutation = async ({
   id,
@@ -175,14 +175,14 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
         <Feather
           name='message-circle'
           color={iconColor}
-          size={constants.FONT_SIZE_M + 2}
+          size={StyleConstants.Font.Size.M + 2}
         />
         {status.replies_count > 0 && (
           <Text
             style={{
               color: theme.secondary,
-              fontSize: constants.FONT_SIZE_M,
-              marginLeft: constants.SPACING_XS
+              fontSize: StyleConstants.Font.Size.M,
+              marginLeft: StyleConstants.Spacing.XS
             }}
           >
             {status.replies_count}
@@ -201,7 +201,7 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
             ? iconColorAction(status.reblogged)
             : theme.disabled
         }
-        size={constants.FONT_SIZE_M + 2}
+        size={StyleConstants.Font.Size.M + 2}
       />
     ),
     [status.reblogged]
@@ -211,7 +211,7 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
       <Feather
         name='heart'
         color={iconColorAction(status.favourited)}
-        size={constants.FONT_SIZE_M + 2}
+        size={StyleConstants.Font.Size.M + 2}
       />
     ),
     [status.favourited]
@@ -221,7 +221,7 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
       <Feather
         name='bookmark'
         color={iconColorAction(status.bookmarked)}
-        size={constants.FONT_SIZE_M + 2}
+        size={StyleConstants.Font.Size.M + 2}
       />
     ),
     [status.bookmarked]
@@ -231,7 +231,7 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
       <Feather
         name='share-2'
         color={iconColor}
-        size={constants.FONT_SIZE_M + 2}
+        size={StyleConstants.Font.Size.M + 2}
       />
     ),
     []
@@ -374,7 +374,7 @@ const styles = StyleSheet.create({
     width: '100%',
     flex: 1,
     flexDirection: 'row',
-    marginTop: constants.SPACING_M
+    marginTop: StyleConstants.Spacing.M
   },
   action: {
     width: '20%',

src/components/Timelines/Timeline/Shared/Avatar.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from 'react'
 import { Image, Pressable, StyleSheet } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   uri: string
@@ -27,9 +26,9 @@ const Avatar: React.FC<Props> = ({ uri, id }) => {
 
 const styles = StyleSheet.create({
   avatar: {
-    width: constants.AVATAR_S,
-    height: constants.AVATAR_S,
-    marginRight: constants.SPACING_S
+    width: StyleConstants.Avatar.S,
+    height: StyleConstants.Avatar.S,
+    marginRight: StyleConstants.Spacing.S
   },
   image: {
     width: '100%',

src/components/Timelines/Timeline/Shared/Content.tsx

@@ -4,8 +4,8 @@ import Collapsible from 'react-native-collapsible'
 
 import ParseContent from 'src/components/ParseContent'
 
-import constants from 'src/utils/styles/constants'
 import { useTheme } from 'src/utils/styles/ThemeManager'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   content: string
@@ -40,7 +40,7 @@ const Content: React.FC<Props> = ({
             <Collapsible collapsed={spoilerCollapsed}>
               <ParseContent
                 content={content}
-                size={constants.FONT_SIZE_M}
+                size={StyleConstants.Font.Size.M}
                 emojis={emojis}
                 mentions={mentions}
               />
@@ -49,7 +49,7 @@ const Content: React.FC<Props> = ({
         ) : (
           <ParseContent
             content={content}
-            size={constants.FONT_SIZE_M}
+            size={StyleConstants.Font.Size.M}
             emojis={emojis}
             mentions={mentions}
           />

src/components/Timelines/Timeline/Shared/Emojis.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { Image, StyleSheet, Text } from 'react-native'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-
-import constants from 'src/utils/styles/constants'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 const regexEmoji = new RegExp(/(:[a-z0-9_]+:)/)
 
@@ -25,7 +24,7 @@ const Emojis: React.FC<Props> = ({
       fontSize: size,
       lineHeight: size + 2,
       color: theme.primary,
-      ...(fontBold && { fontWeight: constants.FONT_WEIGHT_BOLD })
+      ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
     },
     image: {
       width: size,

src/components/Timelines/Timeline/Shared/HeaderDefault.tsx

@@ -9,11 +9,11 @@ import relativeTime from 'src/utils/relativeTime'
 import client from 'src/api/client'
 import { getLocalAccountId, getLocalUrl } from 'src/utils/slices/instancesSlice'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import constants from 'src/utils/styles/constants'
 import BottomSheet from 'src/components/BottomSheet'
 import BottomSheetRow from 'src/components/BottomSheet/Row'
 import { toast } from 'src/components/toast'
 import { useSelector } from 'react-redux'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 const fireMutation = async ({
   id,
@@ -156,7 +156,7 @@ const HeaderDefault: React.FC<Props> = ({
       <Feather
         name='more-horizontal'
         color={theme.secondary}
-        size={constants.FONT_SIZE_M + 2}
+        size={StyleConstants.Font.Size.M + 2}
       />
     ),
     []
@@ -170,7 +170,7 @@ const HeaderDefault: React.FC<Props> = ({
             <Emojis
               content={name}
               emojis={emojis}
-              size={constants.FONT_SIZE_M}
+              size={StyleConstants.Font.Size.M}
               fontBold={true}
             />
           ) : (
@@ -202,7 +202,7 @@ const HeaderDefault: React.FC<Props> = ({
         {visibility === 'private' && (
           <Feather
             name='lock'
-            size={constants.FONT_SIZE_S}
+            size={StyleConstants.Font.Size.S}
             color={theme.secondary}
             style={styles.visibility}
           />
@@ -297,24 +297,24 @@ const styles = StyleSheet.create({
   },
   account: {
     flexShrink: 1,
-    marginLeft: constants.SPACING_XS,
-    lineHeight: constants.FONT_SIZE_M + 2
+    marginLeft: StyleConstants.Spacing.XS,
+    lineHeight: StyleConstants.Font.Size.M + 2
   },
   meta: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: constants.SPACING_XS,
-    marginBottom: constants.SPACING_S
+    marginTop: StyleConstants.Spacing.XS,
+    marginBottom: StyleConstants.Spacing.S
   },
   created_at: {
-    fontSize: constants.FONT_SIZE_S
+    fontSize: StyleConstants.Font.Size.S
   },
   visibility: {
-    marginLeft: constants.SPACING_S
+    marginLeft: StyleConstants.Spacing.S
   },
   application: {
-    fontSize: constants.FONT_SIZE_S,
-    marginLeft: constants.SPACING_S
+    fontSize: StyleConstants.Font.Size.S,
+    marginLeft: StyleConstants.Spacing.S
   }
 })
 

src/components/toast.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, Text, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import Toast from 'react-native-toast-message'
 import { useTheme } from 'src/utils/styles/ThemeManager'
-import constants from 'src/utils/styles/constants'
 import { Feather } from '@expo/vector-icons'
+import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Params {
   type: 'success' | 'error' | 'warning'
@@ -65,7 +65,7 @@ const ToastBase = ({ config }: { config: Config }) => {
         <Feather
           name={iconSet[config.type]}
           color={theme[config.type]}
-          size={constants.FONT_SIZE_M + 2}
+          size={StyleConstants.Font.Size.M + 2}
         />
         <Text style={[styles.text, { color: theme.primary }]}>
           {config.text1}
@@ -91,11 +91,11 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
-    padding: constants.SPACING_M
+    padding: StyleConstants.Spacing.M
   },
   text: {
-    fontSize: constants.FONT_SIZE_M,
-    marginLeft: constants.SPACING_S
+    fontSize: StyleConstants.Font.Size.M,
+    marginLeft: StyleConstants.Spacing.S
   }
 })