fixing styles for InlineItemEditor.tsx 3

Author: pd-redis

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -250,7 +250,9 @@ const AutoRefresh = ({
         anchorPosition="downRight"
         isOpen={isPopoverOpen}
         anchorClassName={styles.anchorWrapper}
-        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper)}
+        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper, {
+          [styles.popoverWrapperEditing]: editingRate,
+        })}
         closePopover={closePopover}
         button={
           <IconButton

redisinsight/ui/src/components/auto-refresh/styles.module.scss

@@ -61,11 +61,14 @@
 
     input {
       height: 30px !important;
-      border-radius: 0px !important;
+      border-radius: 0 !important;
       background-color: var(--euiColorLightestShade) !important;
     }
   }
 }
+.popoverWrapperEditing {
+  height: 140px;
+}
 
 .inputContainer {
   height: 30px;

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
-import { Row } from 'uiSrc/components/base/layout/flex'
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Theme } from 'uiSrc/components/base/theme/types'
 import { Props } from 'uiSrc/components/inline-item-editor/InlineItemEditor'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
@@ -25,9 +25,13 @@ const RefStyledContainer = React.forwardRef(
 export const StyledContainer = styled(RefStyledContainer)`
   max-width: 100%;
 
-  :global(.euiFormControlLayout) {
+  & .euiFormControlLayout {
     max-width: 100% !important;
   }
+
+  & .tooltip {
+    display: inline-block;
+  }
 `
 
 export const IIEContainer = React.forwardRef<
@@ -50,9 +54,6 @@ export const DeclineButton = styled(IconButton).attrs({
   icon: CancelSlimIcon,
   'aria-label': 'Cancel editing',
 })`
-  width: 50%;
-  height: 100%;
-
   &:hover {
     color: ${({ theme }: { theme: Theme }) =>
       theme.semantic.color.text.danger500};
@@ -64,9 +65,7 @@ export const ApplyButton = styled(IconButton).attrs({
   color: 'primary',
   'aria-label': 'Apply',
 })`
-  height: 100% !important;
-  width: 100% !important;
-
+  vertical-align: initial;
   &:hover:not([class*='isDisabled']) {
     color: ${({ theme }: { theme: Theme }) =>
       theme.semantic.color.text.neutral500};
@@ -134,6 +133,13 @@ const designs = {
   `,
 }
 
+export const ActionsWrapper = styled(FlexItem)<{
+  $size?: { width: string; height: string }
+}>`
+  width: ${({ $size }) => $size?.width ?? '24px'} !important;
+  height: ${({ $size }) => $size?.height ?? '24px'} !important;
+`
+
 export const ActionsContainer = styled(Row)<ActionsContainerProps>`
   position: absolute;
   background-color: ${({ theme }: { theme: Theme }) =>
@@ -145,11 +151,4 @@ export const ActionsContainer = styled(Row)<ActionsContainerProps>`
   z-index: 3;
   ${({ $position }) => positions[$position || 'inside']}
   ${({ $design }) => designs[$design || 'default']}
-
-  .tooltip,
-  .declineBtn,
-  .popoverWrapper {
-    width: 50% !important;
-    height: 100% !important;
-  }
 `

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
+import { useTheme } from '@redis-ui/styles'
 import { EuiFieldText } from '@elastic/eui'
 
 import * as keys from 'uiSrc/constants/keys'
@@ -12,6 +13,7 @@ import { DestructiveButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
 import {
   ActionsContainer,
+  ActionsWrapper,
   ApplyButton,
   DeclineButton,
   IIEContainer,
@@ -92,6 +94,9 @@ const InlineItemEditor = (props: Props) => {
   const [value, setValue] = useState<string>(initialValue)
   const [isError, setIsError] = useState<boolean>(false)
   const [isShowApprovePopover, setIsShowApprovePopover] = useState(false)
+  const theme = useTheme()
+
+  const size = theme.components.iconButton.sizes[iconSize ?? 'M']
 
   const inputRef: Ref<HTMLInputElement> = useRef(null)
 
@@ -165,7 +170,7 @@ const InlineItemEditor = (props: Props) => {
 
   const ApplyBtn = (
     <RiTooltip
-      anchorClassName={styles.tooltip}
+      anchorClassName={cx(styles.tooltip, 'tooltip')}
       position="bottom"
       title={
         (isDisabled && disabledTooltipText?.title) ||
@@ -227,6 +232,8 @@ const InlineItemEditor = (props: Props) => {
                   )}
                 </FlexItem>
                 <ActionsContainer
+                  justify="around"
+                  gap="m"
                   $position={controlsPosition}
                   $design={controlsDesign}
                   grow={false}
@@ -236,53 +243,61 @@ const InlineItemEditor = (props: Props) => {
                     controlsClassName,
                   )}
                 >
-                  <DeclineButton
-                    size={iconSize ?? 'M'}
-                    onClick={onDecline}
-                    disabled={isLoading}
-                    data-testid="cancel-btn"
-                  />
-                  {!approveByValidation && ApplyBtn}
+                  <ActionsWrapper $size={size}>
+                    <DeclineButton
+                      onClick={onDecline}
+                      disabled={isLoading}
+                      data-testid="cancel-btn"
+                    />
+                  </ActionsWrapper>
+                  {!approveByValidation && (
+                    <ActionsWrapper $size={size}>{ApplyBtn}</ActionsWrapper>
+                  )}
                   {approveByValidation && (
-                    <RiPopover
-                      anchorPosition="leftCenter"
-                      isOpen={isShowApprovePopover}
-                      closePopover={() => setIsShowApprovePopover(false)}
-                      anchorClassName={styles.popoverAnchor}
-                      panelClassName={cx(styles.popoverPanel)}
-                      button={ApplyBtn}
-                    >
-                      <div
-                        className={styles.popover}
-                        data-testid="approve-popover"
+                    <ActionsWrapper $size={size}>
+                      <RiPopover
+                        anchorPosition="leftCenter"
+                        isOpen={isShowApprovePopover}
+                        closePopover={() => setIsShowApprovePopover(false)}
+                        anchorClassName={cx(
+                          styles.popoverAnchor,
+                          'popoverAnchor',
+                        )}
+                        panelClassName={cx(styles.popoverPanel)}
+                        button={ApplyBtn}
                       >
-                        <Text size="m" component="div">
-                          {!!approveText?.title && (
-                            <h4>
-                              <b>{approveText?.title}</b>
-                            </h4>
-                          )}
-                          <Text
-                            size="s"
-                            color="subdued"
-                            className={styles.approveText}
-                          >
-                            {approveText?.text}
+                        <div
+                          className={styles.popover}
+                          data-testid="approve-popover"
+                        >
+                          <Text size="m" component="div">
+                            {!!approveText?.title && (
+                              <h4>
+                                <b>{approveText?.title}</b>
+                              </h4>
+                            )}
+                            <Text
+                              size="s"
+                              color="subdued"
+                              className={styles.approveText}
+                            >
+                              {approveText?.text}
+                            </Text>
                           </Text>
-                        </Text>
-                        <div className={styles.popoverFooter}>
-                          <DestructiveButton
-                            aria-label="Save"
-                            className={cx(styles.btn, styles.saveBtn)}
-                            disabled={isDisabledApply()}
-                            onClick={handleFormSubmit}
-                            data-testid="save-btn"
-                          >
-                            Save
-                          </DestructiveButton>
+                          <div className={styles.popoverFooter}>
+                            <DestructiveButton
+                              aria-label="Save"
+                              className={cx(styles.btn, styles.saveBtn)}
+                              disabled={isDisabledApply()}
+                              onClick={handleFormSubmit}
+                              data-testid="save-btn"
+                            >
+                              Save
+                            </DestructiveButton>
+                          </div>
                         </div>
-                      </div>
-                    </RiPopover>
+                      </RiPopover>
+                    </ActionsWrapper>
                   )}
                 </ActionsContainer>
               </form>

redisinsight/ui/src/components/inline-item-editor/styles.module.scss

@@ -15,15 +15,7 @@
 }
 
 .controls {
-  position: absolute;
-  background-color: var(--euiColorLightestShade);
-  width: 80px;
-  height: 33px;
-
-  z-index: 3;
-
   .tooltip,
-  .declineBtn,
   .popoverWrapper {
     width: 50% !important;
     height: 100% !important;

redisinsight/ui/src/components/instance-header/styles.module.scss

@@ -69,6 +69,10 @@
 
 .dbIndexInput {
   width: 60px !important;
+  height: 32px !important;
+  border-color: transparent !important;
+  border-bottom-right-radius: 0 !important;
+  border-top-right-radius: 0 !important;
 }
 
 .divider {

redisinsight/ui/src/components/settings-item/styles.module.scss

@@ -1,6 +1,8 @@
 .input {
   height: 31px !important;
   font-family: 'Graphik', sans-serif !important;
+  border-bottom-right-radius: 0 !important;
+  border-top-right-radius: 0 !important;
 }
 
 .inputEditing {
@@ -13,8 +15,7 @@
   align-items: center;
   justify-content: space-between;
   padding-left: 10px;
-  padding-bottom: 5px;
-  
+
   & > * {
     line-height: 3.1rem !important;
   }