basic theme switch nsand#38

Author: Yury Shapkarin

package-lock.json

@@ -1,16 +1,34 @@
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
 import TabItem from '../tab-item/tab-item.jsx';
-import styles from './popup.scss';
-import { Navigation, Filter } from './style.js';
+import {
+  Navigation,
+  Filter,
+  Main,
+  Section,
+  Header,
+  Title,
+  TabList
+} from './style.js';
 
 export default class Popup extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       windows: [],
       filter: '',
-      mru: {}
+      mru: {},
+      theme: 'light'
     };
+    this.themes = {
+      light: {
+        navigation: '#009688'
+      },
+      dark: {
+        navigation: '#000000'
+      }
+    }
   }
   componentDidMount() {
     chrome.runtime.sendMessage({action: 'mru'}, (mru) => {
@@ -44,16 +62,20 @@ export default class Popup extends React.Component {
     });
   }
   render() {
-    const {filter, windows, mru} = this.state;
-    const cls = this.state.isSeparated ? '' : styles.window;
+    const {filter, windows, mru } = this.state;
+    const theme = this.themes[this.state.theme] || this.themes.light;
     return (
-      <div>
+      <ThemeProvider theme={theme}>
         <Navigation>
-          <div>
-            <Filter ref="filter" type="text" placeholder="Search" onChange={this.filter.bind(this)}/>
-          </div>
+          <Filter
+            ref="filter"
+            type="text"
+            placeholder="Search"
+            onChange={this.filter.bind(this)}
+          />
+          <button onClick={() => this.setState({theme: this.state.theme === 'light' ? 'dark' : 'light' })}>Change Theme</button>
         </Navigation>
-        <main className={styles.main}>
+        <Main>
           {
             windows.sort((left, right) => {
               // Compare the timestamps, if they exist, from the mru state
@@ -64,22 +86,25 @@ export default class Popup extends React.Component {
               }
               return comp;
             }).map($window =>
-              <section className={cls} key={$window.id}>
-                <header className={styles.heading}>
-                  <h2 className={styles.headingText}>{$window.tabs.length} tabs</h2>
-                </header>
-                <ul className={styles.tabList}>
+              <Section
+                className={this.state.isSeparated ? '' : 'window'}
+                key={$window.id}
+              >
+                <Header>
+                  <Title>{$window.tabs.length} tabs</Title>
+                </Header>
+                <TabList>
                   {
                     $window.tabs
                       .filter(tab => filter.length === 0 || tab.title.toLocaleLowerCase().indexOf(filter) >= 0 || tab.url.toLocaleLowerCase().indexOf(filter) >= 0)
-                      .map(tab => <TabItem key={tab.id} tab={tab} onClose={this.closeTab.bind(this)}></TabItem>)
+                      .map(tab => <TabItem key={tab.id} tab={tab} onClose={this.closeTab.bind(this)}/>)
                   }
-                </ul>
-              </section>
+                </TabList>
+              </Section>
             )
           }
-        </main>
-      </div>
+        </Main>
+      </ThemeProvider>
     );
   }
 }

src/components/popup/popup.jsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const Navigation = styled.nav`
   position: fixed;
@@ -8,7 +8,7 @@ export const Navigation = styled.nav`
   justify-content: center;
   align-items: center;
   top: 0;
-  background-color: #009688;
+  background-color: ${({ theme: { navigation } }) => navigation};
   height: 56px;
   box-shadow: rgba(0, 0, 0, 0.137255) 0px 0px 4px 0px,
     rgba(0, 0, 0, 0.278431) 0px 4px 8px 0px;
@@ -30,3 +30,38 @@ export const Filter = styled.input`
     color: rgba(255, 255, 255, 0.8);
   }
 `;
+
+export const Main = styled.main`
+  margin-top: 56px;
+`;
+
+export const Section = styled.section`
+  &.window {
+    &:not(:first-child) {
+      &:before {
+        content: '';
+        display: block;
+        border-top: 1px solid #ddd;
+        margin: 0 16px;
+      }
+    }
+  }
+`;
+
+export const Header = styled.header`
+  display: flex;
+  align-items: center;
+  height: 48px;
+`;
+
+export const Title = styled.h2`
+  font-size: 14px;
+  margin: 0;
+  padding: 0 16px;
+  font-weight: normal;
+`;
+
+export const TabList = styled.ul`
+  margin: 0;
+  padding: 0;
+`;