Added styling to the toggle record button. Updated Time Jump Sidebar view where toggle record button is hidden. Added comments for toggle record button

Author: dgill05

src/app/containers/ActionContainer.tsx

@@ -132,13 +132,14 @@ function ActionContainer(props): JSX.Element {
     setActionView(true);
   }, [setActionView]);
 
+  // Function sends message to background.js which sends message to the content script
   const toggleRecord = () => {
     port.postMessage({
       action: 'toggleRecord',
       tabId: currentTab,
     });
+    // Record button's icon is being togggled on click
     setRecordingActions(!recordingActions);
-    // change color of record button or switch svg/img file
   };
 
   // the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
@@ -156,7 +157,7 @@ function ActionContainer(props): JSX.Element {
         </div>
         <a
           type="button"
-          className="recordBtn"
+          id="recordBtn"
           onClick={toggleRecord}
         >
           <i />

src/app/containers/MainContainer.tsx

@@ -30,6 +30,13 @@ function MainContainer(): any {
     setActionView(!actionView);
     const toggleElem = document.querySelector('aside');
     toggleElem.classList.toggle('no-aside');
+    // hides the record toggle button from Actions Container in Time Jump sidebar view
+    const recordBtn = document.getElementById('recordBtn');
+    if (recordBtn.style.display === 'none') {
+      recordBtn.style.display = 'flex';
+    } else {
+      recordBtn.style.display = 'none';
+    }
   };
   // let port;
   useEffect(() => {

src/app/styles/components/_buttons.scss

@@ -321,14 +321,15 @@
 
 /* sidebar button open and closing functionality */
 aside {
-  width: 250px;
+  // width: 250px;
   background: #242529;
   color: #fff;
   transition: width 1s;
 }
 
 .no-aside {
   width: 30px;
+  margin-right: 15px;
 }
 
 .toggle {
@@ -352,8 +353,8 @@ aside {
 }
 
 .toggle i {
-  top: 46%;
-  left: 4%;
+  top: 8px;
+  left: 9px;
   display: block;
   background: $blue-brand;
 }

src/app/styles/layout/_actionContainer.scss

@@ -9,9 +9,18 @@
   color: #fffeff;
 }
 
-.recordBtn{
-  position: relative;
-  left: 80%;
-  height: 100vw;
-  // visibility: hidden;
+#recordBtn{
+  height: 100%;
+  display:flex;
 }
+
+.actionToolContainer{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#recordBtn .fa-regular{
+  height: 100%;
+  width: 28px;
+}

src/extension/background.js

@@ -211,7 +211,7 @@ chrome.runtime.onConnect.addListener(port => {
         return true; // attempt to fix message port closing error, consider return Promise
       case 'toggleRecord':
         chrome.tabs.sendMessage(tabId, msg);
-        return true; // attempt to fix message port closing error, consider return Promise
+        return true;
       default:
         return true;
     }

src/extension/contentScript.ts

@@ -41,13 +41,13 @@ window.addEventListener('message', msg => {
 // Listening for messages from the UI of the Reactime extension.
 chrome.runtime.onMessage.addListener(request => {
   const { action }: { action: string; } = request;
-  // this is only listening for Jump toSnap
-
   if (action) {
+    // Message being sent from background.js
+    // This is toggling the record button on Reactime when clicked
     if (action === 'toggleRecord') {
       isRecording = !isRecording;
     }
-
+    // this is only listening for Jump toSnap
     if (action === 'jumpToSnap') {
       chrome.runtime.sendMessage(request);
     }