better update notice & get rid of github change log redirect

Author: lxieyang

src/pages/Background/helpers/InstallationHelper.js

@@ -18,7 +18,10 @@ chrome.runtime.onInstalled.addListener((details) => {
     const prevVersion = details.previousVersion;
     console.log(thisVersion, prevVersion);
   }
-  if (details.reason === 'install' || details.reason === 'update') {
+  if (
+    details.reason === 'install'
+    // || details.reason === 'update'
+  ) {
     console.log('go to release log page');
     chrome.tabs.create({
       url: `https://github.com/lxieyang/vertical-tabs-chrome-extension/blob/master/CHANGELOG.md#v2x-official-releases`,

src/pages/Content/index.jsx

@@ -1,7 +1,7 @@
 import copy from 'clipboard-copy';
-import './helpers/UpdateNoticeHelper';
 import './helpers/SidebarHelper';
 import './helpers/TabPreviewHelper';
+import './helpers/UpdateNoticeHelper';
 
 window.addEventListener('message', (event) => {
   const { msg, payload } = event.data;

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

@@ -1,30 +1,34 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { FaSyncAlt, FaTimesCircle } from 'react-icons/fa';
+import { FaTimesCircle as DismissIcon } from 'react-icons/fa';
+import { MdRefresh as RefreshIcon } from 'react-icons/md';
 import { APP_NAME_FULL } from '../../../../shared/constants';
 
 const UpdateNoticeContainer = styled.div`
-  max-width: 560px;
+  max-width: 360px;
   position: relative;
-  background-color: #fff;
-  border: 1px solid #ffb74d;
-  padding: 8px 8px;
-  border-radius: 4px;
+  border: 2px solid #ff8f34;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  border-radius: 10px;
   color: #000;
-  background-color: #fff3e0;
+  background-color: #fff;
 
   font-family: sans-serif;
   text-align: center;
   font-size: 14px;
   font-weight: 400;
   font-style: normal;
-  box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
+  box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
+  line-height: 22px;
+
+  z-index: 999999999;
 `;
 
 const ExtensionNameContainerSpan = styled.span`
-  background-color: rgb(233, 115, 46);
-  color: #fff;
-  padding: 2px 4px;
+  background-color: rgb(255, 196, 161);
+  color: #000;
+  padding: 2px 6px;
   border-radius: 4px;
   font-weight: 600;
 `;
@@ -42,12 +46,16 @@ const ActionButton = styled.div`
   display: flex;
   align-items: center;
   transition: all 0.05s ease-in;
-  padding: 2px 6px;
+  padding: 4px 8px;
   border-radius: 4px;
 
+  text-decoration: underline;
+
   &:hover {
-    background-color: rgb(233, 115, 46);
-    color: #fff;
+    background-color: ${(props) =>
+      props.action === 'reload' ? '#198754' : 'gray'};
+    color: ${(props) => (props.action === 'reload' ? '#fff' : '#fff')};
+    text-decoration: none;
   }
 `;
 
@@ -60,7 +68,7 @@ const UpdateNotice = () => {
     <div
       style={{
         position: 'fixed',
-        bottom: 5,
+        bottom: 10,
         left: 0,
         right: 0,
         display: 'flex',
@@ -78,21 +86,23 @@ const UpdateNotice = () => {
           </div>
           <ActionButtonsContainer>
             <ActionButton
+              action={'reload'}
               onClick={() => {
                 localStorage.removeItem('vt-update-notice-dismissed');
                 window.location.reload();
               }}
             >
-              <FaSyncAlt size="12px" style={{ marginRight: '4px' }} />
+              <RefreshIcon size="20px" style={{ marginRight: '4px' }} />
               Refresh Now
             </ActionButton>
             <ActionButton
+              action={'dismiss'}
               onClick={() => {
                 localStorage.setItem('vt-update-notice-dismissed', 'true');
                 setShouldDisplay(false);
               }}
             >
-              <FaTimesCircle size="12px" style={{ marginRight: '4px' }} />
+              <DismissIcon size="16px" style={{ marginRight: '4px' }} />
               Dismiss
             </ActionButton>
           </ActionButtonsContainer>

src/pages/Sidebar/containers/ErrorBoundary/ErrorBoundary.jsx

@@ -0,0 +1,22 @@
+import { Component } from 'react';
+
+class ErrorBoundary extends Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.log({ error, errorInfo });
+  }
+
+  render() {
+    // if (this.state.hasError) {
+    //   return <h1>Oops, we done goofed up</h1>;
+    // }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/pages/Sidebar/index.jsx

@@ -4,6 +4,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import SnackbarProvider from 'react-simple-snackbar';
 import MediaQuery from 'react-responsive';
+import EB from './containers/ErrorBoundary/ErrorBoundary';
 
 import Sidebar from './Sidebar';
 import './index.css';
@@ -50,7 +51,7 @@ const App = () => {
   }
 
   return (
-    <React.Fragment>
+    <EB>
       <SnackbarProvider>
         <DarkModeContext.Provider
           value={{ mediaQueryDark, isDark, setDarkStatus }}
@@ -71,7 +72,7 @@ const App = () => {
           <div style={{ width: 0, height: 0 }}></div>
         </MediaQuery>
       </SnackbarProvider>
-    </React.Fragment>
+    </EB>
   );
 };