Правки

Timur233 · Sep 27, 2024 · 7bffb22 · 7bffb22
1 parent dac3864
commit 7bffb22
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 228 deletions.
diff --git a/packages/client/src/app/App.scss b/packages/client/src/app/App.scss
diff --git a/packages/client/src/app/App.tsx b/packages/client/src/app/App.tsx
@@ -1,6 +1,3 @@
-// import { useEffect } from 'react'
-
-import '@/app/App.scss'
 import AuthLayout from '@/layouts/AuthLayout/AuthLayout'
 import PrivateLayout from '@/layouts/PrivateLayout/PrivateLayout'
 import PublicLayout from '@/layouts/PublicLayout/PublicLayout'

diff --git a/packages/client/src/components/common/Header/Header.scss b/packages/client/src/components/common/Header/Header.scss
@@ -1,43 +1,41 @@
 @import '../../../scss/vars';
 
 .main-header {
-    &__container {
-        display: flex;
-    }
-
-    &__logo-block {
-        margin-right: auto;
-    }
+  &__container {
+    display: flex;
+    justify-content: space-between;
+  }
 }
 
 .logo-block {
-    user-select: none;
+  user-select: none;
 
-    &__image {
-        width: 114px;
-        margin-bottom: -62px;
-    }
+  &__image {
+    width: 114px;
+    margin-bottom: -62px;
+  }
 }
 
 .main-nav {
-    display: flex;
-    gap: $nav_list-gap;
-    padding: $nav_list-padding-y $nav_list-padding-x;
-
-    &__link {
-        font-size: $nav_link-font-size;
-        font-weight: $nav_link-font-weight;
-        letter-spacing: 1px;
-        
-        text-shadow: $main-text-shadow;
-        text-transform: uppercase;
-        text-decoration: none;
-
-        color: #fff;
-        transition: color $animation-base-speed;
-
-        &:hover, &_active {
-            color: $primary-color;
-        }
+  display: flex;
+  gap: $nav_list-gap;
+  padding: $nav_list-padding-y $nav_list-padding-x;
+
+  &__link {
+    font-size: $nav_link-font-size;
+    font-weight: $nav_link-font-weight;
+    letter-spacing: 1px;
+
+    text-shadow: $main-text-shadow;
+    text-transform: uppercase;
+    text-decoration: none;
+
+    color: $text-color;
+    transition: color $animation-base-speed;
+
+    &:hover,
+    &_active {
+      color: $primary-color;
     }
-}
+  }
+}
diff --git a/packages/client/src/components/common/Header/Header.tsx b/packages/client/src/components/common/Header/Header.tsx
@@ -8,8 +8,8 @@ type HeaderProps = {
 
 export const Header = (props: HeaderProps) => {
   const { className = '' } = props
-  const isActiveNavLink = (isActive: boolean) =>
-    isActive ? 'main-nav__link main-nav__link_active' : 'main-nav__link';
+  const getNavLinkClassName = (isActive: boolean) =>
+    isActive ? 'main-nav__link main-nav__link_active' : 'main-nav__link'
 
   return (
     <header className={`main-header ${className}`}>
@@ -26,22 +26,22 @@ export const Header = (props: HeaderProps) => {
         </div>
         <nav className="main-header__nav main-nav">
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/">
             Главная
           </NavLink>
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/leaderboard">
             Лидеры
           </NavLink>
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/forum">
             Форум
           </NavLink>
           <NavLink
-            className={({ isActive }) => isActiveNavLink(isActive)}
+            className={({ isActive }) => getNavLinkClassName(isActive)}
             to="/profile">
             Профиль
           </NavLink>

diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.scss b/packages/client/src/components/ui/PageTitle/PageTitle.scss
@@ -1,121 +1,120 @@
 @import '../../../scss/vars';
 
 @mixin decorParentPosition {
-    position: absolute;
-    top: - $border-width;
-    left: - $border-width;
-    right: - $border-width;
-    bottom: - $border-width;
+  position: absolute;
+  top: -$border-width;
+  left: -$border-width;
+  right: -$border-width;
+  bottom: -$border-width;
 }
 
-$bg-color: #1E1E1E;
+$bg-color: #1e1e1e;
 $border-width: 7px;
-$border-gradient: 
-    linear-gradient(45deg, #414243, #7F7F7F) top left,
-    linear-gradient(135deg, #7F7F7F, #414243) top right,
-    linear-gradient(225deg, #414243, #414042) bottom right,
-    linear-gradient(315deg, #414042, #414243) bottom left; 
+$border-gradient: linear-gradient(45deg, #414243, #7f7f7f) top left,
+  linear-gradient(135deg, #7f7f7f, #414243) top right,
+  linear-gradient(225deg, #414243, #414042) bottom right,
+  linear-gradient(315deg, #414042, #414243) bottom left;
 $border-radius: 24px;
 $block-width: 350px;
 $outline-color: #101010;
 
 .page-title {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  &__block {
     position: relative;
-    display: flex;
-    justify-content: center;
-
-    &__block {
-        position: relative;
-        display: block;
-        border-radius: $border-radius;
-        z-index: 0;
-        width: $block-width;
-        max-width: 100%;
+    display: block;
+    border-radius: $border-radius;
+    z-index: 0;
+    width: $block-width;
+    max-width: 100%;
+  }
+
+  &__border {
+    @mixin borderDecorSettings($top, $bottom) {
+      content: '';
+      position: absolute;
+      top: $top;
+      bottom: $bottom;
+      left: 0;
+      right: 0;
+      height: $border-width;
+
+      background: url('@/assets/images/svg/title-decor.svg') no-repeat center
+        center;
+      background-size: contain;
+    }
+
+    @include decorParentPosition();
+
+    border-radius: $border-radius;
+    background: $border-gradient;
+    background-size: 50% 50%;
+    background-repeat: no-repeat;
+    z-index: -1;
+    padding: 10px;
+    outline: 3px solid $outline-color;
+
+    &::before {
+      @include borderDecorSettings(0, 'auto');
     }
 
-    &__border {
-        @mixin borderDecorSettings($top, $bottom) {
-            content: '';
-            position: absolute;
-            top: $top;
-            bottom: $bottom;
-            left: 0;
-            right: 0;
-            height: $border-width;
-
-            background: 
-                url('@/assets/images/svg/title-decor.svg') no-repeat center center;
-            background-size: contain;
-        }
-
-        @include decorParentPosition();
-
-        border-radius: $border-radius;
-        background: $border-gradient;
-        background-size: 50% 50%;
-        background-repeat: no-repeat;
-        z-index: -1;
-        padding: 10px;
-        outline: 3px solid $outline-color;
-
-        &::before {
-            @include borderDecorSettings(0, 'auto');
-        }
-
-        &::after {
-            @include borderDecorSettings('auto', 0);
-
-            transform: rotate(180deg);
-        }
+    &::after {
+      @include borderDecorSettings('auto', 0);
+
+      transform: rotate(180deg);
     }
+  }
+
+  &__screws {
+    @mixin screwSettings($left, $right) {
+      content: '';
+      position: absolute;
+      left: $left;
+      right: $right;
+      top: 50%;
+      width: 33px;
+      height: 41px;
+      z-index: -2;
+    }
+
+    @include decorParentPosition();
+
+    &::before {
+      @include screwSettings(0, 'auto');
 
-    &__screws {
-        @mixin screwSettings($left, $right) {
-            content: '';
-            position: absolute;
-            left: $left;
-            right: $right;
-            top: 50%;
-            width: 33px;
-            height: 41px;
-            z-index: -2;
-        }
-
-        @include decorParentPosition();
-
-        &::before {
-            @include screwSettings(0, 'auto');
-
-            transform: translate(calc(-100%), -50%) rotate(180deg);
-            background: 
-                url('@/assets/images/svg/title-decor--bolt.svg') no-repeat center center;
-            background-size: contain;
-        }
-
-        &::after {
-            @include screwSettings('auto', 0);
-
-            transform: translate(calc(100%), -50%);
-            background: 
-                url('@/assets/images/svg/title-decor--bolt.svg') no-repeat center center;
-            background-size: contain;
-        }
+      transform: translate(calc(-100%), -50%) rotate(180deg);
+      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
+        center center;
+      background-size: contain;
     }
 
-    &__content {
-        border-radius: calc($border-radius - 6px);
-        border: 1px solid $primary-color;
-        background-color: $bg-color;
-        text-align: center;
-        color: $text-color;
-        padding: 12px;
-
-        & > * {
-            font-size: 24px;
-            font-weight: 700;
-            letter-spacing: 1px;
-            margin: 0;
-            padding: 0;
-        }
+    &::after {
+      @include screwSettings('auto', 0);
+
+      transform: translate(calc(100%), -50%);
+      background: url('@/assets/images/svg/title-decor--bolt.svg') no-repeat
+        center center;
+      background-size: contain;
+    }
+  }
+
+  &__content {
+    border-radius: calc($border-radius - 6px);
+    border: 1px solid $primary-color;
+    background-color: $bg-color;
+    text-align: center;
+    color: $text-color;
+    padding: 12px;
+
+    & > * {
+      font-size: 24px;
+      font-weight: 700;
+      letter-spacing: 1px;
+      margin: 0;
+      padding: 0;
     }
-}
+  }
+}
diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.tsx b/packages/client/src/components/ui/PageTitle/PageTitle.tsx
@@ -1,21 +1,23 @@
 import './PageTitle.scss'
 import React from 'react'
 
-type PageTitleProps = {
+type PageTitlePropsType = {
   text: string
-  className: string
-  tagName: string
+  className?: string
+  tagName?: string
 }
 
-type DynamicTagElementProps = {
+type DynamicTagElementPropsType = {
   tagName: string
   children: React.ReactNode
 }
 
-export const PageTitle = (props: PageTitleProps) => {
+export const PageTitle = (props: PageTitlePropsType) => {
   const { text, className = '', tagName = 'h2' } = props
-  const DynamicTagElement = ({ tagName, children }: DynamicTagElementProps) =>
-    React.createElement(tagName, null, children)
+  const DynamicTagElement = ({
+    tagName,
+    children,
+  }: DynamicTagElementPropsType) => React.createElement(tagName, null, children)
 
   return (
     <div className={`page-title ${className}`}>