From 856fdf34f9eefaca8fffa4711b91f6fecdf7e726 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz+textace@gmail.com>
Date: Tue, 26 Nov 2024 00:39:51 +0100
Subject: [PATCH 1/6] Mostly UX and accesibility fixes.

---
 package.json                          |  2 +-
 src/components/Button/index.tsx       | 13 ++++----
 src/components/Checkbox/index.tsx     |  7 ++++
 src/components/ControlGroup/index.tsx |  5 ++-
 src/components/Drawer/index.tsx       |  7 ++--
 src/components/Input/index.tsx        | 10 +++---
 src/components/Tabs/item.tsx          | 47 +++++++++++++++------------
 src/components/Tag/index.tsx          |  3 +-
 src/components/Textarea/index.tsx     |  8 +++--
 src/constants/sizes.ts                | 18 +++++++---
 10 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index f1a079d7..0f6423a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.8",
+  "version": "0.48.9",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index b6c11dd6..2d6b1312 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -129,12 +129,12 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   flex-flow: column;
   justify-content: center;
   margin: 0;
-  font-weight: 600;
+  font-weight: 500;
   position: relative;
   overflow: hidden;
   vertical-align: middle;
   border: ${({ theme, color, flat }) =>
-    !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.2)}` : 0};
+    !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.1)}` : 0};
   padding: ${({ size, compact, verticalPadding }) =>
     `${verticalPadding ? PADDING_FROM_SIZE[verticalPadding] : 0}px ${
       compact ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]
@@ -209,7 +209,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
                   undefined
                 )};
               border-color: ${({ flat, theme, color }) =>
-                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.35)};
+                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
 
               ${animate &&
               css`
@@ -267,12 +267,13 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   &:focus,
   &:active {
-    outline: none;
+    outline: 2px solid
+      ${({ theme, color }) => changeLightness(getButtonMainColor(theme, color), 0.25)};
   }
 
   &:focus {
     border-color: ${({ minimal, theme, color }) =>
-      minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
+      minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
   }
 
   .reqore-button-description {
@@ -431,7 +432,7 @@ const ReqoreButton = memo(
 
       // If color or intent was specified, set the color
       const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
-      const _flat = minimal ? flat : flat !== false;
+      const _flat = minimal ? flat : flat === true;
       const _compact = compact ?? theme.buttons?.compact;
       const color: TReqoreHexColor = customColor
         ? minimal
diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
index 0537f6c9..0f4a53d5 100644
--- a/src/components/Checkbox/index.tsx
+++ b/src/components/Checkbox/index.tsx
@@ -110,6 +110,11 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   ${StyledIconWrapper} {
     z-index: 1;
   }
+
+  &:focus,
+  &:active {
+    outline: 2px solid ${({ theme }) => changeLightness(theme.main, 0.25)};
+  }
 `;
 
 const StyledSwitchTextWrapper = styled(StyledTextEffect)`
@@ -257,6 +262,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
         {asSwitch ? (
           <StyledSwitch
             size={size}
+            tabIndex='0'
             labelPosition={labelPosition}
             checked={checked}
             theme={theme}
@@ -348,6 +354,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
         ) : (
           <ReqoreIcon
             size={size}
+            tabIndex={0}
             icon={
               !image
                 ? checked
diff --git a/src/components/ControlGroup/index.tsx b/src/components/ControlGroup/index.tsx
index 4bc6f30f..b37169ef 100644
--- a/src/components/ControlGroup/index.tsx
+++ b/src/components/ControlGroup/index.tsx
@@ -14,6 +14,7 @@ import {
   IWithReqoreMinimal,
   IWithReqoreSize,
 } from '../../types/global';
+import { IReqoreButtonProps } from '../Button';
 import { StyledEffect } from '../Effect';
 import { StyledHeader } from '../Header';
 import { StyledParagraph } from '../Paragraph';
@@ -52,6 +53,7 @@ export interface IReqoreControlGroupComponentProps
   isFirstGroup?: boolean;
   isLastGroup?: boolean;
   fill?: boolean;
+  overflowButtonProps?: IReqoreButtonProps;
 }
 
 export interface IReqoreControlGroupProps
@@ -167,6 +169,7 @@ const ReqoreControlGroup = memo(
     verticalAlign = 'center',
     horizontalAlign = 'flex-start',
     responsive,
+    overflowButtonProps,
     ...rest
   }: IReqoreControlGroupProps) => {
     const isStack = stack || isInsideStackGroup;
@@ -467,9 +470,9 @@ const ReqoreControlGroup = memo(
                   ),
                 }}
                 active={isOverflownDialogOpen}
-                flat
                 fixed
                 onClick={(e) => e.stopPropagation()}
+                {...overflowButtonProps}
               />,
             ]
           : children,
diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index 6697a4be..7d983bc6 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -126,9 +126,9 @@ const getHideShowIcon = (
 const getSpringConfig = (isModal?: boolean, position?: TPosition, floating?: boolean) =>
   isModal
     ? {
-        from: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)', filter: 'blur(10px)' },
-        enter: { opacity: 1, transform: 'scale(1) translate(-50%, -50%)', filter: 'blur(0px)' },
-        leave: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)', filter: 'blur(10px)' },
+        from: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)' },
+        enter: { opacity: 1, transform: 'scale(1) translate(-50%, -50%)' },
+        leave: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)' },
       }
     : {
         from: { opacity: 0, [position]: '-80px' },
@@ -276,6 +276,7 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
                 position: 'fixed',
                 overflow: hidable ? undefined : 'hidden',
                 transformOrigin: 'top left',
+                backfaceVisibility: 'hidden',
                 ...positions,
                 ...styles,
               } as any
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 84bf66ec..6bfab546 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -100,6 +100,8 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
       display: flex;
     }
 
+    outline: 2px solid ${({ theme }) => changeLightness(theme.main, 0.25)};
+
     ${ActiveIconScale}
   }
 `;
@@ -136,10 +138,8 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
   font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
   transition: all 0.2s ease-out;
-  border-radius: ${({ minimal, rounded, _size, pill }) =>
-    minimal || rounded === false
-      ? 0
-      : RADIUS_FROM_SIZE[_size] * (pill ? PILL_RADIUS_MODIFIER : 1)}px;
+  border-radius: inherit;
+
   border: ${({ minimal, theme, flat }) =>
     !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
@@ -151,7 +151,6 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
           &:active,
           &:focus,
           &:hover {
-            outline: none;
             border-color: ${({ theme }) => changeLightness(theme.main, 0.35)};
           }
         `
@@ -166,6 +165,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
 
   &:active,
   &:focus {
+    outline: none;
     background-color: ${({ theme, minimal, transparent }: IReqoreInputStyle) =>
       minimal || transparent ? 'transparent' : rgba(theme.main, 0.15)};
   }
diff --git a/src/components/Tabs/item.tsx b/src/components/Tabs/item.tsx
index 5f4ffa50..2c5af0fe 100644
--- a/src/components/Tabs/item.tsx
+++ b/src/components/Tabs/item.tsx
@@ -35,7 +35,6 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
     return css`
       display: flex;
       flex-shrink: 0;
-      overflow: hidden;
       position: relative;
       align-items: center;
       width: ${vertical ? `100%` : undefined};
@@ -171,6 +170,27 @@ const ReqoreTabsListItem = memo(
         });
       };
 
+      const renderButton = () => (
+        <ReqoreButton
+          flat={intent ? false : flat}
+          fluid={fill || vertical}
+          icon={icon}
+          minimal
+          wrap={wrapTabNames}
+          intent={active ? activeIntent || intent : intent}
+          active={active}
+          disabled={disabled}
+          onClick={handleClick}
+          tooltip={tooltip}
+          customTheme={theme}
+          className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
+          {...omit(rest, ['id'])}
+          loading={isStillPending || rest.loading}
+        >
+          {label}
+        </ReqoreButton>
+      );
+
       return (
         <StyledTabListItem
           ref={targetRef}
@@ -187,26 +207,11 @@ const ReqoreTabsListItem = memo(
           fixed={rest.fixed}
           padded={padded}
         >
-          {label || icon ? (
+          {!onCloseClick || disabled ? (
+            renderButton()
+          ) : (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
-              <ReqoreButton
-                flat={intent ? false : flat}
-                fluid={fill || vertical}
-                icon={icon}
-                minimal
-                wrap={wrapTabNames}
-                intent={active ? activeIntent || intent : intent}
-                active={active}
-                disabled={disabled}
-                onClick={handleClick}
-                tooltip={tooltip}
-                customTheme={theme}
-                className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
-                {...omit(rest, ['id'])}
-                loading={isStillPending || rest.loading}
-              >
-                {label}
-              </ReqoreButton>
+              {renderButton()}
               {onCloseClick && !disabled ? (
                 <ReqoreButton
                   fixed
@@ -224,7 +229,7 @@ const ReqoreTabsListItem = memo(
                 />
               ) : null}
             </ReqoreControlGroup>
-          ) : null}
+          )}
         </StyledTabListItem>
       );
     }
diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
index 6bedbba8..57715470 100644
--- a/src/components/Tag/index.tsx
+++ b/src/components/Tag/index.tsx
@@ -10,6 +10,7 @@ import {
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
+  TAG_TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
@@ -109,7 +110,7 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-weight: 600;
   overflow: hidden;
   vertical-align: middle;
-  font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
+  font-size: ${({ size }) => TAG_TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
   max-width: ${({ fixed }) => (fixed !== true ? '100%' : undefined)};
diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx
index 050a9eac..a26c0a71 100644
--- a/src/components/Textarea/index.tsx
+++ b/src/components/Textarea/index.tsx
@@ -76,11 +76,15 @@ export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   position: relative;
   overflow: hidden;
+  border-radius: ${({ minimal, rounded = true, _size = 'normal' }) =>
+    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
 
   &:focus-within {
     .reqore-clear-input-button {
       display: flex;
     }
+
+    outline: 2px solid ${({ theme }) => changeLightness(theme.main, 0.25)};
   }
 `;
 
@@ -104,12 +108,12 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
 
   &:active,
   &:focus {
+    outline: none;
     background-color: ${({ theme, minimal, transparent }: IReqoreTextareaStyle) =>
       minimal || transparent ? 'transparent' : rgba(theme.main, 0.15)};
   }
 
-  border-radius: ${({ minimal, rounded = true, _size = 'normal' }) =>
-    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+  border-radius: inherit;
   border: ${({ minimal, theme, flat }) =>
     !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
diff --git a/src/constants/sizes.ts b/src/constants/sizes.ts
index cc700ae4..7fe04ddb 100644
--- a/src/constants/sizes.ts
+++ b/src/constants/sizes.ts
@@ -110,11 +110,19 @@ export const TEXT_FROM_SIZE = {
 };
 
 export const CONTROL_TEXT_FROM_SIZE = {
-  tiny: 7,
-  small: 10,
-  normal: 13,
-  big: 16,
-  huge: 19,
+  tiny: 9,
+  small: 12,
+  normal: 15,
+  big: 18,
+  huge: 21,
+};
+
+export const TAG_TEXT_FROM_SIZE = {
+  tiny: 8,
+  small: 11,
+  normal: 14,
+  big: 17,
+  huge: 20,
 };
 
 export const ICON_FROM_SIZE = {

From c865ce9ba8ae38b819114a202355d52829883cb8 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz+textace@gmail.com>
Date: Tue, 26 Nov 2024 09:37:43 +0100
Subject: [PATCH 2/6] More UX changes

---
 src/components/Button/index.tsx   | 18 ++++++++----------
 src/components/Checkbox/index.tsx |  1 +
 src/components/Input/index.tsx    |  1 +
 src/components/Menu/item.tsx      |  2 +-
 src/components/Tag/index.tsx      | 12 ++++++++++--
 src/components/Textarea/index.tsx |  1 +
 src/constants/sizes.ts            | 18 +++++++++++++-----
 src/styles.ts                     |  3 +--
 8 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 2d6b1312..97fe860b 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -140,6 +140,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       compact ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]
     }px`};
   font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
+  outline-offset: -2px;
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
@@ -182,7 +183,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   ${InactiveIconScale}
 
-  ${({ readOnly, animate, active }) =>
+  ${({ readOnly, animate, active, theme, color }) =>
     !readOnly && !active
       ? css`
           &:not(:disabled) {
@@ -196,8 +197,10 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             }
 
             &:hover,
-            &:active,
-            &:focus {
+            &:active {
+              outline: 2px solid ${changeLightness(getButtonMainColor(theme, color), 0.25)};
+              border-color: ${({ flat, theme, color }) =>
+                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
               background-color: ${({ theme, color, minimal }: IReqoreButtonStyle) =>
                 minimal
                   ? rgba(changeLightness(getButtonMainColor(theme, color), 0.05), 0.2)
@@ -208,8 +211,6 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
                   undefined,
                   undefined
                 )};
-              border-color: ${({ flat, theme, color }) =>
-                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
 
               ${animate &&
               css`
@@ -268,12 +269,9 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   &:focus,
   &:active {
     outline: 2px solid
-      ${({ theme, color }) => changeLightness(getButtonMainColor(theme, color), 0.25)};
-  }
-
-  &:focus {
+      ${({ theme, color }) => changeLightness(getButtonMainColor(theme, color), 0.1)};
     border-color: ${({ minimal, theme, color }) =>
-      minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
+      minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
   }
 
   .reqore-button-description {
diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
index 0f4a53d5..fdf0d611 100644
--- a/src/components/Checkbox/index.tsx
+++ b/src/components/Checkbox/index.tsx
@@ -114,6 +114,7 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   &:focus,
   &:active {
     outline: 2px solid ${({ theme }) => changeLightness(theme.main, 0.25)};
+    outline-offset: -2px;
   }
 `;
 
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 6bfab546..e10f33bc 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -101,6 +101,7 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
     }
 
     outline: 2px solid ${({ theme }) => changeLightness(theme.main, 0.25)};
+    outline-offset: -2px;
 
     ${ActiveIconScale}
   }
diff --git a/src/components/Menu/item.tsx b/src/components/Menu/item.tsx
index 6270461f..f943fc7b 100644
--- a/src/components/Menu/item.tsx
+++ b/src/components/Menu/item.tsx
@@ -93,7 +93,7 @@ const ReqoreMenuItem = memo(
       }, [itemRef, scrollIntoView]);
 
       return (
-        <ReqoreControlGroup stack={!!onRightIconClick} fluid fill>
+        <ReqoreControlGroup stack={!!onRightIconClick} fluid fill responsive={false}>
           <ReqoreButton
             as={as}
             {...rest}
diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
index 57715470..bdf9f991 100644
--- a/src/components/Tag/index.tsx
+++ b/src/components/Tag/index.tsx
@@ -8,8 +8,8 @@ import {
   BADGE_SIZE_TO_PX,
   CONTROL_TEXT_FROM_SIZE,
   PADDING_FROM_SIZE,
-  RADIUS_FROM_SIZE,
   SIZE_TO_PX,
+  TAG_RADIUS_FROM_SIZE,
   TAG_TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
@@ -111,6 +111,7 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   overflow: hidden;
   vertical-align: middle;
   font-size: ${({ size }) => TAG_TEXT_FROM_SIZE[size]}px;
+  line-height: 1.1;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
   max-width: ${({ fixed }) => (fixed !== true ? '100%' : undefined)};
@@ -119,7 +120,7 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     fixed === true ? 'flex-start' : fluid ? 'stretch' : undefined};
   border: ${({ theme, color, flat = true }) =>
     !flat ? `1px solid ${changeLightness(color || theme.main, 0.2)}` : 0};
-  border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
+  border-radius: ${({ asBadge, size }) => (asBadge ? 18 : TAG_RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
@@ -207,6 +208,12 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
       display: none;
     }
   }
+
+  &:focus,
+  &:active {
+    outline: 2px solid ${({ theme, color }) => changeLightness(color || theme.main, 0.25)};
+    outline-offset: -2px;
+  }
 `;
 
 const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
@@ -374,6 +381,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         minimal={minimal}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
+        tabIndex={onClick && !rest.disabled ? 0 : undefined}
         wrap={wrap}
         hasWidth={!!width}
       >
diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx
index a26c0a71..d0fe6c30 100644
--- a/src/components/Textarea/index.tsx
+++ b/src/components/Textarea/index.tsx
@@ -85,6 +85,7 @@ export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
     }
 
     outline: 2px solid ${({ theme }) => changeLightness(theme.main, 0.25)};
+    outline-offset: -2px;
   }
 `;
 
diff --git a/src/constants/sizes.ts b/src/constants/sizes.ts
index 7fe04ddb..7e9f2cb6 100644
--- a/src/constants/sizes.ts
+++ b/src/constants/sizes.ts
@@ -142,11 +142,11 @@ export const HALF_PADDING_FROM_SIZE = {
 };
 
 export const PADDING_FROM_SIZE = {
-  tiny: 5,
-  small: 8,
-  normal: 11,
-  big: 14,
-  huge: 17,
+  tiny: 2,
+  small: 5,
+  normal: 8,
+  big: 11,
+  huge: 14,
 };
 
 export const RADIUS_FROM_SIZE = {
@@ -157,6 +157,14 @@ export const RADIUS_FROM_SIZE = {
   huge: 9,
 };
 
+export const TAG_RADIUS_FROM_SIZE = {
+  tiny: 9,
+  small: 10,
+  normal: 10.5,
+  big: 12,
+  huge: 14,
+};
+
 export const GAP_FROM_SIZE = {
   tiny: 1,
   small: 3,
diff --git a/src/styles.ts b/src/styles.ts
index 8144c716..b50b83c3 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -107,8 +107,7 @@ export const ChildActiveIconScale = css`
 `;
 
 export const ScaleIconOnHover = css`
-  &:hover,
-  &:focus {
+  &:hover {
     ${ActiveIconScale}
   }
 `;

From c0d8d931fe000940a081d9b5b98c2351baf169e0 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz+textace@gmail.com>
Date: Tue, 26 Nov 2024 11:15:00 +0100
Subject: [PATCH 3/6] Fixed modal blurriness

---
 src/components/Drawer/index.tsx | 18 +++++++++++-------
 src/components/Modal/index.tsx  |  6 +++++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index 7d983bc6..1fc7cff7 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -98,7 +98,9 @@ export const StyledCloseWrapper = styled.div<IReqoreDrawerStyle>`
   }}
 `;
 
-export const StyledDrawerResizable = styled(animated.div)``;
+export const StyledDrawerResizable = styled(animated.div)`
+  height: fit-content;
+`;
 
 /**
  * It returns an icon name based on the position and whether the panel is hidden or not
@@ -126,9 +128,9 @@ const getHideShowIcon = (
 const getSpringConfig = (isModal?: boolean, position?: TPosition, floating?: boolean) =>
   isModal
     ? {
-        from: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)' },
-        enter: { opacity: 1, transform: 'scale(1) translate(-50%, -50%)' },
-        leave: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)' },
+        from: { opacity: 0, transform: 'scale(0.5)' },
+        enter: { opacity: 1, transform: 'scale(1)' },
+        leave: { opacity: 0, transform: 'scale(0.5)' },
       }
     : {
         from: { opacity: 0, [position]: '-80px' },
@@ -218,9 +220,11 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
     /* Centering the modal. */
     if (_isModal) {
       return {
-        left: '50%',
-        top: '50%',
-        transform: 'translate(-50%)',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        margin: 'auto',
       };
     }
 
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 53862da4..2c309c9d 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -15,7 +15,11 @@ export interface IReqoreModalStyle extends IReqoreModalProps {
   zIndex?: number;
 }
 
-export const ReqoreModal = ({ width = '80vw', height = 'auto', ...rest }: IReqoreModalProps) => {
+export const ReqoreModal = ({
+  width = '80vw',
+  height = 'fit-content',
+  ...rest
+}: IReqoreModalProps) => {
   const id = useMemo(() => shortid.generate(), []);
   const escClosableModals = useReqoreProperty('escClosableModals');
   const closeModalsOnEscPress = useReqoreProperty('closeModalsOnEscPress');

From 4bd611febb797045e4ac5a05bb1a95f41cdb4235 Mon Sep 17 00:00:00 2001
From: Foxhoundn <filip.witosz+textace@gmail.com>
Date: Tue, 26 Nov 2024 12:43:47 +0100
Subject: [PATCH 4/6] Increase button size, improve button styling for minimal
 style, introduce transparent style

---
 src/components/Button/index.tsx       | 57 ++++++++++++++++++---------
 src/constants/sizes.ts                | 12 +++---
 src/stories/Button/Button.stories.tsx |  3 ++
 src/styles.ts                         |  4 +-
 4 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 97fe860b..805e2765 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,5 +1,5 @@
 import { size } from 'lodash';
-import { rgba } from 'polished';
+import { rgba, tint } from 'polished';
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
@@ -64,6 +64,7 @@ export interface IReqoreButtonProps
   icon?: IReqoreIconName;
   size?: TSizes;
   minimal?: boolean;
+  transparent?: boolean;
   tooltip?: TReqoreTooltipProp;
   fluid?: boolean;
   fixed?: boolean;
@@ -134,7 +135,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   overflow: hidden;
   vertical-align: middle;
   border: ${({ theme, color, flat }) =>
-    !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.1)}` : 0};
+    !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.05)}` : 0};
   padding: ${({ size, compact, verticalPadding }) =>
     `${verticalPadding ? PADDING_FROM_SIZE[verticalPadding] : 0}px ${
       compact ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]
@@ -166,18 +167,24 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       ? 9999
       : RADIUS_FROM_SIZE[size] * (pill ? PILL_RADIUS_MODIFIER : 1)}px;
 
-  background-color: ${({ minimal, color }) => {
-    if (minimal) {
+  background-color: ${({ minimal, color, theme, transparent }) => {
+    if (transparent) {
       return 'transparent';
     }
 
+    if (minimal) {
+      return css`
+        ${rgba(getButtonMainColor(theme, color), 0.2)}
+      `;
+    }
+
     return color;
   }};
 
-  color: ${({ theme, color, minimal }) =>
+  color: ${({ theme, color, minimal, transparent }) =>
     color
-      ? minimal
-        ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+      ? minimal || transparent
+        ? tint(0.75, color)
         : getReadableColorFrom(color, true)
       : getReadableColor(theme, undefined, undefined, true)};
 
@@ -193,24 +200,35 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             transition: all 0.2s ease-out;
 
             &:active {
-              transform: scale(0.97);
+              outline: 3px solid ${changeLightness(getButtonMainColor(theme, color), 0.25)};
+              outline-offset: -3px;
+              transition: none;
+            }
+
+            &:hover:not(:active) {
+              outline: 2px solid ${changeLightness(getButtonMainColor(theme, color), 0.25)};
+              transition: none;
             }
 
             &:hover,
             &:active {
-              outline: 2px solid ${changeLightness(getButtonMainColor(theme, color), 0.25)};
               border-color: ${({ flat, theme, color }) =>
                 flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
-              background-color: ${({ theme, color, minimal }: IReqoreButtonStyle) =>
-                minimal
-                  ? rgba(changeLightness(getButtonMainColor(theme, color), 0.05), 0.2)
+              background-color: ${({ theme, color, minimal, transparent }: IReqoreButtonStyle) =>
+                minimal || transparent
+                  ? rgba(
+                      changeLightness(getButtonMainColor(theme, color), 0.05),
+                      transparent ? 0.2 : 0.4
+                    )
                   : changeLightness(getButtonMainColor(theme, color), 0.05)};
-              color: ${({ theme, color, minimal }) =>
-                getReadableColor(
-                  { main: minimal ? theme.originalMain : getButtonMainColor(theme, color) },
-                  undefined,
-                  undefined
-                )};
+              color: ${({ theme, color, minimal, transparent }) =>
+                minimal || transparent
+                  ? tint(0.85, color)
+                  : getReadableColor(
+                      { main: minimal ? theme.originalMain : getButtonMainColor(theme, color) },
+                      undefined,
+                      undefined
+                    )};
 
               ${animate &&
               css`
@@ -384,6 +402,7 @@ const ReqoreButton = memo(
         icon,
         size = 'normal',
         minimal,
+        transparent,
         children,
         tooltip,
         className,
@@ -477,7 +496,9 @@ const ReqoreButton = memo(
           fixed={fixed}
           maxWidth={maxWidth}
           minimal={minimal}
+          transparent={transparent}
           size={size}
+          intent={intent}
           color={customColor}
           animate={animate}
           flat={_flat}
diff --git a/src/constants/sizes.ts b/src/constants/sizes.ts
index 7e9f2cb6..5b823ccd 100644
--- a/src/constants/sizes.ts
+++ b/src/constants/sizes.ts
@@ -54,11 +54,11 @@ export const HEADER_SIZE_TO_NUMBER = {
 };
 
 export const SIZE_TO_PX = {
-  tiny: 18,
-  small: 24,
-  normal: 30,
-  big: 40,
-  huge: 50,
+  tiny: 24,
+  small: 30,
+  normal: 36,
+  big: 46,
+  huge: 56,
 };
 
 export const BADGE_SIZE_TO_PX = {
@@ -198,4 +198,4 @@ export const WEIGHT_TO_NUMBER = {
   thick: 700,
 };
 
-export const PILL_RADIUS_MODIFIER = 2.5;
+export const PILL_RADIUS_MODIFIER = 3.5;
diff --git a/src/stories/Button/Button.stories.tsx b/src/stories/Button/Button.stories.tsx
index 13a68994..d680bb54 100644
--- a/src/stories/Button/Button.stories.tsx
+++ b/src/stories/Button/Button.stories.tsx
@@ -48,6 +48,9 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} minimal flat>
           Minimal
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} transparent flat>
+          Transparent
+        </ReqoreButton>
         <ReqoreButton {...buttonProps} icon={undefined} rightIcon={undefined} compact>
           Compact
         </ReqoreButton>
diff --git a/src/styles.ts b/src/styles.ts
index b50b83c3..a12faefc 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -3,7 +3,7 @@ import { StyledTextEffect } from './components/Effect';
 import { StyledIconWrapper } from './components/Icon';
 
 export const INACTIVE_ICON_SCALE = 0.85;
-export const ACTIVE_ICON_SCALE = 1;
+export const ACTIVE_ICON_SCALE = 0.93;
 
 export const StyledContent = styled(StyledTextEffect)`
   position: relative;
@@ -114,7 +114,7 @@ export const ScaleIconOnHover = css`
 
 export const DisabledElement = css`
   pointer-events: none;
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 `;
 

From e4461175d08758990c3c947bfcf4caab3872db90 Mon Sep 17 00:00:00 2001
From: foxhoundn <filip.witosz@gmail.com>
Date: Tue, 26 Nov 2024 23:00:53 +0100
Subject: [PATCH 5/6] Refactor button and tag components for improved layout
 handling and responsiveness

---
 src/components/Button/index.tsx |   8 +-
 src/components/Drawer/index.tsx | 266 ++++++++++++++++----------------
 src/components/Tag/index.tsx    |   8 +-
 3 files changed, 146 insertions(+), 136 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 805e2765..300aec4a 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -518,11 +518,13 @@ const ReqoreButton = memo(
                   compact={_compact}
                   {...leftIconProps}
                   style={
-                    textAlign !== 'left' || iconsAlign === 'center'
+                    textAlign !== 'left' || iconsAlign === 'center' || !_children
                       ? {
-                          marginRight: iconsAlign !== 'center' || !children ? 'auto' : undefined,
+                          marginRight: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
                           marginLeft:
-                            iconsAlign === 'center' || (textAlign === 'center' && !_children)
+                            iconsAlign === 'center' ||
+                            !_children ||
+                            (textAlign === 'center' && !_children)
                               ? 'auto'
                               : undefined,
                         }
diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx
index 1fc7cff7..f93079d5 100644
--- a/src/components/Drawer/index.tsx
+++ b/src/components/Drawer/index.tsx
@@ -49,6 +49,16 @@ export interface IReqoreDrawerStyle extends IReqoreDrawerProps {
   h?: number | string;
 }
 
+export const StyledWrapper = styled.div<IReqoreDrawerStyle>`
+  z-index: ${({ zIndex }) => zIndex};
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+`;
+
 export const StyledCloseWrapper = styled.div<IReqoreDrawerStyle>`
   position: absolute;
 
@@ -99,7 +109,7 @@ export const StyledCloseWrapper = styled.div<IReqoreDrawerStyle>`
 `;
 
 export const StyledDrawerResizable = styled(animated.div)`
-  height: fit-content;
+  pointer-events: auto;
 `;
 
 /**
@@ -219,13 +229,7 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
   const positions = useMemo(() => {
     /* Centering the modal. */
     if (_isModal) {
-      return {
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        margin: 'auto',
-      };
+      return {};
     }
 
     return {
@@ -248,128 +252,132 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
               opacity={styles.opacity}
             />
           ) : null}
-          <Resizable
-            className={`${className || ''} reqore-drawer-resizable`}
-            maxHeight={
-              layout === 'horizontal' || layout === 'center' ? maxSize || '90vh' : undefined
-            }
-            minHeight={
-              layout === 'center'
-                ? '40px'
-                : layout === 'horizontal'
-                ? _isHidden
-                  ? 0
-                  : minSize || '40px'
-                : undefined
-            }
-            maxWidth={layout === 'vertical' || layout === 'center' ? maxSize || '90vw' : undefined}
-            minWidth={
-              layout === 'center'
-                ? '40px'
-                : layout === 'vertical'
-                ? _isHidden
-                  ? 0
-                  : minSize || '40px'
-                : undefined
-            }
-            as={StyledDrawerResizable}
-            style={
-              {
-                zIndex: wrapperZIndex,
-                display: 'flex',
-                position: 'fixed',
-                overflow: hidable ? undefined : 'hidden',
-                transformOrigin: 'top left',
-                backfaceVisibility: 'hidden',
-                ...positions,
-                ...styles,
-              } as any
-            }
-            handleWrapperStyle={{
-              zIndex: wrapperZIndex + 1,
-            }}
-            size={{
-              width: _isModal
-                ? _size.width
-                : layout === 'vertical'
-                ? _isHidden
-                  ? 0
-                  : _size.width
-                : 'auto',
-              height: _isModal
-                ? _size.height
-                : layout === 'horizontal'
-                ? _isHidden
-                  ? 0
-                  : _size.height
-                : 'auto',
-            }}
-            onResize={
-              resizable
-                ? (_, _direction, component: HTMLElement) => {
-                    setSize({
-                      width: component.style.width,
-                      height: component.style.height,
-                    });
-                  }
-                : undefined
-            }
-            enable={{
-              top: (resizable && position === 'bottom') || _isModal ? true : false,
-              right: (resizable && position === 'left') || _isModal ? true : false,
-              left: (resizable && position === 'right') || _isModal ? true : false,
-              bottom: (resizable && position === 'top') || _isModal ? true : false,
-              bottomLeft: _isModal,
-              bottomRight: _isModal,
-              topLeft: _isModal,
-              topRight: _isModal,
-            }}
-          >
-            {_isHidden && hidable ? (
-              <StyledCloseWrapper
-                className='reqore-drawer-controls'
-                position={position}
-                w={layout === 'vertical' ? 0 : _size.width}
-                h={layout === 'horizontal' ? 0 : _size.height}
-              >
-                <ReqoreButton
-                  flat
-                  customTheme={theme}
-                  className='reqore-drawer-control reqore-drawer-hide-button'
-                  icon={getHideShowIcon(position, _isHidden)}
-                  onClick={() => {
-                    setIsHidden(!_isHidden);
-                    onHideToggle?.(!_isHidden);
+          <StyledWrapper zIndex={wrapperZIndex} className='reqore-drawer-wrapper'>
+            <Resizable
+              className={`${className || ''} reqore-drawer-resizable`}
+              maxHeight={
+                layout === 'horizontal' || layout === 'center' ? maxSize || '90vh' : undefined
+              }
+              minHeight={
+                layout === 'center'
+                  ? '40px'
+                  : layout === 'horizontal'
+                  ? _isHidden
+                    ? 0
+                    : minSize || '40px'
+                  : undefined
+              }
+              maxWidth={
+                layout === 'vertical' || layout === 'center' ? maxSize || '90vw' : undefined
+              }
+              minWidth={
+                layout === 'center'
+                  ? '40px'
+                  : layout === 'vertical'
+                  ? _isHidden
+                    ? 0
+                    : minSize || '40px'
+                  : undefined
+              }
+              as={StyledDrawerResizable}
+              style={
+                {
+                  zIndex: wrapperZIndex,
+                  display: 'flex',
+                  position: 'fixed',
+                  overflow: hidable ? undefined : 'hidden',
+                  transformOrigin: 'top left',
+                  backfaceVisibility: 'hidden',
+                  ...positions,
+                  ...styles,
+                } as any
+              }
+              handleWrapperStyle={{
+                zIndex: wrapperZIndex + 1,
+              }}
+              size={{
+                width: _isModal
+                  ? _size.width
+                  : layout === 'vertical'
+                  ? _isHidden
+                    ? 0
+                    : _size.width
+                  : 'auto',
+                height: _isModal
+                  ? _size.height
+                  : layout === 'horizontal'
+                  ? _isHidden
+                    ? 0
+                    : _size.height
+                  : 'auto',
+              }}
+              onResize={
+                resizable
+                  ? (_, _direction, component: HTMLElement) => {
+                      setSize({
+                        width: component.style.width,
+                        height: component.style.height,
+                      });
+                    }
+                  : undefined
+              }
+              enable={{
+                top: (resizable && position === 'bottom') || _isModal ? true : false,
+                right: (resizable && position === 'left') || _isModal ? true : false,
+                left: (resizable && position === 'right') || _isModal ? true : false,
+                bottom: (resizable && position === 'top') || _isModal ? true : false,
+                bottomLeft: _isModal,
+                bottomRight: _isModal,
+                topLeft: _isModal,
+                topRight: _isModal,
+              }}
+            >
+              {_isHidden && hidable ? (
+                <StyledCloseWrapper
+                  className='reqore-drawer-controls'
+                  position={position}
+                  w={layout === 'vertical' ? 0 : _size.width}
+                  h={layout === 'horizontal' ? 0 : _size.height}
+                >
+                  <ReqoreButton
+                    flat
+                    customTheme={theme}
+                    className='reqore-drawer-control reqore-drawer-hide-button'
+                    icon={getHideShowIcon(position, _isHidden)}
+                    onClick={() => {
+                      setIsHidden(!_isHidden);
+                      onHideToggle?.(!_isHidden);
+                    }}
+                  />
+                </StyledCloseWrapper>
+              ) : null}
+              {!_isHidden && (
+                <ReqorePanel
+                  {...rest}
+                  size={panelSize}
+                  opacity={opacity}
+                  blur={hasBackdrop ? 0 : blur}
+                  actions={_actions}
+                  customTheme={customTheme}
+                  intent={intent}
+                  rounded={floating || _isModal ? true : false}
+                  flat={flat}
+                  onClose={onClose}
+                  closeButtonProps={{
+                    className: 'reqore-drawer-close-button',
+                  }}
+                  className={`reqore-drawer`}
+                  style={{
+                    width: '100%',
+                    maxHeight: '100%',
+                    ...rest.style,
                   }}
-                />
-              </StyledCloseWrapper>
-            ) : null}
-            {!_isHidden && (
-              <ReqorePanel
-                {...rest}
-                size={panelSize}
-                opacity={opacity}
-                blur={hasBackdrop ? 0 : blur}
-                actions={_actions}
-                customTheme={customTheme}
-                intent={intent}
-                rounded={floating || _isModal ? true : false}
-                flat={flat}
-                onClose={onClose}
-                closeButtonProps={{
-                  className: 'reqore-drawer-close-button',
-                }}
-                className={`reqore-drawer`}
-                style={{
-                  width: '100%',
-                  maxHeight: '100%',
-                  ...rest.style,
-                }}
-              >
-                {children}
-              </ReqorePanel>
-            )}
-          </Resizable>
+                >
+                  {children}
+                </ReqorePanel>
+              )}
+            </Resizable>
+          </StyledWrapper>
         </ReqoreThemeProvider>
       ) : null
     ),
diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
index bdf9f991..fd95cab2 100644
--- a/src/components/Tag/index.tsx
+++ b/src/components/Tag/index.tsx
@@ -113,7 +113,7 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TAG_TEXT_FROM_SIZE[size]}px;
   line-height: 1.1;
 
-  min-width: ${({ size }) => SIZE_TO_PX[size]}px;
+  min-width: ${({ size, asBadge }) => (asBadge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
   max-width: ${({ fixed }) => (fixed !== true ? '100%' : undefined)};
   flex: ${({ fluid, fixed }) => (fixed === true ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   align-self: ${({ fixed, fluid }) =>
@@ -275,7 +275,7 @@ const StyledTagContentKey = styled(StyledTagContent)`
 const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
   flex-shrink: 0;
   font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
-  width: ${({ size }) => SIZE_TO_PX[size]}px;
+  width: ${({ size }) => BADGE_SIZE_TO_PX[size]}px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -322,7 +322,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       rightIconColor,
       iconColor,
       labelKeyAlign = 'left',
-      labelAlign = 'left',
+      labelAlign,
       labelEffect,
       labelKeyEffect,
       leftIconProps,
@@ -440,7 +440,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 wrap={wrap}
                 hasWidth={!!width}
-                labelAlign={labelAlign}
+                labelAlign={labelAlign || (labelKey ? 'left' : 'center')}
                 compact={compact}
                 effect={{
                   ...labelEffect,

From b4c11bd213af02a532ce916225695482f3c17e73 Mon Sep 17 00:00:00 2001
From: foxhoundn <filip.witosz@gmail.com>
Date: Tue, 26 Nov 2024 23:57:33 +0100
Subject: [PATCH 6/6] Update ReqoreTree component: replace minimal button style
 with transparent, adjust layout for better alignment

---
 src/components/Tree/index.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
index 88302f17..2fa1db05 100644
--- a/src/components/Tree/index.tsx
+++ b/src/components/Tree/index.tsx
@@ -183,7 +183,7 @@ export const ReqoreTree = ({
           <ReqoreButton
             compact
             leftIconColor='muted'
-            minimal
+            transparent
             className='reqore-tree-delete'
             icon='IndeterminateCircleLine'
             intent='muted'
@@ -228,7 +228,6 @@ export const ReqoreTree = ({
                 rotation={isExpandable ? 0 : -90}
                 intent='muted'
                 style={{
-                  position: 'absolute',
                   marginLeft: `-${ICON_FROM_SIZE[zoomToSize[zoom]]}px`,
                 }}
               />
@@ -248,6 +247,7 @@ export const ReqoreTree = ({
                   <ReqoreButton
                     size='tiny'
                     flat
+                    transparent
                     icon='AddCircleLine'
                     onClick={() => {
                       setManagementDialog({
@@ -257,8 +257,7 @@ export const ReqoreTree = ({
                         type: isArray(_data[key]) ? 'array' : 'object',
                       });
                     }}
-                    leftIconColor='info'
-                    minimal
+                    intent='info'
                     compact
                   />
                 </ReqoreControlGroup>
@@ -287,7 +286,7 @@ export const ReqoreTree = ({
               )}
             </ReqoreControlGroup>
           ) : (
-            <ReqoreControlGroup verticalAlign='flex-start'>
+            <ReqoreControlGroup verticalAlign='center'>
               <ReqorePopover
                 component={ReqoreP}
                 componentProps={{