update to v1.7.1

Author: lxieyang

CHANGELOG.md

@@ -12,6 +12,11 @@ All notable changes to this project will be documented in this file.
 
 # v1.x (official releases)
 
+### [1.7.1](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.7.1) (2020-01-24 Lunar New Year Eve!)
+
+- Optimize dark mode implementation.
+- Add version number in **Settings**.
+
 ### [1.7.0](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.7.0) (2020-01-23)
 
 - Added **Copy Tab URL** feature in the context menu as suggested in [#24](https://github.com/lxieyang/vertical-tabs-chrome-extension/issues/24).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vertical-tabs-chrome-extension",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "A chrome extension that presents your tabs vertically.",
   "license": "MIT",
   "repository": {

src/pages/Content/modules/UpdateNotice/UpdateNotice.jsx

@@ -23,7 +23,7 @@ const UpdateNoticeContainer = styled.div`
 const ExtensionNameContainerSpan = styled.span`
   background-color: rgb(233, 115, 46);
   color: #fff;
-  padding: 1px 2px;
+  padding: 2px 4px;
   border-radius: 4px;
 `;
 

src/pages/Sidebar/containers/TabsList/Tab/Tab.css

@@ -124,6 +124,7 @@
 
 .TabTitle {
   flex: 1;
+  position: relative;
 }
 
 .Truncated {
@@ -132,6 +133,27 @@
   text-overflow: ellipsis;
 }
 
+/* .FadeOut {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 20px;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(222, 225, 230, 1) 100%
+  );
+}
+
+.FadeOutHovering {
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(244, 245, 247, 1) 100%
+  );
+} */
+
 .MutedIconContainer {
   margin-left: 2px;
   margin-right: 2px;

src/pages/Sidebar/containers/TabsList/Tab/Tab.jsx

@@ -257,7 +257,7 @@ const Tab = ({
                   <div
                     className={classNames({
                       TabTitle: true,
-                      Truncated: displayTabInFull,
+                      Truncated: !displayTabInFull,
                     })}
                   >
                     {title}

src/pages/Sidebar/containers/Title/SettingsBox/SettingsBox.css

@@ -17,6 +17,7 @@
   padding: 0.5rem 0.75rem;
   background-color: #f2f0f0;
   font-weight: 600;
+  font-size: 15px;
 
   display: flex;
   align-items: center;
@@ -27,6 +28,21 @@
   color: rgb(162, 162, 162);
 }
 
+.VersionBadge {
+  font-weight: 400;
+  padding: 2px 6px;
+  border-radius: 8px;
+  font-size: 12px;
+  background-color: rgb(228, 228, 228);
+  color: black;
+  text-decoration: none;
+}
+
+.VersionBadge.Dark {
+  background-color: rgb(98, 98, 99);
+  color: rgb(212, 212, 212);
+}
+
 .PopoverContent {
   font-size: 0.8rem;
   font-weight: 300;

src/pages/Sidebar/containers/Title/SettingsBox/SettingsBox.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import classNames from 'classnames';
 import DarkModeContext from '../../../context/dark-mode-context';
 import { MdSettings, MdBrightnessAuto } from 'react-icons/md';
@@ -38,7 +38,17 @@ const SettingsBox = ({
   return (
     <div className={classNames({ PopoverContainer: true, Dark: isDark })}>
       <div className={classNames({ PopoverTitle: true, Dark: isDark })}>
-        <MdSettings style={{ marginRight: 6 }} /> Settings
+        {/* <MdSettings style={{ marginRight: 6 }} size={'19px'} />  */}
+        Settings <div style={{ flex: 1 }}></div>
+        <a
+          title="Source code"
+          className={classNames({ VersionBadge: true, Dark: isDark })}
+          href={'https://github.com/lxieyang/vertical-tabs-chrome-extension'}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          v{chrome.runtime.getManifest().version}
+        </a>
       </div>
       <div className={classNames({ PopoverContent: true, Dark: isDark })}>
         {/* SIDEBAR POSITION */}