diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 73ba35a47..21571e56e 100644
--- a/client/src/app/page.tsx
+++ b/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() {
Get to login
+
+
+
+
+
+
+
+
+
>
);
}
diff --git a/client/src/shared/assets/icons/crown.tsx b/client/src/shared/assets/icons/crown.tsx
new file mode 100644
index 000000000..f8f563b8b
--- /dev/null
+++ b/client/src/shared/assets/icons/crown.tsx
@@ -0,0 +1,17 @@
+import { FC, SVGProps } from 'react';
+export const Crown: FC> = props => {
+ return (
+
+ );
+};
diff --git a/client/src/shared/assets/icons/index.ts b/client/src/shared/assets/icons/index.ts
index 724e77586..3ede2b469 100644
--- a/client/src/shared/assets/icons/index.ts
+++ b/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';
diff --git a/client/src/shared/ui/flex/flex.module.scss b/client/src/shared/ui/flex/flex.module.scss
index 1ce55374c..d1a5032ce 100644
--- a/client/src/shared/ui/flex/flex.module.scss
+++ b/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);
}
diff --git a/client/src/shared/ui/flex/flex.tsx b/client/src/shared/ui/flex/flex.tsx
index f756be071..d57978ac1 100644
--- a/client/src/shared/ui/flex/flex.tsx
+++ b/client/src/shared/ui/flex/flex.tsx
@@ -95,17 +95,17 @@ export const Flex: React.FC = 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 (
diff --git a/client/src/shared/ui/index.ts b/client/src/shared/ui/index.ts
index 925c487b5..6ee6f928c 100644
--- a/client/src/shared/ui/index.ts
+++ b/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';
diff --git a/client/src/shared/ui/skeleton/index.ts b/client/src/shared/ui/skeleton/index.ts
new file mode 100644
index 000000000..9147f13a9
--- /dev/null
+++ b/client/src/shared/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { Skeleton } from './skeleton';
diff --git a/client/src/shared/ui/skeleton/skeleton.module.scss b/client/src/shared/ui/skeleton/skeleton.module.scss
index d6237b1bf..98645f0f1 100644
--- a/client/src/shared/ui/skeleton/skeleton.module.scss
+++ b/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;
+// }
+//}
diff --git a/client/src/shared/ui/skeleton/skeleton.tsx b/client/src/shared/ui/skeleton/skeleton.tsx
index 1529e31ee..b0724ecb8 100644
--- a/client/src/shared/ui/skeleton/skeleton.tsx
+++ b/client/src/shared/ui/skeleton/skeleton.tsx
@@ -131,7 +131,11 @@ export const Skeleton = memo((props: SkeletonProps) => {
}
return (
-
+
{Wrapper
? elements.map((element, index) => {element})
: elements}