feat: update github promotion block (#209)

* DATAUI-2403: update github promotion block
gravity-ui · Jun 3, 2024 · e78a2b8 · e78a2b8
1 parent e86d24e
commit e78a2b8
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/public/locales/en/home.json b/public/locales/en/home.json
@@ -32,6 +32,5 @@
     "roadmap_items_item11": "<b>Page constructor:</b> footer block",
     "templates_title": "Start creating with Gravity&nbsp;UI",
     "companies_title": "Trusted by",
-    "github_stars-text": "Do&nbsp;you 💖 Gravity UI? Give&nbsp;us",
-    "github_stars-button": "Star"
+    "github_stars-text": "Do&nbsp;you 💖 Gravity UI? Give&nbsp;us&nbsp;a&nbsp;⭐&nbsp;on&nbsp;Github"
 }
diff --git a/public/locales/ru/home.json b/public/locales/ru/home.json
@@ -32,6 +32,5 @@
     "roadmap_items_item11": "<b>Page constructor:</b> блок футера",
     "templates_title": "Начните создавать проекты с Gravity&nbsp;UI",
     "companies_title": "Нам доверяют",
-    "github_stars-text": "Вам нравится 💖 Gravity UI? Поставьте нам",
-    "github_stars-button": "Звезду"
+    "github_stars-text": "Вам нравится 💖 Gravity UI? Поставьте&nbsp;нам&nbsp;⭐&nbsp;на&nbsp;Github"
 }
diff --git a/src/blocks/GithubStarsBlock/GithubStarsBlock.scss b/src/blocks/GithubStarsBlock/GithubStarsBlock.scss
@@ -15,33 +15,50 @@ $block: '.#{variables.$ns}github-stars-promotion';
     align-items: center;
     justify-content: center;
     gap: var(--g-spacing-2);
-    padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-4);
-    border-radius: var(--g-border-radius-m);
+    padding: var(--g-spacing-2) var(--g-spacing-4);
+    padding-right: var(--g-spacing-2);
     text-decoration: none;
     background: #cda2e7;
 
+    &:hover {
+        background: #e2bbfa;
+    }
+
+    @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+        width: 100%;
+    }
+
     @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) {
+        border-radius: var(--g-border-radius-m);
         transform: translateX(calc(100% + 2 * var(--g-spacing-2)));
         animation: leftBlockAnimation 250ms ease-out forwards;
         animation-delay: 500ms;
     }
 
+    &__text {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+
+        & > .g-icon {
+            flex: 1 0 auto;
+        }
+    }
+
     &__wrapper {
         display: flex;
         justify-content: flex-end;
         align-items: center;
 
-        padding-top: var(--g-spacing-2);
-
         @media (min-width: map-get(pcVariables.$gridBreakpoints, 'sm')) {
             position: absolute;
             overflow: hidden;
             left: 0;
             right: 0;
             z-index: 9;
 
-            padding-left: var(--g-spacing-2);
-            padding-right: var(--g-spacing-2);
+            padding: var(--g-spacing-2);
+            padding-bottom: 0;
 
             &[data-hide='true'] {
                 display: none;
@@ -54,7 +71,7 @@ $block: '.#{variables.$ns}github-stars-promotion';
 
         @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
             justify-content: center;
-
+            margin: 0 -24px;
             &[data-device='desktop'] {
                 display: none;
             }

diff --git a/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx b/src/blocks/GithubStarsBlock/GithubStarsBlock.tsx
@@ -1,6 +1,6 @@
-import {Star} from '@gravity-ui/icons';
+import {ChevronRight} from '@gravity-ui/icons';
 import {Animatable, HTML} from '@gravity-ui/page-constructor';
-import {Button, Icon, Text} from '@gravity-ui/uikit';
+import {Icon, Text} from '@gravity-ui/uikit';
 import {useTranslation} from 'next-i18next';
 import {useRouter} from 'next/router';
 import React, {useEffect, useState} from 'react';
@@ -42,14 +42,10 @@ export const GithubStarsBlock: React.FC<GithubStarsBlockProps> = ({device}) => {
     return (
         <div className={b('wrapper')} data-hide={hide} data-device={device}>
             <a className={b()} href={GITHUB_UI_KIT_URL} target="_blank" onClick={hideBlock}>
-                <Text color="dark-primary" variant="body-2">
+                <Text color="dark-primary" variant="body-2" className={b('text')}>
                     <HTML>{t('home:github_stars-text')}</HTML>
+                    <Icon data={ChevronRight} size="16" />
                 </Text>
-
-                <Button view="normal-contrast" size="m" tabIndex={-1}>
-                    <Icon data={Star} size={16} />
-                    <Text variant="body-1">{t('home:github_stars-button')}</Text>
-                </Button>
             </a>
         </div>
     );