profile

src/caj/components/userUI/AccountInfoBanner.tsx

@@ -6,10 +6,12 @@ import {
   themeSelector,
 } from '@caj/configs/colors';
 import {UserId} from '@caj/configs/types';
+import {RootState} from '@caj/redux/store';
 import MyUserManager from '@caj/user/MyUserManager';
 import {User} from '@caj/user/types';
 import UserManager from '@caj/user/UserManager';
-import {Box, Center, Skeleton, Text, VStack} from 'native-base';
+import {Box, Center, HStack, Skeleton, Text, VStack} from 'native-base';
+import {useSelector} from 'react-redux';
 
 import {TextSkeleton} from '../simple/Skeleton';
 
@@ -36,8 +38,12 @@ export default function AccountInfoBanner(props: {
   const theme = themeSelector();
   const _theme = themeNB(theme);
 
-  const height = 150;
+  const lang = useSelector((state: RootState) => state.appVariables.lang);
-  let boxHeight = height;
+
+  const spacing = 4;
+  const size = 50;
+
+  let boxHeight = size * 3 + spacing * 2;
 
   if (theme === ThemeMode.Darkest) {
     boxHeight += 2;
@@ -49,13 +55,13 @@ export default function AccountInfoBanner(props: {
         <Box
           bg={getBackgroundColor(theme)}
           {...darkThemeStyle(theme, 'black.500')}
-          p={1}
+          py={spacing + 'px'}
+          pl={spacing + 'px'}
           ml={2}
           mb={10}
           style={{
-            height: boxHeight,
+            borderTopLeftRadius: size + spacing,
-            borderTopLeftRadius: height / 2,
+            borderBottomLeftRadius: size / 4 + spacing,
-            borderBottomLeftRadius: height / 2,
           }}>
           {props.children}
         </Box>
@@ -68,46 +74,98 @@ export default function AccountInfoBanner(props: {
 
   return (
     <Background>
-      <VStack space={2}>
+      <VStack space={spacing + 'px'}>
         <Box
           bg={'blackBG.400'}
-          left={boxHeight / 2 - 25}
+          ml={size}
-          pl={100}
+          pl={size * 1.2}
           pr={3}
-          height={10}
+          height={size}
           width={'85%'}
-          borderRadius={25}
+          borderRightRadius={size / 2}
           {...darkThemeStyle(theme, 'black.500')}>
           <TextSkeleton
             SkeletonProps={{lines: 1, width: '160px'}}
-            color="primary.800"
+            color="primary.400">
-            fontSize={14}>
             {user.Username.data}
           </TextSkeleton>
           <TextSkeleton
             SkeletonProps={{lines: 1, width: '120px'}}
             color="white.100"
             margin={0}
-            padding={0}
+            padding={0}>
-            fontSize={12}>
             {user.AccountName.data}
           </TextSkeleton>
         </Box>
+        <HStack
+          alignSelf={'stretch'}
+          space={spacing + 'px'}
+          mr={spacing + 'px'}>
+          <HStack
+            space={2}
+            bg={'blackBG.400'}
+            ml={size}
+            pl={size * 1.2}
+            pr={size / 2}
+            alignSelf="baseline"
+            height={size}
+            borderRightRadius={size / 2}
+            {...darkThemeStyle(theme, 'black.500')}>
+            <VStack alignItems={'center'}>
+              <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
+                {user.FollowingCount.data}
+              </TextSkeleton>
+              <Text color="white.100">{lang.account.profile.follower}</Text>
+            </VStack>
+            <VStack alignItems={'center'}>
+              <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
+                {user.FollowersCount.data}
+              </TextSkeleton>
+              <Text color="white.100">{lang.account.profile.following}</Text>
+            </VStack>
+          </HStack>
+          <Box
+            flexGrow={1}
+            backgroundColor={'primary.800'}
+            borderRadius={size / 2}
+            justifyContent="center">
+            <TextSkeleton
+              textAlign={'center'}
+              color="#fff"
+              SkeletonProps={{
+                lines: 1,
+                width: '20%',
+                alignSelf: 'center',
+                startColor: 'primary.200',
+              }}>
+              {user.FollowersCount.data === undefined
+                ? undefined
+                : 'Lvl. ' + user.FollowersCount.data}
+            </TextSkeleton>
+          </Box>
+        </HStack>
+
         <Box
           bg={'blackBG.400'}
-          left={boxHeight / 2 - 25}
+          height={size}
-          pl={100}
+          width={'100%'}
-          height={10}
+          borderLeftRadius={size / 4}
-          width={'75%'}
-          borderRadius={25}
           {...darkThemeStyle(theme, 'black.500')}>
-          <TextSkeleton SkeletonProps={{lines: 1}}>
+          <TextSkeleton
-            {user.FollowersCount.data} {'   '} {user.FollowingCount.data}
+            mx={spacing * 2 + 'px'}
+            numberOfLines={2}
+            SkeletonProps={{
+              lines: 2,
+              width: '80%',
+              mx: spacing * 2 + 'px',
+            }}
+            color="white.100">
+            {user.Description.data}
           </TextSkeleton>
         </Box>
       </VStack>
-      <Box position={'absolute'} top={1} left={1}>
+      <Box position={'absolute'} top={spacing + 'px'} left={spacing + 'px'}>
-        <ProfilePic size={height - _theme.space[1] * 2} />
+        <ProfilePic size={size * 2 + spacing} />
       </Box>
     </Background>
   );

src/caj/configs/colors.ts

@@ -162,6 +162,7 @@ export const theme = (_theme: ThemeMode) => {
           fontFamily: 'Outfit-Regular',
           colorScheme: 'black',
         },
+        spaces:{},
         sizes: {
           xl: {
             fontSize: '64px',

src/caj/lang/default.ts

@@ -21,7 +21,10 @@ export default interface LangFormat {
   info: string;
   error: string;
   success: string;
-  account: {
+  account: {profile: {
+    follower: string,
+    following:  string,
+  },
     login: {
       title: string;
       wrongEmPw: string;

src/caj/lang/en.ts

@@ -21,6 +21,10 @@ export const lang: LangFormat = {
   error: 'Error',
   success: 'Success',
   account: {
+    profile: {
+      follower: "Follower",
+      following: "Following",
+    },
     login: {
       title: 'Log in',
       wrongEmPw: 'Wrong E-Mail or password',