fix(BrandFooter): adjust styles (#1114)

* fix(BrandFooter): adjust styles

* fix: add storybook

Author: PahaN47

src/components/BrandFooter/BrandFooter.scss

@@ -15,8 +15,9 @@ $block: '.#{$ns}brand-footer';
     width: 100%;
     height: 72px;
     margin-top: var(--header-height);
-    color: var(--g-color-text-secondary);
-    border-top: $borderHeight solid var(--g-color-line-generic);
+    box-sizing: content-box;
+    border-top: $borderHeight solid;
+    border-bottom: $borderHeight solid transparent;
     transition: color 0.5s ease-out, border-color 0.5s ease-out;
 
     &::after {
@@ -25,37 +26,45 @@ $block: '.#{$ns}brand-footer';
         right: 0;
         left: 0;
         height: $borderHeight;
+        background: linear-gradient(
+            270deg,
+            rgba(228, 106, 68, 1) 0%,
+            rgba(242, 159, 85, 1) 46.62%,
+            rgba(255, 212, 102, 1) 100%
+        );
+
         opacity: 0;
         transition: opacity 0.5s ease-out;
         content: '';
     }
 
-    &:hover {
-        color: var(--g-color-text-primary);
-        border-color: transparent;
-
-        &::after {
-            opacity: 1;
-        }
-    }
-
     &_theme {
-        &_light::after {
-            background: linear-gradient(
-                270deg,
-                rgba(228, 106, 68, 1) 0%,
-                rgba(242, 159, 85, 1) 46.62%,
-                rgba(255, 212, 102, 1) 100%
-            );
+        &_light {
+            color: var(--g-color-text-secondary);
+            border-top-color: var(--g-color-private-black-200);
+
+            &:hover {
+                color: var(--g-color-text-primary);
+                border-top-color: transparent;
+
+                &::after {
+                    opacity: 1;
+                }
+            }
         }
 
-        &_dark::after {
-            background: linear-gradient(
-                270deg,
-                rgba(228, 106, 68, 0.6) 0%,
-                rgba(242, 159, 85, 0.6) 46.62%,
-                rgba(255, 212, 102, 0.6) 100%
-            );
+        &_dark {
+            color: var(--g-color-private-white-700);
+            border-top-color: var(--g-color-private-white-100);
+
+            &:hover {
+                color: var(--g-color-private-white-1000-solid);
+                border-top-color: transparent;
+
+                &::after {
+                    opacity: 0.6;
+                }
+            }
         }
     }
 
@@ -64,11 +73,6 @@ $block: '.#{$ns}brand-footer';
         align-items: center;
         justify-content: center;
         gap: $indentXXXS;
-        padding-top: 1px;
-    }
-
-    &__text {
-        align-self: flex-end;
     }
 
     &__brand-icon {
@@ -101,10 +105,7 @@ $block: '.#{$ns}brand-footer';
         @include text-body-1();
 
         height: 52px;
-
-        &__content {
-            padding: 0;
-        }
+        border-bottom-width: 0;
 
         &__brand-icon {
             width: 20px;
@@ -114,7 +115,6 @@ $block: '.#{$ns}brand-footer';
         &__brand-name {
             width: 72px;
             height: 16px;
-            margin-top: 0;
         }
     }
 }

src/components/BrandFooter/BrandFooter.tsx

@@ -22,7 +22,7 @@ const BrandFooter = ({className}: ClassNameProps) => {
     return (
         <Link className={b({theme}, className)} href="https://gravity-ui.com">
             <div className={b('content')}>
-                <span className={b('text')}>{i18n('created-on')}</span>
+                <span>{i18n('created-on')}</span>
                 <div className={b('brand-icon')}>
                     {theme === Theme.Light ? <BrandIconLight /> : <BrandIconDark />}
                 </div>

src/components/BrandFooter/__stories__/BrandFooter.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {Meta, StoryFn} from '@storybook/react';
+
+import {ClassNameProps} from '../../../models';
+import BrandFooter from '../BrandFooter';
+
+export default {
+    title: 'Components/BrandFooter',
+    component: BrandFooter,
+} as Meta;
+
+export const Default: StoryFn<ClassNameProps> = (args) => <BrandFooter {...args} />;
+
+Default.args = {};