Merge pull request #46 from funnyzak/refactor/style

Author: funnyzak

src/navigation/Navigator.tsx

@@ -227,7 +227,7 @@ const HotDrawerNavigator = ({
           <HeaderButton
             onPress={() => navigation.navigate(ROUTES.SiteStat)}
             source={theme.assets.images.icons.header.stat}
-            containerStyle={[{ marginRight: theme.spacing.medium }]}
+            containerStyle={[{ marginRight: theme.dimens.layoutContainerHorizontalMargin }]}
           />
         ),
         drawerActiveTintColor: theme.colors.secondary,

src/screens/components/list/TableList.tsx

@@ -120,7 +120,7 @@ const TableList: React.FC<TableListProps> = (data: TableListProps) => {
   const renderContent = () => {
     return (
       <View style={[tableStyles.container(theme), data.containerStyle]}>
-        <Text style={tableStyles.title(theme)}>{data.title}</Text>
+        {data.title && <Text style={tableStyles.title(theme)}>{data.title}</Text>}
         <View style={tableStyles.list(theme)}>{data.children}</View>
       </View>
     )

src/screens/setting/Language.tsx

@@ -27,7 +27,7 @@ const Language = ({
 
   return (
     <View style={SylCommon.Layout.fill}>
-      <TableList containerStyle={[{ marginTop: theme.spacing.tiny }]}>
+      <TableList containerStyle={[{ marginTop: theme.spacing.small }]}>
         {translationList.map((item, index) => (
           <TableRow
             key={index}

src/screens/setting/License.tsx

@@ -10,8 +10,8 @@ import { TableList, TableRow } from '../components'
 const OpenSourceLicense = ({ navigation }: ScreenProps) => {
   const { theme } = useTheme()
   return (
-    <View style={[SylCommon.Layout.fill, { backgroundColor: theme.colors.background }]}>
-      <TableList containerStyle={[{ marginTop: theme.spacing.tiny }]}>
+    <View style={SylCommon.Layout.fill}>
+      <TableList containerStyle={[{ marginTop: theme.spacing.small }]}>
         {OPENSOURCE_LIST.map((item, index) => (
           <TableRow
             key={index}

src/screens/setting/SiteStat.tsx

@@ -15,7 +15,7 @@ const SiteStat = ({
   const { theme } = useTheme()
   return (
     <View style={SylCommon.Layout.fill}>
-      <TableList containerStyle={[{ marginTop: theme.spacing.tiny }]}>
+      <TableList containerStyle={[{ marginTop: theme.spacing.small }]}>
         <TableRow
           title={translate('label.registedMember')}
           value={siteStat?.member_max.toString() ?? 'None'}

src/screens/setting/Theme.tsx

@@ -26,8 +26,8 @@ const Theme = ({
   const { theme, resetTheme } = useTheme()
 
   return (
-    <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
-      <TableList containerStyle={[{ marginTop: theme.spacing.tiny }]}>
+    <View style={SylCommon.Layout.fill}>
+      <TableList containerStyle={[{ marginTop: theme.spacing.small }]}>
         {themeList.map((item, index) => (
           <TableRow
             key={index}

src/screens/setting/URLSchemes.tsx

@@ -13,8 +13,8 @@ const URLSchemes = ({}: ScreenProps) => {
   const { showMessage } = useToast()
 
   return (
-    <View style={[SylCommon.Layout.fill, { backgroundColor: theme.colors.background }]}>
-      <TableList containerStyle={[{ marginTop: theme.spacing.tiny }]}>
+    <View style={SylCommon.Layout.fill}>
+      <TableList containerStyle={[{ marginTop: theme.spacing.small }]}>
         <TableRow
           title={translate('label.openApp')}
           description={URLSchemeList.OpenApp}

src/theme/light/dimens.ts

@@ -4,14 +4,18 @@ const screenHeight = Dimensions.get('window').height
 
 import { IThemeDimen } from '../types'
 
+const layoutContainerHorizontalMargin = 15
+
 const dimens: IThemeDimen = {
   /**
    * App level constants
    */
   WINDOW_WIDTH: screenWidth,
   WINDOW_HEIGHT: screenHeight,
 
-  layoutContainerWidth: screenWidth - 30,
+  layoutContainerWidth: screenWidth - layoutContainerHorizontalMargin * 2,
+
+  layoutContainerHorizontalMargin: layoutContainerHorizontalMargin,
 
   headerButtonSize: 23,
   headerHeight: 50,

src/theme/types.ts

@@ -122,6 +122,8 @@ export interface IThemeDimen {
   WINDOW_WIDTH: number
   WINDOW_HEIGHT: number
   layoutContainerWidth: number
+
+  layoutContainerHorizontalMargin: number
   headerHeight: number
   headerButtonSize: number
   badgeSize: number