more theming and todo nsand#38

shapkarin · Jan 28, 2020 · f50575a · f50575a
1 parent db304bc
commit f50575a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/src/components/popup/popup.jsx b/src/components/popup/popup.jsx
@@ -19,14 +19,27 @@ export default class Popup extends React.Component {
       windows: [],
       filter: '',
       mru: {},
-      theme: 'light'
+      theme: 'dark'
     };
+    // todo: move to preferences, user can select or create and inpiut his own
     this.themes = {
       light: {
-        navigation: '#009688'
+        navigation: '#009688',
+        placeholder: 'rgba(255, 255, 255, 0.8)',
+        main: '#ffffff',
+        tab: {
+          title: '#212121',
+          link: '#9e9e9e'
+        }
       },
       dark: {
-        navigation: '#000000'
+        navigation: '#1e1e1e',
+        placeholder: 'rgba(255, 255, 255, 0.4)',
+        main: '#1c1c1c',
+        tab: {
+          title: '#e1e1e1',
+          link: '#a5a5a5'
+        }
       }
     }
   }

diff --git a/src/components/popup/style.js b/src/components/popup/style.js
@@ -27,12 +27,13 @@ export const Filter = styled.input`
     outline: none;
   }
   &::-webkit-input-placeholder {
-    color: rgba(255, 255, 255, 0.8);
+    color: ${({ theme: { placeholder }}) => placeholder};
   }
 `;
 
 export const Main = styled.main`
   margin-top: 56px;
+  background-color: ${({ theme: { main }}) => main}
 `;
 
 export const Section = styled.section`

diff --git a/src/components/tab-item/style.js b/src/components/tab-item/style.js
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const TabTitle = styled.nav`
+  color: ${({ theme: { tab: { title } } }) => title};
+  font-size: 13px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
diff --git a/src/components/tab-item/tab-item.jsx b/src/components/tab-item/tab-item.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
+
 import styles from './tab-item.scss';
 import activeStyles from './tab-item-active.scss';
+import { TabTitle } from './style';
 
 export default class TabItem extends React.Component {
   constructor(props) {
@@ -68,7 +70,7 @@ export default class TabItem extends React.Component {
           }
         </div>
         <div className={styles.tabDetails}>
-          <div className={styles.tabTitle}>{tab.title}</div>
+          <TabTitle className={styles.tabTitle}>{tab.title}</TabTitle>
           {additionalDetails}
         </div>
         <span className={styles.actions}>