Co-authored-by: pinardo88 <[email protected]>

Author: dryczek01

docs/assets/style.css

@@ -1267,6 +1267,7 @@ img {
     border: 0.25rem solid var(--color-icon-background);
 }
 
+
 /* mobile */
 @media (max-width: 769px) {
     .tsd-widget.options,

docs/classes/app_components_Buttons_Tutorial.default.html

@@ -10,13 +10,13 @@ module.exports = {
     'www',
     './src/backend/__tests__/ignore',
     './src/app/__tests__enzyme/ignore',
-    './src/backend/__tests__/linkFiber.test.ts',
+    // './src/backend/__tests__/linkFiber.test.ts',
     './src/app/slices/mainSlice.ts',
   ],
   coveragePathIgnorePatterns: [
     '/src/backend/__tests__/ignore/',
     '/src/app/__tests__enzyme/ignore',
-    './src/backend/__tests__/linkFiber.test.ts',
+    // './src/backend/__tests__/linkFiber.test.ts',
     './src/app/slices/mainSlice.ts',
   ],
   transformIgnorePatterns: ['/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)'],

jest.config.js

@@ -192,7 +192,7 @@ describe('unit testing for ActionContainer', () => {
 });
 
 describe('Integration testing for ActionContainer.tsx', () => {
-  xtest('renders the ActionContainer component', () => {
+  test('renders the ActionContainer component', () => {
     //tests that the clearButton is rendered by testing if we can get "Clear"
     //need to set actionView to true to correctly render clearbutton
     render(

src/app/__tests__/ActionContainer.test.tsx

@@ -108,6 +108,12 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
               '<ul><li>Toggle record button to pause state changes on target application</li></ul>',
             position: 'right',
           },
+          {
+            title: 'Dropdown Menu',
+            element: '.css-13cymwt-control',
+            intro: '<ul><li>Dropdown Menu for picking between Timejump and UseContext</li></ul>',
+            position: 'right',
+          },
           {
             element: '.individual-action',
             title: 'Snapshot',
@@ -176,6 +182,13 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
               '<ul><li>This tab visually displays a JSON Tree containing the different components and states</li></ul>',
             position: 'bottom',
           },
+          {
+            title: 'Accessibility Tree',
+            element: '.accessibility-tab',
+            intro:
+              '<ul><li>This tab visually displays a Accessibility Tree</li></ul>',
+            position: 'bottom',
+          },
           {
             title: 'Tutorial Complete',
             intro:

src/app/components/Buttons/Tutorial.tsx

@@ -13,8 +13,6 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { MainState, RootState, TravelContainerProps } from '../FrontendTypes';
 import { Button } from '@mui/material';
-import FastRewindIcon from '@mui/icons-material/FastRewind';
-import FastForwardIcon from '@mui/icons-material/FastForward';
 
 /*
   This container renders the time-travel play button, seek bar, playback controls, and the playback speed dropdown, located towards the bottom of the application, above the locked, download, upload, and tutorial buttons
@@ -85,28 +83,9 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
       >
         {playing ? 'Pause' : 'Play'}
       </Button>
-      <MainSlider className='main-slider' snapshotsLength={snapshotsLength} />
-      <Button
-        variant='contained'
-        className='backward-button'
-        onClick={() => dispatch(moveBackward(false))}
-        type='button'
-        sx={{ height: 25, minWidth: 30, p: 0, mr: 1 }}
-        aria-label='Backward'
-      >
-        <FastRewindIcon className='backward-button-icon' />
-      </Button>
-      <Button
-        variant='contained'
-        className='forward-button'
-        onClick={() => dispatch(moveForward(false))}
-        type='button'
-        sx={{ height: 25, minWidth: 30, p: 0 }}
-        aria-label='Forward'
-      >
-        <FastForwardIcon className='forward-button-icon' />
-      </Button>
+
       <Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
+
     </div>
   );
 }

src/app/containers/TravelContainer.tsx

@@ -170,10 +170,10 @@
   border-radius: 5px;
 }
 
-.backward-button-icon,
-.forward-button-icon {
-  color: $scrub-icon;
-}
+// .backward-button-icon,
+// .forward-button-icon {
+//   color: $scrub-icon;
+// }
 
 .forward-button:hover,
 .backward-button:hover {

src/app/styles/components/_buttons.scss

@@ -3,75 +3,93 @@
   font-family: 'Outfit', sans-serif;
 }
 .buttons-container {
-  //color: #ff0000;
-  margin: 0 1% 0 1%;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-gap: 1%;
-  padding: 1% 0 1% 0;
+  display: flex;
+  align-items: center;
+  background: white;
+  border-top: 1px solid #e5e7eb;
+  width: 100%;
 }
 
-.introjs-tooltip {
-  color: black;
-  background-color: white;
-  min-width: 20rem;
+.buttons-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 24px;
+  gap: 16px;
 }
-.introjs-tooltiptext ul {
-  padding-left: 2px;
+
+.introjs-button {
+  background-color: #f0f0f0;
+  color: #000;
+  //border: 1px solid #ccc;
+  //border-radius: 20px;
+  outline: none;
+  padding: 8px 20px;
+  font-size: 14px;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
 }
 
-// .introjs-helperLayer{
-//   // border: 2px solid yellow
-// }
+.introjs-button:hover {
+  background-color: #6cff87;
+  color: #000 !important;
+  border: 1px solid #6cff87;
+}
 
-.tools-container {
-  display: flex;
-  justify-content: space-between;
-  border: 0.5px solid grey;
-  background-color: #35383e;
-  padding: 3px;
-  margin-bottom: 1rem;
+.introjs-skipbutton {
+  height: 16px;
+  width: auto;
+  background-color: #f0f0f0;
+  color: #000;
+  //border: 1px solid #ccc;
+  //border-radius: 10px;
+  padding: 8px 8px;
+  font-size: 12px;
+  text-align: center;
+  line-height: normal;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
 }
 
-#seriesname {
-  background-color: #333;
-  color: white;
+.introjs-skipbutton:hover {
+  background-color: #ff4d4d;
+  color: #fff;
+  border: 1px solid #ff4d4d;
 }
 
-@media (max-width: 500px) {
-  .buttons-container {
-    //color: #ff0000;
-    grid-template-columns: repeat(2, 1fr);
-  }
+.introjs-tooltip-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #000;
 }
 
-.introjs-nextbutton {
-  background-color: none;
-  color: #3256f1;
-  border: 1px solid;
-  outline: none;
+.introjs-tooltiptext {
+  font-size: 14px;
+  // color: #333;
 }
 
-.introjs-prevbutton {
-  background-color: none;
-  color: #3256f1;
-  border: 1px solid;
-  outline: none;
+.introjs-progressbar {
+  background-color: #6cff87;
 }
 
-.introjs-skipbutton {
-  color: #d72828;
-  border: 1px solid;
-  margin-top: 2px;
-  font-size: 16px;
-  outline: none;
+.introjs-overlay {
+  background-color: rgba(0, 0, 0, 0.7);
 }
 
-.introjs-button {
-  background: none;
-  outline: none;
+.introjs-helperLayer {
+  box-shadow: 0 0 10px 3px rgba(108, 255, 135, 0.7);
+  border-radius: 8px;
 }
 
+#seriesname {
+  background-color: #333;
+  color: white;
+}
 .dialog-pop-up {
   border: 1px solid #ff0001;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);