refreshed new tab button

Author: lxieyang

package-lock.json

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

package.json

@@ -173,7 +173,6 @@ const Tab = ({
               }}
               onMouseOver={() => {
                 if (!isDragging && isHovering) {
-                  console.log(isHovering);
                   if (index === activeTab.index) {
                     chrome.tabs.highlight({ tabs: [activeTab.index] }, null);
                   } else {

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

@@ -1,26 +1,31 @@
 .NewTabButtonContainer {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 8px 8px 10px;
+  /* justify-content: center; */
+  align-items: flex-start;
+  padding: 0px;
   color: rgb(60, 64, 67);
+
+  margin-top: 5px;
+  min-height: 80px;
 }
 
 .NewTabButtonContainer.Dark {
   color: rgb(190, 193, 198);
 }
 
 .NewTabButton {
-  width: 30px;
-  height: 30px;
+  width: 100%;
+  /* height: 30px; */
+
+  padding: 4px 8px;
 
   display: flex;
-  justify-content: center;
   align-items: center;
 
-  border-radius: 50%;
   color: rgb(60, 64, 67);
   transition: all 0.2s ease-in;
+
+  cursor: default;
 }
 
 .NewTabButton.Dark {
@@ -35,6 +40,12 @@
   background-color: rgb(68, 69, 71);
 }
 
+.NewTabButton .ShortcutName {
+  margin-right: 5px;
+  opacity: 0.6;
+  font-size: 0.8rem;
+}
+
 .PinnedUnpinnedDivider {
   width: 100%;
   height: 0.5px;

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

@@ -15,6 +15,8 @@ class TabsList extends Component {
     searchBarInputText: '',
     contextMenuShow: false,
     contextMenuShowPrev: null,
+
+    platformInfo: null,
   };
 
   setContextMenuShow = (toStatus) => {
@@ -40,6 +42,12 @@ class TabsList extends Component {
 
   componentDidMount() {
     document.addEventListener('keydown', this.keyPressListener, false);
+
+    chrome.runtime.getPlatformInfo((info) => {
+      this.setState({
+        platformInfo: info,
+      });
+    });
   }
 
   componentWillUnmount() {
@@ -106,7 +114,7 @@ class TabsList extends Component {
 
   render() {
     const { tabOrders, tabsDict } = this.props;
-    const { searchBarInputText } = this.state;
+    const { searchBarInputText, platformInfo } = this.state;
 
     const inputText = searchBarInputText.toLowerCase();
 
@@ -179,7 +187,7 @@ class TabsList extends Component {
                   );
                 })}
 
-                <li
+                <div
                   className={classNames({
                     NewTabButtonContainer: true,
                     Dark: isDark,
@@ -193,9 +201,16 @@ class TabsList extends Component {
                     })}
                     onClick={(e) => this.openNewTabClickedHandler(e)}
                   >
-                    <MdAdd size={'22px'} />
+                    <MdAdd size={'24px'} style={{ marginRight: 5 }} />
+                    New Tab
+                    <div style={{ flex: 1 }}></div>
+                    {platformInfo && platformInfo.os && (
+                      <div className="ShortcutName">
+                        {platformInfo.os === 'mac' ? `⌘T` : `Ctrl+T`}
+                      </div>
+                    )}
                   </div>
-                </li>
+                </div>
               </div>
             </div>
           );