diff --git a/src/caj/components/userUI/AccountInfoBanner.tsx b/src/caj/components/userUI/AccountInfoBanner.tsx
index 19ac3c1..e75e148 100644
--- a/src/caj/components/userUI/AccountInfoBanner.tsx
+++ b/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;
- let boxHeight = height;
+ const lang = useSelector((state: RootState) => state.appVariables.lang);
+
+ 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: {
{props.children}
@@ -68,46 +74,98 @@ export default function AccountInfoBanner(props: {
return (
-
+
+ color="primary.400">
{user.Username.data}
+ padding={0}>
{user.AccountName.data}
+
+
+
+
+ {user.FollowingCount.data}
+
+ {lang.account.profile.follower}
+
+
+
+ {user.FollowersCount.data}
+
+ {lang.account.profile.following}
+
+
+
+
+ {user.FollowersCount.data === undefined
+ ? undefined
+ : 'Lvl. ' + user.FollowersCount.data}
+
+
+
+
-
- {user.FollowersCount.data} {' '} {user.FollowingCount.data}
+
+ {user.Description.data}
-
-
+
+
);
diff --git a/src/caj/configs/colors.ts b/src/caj/configs/colors.ts
index 0edf5d0..5a430ad 100644
--- a/src/caj/configs/colors.ts
+++ b/src/caj/configs/colors.ts
@@ -162,6 +162,7 @@ export const theme = (_theme: ThemeMode) => {
fontFamily: 'Outfit-Regular',
colorScheme: 'black',
},
+ spaces:{},
sizes: {
xl: {
fontSize: '64px',
diff --git a/src/caj/lang/default.ts b/src/caj/lang/default.ts
index 5dd0b3f..5dc9ca9 100644
--- a/src/caj/lang/default.ts
+++ b/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;
diff --git a/src/caj/lang/en.ts b/src/caj/lang/en.ts
index f3e2b0b..84fe94e 100644
--- a/src/caj/lang/en.ts
+++ b/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',