began styling the web metrics need to fix hover effect

Author: garrettlchow

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -118,8 +118,10 @@ export default function ComponentMap({
     minWidth: 60,
     maxWidth: 250,
     lineHeight: '18px',
-    zIndex: 100,
     pointerEvents: 'all !important',
+    margin: 0,
+    padding: 0,
+    borderRadius: '8px',
   };
 
   const scrollStyle: {} = {

src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

@@ -33,9 +33,9 @@ const tooltipStyles = {
   ...defaultStyles,
   minWidth: 60,
   lineHeight: '18px',
-  zIndex: 100,
   pointerEvents: 'all !important',
-  padding: '12px',
+  padding: '8px',
+  borderRadius: '8px',
 };
 
 const BarGraph = (props: BarGraphProps): JSX.Element => {

src/app/components/StateRoute/WebMetrics/WebMetrics.tsx

@@ -30,7 +30,6 @@ const radialGraph = (props) => {
             margin: 0,
             size: '75%',
             background: 'transparent',
-            // background: '#242529',
             image: props.overLimit
               ? 'https://static.vecteezy.com/system/resources/thumbnails/012/042/301/small/warning-sign-icon-transparent-background-free-png.png'
               : undefined,
@@ -51,7 +50,7 @@ const radialGraph = (props) => {
           track: {
             background: '#161617',
             strokeWidth: '3%',
-            margin: 0, // margin is in pixels
+            margin: 0,
             dropShadow: {
               enabled: true,
               top: -3,
@@ -111,18 +110,18 @@ const radialGraph = (props) => {
     <div className='metric'>
       <ReactHover options={optionsCursorTrueWithMargin}>
         <Trigger type='trigger'>
-          <div id='chart'>
+          <div id='chart' className='chart-container'>
             <Charts
               options={state.options}
               series={state.series}
               type='radialBar'
-              height={350}
-              width={350}
+              height={250}
+              width={250}
             />
           </div>
         </Trigger>
         <Hover type='hover'>
-          <div style={{ zIndex: 1, position: 'relative', padding: '0.5rem 1rem' }} id='hover-box'>
+          <div className='metric-tooltip' id='hover-box'>
             <p>
               <strong>{props.name}</strong>
             </p>

src/app/styles/components/_buttons.scss

@@ -113,7 +113,6 @@
   height: 44px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #e5e7eb;
   background-color: white;
 }
 

src/app/styles/components/_performanceVisx.scss

@@ -7,6 +7,7 @@
   background-color: white;
   max-width: 1200px;
   justify-content: space-around;
+  border-bottom: 1px solid #e5e7eb;
 }
 
 .routesForm {
@@ -68,5 +69,9 @@
 
 // bar graph background
 .perf-rect {
-  fill: white;
+  fill: #f9fafb;
+}
+
+.bargraph-position {
+  background-color: #f9fafb;
 }

src/app/styles/layout/_stateContainer.scss

@@ -61,21 +61,21 @@
   .main-navbar-container {
     border-bottom: 1px solid #e5e7eb;
     background: white;
-    padding: 5px 24px;
+    padding: 4.5px 24px;
   }
 }
 
 // tool tip styles
 .tooltip-header {
-  padding: 12px;
+  padding: 8px 8px 8px 12px;
   background-color: #14b8a6;
+  border: 1px solid #0d9488;
   border-radius: 8px;
-  border-bottom: 1px solid #e5e7eb;
 }
 
 .tooltip-title {
   margin: 0;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   color: #f3f4f6;
 }
@@ -89,7 +89,7 @@
 }
 
 .tooltip-section {
-  padding: 12px;
+  padding: 8px 12px;
   border-bottom: 1px solid #e5e7eb;
   transition: background-color 150ms ease;
 }
@@ -152,29 +152,20 @@
 // Web Metrics Container
 .web-metrics-container {
   display: grid;
-  grid-template-columns: auto auto;
-  justify-content: center;
+  grid-template-columns: repeat(3, 1fr);
 }
 
-//container for metrics
 .metric {
-  min-height: 200px;
-  min-width: 200px;
-}
-
-.bargraph {
-  position: relative;
-  margin-top: 1rem;
-}
-
-.bar-graph-axis {
-  stroke: cornflowerblue;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 #hover-box {
-  max-width: 230px;
+  max-width: 250px;
   background-color: #51565e;
-  border-radius: 5px;
+  border-radius: 8px;
   color: white;
 }
 

src/extension/background.js

@@ -19,7 +19,7 @@ const metrics = {};
 function setupKeepAlive() {
   //ellie
   // Create an alarm that triggers every 4.9 minutes (under the 5-minute limit)
-  chrome.alarms.create('keepAlive', { periodInMinutes: 4.9 });
+  chrome.alarms.create('keepAlive', { periodInMinutes: 1 });
 
   chrome.alarms.onAlarm.addListener((alarm) => {
     if (alarm.name === 'keepAlive') {
@@ -30,12 +30,9 @@ function setupKeepAlive() {
 }
 // Ping the service worker to keep it alive
 function pingServiceWorker() {
-  chrome.runtime.getBackgroundPage((bgPage) => {
-    if (bgPage) {
-      console.log('Service worker is alive');
-    } else {
-      console.warn('Failed to ping the service worker.');
-    }
+  // Use a lightweight API call to keep the service worker active
+  chrome.runtime.getPlatformInfo(() => {
+    console.log('Service worker pinged successfully');
   });
 }
 

src/extension/build/devtools.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Reactime v26</title>
+    <title>Reactime v26.0</title>
   </head>
 
   <body>

src/extension/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Reactime",
-  "version": "26.0.0",
+  "version": "26.0",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",
   "manifest_version": 3,

src/extension/build/panel.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title style="color: #ffffff">Reactime 26.0</title>
+    <title style="color: #ffffff">Reactime v26.0</title>
   </head>
 
   <body>