new context menu style, address #25

Author: lxieyang

CHANGELOG.md

@@ -12,6 +12,14 @@ All notable changes to this project will be documented in this file.
 
 # v1.x (official releases)
 
+### [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).
+
+- New context menu styles with icons:
+
+  <img src="preview/repo/context-menu-with-icons.png" width="120"/>
+
 ### [1.6.1](https://github.com/lxieyang/vertical-tabs-chrome-extension/releases/tag/v1.6.1) (2020-01-19)
 
 - Fixed [#23](https://github.com/lxieyang/vertical-tabs-chrome-extension/issues/23) by removing `iframe-background.gif` after load.

preview/repo/context-menu-with-icons.png

@@ -191,6 +191,13 @@
   width: 5px;
 }
 
+.MenuItemIconContainer {
+  height: 16px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+}
+
 .blink {
   animation: blinker 0.8s linear infinite;
 }

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

@@ -10,8 +10,14 @@ import copy from 'clipboard-copy';
 
 import { MdClose } from 'react-icons/md';
 import { MdRefresh } from 'react-icons/md';
+import { IoIosRefresh } from 'react-icons/io';
 import { MdVolumeOff, MdVolumeUp } from 'react-icons/md';
-import { FaThumbtack } from 'react-icons/fa';
+import {
+  FaThumbtack,
+  FaRegWindowMaximize,
+  FaRegWindowRestore,
+  FaRegCopy,
+} from 'react-icons/fa';
 
 import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
@@ -344,30 +350,58 @@ const Tab = ({
             className={[isDark ? 'Dark' : null].join(' ')}
           >
             <MenuItem onClick={(e) => openNewTabClickedHandler()}>
+              <div className="MenuItemIconContainer">
+                <FaRegWindowMaximize size={'15px'} />
+              </div>
               New Tab
             </MenuItem>
 
             <MenuItem divider className={[isDark ? 'Dark' : null].join(' ')} />
 
             <MenuItem onClick={(e) => reloadTabClickedHandler(e, id)}>
+              <div className="MenuItemIconContainer">
+                <IoIosRefresh size={'15px'} />
+              </div>
               Reload
             </MenuItem>
             <MenuItem onClick={(e) => deplicateTabClickedHandler(e, id)}>
+              <div className="MenuItemIconContainer">
+                <FaRegWindowRestore size={'15px'} />
+              </div>
               Duplicate
             </MenuItem>
             <MenuItem onClick={(e) => pinTabClickedHandler(e, id)}>
+              <div className="MenuItemIconContainer">
+                <FaThumbtack
+                  size={'16px'}
+                  style={{ transform: 'rotate(-45deg)' }}
+                />
+              </div>
               {pinned ? 'Unpin' : 'Pin'}
             </MenuItem>
             <MenuItem onClick={(e) => muteTabClickedHandler(e, id)}>
+              <div className="MenuItemIconContainer">
+                {!mutedInfo.muted ? (
+                  <MdVolumeOff size={'15px'} />
+                ) : (
+                  <MdVolumeUp size={'15px'} />
+                )}
+              </div>
               {mutedInfo.muted ? 'Unmute' : 'Mute'} This Tab
             </MenuItem>
             <MenuItem onClick={(e) => copyTabURLClickedHandler(e, id)}>
+              <div className="MenuItemIconContainer">
+                <FaRegCopy size={'15px'} />
+              </div>
               Copy Tab URL
             </MenuItem>
 
             <MenuItem divider className={[isDark ? 'Dark' : null].join(' ')} />
 
             <MenuItem onClick={(e) => closeTabClickedHandler(e, id)}>
+              <div className="MenuItemIconContainer">
+                <MdClose size={'15px'} />
+              </div>
               Close
             </MenuItem>
           </ContextMenu>

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

@@ -33,10 +33,13 @@
   border: 0;
   cursor: pointer;
   font-weight: 400;
-  line-height: 1.3;
-  padding: 1px 20px;
+  line-height: 1.8;
+  padding: 1px 15px;
   text-align: inherit;
   white-space: nowrap;
+
+  display: flex;
+  align-items: center;
 }
 
 .react-contextmenu-item:hover {