beagn styling tutorial

Author: garrettlchow

src/app/components/Buttons/Tutorial.tsx

@@ -91,7 +91,8 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
         steps = [
           {
             title: 'Reactime Tutorial',
-            intro: 'A performance and state management tool for React apps.',
+            intro:
+              'A tool for time travel debugging and performance monitoring in React applications.',
             position: 'top',
           },
           {
@@ -226,37 +227,6 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
             intro: 'Additional info can be found be hovering over desired metrics',
             position: 'top',
           },
-          // {
-          //   title: 'LCP',
-          //   element: document.querySelectorAll('.metric')[0],
-          //   intro:
-          //     '<strong>Largest Contentful Paint</strong><br/>The amount of time it takes for the largest image, video or text block within the viewport to be fully rendered and interactive.',
-          //   position: 'top',
-          // },
-
-          // {
-          //   title: 'FID',
-          //   element: document.querySelectorAll('.metric')[1],
-          //   intro:
-          //     '<strong>First Input Delay</strong><br/>A measurement of load responsiveness, the time from the first user interaction (for example, a click) to the browser responding to that interaction.',
-          //   position: 'top',
-          // },
-
-          // {
-          //   title: 'FCP',
-          //   element: document.querySelectorAll('.metric')[2],
-          //   intro:
-          //     '<strong>First Contentful Paint</strong><br/>The amount of time it takes to render the first DOM element of any variety',
-          //   position: 'top',
-          // },
-
-          // {
-          //   title: 'TTFB',
-          //   element: document.querySelectorAll('.metric')[3],
-          //   intro:
-          //     "<strong>Time To First Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
-          //   position: 'top',
-          // },
         ];
         break;
       case 'history':
@@ -270,7 +240,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           },
           {
             title: 'Viewing History Snapshot',
-            element: '.node active',//document.querySelectorAll('.snapshotNode')[0]
+            element: '.node active', //document.querySelectorAll('.snapshotNode')[0]
             intro:
               'Each node will represent a snapshot in the page. <ul><li>A single snapshot will show as a node while multiple snapshots will be represented as a timeline.</li><li>Highlighting over one will show any state changes compared to the previous snapshot. </li><li>Clicking a node will set the snapshot as the current one.</li></ul>',
             position: 'top',

src/app/styles/components/_actionComponent.scss

@@ -99,8 +99,8 @@
 }
 
 .current-location {
-  color: #059669;
-  background: #ecfdf5;
+  color: #14b8a6;
+  background: #f0fdfa;
 }
 
 /* Hide/show button transitions */

src/app/styles/layout/_buttonsContainer.scss

@@ -20,104 +20,45 @@
 }
 
 .introjs-button {
-  background-color: #f0f0f0;
-  color: #000;
-  outline: none;
-  padding: 8px 20px;
+  padding: 8px 16px;
   font-size: 14px;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-}
-
-.introjs-button:hover {
-  background-color: #6cff87;
-  color: #000 !important;
-  border: 1px solid #6cff87;
-}
-
-.introjs-skipbutton {
-  height: 16px;
-  width: auto;
-  background-color: #f0f0f0;
-  color: #000;
-  padding: 8px 8px;
-  font-size: 12px;
-  text-align: center;
-  line-height: normal;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-}
-
-.introjs-skipbutton:hover {
-  background-color: #ff4d4d;
-  color: #fff;
-  border: 1px solid #ff4d4d;
+  border-radius: 8px;
 }
 
 .introjs-tooltip-title {
   font-size: 18px;
   font-weight: bold;
-  color: #000;
-}
-
-.introjs-tooltiptext {
-  font-size: 14px;
+  color: #1f2937;
 }
 
 .introjs-progressbar {
-  background-color: #6cff87;
-}
-
-.introjs-overlay {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.introjs-helperLayer {
-  box-shadow: 0 0 10px 3px rgba(108, 255, 135, 0.7);
-  border-radius: 8px;
+  background-color: #14b8a6;
 }
 
 .introjs-tooltip {
-  color: black;
+  color: #1f2937;
   background-color: white;
   min-width: 20rem;
 }
-.introjs-tooltiptext ul {
-  padding-left: 2px;
-}
 
-#seriesname {
-  background-color: #333;
-  color: white;
+.introjs-tooltiptext ul {
+  padding-left: 20px;
 }
 
 .introjs-nextbutton {
-  background-color: none;
-  color: #3256f1;
-  border: 1px solid;
-  outline: none;
+  background-color: #14b8a6;
+  color: white;
 }
 
 .introjs-prevbutton {
-  background-color: none;
-  color: #3256f1;
-  border: 1px solid;
-  outline: none;
+  background-color: #f9fafb;
+  color: #374151;
 }
 
 .introjs-skipbutton {
   color: #d72828;
-  border: 1px solid;
-  margin-top: 2px;
-  font-size: 16px;
-  outline: none;
-}
-
-.introjs-button {
-  background: none;
-  outline: none;
+  margin-right: 8px;
+  font-size: 14px;
 }
 
 .buttons-container button {
@@ -133,10 +74,6 @@
   gap: 8px;
 }
 
-.buttons-container button:hover {
-  background-color: #f3f4f6;
-}
-
 .status-dot {
   display: inline-block;
   width: 10px;