From e76ada0958dcf57c8360bb5168d130717f6c4f0c Mon Sep 17 00:00:00 2001
From: Amir Allayarov <amir.allayarov@softeq.com>
Date: Mon, 22 May 2023 12:21:46 +0700
Subject: [PATCH] #RI-4529-4545 - update styles

---
 .../recommendation/Recommendation.tsx         |  6 ++--
 .../recommendation/styles.module.scss         | 35 ++++++++++++++++---
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx b/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx
index 32acd9db79..bbed498995 100644
--- a/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx
+++ b/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx
@@ -179,13 +179,13 @@ const Recommendation = ({
 
   const renderButtonContent = (redisStack: Maybe<boolean>, title: string, id: string) => (
     <EuiFlexGroup
-      className={styles.accordionButton}
+      className={styles.fullWidth}
       responsive={false}
       alignItems="center"
       justifyContent="spaceBetween"
       gutterSize="none"
     >
-      <EuiFlexGroup alignItems="center" gutterSize="none">
+      <EuiFlexGroup className={styles.fullWidth} alignItems="center" gutterSize="none">
         <EuiFlexItem grow={false}>
           {redisStack && (
             <EuiLink
@@ -210,7 +210,7 @@ const Recommendation = ({
             </EuiLink>
           )}
         </EuiFlexItem>
-        <EuiFlexItem grow>
+        <EuiFlexItem grow className="truncateText">
           {title}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
diff --git a/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/styles.module.scss b/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/styles.module.scss
index b5c29c8c40..5573272455 100644
--- a/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/styles.module.scss
+++ b/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/styles.module.scss
@@ -16,22 +16,35 @@
     .euiAccordion__button {
       padding: 4px 18px;
       border-bottom: 1px solid transparent;
-      color: var(--htmlColor) !important;
-      background-color: var(--recommendationBgColor) !important;
+      color: var(--euiTextSubduedColor) !important;
+      background-color: var(--recommendationsBgColor) !important;
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 400;
 
       transition: border-bottom-color ease 0.3s;
 
       .euiIEFlexWrapFix {
         display: inline-block;
-        width: 100%;
+        width: calc(100% - 28px);
+      }
+
+      .truncateText {
+        display: block;
       }
     }
 
     .euiAccordion.euiAccordion-isOpen {
       .euiAccordion__button {
         border-bottom-color: var(--controlsBorderColor);
+        background-color: var(--recommendationBgColor) !important;
+        color: var(--htmlColor) !important;
+        font-weight: 500;
+      }
+
+      .truncateText {
+        display: flex;
+        overflow: visible;
+        white-space: normal;
       }
     }
 
@@ -39,6 +52,18 @@
       background: var(--recommendationsBgColor) !important;
       padding-bottom: 0 !important;
     }
+
+    .euiAccordion__iconWrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+     }
+
+    .euiAccordion__buttonReverse .euiAccordion__icon {
+      width: 12px;
+      height: 12px;
+      vertical-align: middle;
+    }
   }
 }
 
@@ -104,7 +129,7 @@
   }
 }
 
-.accordionButton {
+.fullWidth {
   width: 100%;
 }