add themes to dependencies modal (codesandbox#1797)

SaraVieira · CompuIves · commit a96f34aed260 · 2019-04-23T16:38:38.000+02:00
* add themes to depencies modal

* Color tweaks
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/elements.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/elements.js
@@ -1,21 +1,45 @@
 import styled from 'styled-components';
 import Select from '@codesandbox/common/lib/components/Select';
 import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
+import Color from 'color';
+
+import GitHubLogo from 'app/components/GitHubLogo';
+
+export const GitHubLogoStyled = styled(GitHubLogo)`
+  color: ${props =>
+    !props.theme.light ? 'inherit' : 'rgba(255, 255, 255, 0.8)'};
+`;
+
+const getContainerColor = props => {
+  if (props.highlighted) {
+    return Color(props.theme['sideBar.background'])
+      .darken(0.2)
+      .rgbString();
+  }
+
+  return props.theme['sideBar.background'];
+};
 
 export const Container = styled.div`
   display: flex;
-  background: ${props =>
-    props.highlighted
-      ? props.theme.background2.darken(0.3)
-      : props.theme.background2};
-  color: ${props => props.theme.white};
+  color: ${props =>
+    props.theme.light ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'};
+  background-color: ${getContainerColor};
   cursor: pointer;
+
   &:not(:last-child) {
-    border-bottom: 1px solid ${props => props.theme.background3};
+    border-bottom: 1px solid
+      ${props =>
+        Color(props.theme['sideBar.background'])
+          .darken(0.4)
+          .rgbString()};
   }
 
   &:hover {
-    background-color: ${props => props.theme.background2.darken(0.2)};
+    background-color: ${props =>
+      Color(props.theme['sideBar.background'])
+        .darken(0.2)
+        .rgbString()};
   }
 `;
 
@@ -37,20 +61,26 @@ export const Row = styled.div`
 
 export const Description = styled(Row)`
   font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.6);
+
+  color: ${props =>
+    props.theme.light ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)'};
 `;
 
 export const Downloads = styled.span`
-  color: ${props => props.theme.gray};
+  color: ${props => props.theme['panelTitle.inactiveForeground']};
   font-weight: 500;
   font-size: 12px;
 `;
 
 export const License = styled.span`
-  border: 1px solid rgba(255, 255, 255, 0.4);
+  border: 1px solid
+    ${props =>
+      !props.theme.light ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
   border-radius: 3px;
   padding: 1px 3px;
-  color: rgba(255, 255, 255, 0.6);
+
+  color: ${props =>
+    props.theme.light ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)'};
   font-size: 12px;
 `;
 
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/index.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/index.js
@@ -6,7 +6,6 @@ import compareVersions from 'compare-versions';
 
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
-import GitHubLogo from 'app/components/GitHubLogo';
 import formatDownloads from '../formatDownloads';
 
 import {
@@ -20,6 +19,7 @@ import {
   IconLink,
   StyledSelect,
   StyledUserWithAvatar,
+  GitHubLogoStyled,
 } from './elements';
 
 const getDefaultSelectedVersion = tags => {
@@ -43,7 +43,7 @@ export default class DependencyHit extends React.PureComponent {
     return `https://github.com/${repo.user}/${repo.project}`;
   }
 
-  makeSearchUrl(hitName: string) {
+  makeSearchUrl(hitName) {
     return `${
       process.env.CODESANDBOX_HOST
     }/search?refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=${hitName}&page=1`;
@@ -70,7 +70,7 @@ export default class DependencyHit extends React.PureComponent {
       }
     }
 
-    const versions = Object.keys(hit.versions).sort((a: string, b: string) => {
+    const versions = Object.keys(hit.versions).sort((a, b) => {
       try {
         return compareVersions(b, a);
       } catch (e) {
@@ -107,7 +107,7 @@ export default class DependencyHit extends React.PureComponent {
                   rel="noreferrer noopener"
                   onClick={this.stopPropagation}
                 >
-                  <GitHubLogo />
+                  <GitHubLogoStyled />
                 </IconLink>
               </Tooltip>
             )}
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/RawAutoComplete/elements.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/RawAutoComplete/elements.js
@@ -5,9 +5,11 @@ export const AutoCompleteInput = styled.input`
   box-sizing: border-box;
   border: none;
   outline: none;
-  background-color: ${props => props.theme.background2};
+  background-color: ${props => props.theme['sideBar.background']};
   font-weight: 600;
-  color: ${props => props.theme.white};
+
+  color: ${props =>
+    props.theme.light ? props.theme.black : props.theme.white};
   padding: 0.75em 1em;
   z-index: 2;
 `;
@@ -16,8 +18,10 @@ export const SuggestionInput = styled(AutoCompleteInput)`
   position: absolute;
   top: 0;
   left: 0;
-  color: rgba(255, 255, 255, 0.3);
+  color: ${props =>
+    props.theme.light ? 'rgba(0, 0, 0, 0.3)' : 'rgba(255, 255, 255, 0.3)'};
   background-color: transparent;
   z-index: 1;
   pointer-events: none;
+  letter-spacing: 0.45px;
 `;
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.css b/packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.css
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/dependencies.js
@@ -0,0 +1,56 @@
+import { createGlobalStyle } from 'styled-components';
+
+export default createGlobalStyle`
+.ReactModal__Content div[class^='Modal__ModalBody'] {
+  /*
+   * app/src/app/containers/Modal.js sets ModalBody background to white.
+   * We don't want to risk messing up something else, so we fix that here.
+   */
+  background: transparent;
+}
+
+.search-dependencies {
+
+  .ais-Pagination {
+    color: ${props =>
+      props.theme.light ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'};
+    background-color: ${props => props.theme['sideBar.background']};
+    border-radius: 0;
+    display: flex;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .ais-Pagination-link {
+      color: ${props =>
+        props.theme.light ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)'};
+  }
+
+  .ais-Pagination-item--selected {
+    color: ${props => props.theme.white};
+    background: ${props => props.theme['button.hoverBackground']};
+  }
+
+  .ais-Highlight-highlighted {
+       color: ${props => props.theme['button.hoverBackground']};
+  }
+
+  .ais-PoweredBy-link svg path:nth-child(4) {
+        fill: ${props =>
+          props.theme.light
+            ? 'rgba(0, 0, 0, 0.8)'
+            : 'rgba(255, 255, 255, 0.8)'} !important;
+  }
+
+  footer {
+    height: 40px;
+    background-color: ${props => props.theme['sideBar.background']};
+
+    .ais-PoweredBy {
+          color: ${props =>
+            props.theme.light ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'};
+
+    }
+  }
+}
+`;
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import { InstantSearch, Configure, PoweredBy } from 'react-instantsearch/dom';
 import { connectAutoComplete } from 'react-instantsearch/connectors';
-import theme from '@codesandbox/common/lib/theme';
 
 import 'app/pages/Search/search.css';
-import './dependencies.css';
+import DependenciesCSS from './dependencies';
 
 import RawAutoComplete from './RawAutoComplete';
 
@@ -48,29 +47,27 @@ export default class SearchDependencies extends React.PureComponent {
 
   render() {
     return (
-      <InstantSearch
-        appId="OFCNCOG2CU"
-        apiKey="00383ecd8441ead30b1b0ff981c426f5"
-        indexName="npm-search"
-      >
-        <Configure
-          analyticsTags={['codesandbox-dependencies']}
-          hitsPerPage={5}
-        />
-        <ConnectedAutoComplete
-          onSelect={this.handleSelect}
-          onManualSelect={this.handleManualSelect}
-          onHitVersionChange={this.handleHitVersionChange}
-        />
-        <div
-          style={{
-            height: 40,
-            backgroundColor: theme.background2.darken(0.2)(),
-          }}
+      <div className="search-dependencies">
+        <DependenciesCSS />
+        <InstantSearch
+          appId="OFCNCOG2CU"
+          apiKey="00383ecd8441ead30b1b0ff981c426f5"
+          indexName="npm-search"
         >
-          <PoweredBy />
-        </div>
-      </InstantSearch>
+          <Configure
+            analyticsTags={['codesandbox-dependencies']}
+            hitsPerPage={5}
+          />
+          <ConnectedAutoComplete
+            onSelect={this.handleSelect}
+            onManualSelect={this.handleManualSelect}
+            onHitVersionChange={this.handleHitVersionChange}
+          />
+          <footer>
+            <PoweredBy />
+          </footer>
+        </InstantSearch>
+      </div>
     );
   }
 }
diff --git a/packages/app/src/app/pages/common/Modals/index.js b/packages/app/src/app/pages/common/Modals/index.js
@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import Modal from 'app/components/Modal';
-
 import Loadable from 'app/utils/Loadable';
+import { ThemeProvider } from 'styled-components';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
+import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
 
 import NewSandbox from './NewSandbox';
 import PreferencesModal from './PreferencesModal';
@@ -126,22 +129,67 @@ const modals = {
   },
 };
 
-function Modals({ store, signals }) {
-  const modal = store.currentModal && modals[store.currentModal];
+class Modals extends Component {
+  state = {
+    theme: {
+      colors: {},
+      vscodeTheme: codesandbox,
+    },
+    customVSCodeTheme: this.props.store.preferences.settings.customVSCodeTheme,
+  };
+
+  componentDidMount() {
+    this.loadTheme();
+  }
+
+  componentDidUpdate() {
+    if (
+      this.props.store.preferences.settings.customVSCodeTheme !==
+      this.state.customVSCodeTheme
+    ) {
+      this.loadTheme();
+    }
+  }
+
+  loadTheme = async () => {
+    const customVSCodeTheme = this.props.store.preferences.settings
+      .customVSCodeTheme;
+
+    try {
+      const theme = await getVSCodeTheme('', customVSCodeTheme);
+      this.setState({ theme, customVSCodeTheme });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  render() {
+    const { signals, store } = this.props;
+    const sandbox = store.editor.currentSandbox;
+    const templateDef = sandbox && getTemplateDefinition(sandbox.template);
+    const modal = store.currentModal && modals[store.currentModal];
 
-  return (
-    <Modal
-      isOpen={Boolean(modal)}
-      width={modal && modal.width}
-      onClose={(isKeyDown: boolean) => signals.modalClosed({ isKeyDown })}
-    >
-      {modal
-        ? React.createElement(modal.Component, {
-            closeModal: () => signals.modalClosed({ isKeyDown: false }),
-          })
-        : null}
-    </Modal>
-  );
+    return (
+      <ThemeProvider
+        theme={{
+          templateColor: templateDef && templateDef.color,
+          templateBackgroundColor: templateDef && templateDef.backgroundColor,
+          ...this.state.theme,
+        }}
+      >
+        <Modal
+          isOpen={Boolean(modal)}
+          width={modal && modal.width}
+          onClose={(isKeyDown: boolean) => signals.modalClosed({ isKeyDown })}
+        >
+          {modal
+            ? React.createElement(modal.Component, {
+                closeModal: () => signals.modalClosed({ isKeyDown: false }),
+              })
+            : null}
+        </Modal>
+      </ThemeProvider>
+    );
+  }
 }
 
 export default inject('store', 'signals')(observer(Modals));
