fix: shared components

client/src/app/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Typography } from '@/shared/ui';
+import { Flex, Typography, Skeleton } from '@/shared/ui';
 import { useGetScreenWidth } from '@/shared/lib';
+import { Crown } from '@/shared/assets';
 
 export default function Home() {
   const width = useGetScreenWidth();
@@ -17,6 +18,15 @@ export default function Home() {
       <a href='/login' style={{ color: 'green' }}>
         Get to login
       </a>
+
+      <Flex direction='column' gap='200px'>
+        <Flex gap='30px'>
+          <Skeleton width={70} height={70} />
+          <Skeleton width={70} height={70} />
+        </Flex>
+      </Flex>
+
+      <Crown width={70} height={70} />
     </>
   );
 }

client/src/shared/assets/icons/crown.tsx

@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+export const Crown: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        d='M114.575 4.12492C110.18 1.46175 105.139 0.0537109 100 0.0537109C94.861 0.0537109 89.8201 1.46175 85.425 4.12492L19.8 43.8999C15.6645 46.4057 12.245 49.9354 9.87147 54.1482C7.49795 58.361 6.25065 63.1145 6.25 67.9499V132.05C6.25065 136.885 7.49795 141.639 9.87147 145.852C12.245 150.064 15.6645 153.594 19.8 156.1L85.425 195.875C89.8201 198.538 94.861 199.946 100 199.946C105.139 199.946 110.18 198.538 114.575 195.875L180.2 156.1C184.335 153.594 187.755 150.064 190.129 145.852C192.502 141.639 193.749 136.885 193.75 132.05V67.9499C193.749 63.1145 192.502 58.361 190.129 54.1482C187.755 49.9354 184.335 46.4057 180.2 43.8999L114.575 4.12492Z'
+        fill='#FAD20C'
+      />
+      <path
+        d='M165.808 82.1577C165.83 82.5507 165.801 82.9507 165.702 83.3481L156.89 118.595C156.446 120.371 154.855 121.619 153.025 121.629L100.154 121.896C100.147 121.896 100.141 121.896 100.134 121.896H47.2631C45.4239 121.896 43.8212 120.643 43.3769 118.858L34.5651 83.4778C34.4637 83.0698 34.4343 82.6586 34.4599 82.2554C31.0511 81.1814 28.5715 77.9916 28.5715 74.2324C28.5715 69.5942 32.3446 65.8212 36.9827 65.8212C41.6209 65.8212 45.394 69.5942 45.394 74.2324C45.394 76.8444 44.1972 79.1814 42.3232 80.7254L53.3555 91.841C56.1438 94.6506 60.0129 96.2613 63.9713 96.2613C68.6516 96.2613 73.1141 94.0386 75.9243 90.3147L94.0551 66.2912C92.532 64.7691 91.5889 62.6661 91.5889 60.3472C91.5889 55.7091 95.3619 51.936 100 51.936C104.638 51.936 108.411 55.7091 108.411 60.3472C108.411 62.5966 107.518 64.6383 106.075 66.1491C106.08 66.1555 106.086 66.1609 106.09 66.1678L124.09 90.2575C126.899 94.0172 131.377 96.2618 136.071 96.2618C140.066 96.2618 143.822 94.7061 146.647 91.881L157.749 80.7793C155.835 79.2359 154.606 76.8765 154.606 74.2324C154.606 69.5942 158.379 65.8212 163.017 65.8212C167.656 65.8212 171.429 69.5942 171.429 74.2324C171.429 77.8912 169.076 81.0031 165.808 82.1577ZM156.031 134.446C156.031 132.234 154.237 130.441 152.025 130.441H48.4204C46.2084 130.441 44.4151 132.234 44.4151 134.446V144.059C44.4151 146.271 46.2084 148.064 48.4204 148.064H152.025C154.237 148.064 156.031 146.271 156.031 144.059V134.446Z'
+        fill='#1A1C22'
+        stroke='#1A1C22'
+        strokeWidth='0.534045'
+      />
+    </svg>
+  );
+};

client/src/shared/assets/icons/index.ts

@@ -8,6 +8,7 @@ export { Question } from './question';
 export { WarningCircle } from './warning-circle';
 export { X } from './x';
 export { Cookie } from './cookie';
+export { Crown } from './crown';
 export { ArrowLeft } from './arrows';
 export { CaretUp, CaretDown } from './caret';
 export { LogoBig } from './logo';

client/src/shared/ui/flex/flex.module.scss

@@ -1,14 +1,3 @@
 .flexWrapper {
   display: flex;
-  align-items: var(--align, normal);
-  justify-content: var(--justify, normal);
-  gap: var(--gap, 0);
-  margin: var(--margin, 0);
-  padding: var(--padding, 0);
-  flex-direction: var(--direction, row);
-  max-height: var(--maxHeight, none);
-  position: var(--position, static);
-  width: var(--width, 100%);
-  max-width: var(--maxWidth, none);
-  height: var(--height, auto);
 }

client/src/shared/ui/flex/flex.tsx

@@ -95,17 +95,17 @@ export const Flex: React.FC<FlexProps> = props => {
   } = props;
 
   const style = {
-    '--align': align,
-    '--justify': justify,
-    '--gap': gap,
-    '--margin': margin,
-    '--padding': padding,
-    '--direction': direction,
-    '--maxHeight': maxHeight,
-    '--position': position,
-    '--width': width,
-    '--maxWidth': maxWidth,
-    '--height': height,
+    'align-items': align,
+    'justify-content': justify,
+    gap: gap,
+    margin: margin,
+    padding: padding,
+    'flex-direction': direction,
+    'max-height': maxHeight,
+    position: position,
+    width: width,
+    'max-width': maxWidth,
+    height: height,
   } as React.CSSProperties;
 
   return (

client/src/shared/ui/index.ts

@@ -9,4 +9,5 @@ export * from './textarea';
 export * from './typography';
 export * from './portal';
 export * from './flex';
+export * from './skeleton';
 export * from './icon-wrapper';

client/src/shared/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from './skeleton';

client/src/shared/ui/skeleton/skeleton.module.scss

@@ -48,8 +48,12 @@
   animation-iteration-count: infinite;
 }
 
-/*@media (prefers-reduced-motion) {*/
-/*  .reactLoadingSkeleton {*/
-/*    --pseudo-element-display: none; !* Disable animation *!*/
-/*  }*/
-/*}*/
+.baseSpan {
+  line-height: 1;
+}
+
+//@media (prefers-reduced-motion) {
+//  .reactLoadingSkeleton {
+//    --pseudo-element-display: none;
+//  }
+//}

client/src/shared/ui/skeleton/skeleton.tsx

@@ -131,7 +131,11 @@ export const Skeleton = memo((props: SkeletonProps) => {
   }
 
   return (
-    <span aria-live='polite' className={containerClassName} data-testid={containerTestId}>
+    <span
+      aria-live='polite'
+      className={clsx(cls.baseSpan, {}, [containerClassName])}
+      data-testid={containerTestId}
+    >
       {Wrapper
         ? elements.map((element, index) => <Wrapper key={index}>{element}</Wrapper>)
         : elements}