From 49256d37fca975c3f68d71c825ce26d3dab87ec3 Mon Sep 17 00:00:00 2001 From: Iskandarov Timur Date: Fri, 27 Sep 2024 15:27:33 +0500 Subject: [PATCH] =?UTF-8?q?=20-=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA=D0=B0=20Pag?= =?UTF-8?q?eTitle,=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BE?= =?UTF-8?q?=D0=BA=20=20=D1=81=20=D0=BF=D0=BE=D0=B4=D0=BB=D0=BE=D0=B6=D0=BA?= =?UTF-8?q?=D0=BE=D0=B9=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B8=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BB=20=D0=B2=20=D0=A1ustomPageTitle=20=20-?= =?UTF-8?q?=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20tag=20main=20?= =?UTF-8?q?=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=20PublicLayout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/CustomPageTitle/CustomPageTitle.scss | 120 ++++++++++++++++++ .../ui/CustomPageTitle/CustomPageTitle.tsx | 34 +++++ .../components/ui/PageTitle/PageTitle.scss | 104 +-------------- .../src/components/ui/PageTitle/PageTitle.tsx | 3 - .../src/layouts/PublicLayout/PublicLayout.tsx | 4 +- packages/client/src/pages/Main/Main.tsx | 4 +- 6 files changed, 163 insertions(+), 106 deletions(-) create mode 100644 packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss create mode 100644 packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.tsx diff --git a/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss b/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss new file mode 100644 index 0000000..087ee8e --- /dev/null +++ b/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss @@ -0,0 +1,120 @@ +@import '../../../scss/vars'; + +@mixin decorParentPosition { + position: absolute; + top: -$border-width; + left: -$border-width; + right: -$border-width; + bottom: -$border-width; +} + +$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-radius: 24px; +$block-width: 350px; +$outline-color: #101010; + +.custom-page-title { + 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%; + } + + &__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); + } + } + + &__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; + } + } + + &__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/CustomPageTitle/CustomPageTitle.tsx b/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.tsx new file mode 100644 index 0000000..ab14fd5 --- /dev/null +++ b/packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.tsx @@ -0,0 +1,34 @@ +import './CustomPageTitle.scss' +import React from 'react' + +type PageTitlePropsType = { + text: string + className?: string + tagName?: string +} + +type DynamicTagElementPropsType = { + tagName: string + children: React.ReactNode +} + +export const CustomPageTitle = (props: PageTitlePropsType) => { + const { text, className = '', tagName = 'h2' } = props + const DynamicTagElement = ({ + tagName, + children, + }: DynamicTagElementPropsType) => React.createElement(tagName, null, children) + + return ( +
+
+
+
+ +
+ {text} +
+
+
+ ) +} diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.scss b/packages/client/src/components/ui/PageTitle/PageTitle.scss index 97832d2..8dc569d 100644 --- a/packages/client/src/components/ui/PageTitle/PageTitle.scss +++ b/packages/client/src/components/ui/PageTitle/PageTitle.scss @@ -1,118 +1,24 @@ @import '../../../scss/vars'; -@mixin decorParentPosition { - position: absolute; - top: -$border-width; - left: -$border-width; - right: -$border-width; - bottom: -$border-width; -} - -$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-radius: 24px; -$block-width: 350px; -$outline-color: #101010; - .page-title { position: relative; - display: flex; - justify-content: center; + display: block; + margin-bottom: 28px; &__block { position: relative; 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'); - } - - &::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'); - - 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; - } } &__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-size: 28px; font-weight: 700; + text-transform: uppercase; letter-spacing: 1px; + text-shadow: $main-text-shadow; margin: 0; padding: 0; } diff --git a/packages/client/src/components/ui/PageTitle/PageTitle.tsx b/packages/client/src/components/ui/PageTitle/PageTitle.tsx index fba38f8..f5ab100 100644 --- a/packages/client/src/components/ui/PageTitle/PageTitle.tsx +++ b/packages/client/src/components/ui/PageTitle/PageTitle.tsx @@ -22,9 +22,6 @@ export const PageTitle = (props: PageTitlePropsType) => { return (
-
-
-
{text}
diff --git a/packages/client/src/layouts/PublicLayout/PublicLayout.tsx b/packages/client/src/layouts/PublicLayout/PublicLayout.tsx index 3a2f4b4..be32a27 100644 --- a/packages/client/src/layouts/PublicLayout/PublicLayout.tsx +++ b/packages/client/src/layouts/PublicLayout/PublicLayout.tsx @@ -6,9 +6,9 @@ export default function PublicLayout() { return (
-
+
-
+
) } diff --git a/packages/client/src/pages/Main/Main.tsx b/packages/client/src/pages/Main/Main.tsx index 6cac5c8..e0c06dd 100644 --- a/packages/client/src/pages/Main/Main.tsx +++ b/packages/client/src/pages/Main/Main.tsx @@ -1,6 +1,6 @@ import './Main.scss' import { useEffect, useState } from 'react' -import { PageTitle } from '@/components/ui/PageTitle/PageTitle' +import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle' import { Button } from '@/components/ui/Button/Button' import { EnemyTank } from './components/EnemyTanks/EnemyTank' @@ -18,7 +18,7 @@ export const Main = () => {
-