From f3666a4bab9582b09c206b2525e478c83415a507 Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Fri, 29 Sep 2023 16:05:50 +0500
Subject: [PATCH 1/6] feat(changelogDialog): change style, add link

---
 .../__stories__/ChangelogDialog.stories.tsx       |  5 ++++-
 .../ChangelogDialog/components/Item/Item.scss     | 15 ++++++++++-----
 .../ChangelogDialog/components/Item/Item.tsx      | 12 +++++++++++-
 src/components/ChangelogDialog/i18n/en.json       |  3 ++-
 src/components/ChangelogDialog/i18n/ru.json       |  3 ++-
 src/components/ChangelogDialog/types.ts           |  1 +
 6 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
index 278e6e78..f5099481 100644
--- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
+++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
@@ -30,6 +30,7 @@ const items: ChangelogItem[] = [
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
         storyId: 'someStoryId1',
+        link: 'https://github.com/gravity-ui/uikit',
     },
     {
         date: '23 Jun 2022',
@@ -37,6 +38,7 @@ const items: ChangelogItem[] = [
         title: 'New components',
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
+        link: 'https://github.com/gravity-ui/uikit',
     },
     {
         date: '15 Jun 2022',
@@ -65,6 +67,7 @@ const items: ChangelogItem[] = [
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
         storyId: 'someStoryId3',
+        link: 'https://github.com/gravity-ui/uikit',
     },
     {
         date: '10 May 2022',
@@ -108,8 +111,8 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {
     open: false,
     items,
-    fullListLink: 'https://github.com/gravity-ui/uikit',
     onStoryClick: (storyId) => {
+        // eslint-disable-next-line no-console
         console.log(storyId);
     },
 };
diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss
index d14e046f..91f829a1 100644
--- a/src/components/ChangelogDialog/components/Item/Item.scss
+++ b/src/components/ChangelogDialog/components/Item/Item.scss
@@ -2,7 +2,7 @@
 @use '../../../variables';
 
 $block: '.#{variables.$ns}changelog-dialog-item';
-$metaWidth: 124px;
+$metaWidth: 80px;
 
 #{$block} {
     display: flex;
@@ -17,17 +17,18 @@ $metaWidth: 124px;
     }
 
     &__label-new {
-        margin-top: 4px;
+        margin-top: 8px;
     }
 
     &__content {
         flex: 1;
-        margin-left: 16px;
+        margin-left: 20px;
     }
 
     &__title {
         margin: 0;
-        @include mixins.text-subheader-3();
+        @include mixins.text-subheader-2();
+        font-weight: 500;
     }
 
     &__image {
@@ -40,7 +41,11 @@ $metaWidth: 124px;
         margin-top: 12px;
     }
 
-    &__story-button {
+    &__button {
         margin-top: 16px;
     }
+
+    &__button + &__button {
+        margin-left: 16px;
+    }
 }
diff --git a/src/components/ChangelogDialog/components/Item/Item.tsx b/src/components/ChangelogDialog/components/Item/Item.tsx
index cb224be6..6ac0b2e6 100644
--- a/src/components/ChangelogDialog/components/Item/Item.tsx
+++ b/src/components/ChangelogDialog/components/Item/Item.tsx
@@ -42,9 +42,19 @@ export function Item({className, data, onStoryClick}: ItemProps) {
                 {data.description ? (
                     <div className={b('description')}>{data.description}</div>
                 ) : null}
+                {data.link ? (
+                    <Button
+                        className={b('button')}
+                        view="outlined"
+                        href={data.link}
+                        target={'_blank'}
+                    >
+                        {i18n('action_read-more')}
+                    </Button>
+                ) : null}
                 {data.storyId && onStoryClick ? (
                     <Button
-                        className={b('story-button')}
+                        className={b('button')}
                         view="outlined-action"
                         onClick={() => {
                             if (data.storyId) {
diff --git a/src/components/ChangelogDialog/i18n/en.json b/src/components/ChangelogDialog/i18n/en.json
index e3415737..572990dc 100644
--- a/src/components/ChangelogDialog/i18n/en.json
+++ b/src/components/ChangelogDialog/i18n/en.json
@@ -3,5 +3,6 @@
   "link_full_list": "View full changelog",
   "label_new": "New",
   "button_view_story": "View story",
-  "label_empty": "No data"
+  "label_empty": "No data",
+  "action_read-more": "Read more"
 }
diff --git a/src/components/ChangelogDialog/i18n/ru.json b/src/components/ChangelogDialog/i18n/ru.json
index 3a2f875e..c16621b5 100644
--- a/src/components/ChangelogDialog/i18n/ru.json
+++ b/src/components/ChangelogDialog/i18n/ru.json
@@ -3,5 +3,6 @@
   "link_full_list": "Открыть полный список изменений",
   "label_new": "New",
   "button_view_story": "Посмотреть сториз",
-  "label_empty": "Нет данных"
+  "label_empty": "Нет данных",
+  "action_read-more": "Читать далее"
 }
diff --git a/src/components/ChangelogDialog/types.ts b/src/components/ChangelogDialog/types.ts
index 11c7b7ea..5f4f94e0 100644
--- a/src/components/ChangelogDialog/types.ts
+++ b/src/components/ChangelogDialog/types.ts
@@ -11,4 +11,5 @@ export interface ChangelogItem {
     image?: ImageData;
     description: string;
     storyId?: string;
+    link?: string;
 }

From 4499f51635899ef701c56875810c679705446ed2 Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Mon, 16 Oct 2023 16:34:20 +0500
Subject: [PATCH 2/6] fix(ChangelogDialog): rm font-weight style

---
 src/components/ChangelogDialog/components/Item/Item.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss
index 91f829a1..862e6cbb 100644
--- a/src/components/ChangelogDialog/components/Item/Item.scss
+++ b/src/components/ChangelogDialog/components/Item/Item.scss
@@ -28,7 +28,6 @@ $metaWidth: 80px;
     &__title {
         margin: 0;
         @include mixins.text-subheader-2();
-        font-weight: 500;
     }
 
     &__image {

From fb448617269a43665739971ee64959a791cc036c Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Wed, 18 Oct 2023 11:44:30 +0500
Subject: [PATCH 3/6] feat(ChangelogDialog): metrica

---
 .../ChangelogDialog/ChangelogDialog.tsx       | 57 ++++++++++++++++++-
 .../__stories__/ChangelogDialog.stories.tsx   |  6 ++
 .../ChangelogDialog/components/Item/Item.tsx  | 24 +++++---
 src/components/ChangelogDialog/constants.ts   |  6 ++
 src/types.ts                                  |  3 +
 5 files changed, 86 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ChangelogDialog/constants.ts
 create mode 100644 src/types.ts

diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx
index 9bf778ad..5e1f1f7c 100644
--- a/src/components/ChangelogDialog/ChangelogDialog.tsx
+++ b/src/components/ChangelogDialog/ChangelogDialog.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
-import {Dialog, Icon, Link} from '@gravity-ui/uikit';
 import type {DialogProps} from '@gravity-ui/uikit';
+import {Dialog, Icon, Link} from '@gravity-ui/uikit';
 
+import {Metrica} from '../../types';
 import {block} from '../utils/cn';
 
 import {Item} from './components/Item/Item';
+import {Goals} from './constants';
 import i18n from './i18n';
 import type {ChangelogItem} from './types';
 
@@ -23,6 +25,8 @@ export interface ChangelogDialogProps {
     disableOutsideClick?: boolean;
     onClose: DialogProps['onClose'];
     onStoryClick?: (storyId: string) => void;
+    service?: string;
+    metrica?: Metrica;
 }
 
 let nextId = 1;
@@ -39,10 +43,56 @@ export function ChangelogDialog({
     disableOutsideClick,
     onClose,
     onStoryClick,
+    service,
+    metrica,
 }: ChangelogDialogProps) {
     const idRef = React.useRef<number>();
     idRef.current = idRef.current || getNextId();
     const dialogCaptionId = `changelog-dialog-title-${idRef.current}`;
+    const refActionCount = useRef(0);
+
+    useEffect(() => {
+        if (!service || !metrica || !open) return () => {};
+        refActionCount.current = 0;
+
+        metrica.reachGoal(Goals.Show, {service});
+
+        let fired = false;
+        const timeoutId = window.setTimeout(() => {
+            fired = true;
+        }, 3000);
+
+        return () => {
+            clearTimeout(timeoutId);
+            if (!fired && !refActionCount.current) {
+                metrica.reachGoal(Goals.Bounce, {service});
+            }
+            metrica.reachGoal(Goals.Hide, {service});
+        };
+    }, [open, service, metrica]);
+
+    const handleStoryClick = useCallback(
+        (storyId: string) => {
+            refActionCount.current++;
+            if (service && metrica) {
+                metrica.reachGoal(Goals.Click, {service, action: storyId});
+            }
+            if (onStoryClick) {
+                onStoryClick(storyId);
+            }
+        },
+        [onStoryClick, service, metrica],
+    );
+
+    const handleLinkClick = useCallback(
+        (link: string) => {
+            refActionCount.current++;
+            if (service && metrica) {
+                metrica.reachGoal(Goals.Click, {service, action: link});
+            }
+        },
+        [service, metrica],
+    );
 
     return (
         <Dialog
@@ -71,7 +121,8 @@ export function ChangelogDialog({
                             key={index}
                             className={b('item')}
                             data={item}
-                            onStoryClick={onStoryClick}
+                            onStoryClick={handleStoryClick}
+                            onLinkClick={handleLinkClick}
                         />
                     ))
                 ) : (
diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
index f5099481..59a13844 100644
--- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
+++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
@@ -115,4 +115,10 @@ Default.args = {
         // eslint-disable-next-line no-console
         console.log(storyId);
     },
+    service: 'storybook',
+    metrica: {
+        reachGoal: (target: string, params: Record<string, string>) => {
+            console.log('reachGoal', target, params);
+        },
+    },
 };
diff --git a/src/components/ChangelogDialog/components/Item/Item.tsx b/src/components/ChangelogDialog/components/Item/Item.tsx
index 6ac0b2e6..e9bbf000 100644
--- a/src/components/ChangelogDialog/components/Item/Item.tsx
+++ b/src/components/ChangelogDialog/components/Item/Item.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 
 import {CirclePlay} from '@gravity-ui/icons';
 import {Button, Icon, Label} from '@gravity-ui/uikit';
@@ -16,9 +16,22 @@ export interface ItemProps {
     className?: string;
     data: ChangelogItem;
     onStoryClick?: (storyId: string) => void;
+    onLinkClick?: (link: string) => void;
 }
 
-export function Item({className, data, onStoryClick}: ItemProps) {
+export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
+    const handleLinkClick = useCallback(() => {
+        if (onLinkClick && data.link) {
+            onLinkClick(data.link);
+        }
+    }, [data.link, onLinkClick]);
+
+    const handleStoryClick = useCallback(() => {
+        if (onStoryClick && data.storyId) {
+            onStoryClick(data.storyId);
+        }
+    }, [data.storyId, onStoryClick]);
+
     return (
         <article className={b(null, className)}>
             <div className={b('meta')}>
@@ -48,6 +61,7 @@ export function Item({className, data, onStoryClick}: ItemProps) {
                         view="outlined"
                         href={data.link}
                         target={'_blank'}
+                        onClick={handleLinkClick}
                     >
                         {i18n('action_read-more')}
                     </Button>
@@ -56,11 +70,7 @@ export function Item({className, data, onStoryClick}: ItemProps) {
                     <Button
                         className={b('button')}
                         view="outlined-action"
-                        onClick={() => {
-                            if (data.storyId) {
-                                onStoryClick(data.storyId);
-                            }
-                        }}
+                        onClick={handleStoryClick}
                     >
                         {i18n('button_view_story')}
                         <Icon data={CirclePlay} size={14} />
diff --git a/src/components/ChangelogDialog/constants.ts b/src/components/ChangelogDialog/constants.ts
new file mode 100644
index 00000000..9afadc0c
--- /dev/null
+++ b/src/components/ChangelogDialog/constants.ts
@@ -0,0 +1,6 @@
+export enum Goals {
+    Show = 'CHANGELOG_POP-UP_SHOW',
+    Click = 'CHANGELOG_ACTION-BUTTON_CLICK',
+    Hide = 'CHANGELOG_POP-UP_HIDE',
+    Bounce = 'CHANGELOG_POP-UP_BOUNCE',
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..7083c1e1
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,3 @@
+export interface Metrica {
+    reachGoal: (target: string, params: Record<string, string>) => void;
+}

From 6271710412ef2686452b754824a682aeded941d4 Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Wed, 18 Oct 2023 19:18:37 +0500
Subject: [PATCH 4/6] feat(ChangelogDialog): add events

---
 .../ChangelogDialog/ChangelogDialog.tsx       | 61 +++----------------
 .../__stories__/ChangelogDialog.stories.tsx   | 21 ++++---
 src/components/ChangelogDialog/constants.ts   |  6 --
 src/types.ts                                  |  3 -
 4 files changed, 24 insertions(+), 67 deletions(-)
 delete mode 100644 src/components/ChangelogDialog/constants.ts
 delete mode 100644 src/types.ts

diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx
index 5e1f1f7c..8513eb2a 100644
--- a/src/components/ChangelogDialog/ChangelogDialog.tsx
+++ b/src/components/ChangelogDialog/ChangelogDialog.tsx
@@ -1,14 +1,12 @@
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useEffect} from 'react';
 
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
 import type {DialogProps} from '@gravity-ui/uikit';
 import {Dialog, Icon, Link} from '@gravity-ui/uikit';
 
-import {Metrica} from '../../types';
 import {block} from '../utils/cn';
 
 import {Item} from './components/Item/Item';
-import {Goals} from './constants';
 import i18n from './i18n';
 import type {ChangelogItem} from './types';
 
@@ -23,10 +21,10 @@ export interface ChangelogDialogProps {
     items: ChangelogItem[];
     disableBodyScrollLock?: boolean;
     disableOutsideClick?: boolean;
+    onOpen: () => void;
     onClose: DialogProps['onClose'];
+    onLinkClick?: (link: string) => void;
     onStoryClick?: (storyId: string) => void;
-    service?: string;
-    metrica?: Metrica;
 }
 
 let nextId = 1;
@@ -42,57 +40,18 @@ export function ChangelogDialog({
     disableBodyScrollLock = true,
     disableOutsideClick,
     onClose,
+    onOpen,
     onStoryClick,
-    service,
-    metrica,
+    onLinkClick,
 }: ChangelogDialogProps) {
     const idRef = React.useRef<number>();
     idRef.current = idRef.current || getNextId();
     const dialogCaptionId = `changelog-dialog-title-${idRef.current}`;
-    const refActionCount = useRef(0);
 
     useEffect(() => {
-        if (!service || !metrica || !open) return () => {};
-        refActionCount.current = 0;
-
-        metrica.reachGoal(Goals.Show, {service});
-
-        let fired = false;
-        const timeoutId = window.setTimeout(() => {
-            fired = true;
-        }, 3000);
-
-        return () => {
-            clearTimeout(timeoutId);
-            if (!fired && !refActionCount.current) {
-                metrica.reachGoal(Goals.Bounce, {service});
-            }
-            metrica.reachGoal(Goals.Hide, {service});
-        };
-    }, [open, service, metrica]);
-
-    const handleStoryClick = useCallback(
-        (storyId: string) => {
-            refActionCount.current++;
-            if (service && metrica) {
-                metrica.reachGoal(Goals.Click, {service, action: storyId});
-            }
-            if (onStoryClick) {
-                onStoryClick(storyId);
-            }
-        },
-        [onStoryClick, service, metrica],
-    );
-
-    const handleLinkClick = useCallback(
-        (link: string) => {
-            refActionCount.current++;
-            if (service && metrica) {
-                metrica.reachGoal(Goals.Click, {service, action: link});
-            }
-        },
-        [service, metrica],
-    );
+        if (!open) return;
+        onOpen();
+    }, [open, onOpen]);
 
     return (
         <Dialog
@@ -121,8 +80,8 @@ export function ChangelogDialog({
                             key={index}
                             className={b('item')}
                             data={item}
-                            onStoryClick={handleStoryClick}
-                            onLinkClick={handleLinkClick}
+                            onStoryClick={onStoryClick}
+                            onLinkClick={onLinkClick}
                         />
                     ))
                 ) : (
diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
index 59a13844..400d121a 100644
--- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
+++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
@@ -98,8 +98,9 @@ const DefaultTemplate: StoryFn<ChangelogDialogProps> = (props: ChangelogDialogPr
             <ChangelogDialog
                 {...props}
                 open={visible}
-                onClose={() => {
+                onClose={(event, reason) => {
                     setVisible(false);
+                    props.onClose?.(event, reason);
                 }}
             />
         </React.Fragment>
@@ -113,12 +114,18 @@ Default.args = {
     items,
     onStoryClick: (storyId) => {
         // eslint-disable-next-line no-console
-        console.log(storyId);
+        console.log('story click', storyId);
     },
-    service: 'storybook',
-    metrica: {
-        reachGoal: (target: string, params: Record<string, string>) => {
-            console.log('reachGoal', target, params);
-        },
+    onLinkClick: (link) => {
+        // eslint-disable-next-line no-console
+        console.log('link click', link);
+    },
+    onOpen: () => {
+        // eslint-disable-next-line no-console
+        console.log('open');
+    },
+    onClose: () => {
+        // eslint-disable-next-line no-console
+        console.log('close');
     },
 };
diff --git a/src/components/ChangelogDialog/constants.ts b/src/components/ChangelogDialog/constants.ts
deleted file mode 100644
index 9afadc0c..00000000
--- a/src/components/ChangelogDialog/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum Goals {
-    Show = 'CHANGELOG_POP-UP_SHOW',
-    Click = 'CHANGELOG_ACTION-BUTTON_CLICK',
-    Hide = 'CHANGELOG_POP-UP_HIDE',
-    Bounce = 'CHANGELOG_POP-UP_BOUNCE',
-}
diff --git a/src/types.ts b/src/types.ts
deleted file mode 100644
index 7083c1e1..00000000
--- a/src/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface Metrica {
-    reachGoal: (target: string, params: Record<string, string>) => void;
-}

From 8f5783d1d556e1574aea282d9c4907f72c9230ae Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Mon, 23 Oct 2023 16:40:13 +0500
Subject: [PATCH 5/6] fix(ChangelogDialog): rm useless handler

---
 src/components/ChangelogDialog/ChangelogDialog.tsx       | 9 +--------
 .../__stories__/ChangelogDialog.stories.tsx              | 4 ----
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx
index 8513eb2a..bd1a7448 100644
--- a/src/components/ChangelogDialog/ChangelogDialog.tsx
+++ b/src/components/ChangelogDialog/ChangelogDialog.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
 import type {DialogProps} from '@gravity-ui/uikit';
@@ -21,7 +21,6 @@ export interface ChangelogDialogProps {
     items: ChangelogItem[];
     disableBodyScrollLock?: boolean;
     disableOutsideClick?: boolean;
-    onOpen: () => void;
     onClose: DialogProps['onClose'];
     onLinkClick?: (link: string) => void;
     onStoryClick?: (storyId: string) => void;
@@ -40,7 +39,6 @@ export function ChangelogDialog({
     disableBodyScrollLock = true,
     disableOutsideClick,
     onClose,
-    onOpen,
     onStoryClick,
     onLinkClick,
 }: ChangelogDialogProps) {
@@ -48,11 +46,6 @@ export function ChangelogDialog({
     idRef.current = idRef.current || getNextId();
     const dialogCaptionId = `changelog-dialog-title-${idRef.current}`;
 
-    useEffect(() => {
-        if (!open) return;
-        onOpen();
-    }, [open, onOpen]);
-
     return (
         <Dialog
             className={b()}
diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
index 400d121a..64975335 100644
--- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
+++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
@@ -120,10 +120,6 @@ Default.args = {
         // eslint-disable-next-line no-console
         console.log('link click', link);
     },
-    onOpen: () => {
-        // eslint-disable-next-line no-console
-        console.log('open');
-    },
     onClose: () => {
         // eslint-disable-next-line no-console
         console.log('close');

From 7f91889aaf635b5d9e87e7dbe381cace229ae21b Mon Sep 17 00:00:00 2001
From: Anton Vikulov <rndnm@yandex-team.ru>
Date: Mon, 23 Oct 2023 18:08:16 +0500
Subject: [PATCH 6/6] fix(ChangelogDialog): use g-spacing

---
 src/components/ChangelogDialog/ChangelogDialog.scss  |  6 +++---
 .../ChangelogDialog/components/Item/Item.scss        | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss
index 22b81a8f..3a39178f 100644
--- a/src/components/ChangelogDialog/ChangelogDialog.scss
+++ b/src/components/ChangelogDialog/ChangelogDialog.scss
@@ -8,14 +8,14 @@ $maxItemsHeight: 70vh;
     width: $width;
 
     &__full-list-link-icon {
-        margin-left: 4px;
+        margin-left: var(--g-spacing-1);
         vertical-align: middle;
     }
 
     &__items-container {
         max-height: $maxItemsHeight;
         overflow-y: auto;
-        margin-bottom: 20px;
+        margin-bottom: var(--g-spacing-5);
 
         #{$block}__item:last-child {
             margin-bottom: 0;
@@ -23,7 +23,7 @@ $maxItemsHeight: 70vh;
     }
 
     &__item {
-        margin-bottom: 32px;
+        margin-bottom: var(--g-spacing-8);
     }
 
     &__empty-placeholder {
diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss
index 862e6cbb..78b2b805 100644
--- a/src/components/ChangelogDialog/components/Item/Item.scss
+++ b/src/components/ChangelogDialog/components/Item/Item.scss
@@ -17,12 +17,12 @@ $metaWidth: 80px;
     }
 
     &__label-new {
-        margin-top: 8px;
+        margin-top: var(--g-spacing-2);
     }
 
     &__content {
         flex: 1;
-        margin-left: 20px;
+        margin-left: var(--g-spacing-5);
     }
 
     &__title {
@@ -31,20 +31,20 @@ $metaWidth: 80px;
     }
 
     &__image {
-        margin-top: 12px;
+        margin-top: var(--g-spacing-3);
         border-radius: 16px;
         overflow: hidden;
     }
 
     &__description {
-        margin-top: 12px;
+        margin-top: var(--g-spacing-3);
     }
 
     &__button {
-        margin-top: 16px;
+        margin-top: var(--g-spacing-4);
     }
 
     &__button + &__button {
-        margin-left: 16px;
+        margin-left: var(--g-spacing-4);
     }
 }