Monaco Editor Dark Mode (#32263)

* Initial go at light/dark mode compatability for the Monaco editor. * Alphebetizing the imports. * Using the color-convert package to convert rgb to hex values. Updating the monaco hover widget for dark mode. * Changes to highlight and selection colors. * Misspelled an EUI color variable name. * Dark mode for the search results page. * Prettifying code_result.tsx. * Removing the monaco scroll decorator from the editor. * Fixing some type errors for color-convert * Markdown styling for dark mode. * Changing the import location of 'chrome' in the monaco editor * Adding a constant for the getTheme() method and adjusting blame view dark mode styles.
elastic · Mar 6, 2019 · 881bcc2 · 881bcc2
1 parent 58585ee
commit 881bcc2
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 93 deletions.
diff --git a/x-pack/package.json b/x-pack/package.json
@@ -39,6 +39,7 @@
     "@types/angular": "1.6.50",
     "@types/boom": "^7.2.0",
     "@types/cheerio": "^0.22.10",
+    "@types/color-convert": "^1.9.0",
     "@types/d3-array": "^1.2.1",
     "@types/d3-scale": "^2.0.0",
     "@types/d3-shape": "^1.3.1",
@@ -79,10 +80,10 @@
     "@types/redux-actions": "^2.2.1",
     "@types/rimraf": "^2.0.2",
     "@types/sinon": "^7.0.0",
-    "@types/styled-components": "^3.0.1",
     "@types/storybook__addon-actions": "^3.4.1",
     "@types/storybook__addon-info": "^3.4.2",
     "@types/storybook__react": "^4.0.0",
+    "@types/styled-components": "^3.0.1",
     "@types/supertest": "^2.0.5",
     "@types/tar-fs": "^1.16.1",
     "@types/uuid": "^3.4.4",
@@ -191,6 +192,7 @@
     "brace": "0.11.1",
     "chroma-js": "^1.3.6",
     "classnames": "2.2.5",
+    "color-convert": "^2.0.0",
     "concat-stream": "1.5.1",
     "constate": "^0.9.0",
     "constate-latest": "npm:constate@^1.0.0",

diff --git a/x-pack/plugins/code/public/components/codeblock/codeblock.scss b/x-pack/plugins/code/public/components/codeblock/codeblock.scss
@@ -1,5 +1,8 @@
 .code-search-highlight {
-  background-color: $euiColorHighlight !important;
+	background-color: $euiColorVis5;
+	color: black !important;
+	padding: $euiSizeXS / 2;
+	border-radius: $euiSizeXS / 2;
 	font-weight: bold;
 	font-style: oblique;
 }
diff --git a/x-pack/plugins/code/public/components/editor/references_panel.scss b/x-pack/plugins/code/public/components/editor/references_panel.scss
@@ -13,16 +13,14 @@
 
 .expandButton {
   position: absolute;
-  top: -16px;
-  right: 17px;
-  background: #ffffff;
-  border: 1px solid #d3dae6;
+  top: -1 * $euiSize;
+  right: $euiSize + 1px;
+  background: $euiColorLightestShade;
+  border: $euiBorderThin;
   border-bottom: 0;
   height: 0;
-  min-height: 16px;
+  min-height: $euiSize;
   padding: 0;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05), 0px -4px 4px rgba(0, 0, 0, 0.03),
-  0px -6px 12px rgba(0, 0, 0, 0.05), 0px -12px 24px rgba(0, 0, 0, 0.05);
-  border-radius: 4px 4px 0px 0px;
+  border-radius: $euiSizeXS $euiSizeXS 0 0;
 }
 
diff --git a/x-pack/plugins/code/public/components/main/blame.tsx b/x-pack/plugins/code/public/components/main/blame.tsx
@@ -23,32 +23,31 @@ const Avatar = styled(EuiAvatar)`
   margin: auto ${theme.euiSizeS} auto 0;
 `;
 
-const Root = styled(EuiFlexGroup)<{ isFirstLine: boolean }>`
-  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s};
-  border-top: ${props => (props.isFirstLine ? 'none' : theme.euiBorderThick)};
-`;
-
 export class Blame extends React.PureComponent<{ blame: GitBlame; isFirstLine: boolean }> {
   public render(): React.ReactNode {
     const { blame, isFirstLine } = this.props;
     return (
-      <Root gutterSize="none" justifyContent="spaceBetween" isFirstLine={isFirstLine}>
+      <EuiFlexGroup
+        className={isFirstLine ? 'codeBlame__item codeBlame__item--first ' : 'codeBlame__item'}
+        gutterSize="none"
+        justifyContent="spaceBetween"
+      >
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="none" alignItems="center">
             <EuiFlexItem grow={false}>
               <Avatar size="s" type="space" name={blame.committer.name} initialsLength={1} />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <BlameMessage>{blame.commit.message}</BlameMessage>
+              <BlameMessage size="xs">{blame.commit.message}</BlameMessage>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiText>
+          <EuiText size="xs">
             <EuiTextColor color="subdued">{moment(blame.commit.date).fromNow()}</EuiTextColor>
           </EuiText>
         </EuiFlexItem>
-      </Root>
+      </EuiFlexGroup>
     );
   }
 }
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
@@ -237,3 +237,11 @@
     box-shadow: none;
   }
 }
+
+.codeBlame__item {
+  padding: $euiSizeXS $euiSizeS;
+  border-top: $euiBorderThin;
+  &.codeBlame__item--first{
+    border-top: none;
+  }
+}
diff --git a/x-pack/plugins/code/public/components/search_page/code_result.tsx b/x-pack/plugins/code/public/components/search_page/code_result.tsx
@@ -4,26 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { IPosition } from 'monaco-editor';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 
 import { RepositoryUtils } from '../../../common/repository_utils';
 import { history } from '../../utils/url';
 import { CodeBlock } from '../codeblock/codeblock';
 
-const OrgName = styled.span`
-  color: ${theme.euiTextColor};
-`;
-
-const RepoName = styled.span`
-  color: ${theme.euiTextColor};
-  font-weight: bold;
-`;
-
 interface Props {
   results: any[];
 }
@@ -43,8 +32,23 @@ export class CodeResult extends React.PureComponent<Props> {
         <div key={`resultitem${key}`} data-test-subj="codeSearchResultList">
           <p style={{ marginBottom: '.5rem' }}>
             <Link to={repoLinkUrl}>
-              <OrgName>{RepositoryUtils.orgNameFromUri(uri)}</OrgName>/
-              <RepoName>{RepositoryUtils.repoNameFromUri(uri)}</RepoName>
+              <EuiFlexGroup
+                direction="row"
+                alignItems="center"
+                justifyContent="flexStart"
+                gutterSize="none"
+              >
+                <EuiFlexItem grow={false}>
+                  <EuiText size="s" color="subdued">
+                    {RepositoryUtils.orgNameFromUri(uri)}/
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiText size="s" color="default">
+                    <strong>{RepositoryUtils.repoNameFromUri(uri)}</strong>
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </Link>
           </p>
           <EuiFlexGroup
@@ -56,10 +60,12 @@ export class CodeResult extends React.PureComponent<Props> {
             <EuiFlexItem grow={false}>
               <EuiBadge color="default">{hits}</EuiBadge>
             </EuiFlexItem>
-            <EuiFlexItem grow={false}>hits from</EuiFlexItem>
-            <EuiFlexItem grow={false} data-test-subj="codeSearchResultFileItem">
-              <Link to={fileLinkUrl}>{filePath}</Link>
-            </EuiFlexItem>
+            <EuiText size="s">
+              &nbsp;hits from
+              <Link to={fileLinkUrl} data-test-subj="codeSearchResultFileItem">
+                &nbsp;{filePath}
+              </Link>
+            </EuiText>
           </EuiFlexGroup>
           <CodeBlock
             key={`code${key}`}

diff --git a/x-pack/plugins/code/public/components/search_page/scope_tabs.tsx b/x-pack/plugins/code/public/components/search_page/scope_tabs.tsx
@@ -14,7 +14,6 @@ import { SearchScope } from '../../../model';
 import { history } from '../../utils/url';
 
 const ScopeTabContainer = styled.div`
-  background-color: #ffffff;
   height: 56px;
 `;
 

diff --git a/x-pack/plugins/code/public/components/search_page/search.scss b/x-pack/plugins/code/public/components/search_page/search.scss
@@ -0,0 +1,7 @@
+.codeSidebar__container {
+  background-color: $euiColorLightestShade;
+  border-right: solid 1px $euiBorderColor;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+}
diff --git a/x-pack/plugins/code/public/components/search_page/side_bar.tsx b/x-pack/plugins/code/public/components/search_page/side_bar.tsx
@@ -23,14 +23,6 @@ import { RepositoryUtils } from '../../../common/repository_utils';
 import { SearchScope } from '../../../model';
 import { ScopeTabs } from './scope_tabs';
 
-const SideBarContainer = styled.div`
-  background-color: ${theme.euiColorLightestShade};
-  border-right: ${theme.euiBorderWidthThin} solid ${theme.euiBorderColor};
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: auto;
-`;
-
 const FacetContainer = styled.div`
   padding: 0 1rem;
 `;
@@ -110,7 +102,7 @@ export class SideBar extends React.PureComponent<Props> {
     });
 
     return (
-      <SideBarContainer>
+      <div className="codeSidebar__container">
         <ScopeTabs query={this.props.query} scope={this.props.scope} />
         <FacetContainer>
           <FacetTitle gutterSize="s" alignItems="center" style={{ marginBottom: '.5rem' }}>
@@ -142,7 +134,7 @@ export class SideBar extends React.PureComponent<Props> {
             {langStatsComp}
           </EuiFacetGroup>
         </FacetContainer>
-      </SideBarContainer>
+      </div>
     );
   }
 }
diff --git a/x-pack/plugins/code/public/index.scss b/x-pack/plugins/code/public/index.scss
@@ -9,7 +9,8 @@
 @import "./monaco/override_monaco_styles.scss";
 @import "./components/diff_page/diff.scss";
 @import "./components/main/main.scss";
+@import "./components/search_page/search.scss";
 
 @import "./components/admin_page/sidebar.scss";
-
-@import "./components/symbol_tree/symbol_tree.scss";
+@import "./style/markdown.scss";
+@import "./components/symbol_tree/symbol_tree.scss";
diff --git a/x-pack/plugins/code/public/monaco/monaco.scss b/x-pack/plugins/code/public/monaco/monaco.scss
@@ -17,7 +17,7 @@
 
 .monaco-editor-hover {
   min-width: 350px;
-  border: 1px solid #c8c8c8;
+  border: $euiBorderThin;
   cursor: default;
   position: absolute;
   overflow-y: auto;
@@ -30,25 +30,24 @@
   box-sizing: initial;
   animation: fadein .1s linear;
   line-height: 1.5em;
-  background: #FFFFFF;
+  background: $euiColorLightestShade;
   border-radius: 4px 4px 4px 4px;
-  box-shadow: 0 4px 8px 0 rgba(153,153,153,0.15),
-  0 2px 3px -1px rgba(153,153,153,0.30);
+  @include euiBottomShadow;
 }
 
 .monaco-editor-hover .hover-row {
   padding: 4px 5px;
 }
 
 .monaco-editor-hover .button-group {
-  background: linear-gradient(-180deg, #FAFAFA 0%, #F8F8F8 100%);
+  background: linear-gradient(-180deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%);
   border-radius: 0 0 4px 4px;
-  box-shadow: 0 -1px 0 0 #D9D9D9;
+  box-shadow: 0 -1px 0 0 $euiBorderColor;
   height: 32px;
 }
 
 .monaco-editor-hover .button-group button:not(:first-child) {
-  border-left: 1px solid #D8D8D8;
+  border-left: 1px solid $euiBorderColor;
 }
 
 .monaco-editor-hover .button-group button{
@@ -59,6 +58,14 @@
   flex: 1;
 }
 
+.monaco-editor .scroll-decoration {
+  display: none;
+}
+
+.code-mark-line-number, .code-monaco-highlight-line {
+  background-color: $euiColorLightShade;
+}
+
 .text-placeholder {
   width: 100%;
   height: 18px;
@@ -71,8 +78,8 @@
   animation-iteration-count: infinite;
   animation-name: placeHolderShimmer;
   animation-timing-function: linear;
-  background: #f6f7f8;
-  background: linear-gradient(to right, #eaeaea 8%, #f8f8f8 38%, #eaeaea 54%);
+  background: $euiColorLightestShade;
+  background: linear-gradient(to right, $euiColorLightShade 8%, $euiColorLightestShade 38%, $euiColorLightShade 54%);
   background-size: 1000px 640px;
 
   position: relative;