#RI-4529-4545 - update styles (#2119)

Author: AmirAllayarovSofteq

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}>

redisinsight/ui/src/components/live-time-recommendations/components/recommendation/styles.module.scss

@@ -16,29 +16,54 @@
     .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;
       }
     }
 
     .euiPanel {
       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%;
 }