From 0ee1db7fd816aa642ac03e6a512f3f2cdf6064a5 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Fri, 15 Mar 2024 14:31:59 +0200
Subject: [PATCH 1/4] [Button in Modals amd Forms]: changed Ok color to primary

---
 app/src/common/apiReference/typeRefRTEPlugin.tsx            | 4 ++--
 .../common/appFooterDemo/demoToolbar/DescriptionModal.tsx   | 2 +-
 app/src/demo/form/DemoForm.tsx                              | 2 +-
 app/src/docs/_examples/badge/Attributes.example.tsx         | 2 +-
 app/src/docs/_examples/badge/Dropdown.example.tsx           | 3 ++-
 app/src/docs/_examples/badge/Types.example.tsx              | 6 +++---
 app/src/docs/_examples/dropdown/CloseFromBody.example.tsx   | 2 +-
 app/src/docs/_examples/dropdownContainer/Basic.example.tsx  | 2 +-
 .../FocusLockAndKeyboardNavigation.example.tsx              | 2 +-
 app/src/docs/_examples/form/Advanced.example.tsx            | 2 +-
 app/src/docs/_examples/form/Basic.example.tsx               | 2 +-
 app/src/docs/_examples/form/ComplexValidation.example.tsx   | 4 ++--
 app/src/docs/_examples/form/FormLeaveHandling.example.tsx   | 2 +-
 .../docs/_examples/form/FormValidateOnChange.example.tsx    | 2 +-
 app/src/docs/_examples/form/FormWIthClasses.example.tsx     | 4 ++--
 .../_examples/form/HandleSuccessSaveAndError.example.tsx    | 2 +-
 app/src/docs/_examples/form/ServerValidation.example.tsx    | 4 ++--
 app/src/docs/_examples/modals/Basic.example.tsx             | 2 +-
 .../modals/DisableClickOutsideAndCross.example.tsx          | 2 +-
 app/src/docs/_examples/modals/ModalWithForm.example.tsx     | 2 +-
 app/src/docs/_examples/tables/EditableTable.example.tsx     | 6 +++---
 app/src/docs/panel/panelExamples.tsx                        | 4 ++--
 app/src/sandbox/scroll-spy/ScrollSpyModal.tsx               | 4 ++--
 uui-editor/src/plugins/imagePlugin/AddImageModal.tsx        | 6 +++---
 uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx          | 3 ++-
 uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx        | 4 ++--
 uui/components/overlays/ConfirmationModal.tsx               | 2 +-
 .../__tests__/__snapshots__/ConfirmationModal.test.tsx.snap | 4 ++--
 uui/components/pickers/PickerModal.tsx                      | 2 +-
 .../__tests__/__snapshots__/PickerList.test.tsx.snap        | 2 +-
 .../__tests__/__snapshots__/PickerModal.test.tsx.snap       | 6 +++---
 31 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/app/src/common/apiReference/typeRefRTEPlugin.tsx b/app/src/common/apiReference/typeRefRTEPlugin.tsx
index 43f3be408f..b7b4acb919 100644
--- a/app/src/common/apiReference/typeRefRTEPlugin.tsx
+++ b/app/src/common/apiReference/typeRefRTEPlugin.tsx
@@ -102,9 +102,9 @@ export function AddTypeRefTableModal({ editor, success, abort, ...props }: AddTy
                 </FlexRow>
                 <ModalFooter borderTop>
                     <FlexSpacer />
-                    <Button color="secondary" caption="Cancel" onClick={ () => abort() } />
+                    <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => abort() } />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Ok"
                         isDisabled={ !typePath }
                         onClick={ createTypeRefTableBlock }
diff --git a/app/src/common/appFooterDemo/demoToolbar/DescriptionModal.tsx b/app/src/common/appFooterDemo/demoToolbar/DescriptionModal.tsx
index 6a237f7551..4515110ae5 100644
--- a/app/src/common/appFooterDemo/demoToolbar/DescriptionModal.tsx
+++ b/app/src/common/appFooterDemo/demoToolbar/DescriptionModal.tsx
@@ -73,7 +73,7 @@ export function DescriptionModal(props: IDemoItemDescriptionModal) {
                 <ModalFooter borderTop>
                     <FlexSpacer />
                     <Button color="gray" fill="white" caption="Cancel" onClick={ handleClose } />
-                    {!isReadOnly() && <Button color="green" caption="Save" onClick={ handleSaveAndClose } />}
+                    {!isReadOnly() && <Button color="primary" caption="Save" onClick={ handleSaveAndClose } />}
                 </ModalFooter>
             </ModalWindow>
         </ModalBlocker>
diff --git a/app/src/demo/form/DemoForm.tsx b/app/src/demo/form/DemoForm.tsx
index 9725b51b20..c08a8746a2 100644
--- a/app/src/demo/form/DemoForm.tsx
+++ b/app/src/demo/form/DemoForm.tsx
@@ -520,7 +520,7 @@ export function DemoForm() {
                     <hr className={ css.divider } />
                     <FlexRow columnGap="12">
                         <FlexSpacer />
-                        <Button caption="Save" color="accent" onClick={ save } />
+                        <Button caption="Save" color="primary" onClick={ save } />
                     </FlexRow>
                 </FlexCell>
             </Panel>
diff --git a/app/src/docs/_examples/badge/Attributes.example.tsx b/app/src/docs/_examples/badge/Attributes.example.tsx
index 1b6f658d76..b9cef1cfda 100644
--- a/app/src/docs/_examples/badge/Attributes.example.tsx
+++ b/app/src/docs/_examples/badge/Attributes.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Avatar, FlexCell, FlexRow, Panel, Text, Badge } from '@epam/uui';
 
-import { ReactComponent as notificationIcon } from '@epam/assets/icons/common/notification-done-12.svg';
+import { ReactComponent as notificationIcon } from '@epam/assets/icons/notification-done-outline.svg';
 import css from './AttributesExample.module.scss';
 
 export default function AttributesExample() {
diff --git a/app/src/docs/_examples/badge/Dropdown.example.tsx b/app/src/docs/_examples/badge/Dropdown.example.tsx
index e428b6096f..e165e8907d 100644
--- a/app/src/docs/_examples/badge/Dropdown.example.tsx
+++ b/app/src/docs/_examples/badge/Dropdown.example.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Dropdown, DropdownContainer, DropdownMenuButton, FlexRow, Badge } from '@epam/uui';
-import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
+import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
+
 import { DropdownBodyProps } from '@epam/uui-core';
 import css from './DropdownExample.module.scss';
 
diff --git a/app/src/docs/_examples/badge/Types.example.tsx b/app/src/docs/_examples/badge/Types.example.tsx
index 904cb4e73a..a7d702ae0e 100644
--- a/app/src/docs/_examples/badge/Types.example.tsx
+++ b/app/src/docs/_examples/badge/Types.example.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dropdown, FlexRow, Panel, Text, Badge } from '@epam/uui';
-import { ReactComponent as mediaIcon } from '@epam/assets/icons/common/media-play-fill-18.svg';
-import { ReactComponent as doneIcon } from '@epam/assets/icons/common/notification-done-24.svg';
-import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
+import { ReactComponent as mediaIcon } from '@epam/assets/icons/media-play-fill-opt.2.svg';
+import { ReactComponent as doneIcon } from '@epam/assets/icons/notification-done-outline.svg';
+import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
 
 export default function TypesExample() {
     return (
diff --git a/app/src/docs/_examples/dropdown/CloseFromBody.example.tsx b/app/src/docs/_examples/dropdown/CloseFromBody.example.tsx
index ffb740c391..d83aeee2ea 100644
--- a/app/src/docs/_examples/dropdown/CloseFromBody.example.tsx
+++ b/app/src/docs/_examples/dropdown/CloseFromBody.example.tsx
@@ -18,7 +18,7 @@ export default function BasicDropdownExample() {
                 </FlexCell>
                 <FlexCell alignSelf="flex-start">
                     <FlexRow columnGap="12">
-                        <Button color="accent" size="30" caption="Some Action" onClick={ () => null } />
+                        <Button color="primary" size="30" caption="Some Action" onClick={ () => null } />
                         <Button fill="outline" size="30" color="secondary" caption="Cancel" onClick={ () => props.onClose() } />
                     </FlexRow>
                 </FlexCell>
diff --git a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
index 3c8801e985..ab339abae1 100644
--- a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
+++ b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
@@ -20,7 +20,7 @@ export default function BasicExample() {
                 </FlexCell>
                 <FlexCell alignSelf="flex-start">
                     <FlexRow spacing="12">
-                        <Button color="accent" size="30" caption="Some Action" onClick={ () => null } />
+                        <Button color="primary" size="30" caption="Some Action" onClick={ () => null } />
                         <Button color="secondary" fill="outline" size="30" caption="Cancel" onClick={ () => null } />
                     </FlexRow>
                 </FlexCell>
diff --git a/app/src/docs/_examples/dropdownContainer/FocusLockAndKeyboardNavigation.example.tsx b/app/src/docs/_examples/dropdownContainer/FocusLockAndKeyboardNavigation.example.tsx
index 21f68f1e22..67a9bbb4c7 100644
--- a/app/src/docs/_examples/dropdownContainer/FocusLockAndKeyboardNavigation.example.tsx
+++ b/app/src/docs/_examples/dropdownContainer/FocusLockAndKeyboardNavigation.example.tsx
@@ -19,7 +19,7 @@ export default function FocusLockAndKeyboardNavigationExample() {
                 </Text>
                 <FlexCell>
                     <FlexRow spacing="12">
-                        <Button color="accent" size="30" caption="Some Action" onClick={ () => null } />
+                        <Button color="primary" size="30" caption="Some Action" onClick={ () => null } />
                         <Button fill="outline" size="30" color="neutral" caption="Cancel" onClick={ () => null } />
                     </FlexRow>
                 </FlexCell>
diff --git a/app/src/docs/_examples/form/Advanced.example.tsx b/app/src/docs/_examples/form/Advanced.example.tsx
index 1f9ff56fad..1333e69689 100644
--- a/app/src/docs/_examples/form/Advanced.example.tsx
+++ b/app/src/docs/_examples/form/Advanced.example.tsx
@@ -117,7 +117,7 @@ export default function AdvancedFormExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/form/Basic.example.tsx b/app/src/docs/_examples/form/Basic.example.tsx
index 4140e8109b..dba49804aa 100644
--- a/app/src/docs/_examples/form/Basic.example.tsx
+++ b/app/src/docs/_examples/form/Basic.example.tsx
@@ -69,7 +69,7 @@ export default function BasicFormExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/form/ComplexValidation.example.tsx b/app/src/docs/_examples/form/ComplexValidation.example.tsx
index 4df11cdf9e..6cebf5bd0b 100644
--- a/app/src/docs/_examples/form/ComplexValidation.example.tsx
+++ b/app/src/docs/_examples/form/ComplexValidation.example.tsx
@@ -62,11 +62,11 @@ export default function ComplexFormValidationExample() {
         <FlexCell width="100%">
             { lens.get().map(renderUser) }
             <FlexRow>
-                <Button caption="Add user" onClick={ () => lens.update((current) => [...current, emptyUser]) } color="primary" />
+                <Button caption="Add user" onClick={ () => lens.update((current) => [...current, emptyUser]) } color="primary" fill="outline" />
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/form/FormLeaveHandling.example.tsx b/app/src/docs/_examples/form/FormLeaveHandling.example.tsx
index ad8df37ec8..69e8aa782b 100644
--- a/app/src/docs/_examples/form/FormLeaveHandling.example.tsx
+++ b/app/src/docs/_examples/form/FormLeaveHandling.example.tsx
@@ -46,7 +46,7 @@ export default function FormLeaveHandlingExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/form/FormValidateOnChange.example.tsx b/app/src/docs/_examples/form/FormValidateOnChange.example.tsx
index 76f7d265e8..3734edfba8 100644
--- a/app/src/docs/_examples/form/FormValidateOnChange.example.tsx
+++ b/app/src/docs/_examples/form/FormValidateOnChange.example.tsx
@@ -69,7 +69,7 @@ export default function BasicFormExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/form/FormWIthClasses.example.tsx b/app/src/docs/_examples/form/FormWIthClasses.example.tsx
index de6c9ae2fc..17dbd5dc0c 100644
--- a/app/src/docs/_examples/form/FormWIthClasses.example.tsx
+++ b/app/src/docs/_examples/form/FormWIthClasses.example.tsx
@@ -35,8 +35,8 @@ export default function FormWIthClassesExample() {
             </FlexRow>
             <FlexRow vPadding="12" columnGap="12">
                 <FlexSpacer />
-                <Button caption="Validate" onClick={ validate } color="primary" />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Validate" onClick={ validate } color="primary" fill="outline" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/form/HandleSuccessSaveAndError.example.tsx b/app/src/docs/_examples/form/HandleSuccessSaveAndError.example.tsx
index debfee0286..7a7640f888 100644
--- a/app/src/docs/_examples/form/HandleSuccessSaveAndError.example.tsx
+++ b/app/src/docs/_examples/form/HandleSuccessSaveAndError.example.tsx
@@ -57,7 +57,7 @@ export default function HandleSuccessSaveAndErrorExample() {
             </FlexRow>
             <FlexRow vPadding="12">
                 <FlexSpacer />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/form/ServerValidation.example.tsx b/app/src/docs/_examples/form/ServerValidation.example.tsx
index 1921bfd913..b78e25cddb 100644
--- a/app/src/docs/_examples/form/ServerValidation.example.tsx
+++ b/app/src/docs/_examples/form/ServerValidation.example.tsx
@@ -77,8 +77,8 @@ export default function ServerValidationExample() {
             </FlexRow>
             <FlexRow vPadding="12" columnGap="12">
                 <FlexSpacer />
-                <Button caption="Validate" onClick={ validate } />
-                <Button caption="Save" onClick={ save } color="accent" />
+                <Button caption="Validate" onClick={ validate } color="primary" fill="outline" />
+                <Button caption="Save" onClick={ save } color="primary" />
             </FlexRow>
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/modals/Basic.example.tsx b/app/src/docs/_examples/modals/Basic.example.tsx
index 53b15a7a4a..3a4ce739c4 100644
--- a/app/src/docs/_examples/modals/Basic.example.tsx
+++ b/app/src/docs/_examples/modals/Basic.example.tsx
@@ -58,7 +58,7 @@ export function BasicModalExample(modalProps: IModal<string>) {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => modalProps.abort() } />
-                        <Button color="accent" caption="Ok" onClick={ () => modalProps.success('Success action') } />
+                        <Button color="primary" caption="Ok" onClick={ () => modalProps.success('Success action') } />
                     </ModalFooter>
                 </Panel>
             </ModalWindow>
diff --git a/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx b/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
index e05c620cf2..871ffefbb9 100644
--- a/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
+++ b/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
@@ -21,7 +21,7 @@ function ModalWithDisabledClickOutsideAndCross(props: IModal<string>) {
                     <ModalFooter>
                         <FlexSpacer />
                         <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => props.abort() } />
-                        <Button color="accent" caption="Ok" onClick={ () => props.success('Success action') } />
+                        <Button color="primary" caption="Ok" onClick={ () => props.success('Success action') } />
                     </ModalFooter>
                 </Panel>
             </ModalWindow>
diff --git a/app/src/docs/_examples/modals/ModalWithForm.example.tsx b/app/src/docs/_examples/modals/ModalWithForm.example.tsx
index 5c3be2eeba..020b6857a0 100644
--- a/app/src/docs/_examples/modals/ModalWithForm.example.tsx
+++ b/app/src/docs/_examples/modals/ModalWithForm.example.tsx
@@ -80,7 +80,7 @@ function ModalWithFormExample(modalProps: IModal<Person>) {
                     <ModalFooter borderTop>
                         <FlexSpacer />
                         <Button color="secondary" fill="outline" onClick={ () => close().then(modalProps.abort) } caption="Cancel" />
-                        <Button color="accent" caption="Confirm" onClick={ save } />
+                        <Button color="primary" caption="Confirm" onClick={ save } />
                     </ModalFooter>
                     <FlexSpacer />
                 </ScrollBars>
diff --git a/app/src/docs/_examples/tables/EditableTable.example.tsx b/app/src/docs/_examples/tables/EditableTable.example.tsx
index f53e526d14..b57b8afd16 100644
--- a/app/src/docs/_examples/tables/EditableTable.example.tsx
+++ b/app/src/docs/_examples/tables/EditableTable.example.tsx
@@ -191,14 +191,14 @@ export default function EditableTableExample() {
             {/* Render a panel with Save/Revert buttons to control the form */}
             <FlexRow columnGap="12" padding="12" vPadding="12" borderBottom>
                 <FlexCell width="auto">
-                    <Button caption="Add task" onClick={ handleNewItem } />
+                    <Button caption="Add task" fill="outline" color="primary" onClick={ handleNewItem } />
                 </FlexCell>
                 <FlexSpacer />
                 <FlexCell width="auto">
-                    <Button caption="Revert" onClick={ revert } isDisabled={ !isChanged } color="secondary" />
+                    <Button caption="Revert" onClick={ revert } isDisabled={ !isChanged } color="secondary" fill="outline" />
                 </FlexCell>
                 <FlexCell width="auto">
-                    <Button caption="Save" onClick={ save } color="accent" isDisabled={ !isChanged } />
+                    <Button caption="Save" onClick={ save } color="primary" isDisabled={ !isChanged } />
                 </FlexCell>
             </FlexRow>
             <FlexRow>
diff --git a/app/src/docs/panel/panelExamples.tsx b/app/src/docs/panel/panelExamples.tsx
index bf44264e57..f03d21edf1 100644
--- a/app/src/docs/panel/panelExamples.tsx
+++ b/app/src/docs/panel/panelExamples.tsx
@@ -78,8 +78,8 @@ export const childrenExamples = [
                 </FlexRow>
                 <ModalFooter borderTop>
                     <FlexSpacer />
-                    <Button caption="Cancel" onClick={ () => {} } color="secondary" />
-                    <Button caption="Ok" onClick={ () => {} } color="accent" fill="solid" />
+                    <Button caption="Cancel" onClick={ () => {} } color="secondary" fill="outline" />
+                    <Button caption="Ok" onClick={ () => {} } color="primary" fill="solid" />
                 </ModalFooter>
             </>
         ),
diff --git a/app/src/sandbox/scroll-spy/ScrollSpyModal.tsx b/app/src/sandbox/scroll-spy/ScrollSpyModal.tsx
index f85d804248..eb8f4e64f0 100644
--- a/app/src/sandbox/scroll-spy/ScrollSpyModal.tsx
+++ b/app/src/sandbox/scroll-spy/ScrollSpyModal.tsx
@@ -26,9 +26,9 @@ export function ScrollSpyModal() {
                             </ScrollBars>
                             <ModalFooter>
                                 <FlexSpacer />
-                                <Button color="gray" fill="white" caption="Cancel" onClick={ () => modalProps.abort() } />
+                                <Button color="secondary" fill="white" caption="Cancel" onClick={ () => modalProps.abort() } />
                                 <Button
-                                    color="green"
+                                    color="primary"
                                     caption="Ok"
                                     onClick={ () => {
                                         scrollToElement('b');
diff --git a/uui-editor/src/plugins/imagePlugin/AddImageModal.tsx b/uui-editor/src/plugins/imagePlugin/AddImageModal.tsx
index 37673e8a94..f993ee32c7 100644
--- a/uui-editor/src/plugins/imagePlugin/AddImageModal.tsx
+++ b/uui-editor/src/plugins/imagePlugin/AddImageModal.tsx
@@ -31,7 +31,7 @@ export function AddImageModal(props: AddImageModalProps): JSX.Element {
                 </FlexRow>
                 <ModalFooter borderTop>
                     <UploadFileToggler
-                        render={ (props) => <Button { ...props } caption="Select file" /> }
+                        render={ (props) => <Button color="primary" fill="outline" { ...props } caption="Select file" /> }
                         onFilesAdded={ (acceptedFiles: File[]) => {
                             const urlName = acceptedFiles.map(({ name }) => name).join('; ');
                             setImageURL(urlName);
@@ -40,9 +40,9 @@ export function AddImageModal(props: AddImageModalProps): JSX.Element {
                         accept="image/*"
                     />
                     <FlexSpacer />
-                    <Button color="secondary" caption="Cancel" onClick={ abort } />
+                    <Button color="secondary" fill="outline" caption="Cancel" onClick={ abort } />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Ok"
                         isDisabled={ !imageURL }
                         onClick={ async () => {
diff --git a/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx b/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx
index 0449aeffe4..5d3272a083 100644
--- a/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx
+++ b/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx
@@ -55,6 +55,7 @@ export function AddLinkModal({ editor, ...modalProps }: AddLinkModalProps) {
                     <FlexSpacer />
                     <Button
                         color="secondary"
+                        fill="outline"
                         caption="Delete"
                         onClick={ () => {
                             setLink('');
@@ -63,7 +64,7 @@ export function AddLinkModal({ editor, ...modalProps }: AddLinkModalProps) {
                         } }
                     />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Save"
                         onClick={ () => {
                             upsertLink(editor, {
diff --git a/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx b/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx
index 161afe7ea3..1c82d28416 100644
--- a/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx
+++ b/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx
@@ -70,9 +70,9 @@ export function AddVideoModal({ editor, success, abort, ...props }: AddVideoModa
                 </FlexRow>
                 <ModalFooter borderTop>
                     <FlexSpacer />
-                    <Button color="secondary" caption="Cancel" onClick={ () => abort() } />
+                    <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => abort() } />
                     <Button
-                        color="accent"
+                        color="primary"
                         caption="Ok"
                         isDisabled={ !src }
                         onClick={ createVideoBlock }
diff --git a/uui/components/overlays/ConfirmationModal.tsx b/uui/components/overlays/ConfirmationModal.tsx
index 004a96aa4b..b7ab007b96 100644
--- a/uui/components/overlays/ConfirmationModal.tsx
+++ b/uui/components/overlays/ConfirmationModal.tsx
@@ -32,7 +32,7 @@ export class ConfirmationModal extends React.Component<ConfirmationModalWindowPr
                         {this.props.hideCancelButton || (
                             <Button caption={ i18n.form.modals.discardButton } onClick={ () => this.props.success(false) } fill="outline" color="secondary" />
                         )}
-                        <Button caption={ i18n.form.modals.saveButton } onClick={ () => this.props.success(true) } color="accent" />
+                        <Button caption={ i18n.form.modals.saveButton } onClick={ () => this.props.success(true) } color="primary" />
                     </ModalFooter>
                 </ModalWindow>
             </ModalBlocker>
diff --git a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
index 41eefc003d..d79f562b3d 100644
--- a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
+++ b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -163,7 +163,7 @@ exports[`ConfirmationModal should be rendered correctly 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"
@@ -334,7 +334,7 @@ exports[`ConfirmationModal should be rendered correctly without body 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"
diff --git a/uui/components/pickers/PickerModal.tsx b/uui/components/pickers/PickerModal.tsx
index 646c988912..35761da585 100644
--- a/uui/components/pickers/PickerModal.tsx
+++ b/uui/components/pickers/PickerModal.tsx
@@ -90,7 +90,7 @@ export function PickerModal<TItem, TId>(props: PickerModalProps<TItem, TId>) {
                 )}
                 <FlexSpacer />
                 <Button fill="outline" color="secondary" caption={ i18n.pickerModal.cancelButton } onClick={ () => props.abort() } />
-                <Button color="accent" caption={ i18n.pickerModal.selectButton } onClick={ () => props.success(selection as any) } />
+                <Button color="primary" caption={ i18n.pickerModal.selectButton } onClick={ () => props.success(selection as any) } />
             </>
         );
     };
diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap
index ff6056a647..2ef55bfd19 100644
--- a/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap
+++ b/uui/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap
@@ -762,7 +762,7 @@ exports[`PickerList should open body 1`] = `
             </div>
           </button>
           <button
-            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
             tabindex="0"
             type="button"
           >
diff --git a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
index b29dfda34b..78a6e197b9 100644
--- a/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
+++ b/uui/components/pickers/__tests__/__snapshots__/PickerModal.test.tsx.snap
@@ -415,7 +415,7 @@ exports[`PickerModal should be rendered correctly 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"
@@ -1796,7 +1796,7 @@ exports[`PickerModal should be rendered correctly with maximum props 1`] = `
         </div>
       </button>
       <button
-        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+        className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
         onClick={[Function]}
         tabIndex={0}
         type="button"
@@ -2048,7 +2048,7 @@ exports[`PickerModal should open body 1`] = `
             </div>
           </button>
           <button
-            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-accent uui-size-36"
+            class="uui-button-box uui-enabled -clickable container root uui-button uui-fill-solid uui-color-primary uui-size-36"
             tabindex="0"
             type="button"
           >

From 9e6b2e82e8b3e995716593f0d5dffc7681501241 Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Mon, 18 Mar 2024 15:23:25 +0200
Subject: [PATCH 2/4] [DndModule]: fixed styles after FlexRow changes

---
 app/src/demo/dnd/DndModule.module.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/src/demo/dnd/DndModule.module.scss b/app/src/demo/dnd/DndModule.module.scss
index e105c84373..7f2addbcec 100644
--- a/app/src/demo/dnd/DndModule.module.scss
+++ b/app/src/demo/dnd/DndModule.module.scss
@@ -23,15 +23,12 @@
         background-color: var(--uui-surface-main);
     }
 
-    .item {
-        background-color: var(--uui-surface-main);
-    }
-
     .module-icon {
         width: 36px;
         height: 36px;
         padding: 6px;
-        margin: auto;
+        margin-top: auto;
+        margin-bottom: auto;
         border-radius: 50%;
         box-sizing: border-box;
 

From 0cfa030645e7aab49c8bd318a969efc1ce41e4bc Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Mon, 18 Mar 2024 15:51:57 +0200
Subject: [PATCH 3/4] [DndModule]: fixed demo styles

---
 app/src/demo/dnd/DndModule.module.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/src/demo/dnd/DndModule.module.scss b/app/src/demo/dnd/DndModule.module.scss
index 7f2addbcec..6d31dd9795 100644
--- a/app/src/demo/dnd/DndModule.module.scss
+++ b/app/src/demo/dnd/DndModule.module.scss
@@ -27,10 +27,9 @@
         width: 36px;
         height: 36px;
         padding: 6px;
-        margin-top: auto;
-        margin-bottom: auto;
         border-radius: 50%;
         box-sizing: border-box;
+        align-self: center;
 
         &.complete-icon {
             background-color: #EEFFCC;

From b8f102525f54c7c7440ace440c5410ddc4076a4c Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Mon, 18 Mar 2024 16:11:41 +0200
Subject: [PATCH 4/4] [Badge demo]: fixed icons

---
 app/src/docs/_examples/badge/Attributes.example.tsx | 2 +-
 app/src/docs/_examples/badge/Dropdown.example.tsx   | 2 +-
 app/src/docs/_examples/badge/Types.example.tsx      | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/docs/_examples/badge/Attributes.example.tsx b/app/src/docs/_examples/badge/Attributes.example.tsx
index 1b6f658d76..b9cef1cfda 100644
--- a/app/src/docs/_examples/badge/Attributes.example.tsx
+++ b/app/src/docs/_examples/badge/Attributes.example.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Avatar, FlexCell, FlexRow, Panel, Text, Badge } from '@epam/uui';
 
-import { ReactComponent as notificationIcon } from '@epam/assets/icons/common/notification-done-12.svg';
+import { ReactComponent as notificationIcon } from '@epam/assets/icons/notification-done-outline.svg';
 import css from './AttributesExample.module.scss';
 
 export default function AttributesExample() {
diff --git a/app/src/docs/_examples/badge/Dropdown.example.tsx b/app/src/docs/_examples/badge/Dropdown.example.tsx
index e428b6096f..0edd029d01 100644
--- a/app/src/docs/_examples/badge/Dropdown.example.tsx
+++ b/app/src/docs/_examples/badge/Dropdown.example.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Dropdown, DropdownContainer, DropdownMenuButton, FlexRow, Badge } from '@epam/uui';
-import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
+import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
 import { DropdownBodyProps } from '@epam/uui-core';
 import css from './DropdownExample.module.scss';
 
diff --git a/app/src/docs/_examples/badge/Types.example.tsx b/app/src/docs/_examples/badge/Types.example.tsx
index 904cb4e73a..a7d702ae0e 100644
--- a/app/src/docs/_examples/badge/Types.example.tsx
+++ b/app/src/docs/_examples/badge/Types.example.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dropdown, FlexRow, Panel, Text, Badge } from '@epam/uui';
-import { ReactComponent as mediaIcon } from '@epam/assets/icons/common/media-play-fill-18.svg';
-import { ReactComponent as doneIcon } from '@epam/assets/icons/common/notification-done-24.svg';
-import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/common/navigation-chevron-down-18.svg';
+import { ReactComponent as mediaIcon } from '@epam/assets/icons/media-play-fill-opt.2.svg';
+import { ReactComponent as doneIcon } from '@epam/assets/icons/notification-done-outline.svg';
+import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
 
 export default function TypesExample() {
     return (