Merge pull request #122 from RedisInsight/bugfix/change_fonts

bugfix/change_fonts

Author: rsergeenko

redisinsight/ui/src/components/command-helper/CommandHelper/styles.module.scss

@@ -48,7 +48,7 @@
 
 .summary {
   font: normal normal normal 13px/18px Graphik, sans-serif !important;
-  letter-spacing: -0.13px;
+  letter-spacing: -0.13px !important;
   padding: 10px 0 5px;
 }
 

redisinsight/ui/src/components/command-helper/components/command-helper-search-output/styles.module.scss

@@ -20,5 +20,5 @@
 }
 
 .summary, .summary div {
-  color: var(--inputPlaceHolderColor) !important;
+  color: var(--inputPlaceholderColor) !important;
 }

redisinsight/ui/src/components/page-breadcrumbs/styles.module.scss

@@ -6,6 +6,7 @@
   :global(.euiBreadcrumb) {
     margin-bottom: 0;
     font-size: 13px;
+    letter-spacing: -0.13px;
     font-weight: 500;
     color: var(--euiTextSubduedColor) !important;
 

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

@@ -33,6 +33,7 @@
   font-size: 16px;
   line-height: 20px;
   font-weight: 500;
+  letter-spacing: 0;
 }
 
 .connectionTypeTitleFullWidth {

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

@@ -14,7 +14,7 @@
   padding-right: 10px;
   height: 43px;
   margin: 0 auto;
-  width: 210px;
+  width: 220px;
   text-decoration: none !important;
 
   :global(.euiButton__text) {

redisinsight/ui/src/styles/base/_inputs.scss

@@ -19,7 +19,7 @@
 }
 
 input::placeholder, textarea::placeholder {
-  color: var(--inputPlaceHolderColor) !important;
+  color: var(--inputPlaceholderColor) !important;
 }
 
 input[type='password'] ~ .euiFormControlLayoutIcons,

redisinsight/ui/src/styles/components/_buttons.scss

@@ -5,6 +5,8 @@
   color: var(--euiColorGhost) !important;
   font-weight: 500 !important;
   letter-spacing: normal !important;
+  height: 42px !important;
+  line-height: 42px !important;
 
   &.euiButton--secondary {
     color: var(--buttonSecondaryTextColor) !important;
@@ -27,12 +29,6 @@
       box-shadow: none;
     }
   }
-  &.euiButton--fill {
-    color: var(--euiColorPrimaryText) !important;
-    &:hover {
-      color: var(--euiColorPrimaryText) !important;
-    }
-  }
 }
 .euiButton.euiButton--fill {
   &.euiButton--secondary {
@@ -87,11 +83,15 @@
 }
 
 .euiButton__text {
-  font: normal normal 500 14px/20px Graphik, sans-serif !important;
+  font: normal normal 500 15px/20px Graphik, sans-serif !important;
 }
 
-.euiButton--small .euiButton__text {
-  font: normal normal 500 13px/16px Graphik, sans-serif !important;
+.euiButton--small {
+  height: 30px !important;
+  line-height: 30px !important;
+  .euiButton__text {
+    font: normal normal 500 13px/16px Graphik, sans-serif !important;
+  }
 }
 
 .euiButton {

redisinsight/ui/src/styles/components/_tool_tip.scss

@@ -5,6 +5,7 @@
   box-shadow: 0 3px 15px var(--controlsBoxShadowColor) !important;
   font-weight: 400;
   font-size: 12px !important;
+  letter-spacing: -0.12px;
 
   &__title {
     color: var(--euiTooltipTitleTextColor) !important;

redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss

@@ -76,7 +76,7 @@
   --tableLightestBorderColor: #{$tableLightestBorderColor};
   --tableDarkestBorderColor: #{$tableDarkestBorderColor};
   --browserTableRowEven: #{$browserTableRowEven};
-  --inputPlaceHolderColor: #{$inputPlaceHolderColor};
+  --inputPlaceholderColor: #{$inputPlaceholderColor};
   --inputDisabledBackgroundColor: #{$inputDisabledBackgroundColor};
   --inputTextColor: #{$inputTextColor};
   --controlsBoxShadowColor: #{$controlsBoxShadowColor};

redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss

@@ -45,7 +45,7 @@ $browserTableRowEven: #171717;
 
 $inputTextColor: #DFE5EF;
 $inputDisabledBackgroundColor: $euiColorEmptyShade;
-$inputPlaceHolderColor: #989898;
+$inputPlaceholderColor: #898A90;
 $controlsBoxShadowColor: rgba(0, 0, 0, 0.45);
 $controlsBorderColor: #757575;
 $controlsLabelColor: #b5b6c0;
@@ -54,8 +54,8 @@ $iconsDefaultHoverColor: #DFE5EF;
 $separatorColor: #3D3D3D;
 $separatorDropdownColor: #8B90A3;
 
-$buttonSecondaryHoverColor: #3e41a0;
-$buttonSecondaryTextColor: #ffffff;
+$buttonSecondaryHoverColor: #364DA8;
+$buttonSecondaryTextColor: #DFE5EF;
 $buttonSecondaryDisabledTextColor: #8B90A3;
 $buttonDangerHoverColor: #E8524A;
 $buttonIconPrimaryHover: #364DA8;