feat: polish light theme (#96)

* fix: handle `variant` prop change * feat: polish light theme
samdenty · Feb 13, 2022 · b2f7755 · b2f7755
1 parent 117c580
commit b2f7755
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 30 deletions.
diff --git a/demo/src/index.tsx b/demo/src/index.tsx
@@ -9,6 +9,7 @@ document.body.appendChild(iframe)
 
 class App extends React.Component {
   state = {
+    isDarkMode: true,
     logs: [
       {
         method: 'result',
@@ -42,16 +43,33 @@ class App extends React.Component {
   }
 
   render() {
+    const { isDarkMode } = this.state
     return (
-      <div style={{ backgroundColor: '#242424' }}>
-        <div>
+      <div
+        style={{
+          margin: '1em 0',
+          color: isDarkMode ? '#fff' : '#242424',
+          backgroundColor: isDarkMode ? '#242424' : '#fff',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>
           <button onClick={this.switch.bind(this)}>Show only logs</button>
           <input placeholder="search" onChange={this.handleKeywordsChange} />
+          <label>
+            <input
+              type="checkbox"
+              checked={isDarkMode}
+              onChange={(e) => {
+                this.setState({ isDarkMode: e.target.checked })
+              }}
+            />
+            Toggle dark mode
+          </label>
         </div>
 
         <Console
           logs={this.state.logs}
-          variant="dark"
+          variant={isDarkMode ? 'dark' : 'light'}
           filter={this.state.filter}
           searchKeywords={this.state.searchKeywords}
         />

diff --git a/src/Component/elements.tsx b/src/Component/elements.tsx
@@ -40,11 +40,11 @@ export const Message = styled('div')(({ theme: { styles, method } }) => ({
     boxSizing: 'border-box',
     fontFamily: styles.BASE_FONT_FAMILY,
     whiteSpace: 'pre-wrap',
-    fontSize: styles.BASE_FONT_SIZE
+    fontSize: styles.BASE_FONT_SIZE,
   },
   '& a': {
-    color: 'rgb(177, 177, 177)'
-  }
+    color: styles.LOG_LINK_COLOR,
+  },
 }))
 
 /**
@@ -56,7 +56,7 @@ export const Icon = styled('div')(({ theme: { styles, method } }) => ({
   backgroundImage: Themed('icon', method, styles),
   backgroundRepeat: 'no-repeat',
   backgroundSize: styles.LOG_ICON_BACKGROUND_SIZE,
-  backgroundPosition: '50% 50%'
+  backgroundPosition: '50% 50%',
 }))
 
 /**
@@ -73,7 +73,7 @@ export const AmountIcon = styled('div')(({ theme: { styles, method } }) => ({
   color: Themed('amount_color', method, styles),
   borderRadius: '8px',
   minWidth: '18px',
-  textAlign: 'center'
+  textAlign: 'center',
 }))
 
 /**
@@ -86,5 +86,5 @@ export const Content = styled('div')(({ theme: { styles } }) => ({
   marginLeft: 15,
   minHeight: 18,
   flex: 'auto',
-  width: 'calc(100% - 15px)'
+  width: 'calc(100% - 15px)',
 }))
diff --git a/src/Component/index.tsx b/src/Component/index.tsx
@@ -22,14 +22,34 @@ const customStringify = function (v) {
   })
 }
 
+const getTheme = (props: Props) => ({
+  variant: props.variant || 'light',
+  styles: {
+    ...Styles(props),
+    ...props.styles,
+  },
+})
+
 class Console extends React.PureComponent<Props, any> {
-  theme = () => ({
-    variant: this.props.variant || 'light',
-    styles: {
-      ...Styles(this.props),
-      ...this.props.styles,
-    },
-  })
+  state = {
+    theme: getTheme(this.props),
+    prevStyles: this.props.styles,
+    prevVariant: this.props.variant,
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (
+      props.variant !== state.prevVariant ||
+      JSON.stringify(props.styles) !== JSON.stringify(props.prevStyles)
+    ) {
+      return {
+        theme: getTheme(props),
+        prevStyles: props.styles,
+        prevVariant: props.variant,
+      }
+    }
+    return null
+  }
 
   render() {
     let {
@@ -81,7 +101,7 @@ class Console extends React.PureComponent<Props, any> {
     }
 
     return (
-      <ThemeProvider theme={this.theme}>
+      <ThemeProvider theme={this.state.theme}>
         <Root>
           {logs.map((log, i) => {
             // If the filter is defined and doesn't include the method

diff --git a/src/Component/theme/default.ts b/src/Component/theme/default.ts
@@ -2,9 +2,12 @@ import { chromeDark, chromeLight } from 'react-inspector'
 import { Styles } from '../../definitions/Styles'
 import { Props } from '../../definitions/Component'
 
-const styles = (props: Props) =>
-  ({
-    ...((props.variant || 'light') === 'light' ? chromeLight : chromeDark),
+const styles = (props: Props) => {
+  const isLight = (props.variant || 'light') === 'light'
+  const chrome = isLight ? chromeLight : chromeDark
+
+  return {
+    ...chrome,
     /**
      * General
      */
@@ -13,29 +16,30 @@ const styles = (props: Props) =>
     /**
      * Default log styles
      */
-    LOG_COLOR: 'rgba(255,255,255,0.9)',
+    LOG_COLOR: chrome.BASE_COLOR,
     LOG_BACKGROUND: 'transparent',
-    LOG_BORDER: 'rgba(255,255,255,0.03)',
+    LOG_BORDER: isLight ? 'rgb(236,236,236)' : 'rgb(44,44,44)',
     LOG_ICON_WIDTH: 10,
     LOG_ICON_HEIGHT: 18,
     LOG_ICON: 'none',
     LOG_AMOUNT_BACKGROUND: '#42597f',
     LOG_AMOUNT_COLOR: '#8d8f91',
+    LOG_LINK_COLOR: isLight ? 'rgb(66, 66, 66)' : 'rgb(177, 177, 177)',
 
     /**
      * Log types
      */
     LOG_WARN_ICON: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACkSURBVChTbY7BCoJQFERn0Q/3BX1JuxQjsSCXiV8gtCgxhCIrKIRIqKDVzXl5w5cNHBjm6eGinXiAXu5inY2xYm/mbpIh+vcFhLA3sx0athNUhymEsP+10lAEEA17x8o/9wFuNGnYuVlWve0SQl7P0sBu3aq2R1Q/1JzSkYGd29eqNv2wjdnUuvNRciC/N+qe+7gidbA8zyHkOINsvA/sumcOkjcabcBmw2+mMgAAAABJRU5ErkJggg==)`,
-    LOG_WARN_BACKGROUND: '#332b00',
-    LOG_WARN_COLOR: '#ffdc9e',
-    LOG_WARN_BORDER: '#650',
+    LOG_WARN_BACKGROUND: isLight ? 'rgb(255,250,220)' : '#332b00',
+    LOG_WARN_COLOR: isLight ? 'rgb(73,45,2)' : '#ffdc9e',
+    LOG_WARN_BORDER: isLight ? 'rgb(255,244,181)' : '#650',
     LOG_WARN_AMOUNT_BACKGROUND: '#ffbb17',
     LOG_WARN_AMOUNT_COLOR: '#8d8f91',
 
     LOG_ERROR_ICON: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADESURBVChTY4CB7ZI8tmfU5E6e01b+DMIgNkgMKg0BR9Vkux6YWPx/bemIgkFiIDmwogOaqrYPzazAEm8DwuGKYGyQHEgNw0VT05Mwib9v3v7/kJEHxiA2TDFIDcNNU4vPMFPACj58/P/v40cwGyYOUsNwy8IZRSFIEUgxskKQGoZrzp4ErQapYbgYHG371M4dLACTQGaD5EBqwD6/FpzQ9dTBE64IhkFiIDmwIhi4mlJqey8o4eR9r8jPIAxig8QgsgwMAFZz1YtGPXgjAAAAAElFTkSuQmCC)`,
-    LOG_ERROR_BACKGROUND: '#290000',
-    LOG_ERROR_BORDER: '#5b0000',
-    LOG_ERROR_COLOR: '#ff8080',
+    LOG_ERROR_BACKGROUND: isLight ? 'rgb(255,235,235)' : '#290000',
+    LOG_ERROR_BORDER: isLight ? 'rgb(253,204,205)' : '#5b0000',
+    LOG_ERROR_COLOR: isLight ? 'rgb(252,0,5)' : '#ff8080',
     LOG_ERROR_AMOUNT_BACKGROUND: '#dc2727',
     LOG_ERROR_AMOUNT_COLOR: '#8d8f91',
 
@@ -58,7 +62,8 @@ const styles = (props: Props) =>
      * Other
      */
     ARROW_FONT_SIZE: 10,
-    OBJECT_VALUE_STRING_COLOR: 'rgb(233,63,59)'
-  } as Styles)
+    OBJECT_VALUE_STRING_COLOR: 'rgb(233,63,59)',
+  } as Styles
+}
 
 export default styles