diff --git a/configs/webpack.config.web.prod.babel.js b/configs/webpack.config.web.prod.babel.js index 45a17ac15c..acb39ccb29 100644 --- a/configs/webpack.config.web.prod.babel.js +++ b/configs/webpack.config.web.prod.babel.js @@ -122,6 +122,20 @@ export default merge(commonConfig, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, + // WOFF2 Font + { + test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, + use: [ + { + loader: 'file-loader', + options: { + name: '[hash]-[name].[ext]', + outputPath: 'static', + publicPath: 'static', + }, + }, + ], + }, // TTF Font { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Light.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Light.otf deleted file mode 100644 index 89b54757af..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Light.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Light.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Light.woff2 new file mode 100644 index 0000000000..12cd6e44f8 Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Light.woff2 differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-LightItalic.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-LightItalic.otf deleted file mode 100644 index 07778948b4..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-LightItalic.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-LightItalic.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-LightItalic.woff2 new file mode 100644 index 0000000000..3d6136a2db Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-LightItalic.woff2 differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Medium.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Medium.otf deleted file mode 100644 index 5d510bb174..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Medium.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Medium.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Medium.woff2 new file mode 100644 index 0000000000..6214da69c8 Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Medium.woff2 differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-MediumItalic.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-MediumItalic.otf deleted file mode 100644 index 5847de0111..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-MediumItalic.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-MediumItalic.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-MediumItalic.woff2 new file mode 100644 index 0000000000..983076566c Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-MediumItalic.woff2 differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Regular.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Regular.otf deleted file mode 100644 index 16985093d9..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Regular.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Regular.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Regular.woff2 new file mode 100644 index 0000000000..b1fd3d4b69 Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Regular.woff2 differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-RegularItalic.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-RegularItalic.otf deleted file mode 100644 index 231c2b6774..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-RegularItalic.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-RegularItalic.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-RegularItalic.woff2 new file mode 100644 index 0000000000..b87af84268 Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-RegularItalic.woff2 differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Semibold.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Semibold.otf deleted file mode 100644 index 1979fd830a..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Semibold.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-Semibold.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Semibold.woff2 new file mode 100644 index 0000000000..4ba509b5d2 Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-Semibold.woff2 differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-SemiboldItalic.otf b/redisinsight/ui/src/assets/fonts/graphik/Graphik-SemiboldItalic.otf deleted file mode 100644 index 25b3933538..0000000000 Binary files a/redisinsight/ui/src/assets/fonts/graphik/Graphik-SemiboldItalic.otf and /dev/null differ diff --git a/redisinsight/ui/src/assets/fonts/graphik/Graphik-SemiboldItalic.woff2 b/redisinsight/ui/src/assets/fonts/graphik/Graphik-SemiboldItalic.woff2 new file mode 100644 index 0000000000..65a9c357dc Binary files /dev/null and b/redisinsight/ui/src/assets/fonts/graphik/Graphik-SemiboldItalic.woff2 differ diff --git a/redisinsight/ui/src/assets/img/active_auto.svg b/redisinsight/ui/src/assets/img/active_auto.svg index bc73d0dc30..54fffbbf6a 100644 --- a/redisinsight/ui/src/assets/img/active_auto.svg +++ b/redisinsight/ui/src/assets/img/active_auto.svg @@ -2,7 +2,7 @@ - - - - - diff --git a/redisinsight/ui/src/assets/img/active_manual.svg b/redisinsight/ui/src/assets/img/active_manual.svg index e135078f2b..b4b393c38f 100644 --- a/redisinsight/ui/src/assets/img/active_manual.svg +++ b/redisinsight/ui/src/assets/img/active_manual.svg @@ -16,16 +16,16 @@ c0.466,0,0.845,0.378,0.845,0.845c0,0.466-0.378,0.844-0.845,0.844H7.238C6.793,44.222,6.44,43.871,6.389,43.426z"/> - - - - - - - - - - diff --git a/redisinsight/ui/src/assets/img/light_theme/active_manual.svg b/redisinsight/ui/src/assets/img/light_theme/active_manual.svg index 8e664b831d..1ad7a3251c 100644 --- a/redisinsight/ui/src/assets/img/light_theme/active_manual.svg +++ b/redisinsight/ui/src/assets/img/light_theme/active_manual.svg @@ -16,16 +16,16 @@ c0.466,0,0.845,0.378,0.845,0.845c0,0.466-0.378,0.844-0.845,0.844H7.238C6.793,44.222,6.44,43.871,6.389,43.426z"/> - - - - - - + - - + + diff --git a/redisinsight/ui/src/assets/img/multi_play_icon_light.svg b/redisinsight/ui/src/assets/img/multi_play_icon_light.svg index 1e0d0c67ec..bc8ebf9f9c 100644 --- a/redisinsight/ui/src/assets/img/multi_play_icon_light.svg +++ b/redisinsight/ui/src/assets/img/multi_play_icon_light.svg @@ -1,13 +1,13 @@ - + - - + + diff --git a/redisinsight/ui/src/assets/img/not_active_auto.svg b/redisinsight/ui/src/assets/img/not_active_auto.svg index 7c4d4af8f3..bd1ea53739 100644 --- a/redisinsight/ui/src/assets/img/not_active_auto.svg +++ b/redisinsight/ui/src/assets/img/not_active_auto.svg @@ -2,7 +2,7 @@ - - - - - diff --git a/redisinsight/ui/src/assets/img/not_active_manual.svg b/redisinsight/ui/src/assets/img/not_active_manual.svg index 4875892874..a996370837 100644 --- a/redisinsight/ui/src/assets/img/not_active_manual.svg +++ b/redisinsight/ui/src/assets/img/not_active_manual.svg @@ -16,16 +16,16 @@ c0.466,0,0.845,0.378,0.845,0.845c0,0.466-0.378,0.844-0.845,0.844H7.238C6.793,44.222,6.44,43.871,6.389,43.426z"/> - - - - - - - - - - diff --git a/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg b/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg index 9e05fcf50d..55e24b4125 100644 --- a/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg +++ b/redisinsight/ui/src/assets/img/workbench/table_view_icon_dark.svg @@ -2,10 +2,10 @@ - - - diff --git a/redisinsight/ui/src/components/cli/components/cli-command-info/styles.module.scss b/redisinsight/ui/src/components/cli/components/cli-command-info/styles.module.scss index 8684a747ef..08be1c8fbc 100644 --- a/redisinsight/ui/src/components/cli/components/cli-command-info/styles.module.scss +++ b/redisinsight/ui/src/components/cli/components/cli-command-info/styles.module.scss @@ -1,5 +1,6 @@ .container { font: normal normal 500 14px/21px Graphik, sans-serif !important; + letter-spacing: -0.14px; } .title { diff --git a/redisinsight/ui/src/components/cli/components/cli-header/styles.module.scss b/redisinsight/ui/src/components/cli/components/cli-header/styles.module.scss index 4a147e986d..489dbe54af 100644 --- a/redisinsight/ui/src/components/cli/components/cli-header/styles.module.scss +++ b/redisinsight/ui/src/components/cli/components/cli-header/styles.module.scss @@ -30,6 +30,7 @@ .endpointContainer { cursor: default; font: normal normal normal 12px/15px Graphik, sans-serif !important; + letter-spacing: -0.12px; max-width: 210px; display: inline-flex; padding-right: 10px; @@ -37,6 +38,7 @@ .endpoint { font: normal normal normal 12px/15px Graphik, sans-serif !important; + letter-spacing: -0.12px; display: inline-block !important; overflow: hidden; white-space: nowrap; diff --git a/redisinsight/ui/src/components/cli/components/cli-helper/CliHelper/styles.module.scss b/redisinsight/ui/src/components/cli/components/cli-helper/CliHelper/styles.module.scss index 32d370e5d5..1343f4b08d 100644 --- a/redisinsight/ui/src/components/cli/components/cli-helper/CliHelper/styles.module.scss +++ b/redisinsight/ui/src/components/cli/components/cli-helper/CliHelper/styles.module.scss @@ -49,16 +49,19 @@ .summary { font: normal normal normal 13px/18px Graphik, sans-serif !important; + letter-spacing: -0.13px; padding: 10px 0 5px; } .field { padding-top: 12px; font: normal normal normal 13px/17px Graphik, sans-serif !important; + letter-spacing: -0.13px; } .fieldTitle { font: normal normal 500 14px/17px Graphik, sans-serif !important; + letter-spacing: -0.14px; color: var(--euiTextSubduedColorHover); padding-bottom: 3px; } diff --git a/redisinsight/ui/src/components/cli/components/cli-search/CliSearchFilter/styles.module.scss b/redisinsight/ui/src/components/cli/components/cli-search/CliSearchFilter/styles.module.scss index 86c23fa16a..c8f540267f 100644 --- a/redisinsight/ui/src/components/cli/components/cli-search/CliSearchFilter/styles.module.scss +++ b/redisinsight/ui/src/components/cli/components/cli-search/CliSearchFilter/styles.module.scss @@ -1,12 +1,12 @@ .container { position: absolute; - height: 38px; + height: 36px; width: 180px; :global { .euiFormControlLayout { .euiSuperSelectControl { - height: 38px !important; + height: 36px !important; padding: 0 8px !important; background-color: var(--euiColorLightShade) !important; border-color: var(--euiColorLightShade) !important; @@ -75,7 +75,7 @@ align-items: center; width: 106px; - height: 38px; + height: 36px; padding-left: 12px; cursor: pointer; diff --git a/redisinsight/ui/src/components/cli/components/cli-search/CliSearchInput/styles.module.scss b/redisinsight/ui/src/components/cli/components/cli-search/CliSearchInput/styles.module.scss index 3729a8e34f..0c25dc8679 100644 --- a/redisinsight/ui/src/components/cli/components/cli-search/CliSearchInput/styles.module.scss +++ b/redisinsight/ui/src/components/cli/components/cli-search/CliSearchInput/styles.module.scss @@ -5,13 +5,13 @@ :global(.euiFormControlLayout) { max-width: calc(100%) !important; - height: 38px !important; + height: 36px !important; } } .searchInput { &:global(.euiFieldSearch) { border: 1px solid var(--euiColorLightShade) !important; - height: 38px !important; + height: 36px !important; } } diff --git a/redisinsight/ui/src/components/field-message/styles.module.scss b/redisinsight/ui/src/components/field-message/styles.module.scss index 1c2c21a201..20bdd3e6b1 100644 --- a/redisinsight/ui/src/components/field-message/styles.module.scss +++ b/redisinsight/ui/src/components/field-message/styles.module.scss @@ -8,5 +8,5 @@ } .message { font: normal normal normal 12px/16px Graphik, sans-serif; - letter-spacing: 0.43px; + letter-spacing: -0.12px } diff --git a/redisinsight/ui/src/components/instance-header/styles.module.scss b/redisinsight/ui/src/components/instance-header/styles.module.scss index 93f1a506be..087886aaab 100644 --- a/redisinsight/ui/src/components/instance-header/styles.module.scss +++ b/redisinsight/ui/src/components/instance-header/styles.module.scss @@ -52,11 +52,11 @@ font-size: 13px !important; line-height: 16px; padding-bottom: 4px; - font-weight: 600; + font-weight: 500; } .mi_smallText { - font: normal normal normal 10px/14px Graphik, sans-serif !important; + font: normal normal normal 12px/18px Graphik, sans-serif !important; color: var(--euiTooltipTextSecondColor) !important; margin-bottom: 8px; diff --git a/redisinsight/ui/src/components/query-card/QueryCardCliResult/styles.module.scss b/redisinsight/ui/src/components/query-card/QueryCardCliResult/styles.module.scss index 266d106481..e2ef72603a 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardCliResult/styles.module.scss +++ b/redisinsight/ui/src/components/query-card/QueryCardCliResult/styles.module.scss @@ -5,7 +5,7 @@ .container { @include euiScrollBar; flex: auto; - padding: 9px 20px; + padding: 9px 8px 9px 20px; overflow: auto; white-space: pre-wrap; word-break: break-all; diff --git a/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss b/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss index ffd62cf2b8..5f620cea2c 100644 --- a/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss +++ b/redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss @@ -58,6 +58,7 @@ $marginIcon: 12px; .title { display: inline-block; font: normal normal normal 13px/17px Graphik, sans-serif !important; + letter-spacing: -0.13px; overflow: hidden; :global(.euiToolTipAnchor) { @@ -79,8 +80,9 @@ $marginIcon: 12px; .timeText, .summaryText { font: normal normal normal 12px/16px Graphik, sans-serif; - color: var(--euiColorMediumShade) !important; - min-width: 75px; + letter-spacing: -0.12px; + color: var(--euiTextSubduedColor) !important; + min-width: 104px; text-align: left; } diff --git a/redisinsight/ui/src/components/virtual-table/styles.module.scss b/redisinsight/ui/src/components/virtual-table/styles.module.scss index df14b31584..75c980c6ed 100644 --- a/redisinsight/ui/src/components/virtual-table/styles.module.scss +++ b/redisinsight/ui/src/components/virtual-table/styles.module.scss @@ -177,7 +177,7 @@ $footerHeight: 38px; } .headerCell { - padding: 20px; + padding: 18px 20px; } .tableRowCell { diff --git a/redisinsight/ui/src/packages/clients-list-example/src/assets/table_view_icon_dark.svg b/redisinsight/ui/src/packages/clients-list-example/src/assets/table_view_icon_dark.svg deleted file mode 100644 index 9e05fcf50d..0000000000 --- a/redisinsight/ui/src/packages/clients-list-example/src/assets/table_view_icon_dark.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - diff --git a/redisinsight/ui/src/packages/clients-list-example/src/assets/table_view_icon_light.svg b/redisinsight/ui/src/packages/clients-list-example/src/assets/table_view_icon_light.svg deleted file mode 100644 index 2b92cfbe79..0000000000 --- a/redisinsight/ui/src/packages/clients-list-example/src/assets/table_view_icon_light.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - diff --git a/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg b/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg index 9e05fcf50d..55e24b4125 100644 --- a/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg +++ b/redisinsight/ui/src/packages/redisearch/src/assets/table_view_icon_dark.svg @@ -2,10 +2,10 @@ - - - diff --git a/redisinsight/ui/src/packages/redisearch/src/styles/styles.scss b/redisinsight/ui/src/packages/redisearch/src/styles/styles.scss index 12ee119ab7..d5e5953c26 100644 --- a/redisinsight/ui/src/packages/redisearch/src/styles/styles.scss +++ b/redisinsight/ui/src/packages/redisearch/src/styles/styles.scss @@ -19,7 +19,7 @@ html { word-break: break-all; padding: 16px 20px; - font: normal normal normal 13px/17px Graphik, sans-serif; + font: normal normal normal 13px/18px Graphik, sans-serif; text-align: left; letter-spacing: 0; color: var(--textColorShade); diff --git a/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx b/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx index 6d14db806d..1d5d157017 100644 --- a/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx +++ b/redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx @@ -125,7 +125,7 @@ const AddKey = (props: Props) => { helpText={ typeSelected === KeyTypes.ReJSON ? ( - + {HelpTexts.REJSON_SHOULD_BE_LOADED} ) diff --git a/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss b/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss index 2daed53a5a..116e570044 100644 --- a/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/filter-key-type/styles.module.scss @@ -8,7 +8,7 @@ .euiSuperSelectControl { display: flex; align-items: center; - height: 38px !important; + height: 36px !important; background-color: var(--euiColorLightShade) !important; box-shadow: none !important; border: 0 !important; @@ -67,7 +67,7 @@ align-items: center; width: 106px; - height: 38px; + height: 36px; padding-left: 12px; cursor: pointer; diff --git a/redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx b/redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx index 77e8c9b8f2..853a3f8a08 100644 --- a/redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx +++ b/redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx @@ -35,7 +35,7 @@ import styles from './styles.module.scss' const suffix = '_hash' const matchAllValue = '*' -const headerHeight = 64 +const headerHeight = 60 const rowHeight = 43 interface IHashField extends HashFieldDto { diff --git a/redisinsight/ui/src/pages/browser/components/key-details-header/styles.module.scss b/redisinsight/ui/src/pages/browser/components/key-details-header/styles.module.scss index 7513b6b5d1..ea60d66f3f 100644 --- a/redisinsight/ui/src/pages/browser/components/key-details-header/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/key-details-header/styles.module.scss @@ -62,6 +62,7 @@ .ttlInput { min-width: 110px; + font-size: 13px !important; &.editing { width: 150px; } diff --git a/redisinsight/ui/src/pages/browser/components/key-details-remove-items/styles.module.scss b/redisinsight/ui/src/pages/browser/components/key-details-remove-items/styles.module.scss index 83b84baee1..2743927fab 100644 --- a/redisinsight/ui/src/pages/browser/components/key-details-remove-items/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/key-details-remove-items/styles.module.scss @@ -21,7 +21,7 @@ .infoIcon { height: 41px !important; width: 40px !important; - color: #757575 !important; + color: #b5b6c0 !important; padding: 0 8px; } diff --git a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx index 1c90f8a51b..ccbebf9356 100644 --- a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx @@ -309,7 +309,7 @@ const KeyList = (props: Props) => {
{ onClick={() => handleLinkClick(item)} > {HELP_LINKS[HelpLink[item]].label} diff --git a/redisinsight/ui/src/pages/home/components/HelpLinksMenu/styles.module.scss b/redisinsight/ui/src/pages/home/components/HelpLinksMenu/styles.module.scss index 2835aa536a..67bd00bdc6 100644 --- a/redisinsight/ui/src/pages/home/components/HelpLinksMenu/styles.module.scss +++ b/redisinsight/ui/src/pages/home/components/HelpLinksMenu/styles.module.scss @@ -13,6 +13,7 @@ $borderWidth: 2px; padding: 0 20px; color: var(--inputTextColor); font: normal normal bold 14px/17px Graphik, sans-serif; + letter-spacing: -0.14px; } .buttonOpen { @@ -32,7 +33,7 @@ $borderWidth: 2px; background-color: transparent !important; text-decoration: none !important; font: normal normal bold 12px/17px Graphik, sans-serif; - letter-spacing: 0; + letter-spacing: -0.12px; &:hover { background-color: var(--hoverInListColorLight) !important; text-decoration: none !important; diff --git a/redisinsight/ui/src/pages/home/styles.scss b/redisinsight/ui/src/pages/home/styles.scss index 362035e0c8..94f2fadb36 100644 --- a/redisinsight/ui/src/pages/home/styles.scss +++ b/redisinsight/ui/src/pages/home/styles.scss @@ -28,7 +28,7 @@ thead tr { background-color: var(--euiColorEmptyShade); - height: 58px; + height: 54px; &:first-child { border-left: 1px solid var(--euiColorLightShade); @@ -59,7 +59,7 @@ .euiTableRow { font-size: 14px !important; - height: 50px; + height: 48px; .column_name { cursor: pointer; @@ -67,7 +67,7 @@ padding-bottom: 0; div { - line-height: 49px; + line-height: 47px; display: block; text-overflow: ellipsis; white-space: nowrap; @@ -209,6 +209,7 @@ .euiTableCellContent__text { font-size: 16px !important; font-family: 'Graphik', sans-serif !important; + font-weight: 500 !important; } .euiTableHeaderButton { @@ -237,7 +238,8 @@ textarea { max-width: 100% !important; opacity: 0.9; - font-size: 13px; + font-size: 14px; + line-height: 24px; } } @@ -305,7 +307,6 @@ .getStartedForm { max-width: 752px; - letter-spacing: 0.14px !important; padding-top: 3px; font-family: 'Graphik', sans-serif; font-weight: 400 !important; diff --git a/redisinsight/ui/src/pages/settings/styles.module.scss b/redisinsight/ui/src/pages/settings/styles.module.scss index 9e373850aa..7206295a2b 100644 --- a/redisinsight/ui/src/pages/settings/styles.module.scss +++ b/redisinsight/ui/src/pages/settings/styles.module.scss @@ -18,7 +18,7 @@ .title { padding-bottom: 16px; - font: normal normal 600 24px/29px Graphik, sans-serif !important; + font: normal normal 500 24px/29px Graphik, sans-serif !important; } .accordion { diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss index a58a3e4f18..32424ff45e 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss @@ -10,5 +10,5 @@ .buttonText { flex: 1; text-align: center; - letter-spacing: 1.1px; + letter-spacing: normal; } diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss index 92487f62b7..f11fee8396 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss @@ -5,7 +5,7 @@ transition: border-color 0.2s ease-in-out; .group-header { font: normal normal medium 11px/15px Graphik; - letter-spacing: 1.1px; + letter-spacing: -0.12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss index 8e5bd2b376..b573bfa744 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalLink/styles.module.scss @@ -2,6 +2,7 @@ width: auto; white-space: nowrap; font: normal normal normal 13px/30px Graphik; + letter-spacing: -0.13px; font-weight: normal !important; & > button { align-items: center; diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss index ac03c9326e..8204d5bdbb 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss @@ -1,12 +1,13 @@ .enablement-area__page { height: 100%; font: normal normal normal 12px/18px Graphik; + letter-spacing: -0.12px; h1, h2, h3, h4, h5, h6 { color: var(--euiColorGhost); font: normal normal medium 12px/16px Graphik; margin-bottom: 12px; - letter-spacing: 1.1px; + letter-spacing: -0.12px; } p { @@ -19,6 +20,7 @@ } b, strong { font: normal normal normal 12px/16px Graphik; + letter-spacing: -0.12px; color: var(--htmlColor); } hr { diff --git a/redisinsight/ui/src/styles/base/_base.scss b/redisinsight/ui/src/styles/base/_base.scss index 6cab45bfae..bd40779e00 100644 --- a/redisinsight/ui/src/styles/base/_base.scss +++ b/redisinsight/ui/src/styles/base/_base.scss @@ -1,5 +1,9 @@ $sideBarSize: 60px; +html { + letter-spacing: normal !important; +} + * { box-sizing: border-box; } diff --git a/redisinsight/ui/src/styles/base/_fonts.scss b/redisinsight/ui/src/styles/base/_fonts.scss index 6f966f7bf9..75838884fc 100644 --- a/redisinsight/ui/src/styles/base/_fonts.scss +++ b/redisinsight/ui/src/styles/base/_fonts.scss @@ -12,50 +12,50 @@ @font-face { font-family: 'Graphik'; font-weight: 300; - src: url('uiSrc/assets/fonts/graphik/Graphik-Light.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-Light.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 300; font-style: italic; - src: url('uiSrc/assets/fonts/graphik/Graphik-LightItalic.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-LightItalic.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; - src: url('uiSrc/assets/fonts/graphik/Graphik-Regular.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-Regular.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-style: italic; - src: url('uiSrc/assets/fonts/graphik/Graphik-RegularItalic.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-RegularItalic.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 500; - src: url('uiSrc/assets/fonts/graphik/Graphik-Medium.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-Medium.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 500; font-style: italic; - src: url('uiSrc/assets/fonts/graphik/Graphik-MediumItalic.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-MediumItalic.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 600; - src: url('uiSrc/assets/fonts/graphik/Graphik-Semibold.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-Semibold.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 600; font-style: italic; - src: url('uiSrc/assets/fonts/graphik/Graphik-SemiboldItalic.otf') format('opentype'); + src: url('uiSrc/assets/fonts/graphik/Graphik-SemiboldItalic.woff2') format('woff2'); } diff --git a/redisinsight/ui/src/styles/base/_links.scss b/redisinsight/ui/src/styles/base/_links.scss index 2435c357e0..247d92d350 100644 --- a/redisinsight/ui/src/styles/base/_links.scss +++ b/redisinsight/ui/src/styles/base/_links.scss @@ -9,3 +9,13 @@ background-color: inherit !important; } } + +a[target="_blank"], a.euiLink[target="_blank"] { + color: var(--externalLinkColor) !important; +} + +.euiToolTip { + a[target="_blank"], a.euiLink[target="_blank"] { + color: var(--externalLinkTooltipColor) !important; + } +} diff --git a/redisinsight/ui/src/styles/base/_typography.scss b/redisinsight/ui/src/styles/base/_typography.scss index e185bd236e..f5a8890dba 100644 --- a/redisinsight/ui/src/styles/base/_typography.scss +++ b/redisinsight/ui/src/styles/base/_typography.scss @@ -1,6 +1,7 @@ body { font-family: 'Graphik', sans-serif; font-size: 14px; + letter-spacing: -0.14px; b { font-weight: 500; @@ -8,27 +9,33 @@ body { .euiSuperSelect__item { font-size: 13px; + letter-spacing: -0.13px; } .euiText { font-size: 0.875rem; + letter-spacing: -0.14px; } .euiText--small { font-size: 0.8125rem; + letter-spacing: -0.13px; line-height: 1.1875rem; } .euiText--extraSmall { font-size: 0.75rem; + letter-spacing: -0.12px; } .euiTitle { font-weight: 500; + letter-spacing: normal; } .euiHealth--textSizeS { font-size: 0.8125rem; + letter-spacing: -0.13px; } } @@ -86,7 +93,7 @@ body { .euiFieldPassword, .euiTextArea { font-family: 'Graphik', sans-serif !important; - color: var(--inputTextColor) !important; + color: var(--htmlColor) !important; } .euiFieldText:disabled { diff --git a/redisinsight/ui/src/styles/components/_accordion.scss b/redisinsight/ui/src/styles/components/_accordion.scss index c8e5ac5d8c..fc44bbb7eb 100644 --- a/redisinsight/ui/src/styles/components/_accordion.scss +++ b/redisinsight/ui/src/styles/components/_accordion.scss @@ -3,7 +3,7 @@ border: 2px solid var(--tableDarkestBorderColor); h3 { font: normal normal 500 15px/24px Graphik, sans-serif !important; - letter-spacing: 0.53px; + letter-spacing: normal; } } @@ -21,6 +21,7 @@ .euiCollapsibleNavGroup__title { font: normal normal normal 14px/16px Graphik, sans-serif !important; + letter-spacing: -0.14px; padding-bottom: 0 !important; height: 26px; line-height: 26px !important; diff --git a/redisinsight/ui/src/styles/components/_buttons.scss b/redisinsight/ui/src/styles/components/_buttons.scss index 1aef36e4c7..cf5d3a023c 100644 --- a/redisinsight/ui/src/styles/components/_buttons.scss +++ b/redisinsight/ui/src/styles/components/_buttons.scss @@ -1,6 +1,11 @@ @import '@elastic/eui/src/global_styling/index'; .euiButton { + text-decoration: none !important; + color: var(--euiColorGhost) !important; + font-weight: 500 !important; + letter-spacing: normal !important; + &.euiButton--secondary { color: var(--buttonSecondaryTextColor) !important; border-color: var(--euiColorSecondary); @@ -22,6 +27,12 @@ box-shadow: none; } } + &.euiButton--fill { + color: var(--euiColorPrimaryText) !important; + &:hover { + color: var(--euiColorPrimaryText) !important; + } + } } .euiButton.euiButton--fill { &.euiButton--secondary { @@ -75,21 +86,12 @@ } } -.euiButton { - text-decoration: none !important; - color: var(--euiColorGhost) !important; - - &.euiButton--fill { - color: white !important; - } -} - .euiButton__text { - font: normal normal normal 14px/20px Graphik, sans-serif !important; + font: normal normal 500 14px/20px Graphik, sans-serif !important; } .euiButton--small .euiButton__text { - font: normal normal normal 13px/16px Graphik, sans-serif !important; + font: normal normal 500 13px/16px Graphik, sans-serif !important; } .euiButton { diff --git a/redisinsight/ui/src/styles/components/_forms.scss b/redisinsight/ui/src/styles/components/_forms.scss index bf159fadf2..a9d5a74fec 100644 --- a/redisinsight/ui/src/styles/components/_forms.scss +++ b/redisinsight/ui/src/styles/components/_forms.scss @@ -11,7 +11,9 @@ .euiRadio__label, .euiCheckbox__label { font-size: 13px; + line-height: 18px; font-weight: 400; + letter-spacing: -.13px; &:not(.euiFormLabel-isFocused, .euiFormLabel-isInvalid) { color: var(--euiTextSubduedColor); @@ -26,12 +28,12 @@ } .euiFormRow__label { - font-size: 12px; + padding-bottom: 2px; } .euiFieldText:disabled { background-color: initial; - color: #757575; + color: #b5b6c0; } } @@ -73,7 +75,9 @@ body { max-width: 100% !important; border: 1px solid var(--controlsBorderColor) !important; box-shadow: none !important; - font-size: 13px; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.14px; } .euiFormHelpText { diff --git a/redisinsight/ui/src/styles/components/_table.scss b/redisinsight/ui/src/styles/components/_table.scss index b941397f19..6aea2c6e01 100644 --- a/redisinsight/ui/src/styles/components/_table.scss +++ b/redisinsight/ui/src/styles/components/_table.scss @@ -69,6 +69,7 @@ table { .euiTableCellContent { white-space: nowrap !important; font: normal normal normal 13px/17px Graphik, sans-serif; + letter-spacing: -0.13px; padding: 10px 18px; } @@ -96,6 +97,7 @@ table { .euiTableCellContent__text { color: var(--htmlColor) !important; font: normal normal 500 14px/17px Graphik, sans-serif !important; + letter-spacing: -0.14px; } } @@ -103,6 +105,7 @@ table { padding: 10px 18px !important; color: var(--htmlColor) !important; font: normal normal 500 14px/17px Graphik, sans-serif !important; + letter-spacing: -0.14px; } .euiSpacer { diff --git a/redisinsight/ui/src/styles/components/_tool_tip.scss b/redisinsight/ui/src/styles/components/_tool_tip.scss index 80ebe606c0..80a3c527db 100644 --- a/redisinsight/ui/src/styles/components/_tool_tip.scss +++ b/redisinsight/ui/src/styles/components/_tool_tip.scss @@ -13,9 +13,11 @@ .euiToolTip__title { border-bottom: none !important; font: normal normal 500 12px/17px Graphik, sans-serif !important; + letter-spacing: -0.12px; } .euiToolTip__content { font: normal normal 400 13px/16px Graphik, sans-serif !important; + letter-spacing: -0.13px; } .euiToolTip__btn-disabled { cursor: not-allowed !important; diff --git a/redisinsight/ui/src/styles/main_plugin.scss b/redisinsight/ui/src/styles/main_plugin.scss index 6a5ce6e624..7603bc6e55 100644 --- a/redisinsight/ui/src/styles/main_plugin.scss +++ b/redisinsight/ui/src/styles/main_plugin.scss @@ -4,51 +4,51 @@ @font-face { font-family: 'Graphik'; font-weight: 300; - src: url('./fonts/Graphik-Light.otf') format('opentype'); + src: url('./fonts/Graphik-Light.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 300; font-style: italic; - src: url('./fonts/Graphik-LightItalic.otf') format('opentype'); + src: url('./fonts/Graphik-LightItalic.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; - src: url('./fonts/Graphik-Regular.otf') format('opentype'); + src: url('./fonts/Graphik-Regular.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-style: italic; - src: url('./fonts/Graphik-RegularItalic.otf') format('opentype'); + src: url('./fonts/Graphik-RegularItalic.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 500; - src: url('./fonts/Graphik-Medium.otf') format('opentype'); + src: url('./fonts/Graphik-Medium.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 500; font-style: italic; - src: url('./fonts/Graphik-MediumItalic.otf') format('opentype'); + src: url('./fonts/Graphik-MediumItalic.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 600; - src: url('./fonts/Graphik-Semibold.otf') format('opentype'); + src: url('./fonts/Graphik-Semibold.woff2') format('woff2'); } @font-face { font-family: 'Graphik'; font-weight: 600; font-style: italic; - src: url('./fonts/Graphik-SemiboldItalic.otf') format('opentype'); + src: url('./fonts/Graphik-SemiboldItalic.woff2') format('woff2'); } diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss index 171cf1ed1d..ac4fb8cfad 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss @@ -84,6 +84,8 @@ --controlsLabelColor: #{$controlsLabelColor}; --hoverInListColor: #{$hoverInListColor}; --hoverInListColorLight: #{$hoverInListColorLight}; + --externalLinkColor: #{$externalLinkColor}; + --externalLinkTooltipColor: #{$externalLinkTooltipColor}; --iconsDefaultColor: #{$iconsDefaultColor}; --iconsDefaultHoverColor: #{$iconsDefaultHoverColor}; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss index 2b085327a5..123cd931f3 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss @@ -8,23 +8,23 @@ $euiColorDanger: #ff6280; $euiColorDangerText: #ff6280; $euiColorWarning: #B12D26; $euiColorWarningText: #ce4841; -$euiTextSubduedColor: #b7b7b7; -$euiTextSubduedColorHover: #e2e2e2; +$euiTextSubduedColor: #b5b6c0; +$euiTextSubduedColorHover: #DFE5EF; $euiPageBackgroundColor: #101010; $euiTooltipBackgroundColor: #3f4b5f; $euiTooltipTextColor: #ffffff; -$euiTooltipTextSecondColor: #BFCADD; +$euiTooltipTextSecondColor: #E4E9F1; $euiTooltipTitleTextColor: #ffffff; $euiColorLightShade: #383838; $euiColorLightestShade: #2b2b2b; $euiColorEmptyShade: #202020; -$euiBreadcrumbActive: #DDDDDD; +$euiBreadcrumbActive: #DFE5EF; $euiToastBackgroundColor: #3f4b5f; $euiToastSuccessBtnColor: #637084; $euiToastSuccessBorderColor: #7989A3; $euiToastDangerBtnColor: #CE4841; $euiToastDangerBorderColor: #E8524A; -$euiColorMediumShade: #757575; +$euiColorMediumShade: #898A90; $euiColorGhost: #ffffff; $euiColorDarkShade: #aaa; @@ -33,6 +33,8 @@ $euiButtonIconSecondary: $euiColorSecondary; $htmlColor: #DFE5EF; $navBackgroundColor: #0f1633; +$externalLinkColor: #8ba2ff; +$externalLinkTooltipColor: #ADBEFF; $tableRowHoverColor: #070707; $tableRowSelectedColor: #20222c; @@ -41,24 +43,24 @@ $tableDarkestBorderColor: #2c2c2c; $browserTableRowEven: #171717; -$inputTextColor: #e2e2e2; +$inputTextColor: #DFE5EF; $inputDisabledBackgroundColor: $euiColorEmptyShade; $inputPlaceHolderColor: #989898; $controlsBoxShadowColor: rgba(0, 0, 0, 0.45); $controlsBorderColor: #757575; -$controlsLabelColor: #B7B7B7; -$iconsDefaultColor: #B7B7B7; -$iconsDefaultHoverColor: #E2E2E2; +$controlsLabelColor: #b5b6c0; +$iconsDefaultColor: #b5b6c0; +$iconsDefaultHoverColor: #DFE5EF; $separatorColor: #3D3D3D; -$buttonSecondaryHoverColor: #566190; +$buttonSecondaryHoverColor: #3e41a0; $buttonSecondaryTextColor: #ffffff; $buttonSecondaryDisabledTextColor: #8B90A3; $buttonDangerHoverColor: #E8524A; $hoverInListColor: #070707; $hoverInListColorLight: #465282; -$textColorShade: #b4b4b4; +$textColorShade: #b5b6c0; $cliOutputResponseColor: #ffffff; $cliOutputResponseFailColor: #e06c75; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss index 107cdc08ef..b78da01e4c 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss @@ -86,6 +86,8 @@ --controlsLabelHoverColor: #{$controlsLabelHoverColor}; --hoverInListColor: #{$hoverInListColor}; --hoverInListColorLight: #{$hoverInListColor}; + --externalLinkColor: #{$externalLinkColor}; + --externalLinkTooltipColor: #{$externalLinkTooltipColor}; --iconsDefaultColor: #{$iconsDefaultColor}; --iconsDefaultHoverColor: #{$iconsDefaultHoverColor}; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss index d9b23fa775..24273e75de 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss @@ -8,7 +8,7 @@ $euiColorDanger: #B92733; $euiColorDangerText: #AA131F; $euiColorWarning: #B92733; $euiColorWarningText: #B92733; -$euiTextSubduedColor: #355683; +$euiTextSubduedColor: #3f597d; $euiTextSubduedColorHover: #173369; $euiPageBackgroundColor: #F5F6F8; $euiTooltipBackgroundColor: #FFFFFF; @@ -30,6 +30,8 @@ $euiColorGhost: #ffffff; $htmlColor: #173369; $navBackgroundColor: #0f1633; +$externalLinkColor: #3953C3; +$externalLinkTooltipColor: #3953C3; $tableRowHoverColor: #fafbfd; $tableRowSelectedColor: #E9EDFA; @@ -56,7 +58,7 @@ $buttonDangerHoverColor: #CB3844; $hoverInListColor: #E9EDFA; $hoverInListColorLight: #E9EDFA; -$textColorShade: #355683; +$textColorShade: #3f597d; $cliOutputResponseColor: #395B88; $cliOutputResponseFailColor: #AA131F;