From 80db2142c4af96548493bc4cf48ecf4bf8b6d481 Mon Sep 17 00:00:00 2001
From: Nikita Mashchenko <mashchenko1@icloud.com>
Date: Thu, 5 Oct 2023 13:18:27 -0500
Subject: [PATCH] feat: added teameights-types

---
 client/package.json                |  1 +
 client/src/app/page.tsx            |  8 ++++++--
 client/src/shared/ui/flex/flex.tsx | 10 +++++-----
 client/yarn.lock                   |  8 ++++++++
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/package.json b/client/package.json
index d0b155232..29cf006ac 100644
--- a/client/package.json
+++ b/client/package.json
@@ -42,6 +42,7 @@
     "react-select": "^5.7.4",
     "react-tooltip": "^5.21.3",
     "sass": "^1.64.2",
+    "teameights-types": "^1.0.1",
     "tsparticles": "^2.12.0",
     "typescript": "5.1.6",
     "yarn": "^1.22.19"
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 21571e56e..b1a274382 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -3,9 +3,11 @@
 import { Flex, Typography, Skeleton } from '@/shared/ui';
 import { useGetScreenWidth } from '@/shared/lib';
 import { Crown } from '@/shared/assets';
+import { IUserRequest } from 'teameights-types';
 
 export default function Home() {
   const width = useGetScreenWidth();
+  const user: IUserRequest = { username: 'nmashchenko' };
 
   return (
     <>
@@ -15,12 +17,14 @@ export default function Home() {
 
       <div> The screen width is: {width} </div>
 
+      <Typography>Hello, {user.username}!</Typography>
+
       <a href='/login' style={{ color: 'green' }}>
         Get to login
       </a>
 
-      <Flex direction='column' gap='200px'>
-        <Flex gap='30px'>
+      <Flex direction='column' gap='200px' width='100%' justify='center' align='center'>
+        <Flex gap='150px'>
           <Skeleton width={70} height={70} />
           <Skeleton width={70} height={70} />
         </Flex>
diff --git a/client/src/shared/ui/flex/flex.tsx b/client/src/shared/ui/flex/flex.tsx
index d57978ac1..30bac25c6 100644
--- a/client/src/shared/ui/flex/flex.tsx
+++ b/client/src/shared/ui/flex/flex.tsx
@@ -95,16 +95,16 @@ export const Flex: React.FC<FlexProps> = props => {
   } = props;
 
   const style = {
-    'align-items': align,
-    'justify-content': justify,
+    alignItems: align,
+    justifyContent: justify,
     gap: gap,
     margin: margin,
     padding: padding,
-    'flex-direction': direction,
-    'max-height': maxHeight,
+    flexDirection: direction,
+    maxHeight: maxHeight,
     position: position,
     width: width,
-    'max-width': maxWidth,
+    maxWidth: maxWidth,
     height: height,
   } as React.CSSProperties;
 
diff --git a/client/yarn.lock b/client/yarn.lock
index c707a822b..496a578d2 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -7637,6 +7637,7 @@ __metadata:
     react-tooltip: ^5.21.3
     sass: ^1.64.2
     storybook: 7.2.1
+    teameights-types: ^1.0.1
     tsparticles: ^2.12.0
     typescript: 5.1.6
     yarn: ^1.22.19
@@ -16236,6 +16237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"teameights-types@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "teameights-types@npm:1.0.1"
+  checksum: 2d030fc9a94e406c958dd08fb81b06b5d8b4d46db5fe191c36e4a3c879ce8ab58b9a53380f692e76929c0dc133e872b3530ae52c0d30894a697323de256ed9f4
+  languageName: node
+  linkType: hard
+
 "telejson@npm:^7.0.3, telejson@npm:^7.2.0":
   version: 7.2.0
   resolution: "telejson@npm:7.2.0"