Merge pull request #3535 from RedisInsight/fe/bugfix/RI-5857

#RI-5857 - fix styles, fix app crash

Author: vlad-dargel

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -304,7 +304,7 @@ const QueryCardHeader = (props: Props) => {
             <EuiButtonIcon
               iconType="copy"
               aria-label="Copy query"
-              className="copy-btn"
+              className={cx('copy-btn', styles.copyBtn)}
               disabled={emptyCommand}
               onClick={(event: React.MouseEvent) => handleCopy(event, query || '')}
               data-testid="copy-command"

redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss

@@ -185,7 +185,14 @@ $marginIcon: 12px;
 }
 
 .titleWrapper {
+  justify-content: center;
+  min-height: 24px;
   overflow: hidden;
+
+  .copyBtn {
+    margin-top: 2px;
+    margin-left: 12px !important;
+  }
 }
 
 .controls {

redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/styles.module.scss

@@ -23,6 +23,6 @@
   padding: 16px 30px !important;
   border-color: var(--euiColorPrimary) !important;
   :global(.euiPopover__panelArrow:before) {
-    border-top-color: var(--euiColorPrimary) !important;
+    border-top-color: var(--euiColorLightShade) !important;
   }
 }

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/BulkDeleteFooter/styles.module.scss

@@ -19,7 +19,7 @@
 .panelPopover {
   border-color: var(--euiColorPrimary) !important;
   :global(.euiPopover__panelArrow:before) {
-    border-top-color: var(--euiColorPrimary) !important;
+    border-top-color: var(--euiColorLightShade) !important;
   }
 }
 

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkDelete/styles.module.scss

@@ -16,32 +16,6 @@
   line-height: 24px;
 }
 
-.panelPopover {
-  border-color: var(--euiColorPrimary) !important;
-  :global(.euiPopover__panelArrow:before) {
-    border-top-color: var(--euiColorPrimary) !important;
-  }
-}
-
-.popoverIcon {
-  position: absolute;
-  color: var(--euiColorWarningLight) !important;
-  width: 24px !important;
-  height: 24px !important;
-}
-
-.popoverItem {
-  font-size: 13px !important;
-  line-height: 18px !important;
-  padding-left: 34px;
-}
-
-.popoverItemTitle {
-  color: var(--htmlColor) !important;
-  font-size: 14px !important;
-  line-height: 24px !important;
-}
-
 .content {
   display: flex;
   min-height: 20px;

redisinsight/ui/src/pages/database-analysis/components/recommendations-view/Recommendations.tsx

@@ -107,7 +107,7 @@ const Recommendations = () => {
           {title}
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiFlexItem grow={false}>2
+      <EuiFlexItem grow={false}>
         <RecommendationBadges badges={badges} />
       </EuiFlexItem>
     </EuiFlexGroup>

redisinsight/ui/src/pages/home/components/form/DatabaseForm.tsx

@@ -97,7 +97,7 @@ const DatabaseForm = (props: Props) => {
             <EuiFormRow label="Host*">
               <EuiFieldText
                 autoFocus={autoFocus}
-                name="host"
+                name="ip"
                 id="host"
                 data-testid="host"
                 color="secondary"