Merge pull request #58 from RedisInsight/fix/RI-2059_db-help-links

Fix/ HelpLinksMenu styles

Author: ArtyomPSofteq

redisinsight/ui/src/pages/home/components/HelpLinksMenu/HelpLinksMenu.tsx

@@ -54,7 +54,7 @@ const HelpLinksMenu = ({ onLinkClick }: IProps) => {
 
   return (
     <EuiInputPopover
-      style={{ minWidth: '244px' }}
+      style={{ width: '245px' }}
       display="block"
       id="databasesMenu"
       input={button}

redisinsight/ui/src/pages/home/components/HelpLinksMenu/styles.module.scss

@@ -1,30 +1,34 @@
 @import '@elastic/eui/src/global_styling/index';
 
+$borderWidth: 2px;
+
 .button {
   @include euiButtonBase;
   display: flex;
-  width: 100%;
+  min-width: 245px;
   justify-content: space-between;
   align-items: center;
   border-radius: 4px;
-  border: 2px solid var(--controlsBorderColor);
+  border: $borderWidth solid var(--euiColorSecondary);
   padding: 0 20px;
   color: var(--inputTextColor);
   font: normal normal bold 14px/17px Graphik, sans-serif;
 }
 
 .buttonOpen {
-  border-bottom-color: var(--separatorColor) !important;;
+  border-bottom-width: 0 !important;
+  padding-bottom: $borderWidth;
   border-radius: 4px 4px 0 0;
 }
 
 .popover {
-  border: 2px solid var(--controlsBorderColor) !important;
+  border: $borderWidth solid var(--euiColorSecondary) !important;
+  background-color: var(--euiPageBackgroundColor) !important;
   border-top-width: 0 !important;
 }
 
 .item {
-  padding: 10px 20px;
+  padding: 10px 20px !important;
   background-color: transparent !important;
   text-decoration: none !important;
   font: normal normal bold 12px/17px Graphik, sans-serif;