refactor(ui): extract group header button styles to styled component

- Create Group.styles.ts with GroupHeaderButton styled component
- Replace className-based styles with styled component in Group and DeleteTutorialButton
- Use theme-based colors instead of CSS variables
- Apply import pattern rule (import * as S) for styled components

Author: dantovska

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx

@@ -7,6 +7,8 @@ import { DeleteIcon } from 'uiSrc/components/base/icons'
 import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiPopover } from 'uiSrc/components/base'
+
+import * as S from '../Group/Group.styles'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -32,14 +34,13 @@ const DeleteTutorialButton = (props: Props) => {
       closePopover={() => setIsPopoverDeleteOpen(false)}
       panelPaddingSize="l"
       button={
-        <div
-          className="group-header__btn"
+        <S.GroupHeaderButton
           role="presentation"
           onClick={handleClickDelete}
           data-testid={`delete-tutorial-icon-${id}`}
         >
           <RiIcon size="m" type="DeleteIcon" />
-        </div>
+        </S.GroupHeaderButton>
       }
       onClick={(e) => e.stopPropagation()}
       data-testid={`delete-tutorial-popover-${id}`}

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Theme } from '@redis-ui/styles'
+
+export const GroupHeaderButton = styled.div<
+  React.HTMLAttributes<HTMLDivElement>
+>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 24px;
+  height: 24px;
+  border-radius: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
+  cursor: pointer;
+
+  &:hover {
+    color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.text.neutral100};
+    background-color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.background.neutral200};
+  }
+`

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx

@@ -20,6 +20,7 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
 import DeleteTutorialButton from '../DeleteTutorialButton'
 
+import * as S from './Group.styles'
 import './styles.scss'
 
 export interface Props {
@@ -98,15 +99,14 @@ const Group = (props: Props) => {
             panelClassName={cx({ hide: isPageOpened })}
             preventPropagation
           >
-            <RiTooltip content="Upload Tutorial">
-              <div
-                className="group-header__btn"
+            <RiTooltip content="Upload tutorial">
+              <S.GroupHeaderButton
                 role="presentation"
                 onClick={handleCreate}
                 data-testid="open-upload-tutorial-btn"
               >
                 <RiIcon type="PlusSlimIcon" size="m" />
-              </div>
+              </S.GroupHeaderButton>
             </RiTooltip>
           </OnboardingTour>
         )}

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss

@@ -25,25 +25,6 @@
       white-space: nowrap;
       text-overflow: ellipsis;
 
-      &__btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        width: 24px;
-        height: 24px;
-        border-radius: 4px;
-        cursor: pointer;
-
-        &:hover {
-          color: var(--euiColorPrimaryText);
-          background-color: var(--euiColorSecondary);
-        }
-      }
-
-      .euiIcon {
-        margin-right: 4px;
-      }
     }
 
     .divider {