styled the actions in snapshots, working on slider

Author: garrettlchow

src/app/components/Actions/Action.tsx

@@ -88,8 +88,8 @@ const Action = (props: ActionProps): JSX.Element => {
                 />
               </div>
               {isCurrIndex ? (
-                <button className='time-button' type='button'>
-                  Current
+                <button className='current-snap' type='button'>
+                  {`Snapshot: ${displayName}`}
                 </button>
               ) : (
                 <button className='time-button' type='button'>

src/app/components/Actions/RouteDescription.tsx

@@ -18,8 +18,8 @@ const RouteDescription = (props: RouteProps): JSX.Element => {
   return (
     <div className='route-container'>
       <div className='route-header'>Route: {url.pathname}</div>
-      <div className='route-content' style={{ height: `${actions.length * 30}px` }}>
-        <div style={{ maxWidth: '50px' }}>
+      <div className='route-content' style={{ height: `${actions.length * 42}px` }}>
+        <div>
           <VerticalSlider className='main-slider' snapshots={actions} />
         </div>
         <div className='actions-container'>

src/app/components/TimeTravel/VerticalSlider.tsx

@@ -29,7 +29,7 @@ const handle = (props: HandleProps): JSX.Element => {
 
 function VerticalSlider(props: MainSliderProps): JSX.Element {
   const dispatch = useDispatch();
-  const { snapshots} = props; // destructure props to get our total number of snapshots
+  const { snapshots } = props; // destructure props to get our total number of snapshots
   const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0.
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
@@ -39,27 +39,25 @@ function VerticalSlider(props: MainSliderProps): JSX.Element {
       // if we have a 'currLocation'
       let correctedSliderIndex;
 
-      for (let i = 0; i<snapshots.length; i++){
+      for (let i = 0; i < snapshots.length; i++) {
         //@ts-ignore -- ignores the errors on the next line
-        if (snapshots[i].props.index === currLocation.index){
+        if (snapshots[i].props.index === currLocation.index) {
           correctedSliderIndex = i;
         }
       }
-      setSliderIndex(correctedSliderIndex)
-
+      setSliderIndex(correctedSliderIndex);
     } else {
       setSliderIndex(0); // just set the thumb position to the beginning
     }
   }, [currLocation]); // if currLocation changes, rerun useEffect
-  
 
   return (
     <Slider
       className='travel-slider'
       color='#0af548'
-      vertical = 'true'
-      reverse = 'true'
-      height = '100%'
+      vertical='true'
+      reverse='true'
+      height='100%'
       min={0} // index of our first snapshot
       max={snapshots.length - 1} // index of our last snapshot
       value={sliderIndex} // currently slider thumb position

src/app/styles/components/_actionComponent.scss

@@ -1,58 +1,126 @@
+.route-container {
+  width: 100%;
+}
+
+.route-header {
+  background-color: #1f2937;
+  color: #ffffff;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.route-content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 50px;
+}
+
+/* Container for individual action */
+.individual-action {
+  margin: 0;
+  padding: 0;
+}
+
 .action-component {
-  padding: 3px 10px;
-  display: grid;
-  grid-template-columns: none;
+  display: flex;
+  padding: 6px 16px;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  transition: background-color 200ms ease;
+}
+
+.action-component:hover {
+  background-color: #f9fafb;
+}
+
+.action-component.selected {
+  background-color: #f3f4f6;
+}
+
+.action-component-trigger {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
   align-items: center;
-  height: 24px;
-  // background-color: $brand-color;
-  // border-bottom-style: solid;
-  // border-bottom-width: 1px;
-  // background-color: none;
-  // border-color: #292929;
-  // border-color: $border-color;
-  cursor: pointer;
-  overflow: hidden;
-  @extend %disable-highlight;
 }
 
 .action-component-text {
-  margin-bottom: 8px;
-  color: $indiv-action-custom-text;
+  flex: 1;
 }
 
-.action-component.selected {
-  //font-size: 16px;
-  background-color: $indiv-action-selected;
-  color: $indiv-action-selected-text;
+/* Input styling */
+.actionname {
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  color: #374151;
+  width: 100%;
+  padding: 2px 0;
+}
+
+.actionname::placeholder {
+  color: #6b7280;
 }
 
-.action-component:focus {
+.actionname:focus {
   outline: none;
 }
 
-.action-component-trigger {
-  display: grid;
-  grid-template-columns: 4fr 1fr;
-  align-items: center;
-  //height: 20px;
-  cursor: pointer;
-  overflow: hidden;
-  @extend %disable-highlight;
+/* Button styling */
+.time-button,
+.jump-button,
+.current-location {
+  min-width: 90px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-align: center;
+  border: none;
+  transition: all 200ms ease;
+  margin-top: 6px;
 }
 
-.route-container {
-  width: 100%;
+.time-button {
+  color: #6b7280;
+  background: transparent;
 }
 
-.route-header {
-  background-color: #1f2937;
-  color: #ffffff;
-  padding: 10px;
-  font-size: 14px;
+.jump-button {
+  color: white;
+  background: #111827;
 }
 
-.route-content {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 50px;
+.jump-button:hover {
+  background: #374151;
+}
+
+.current-location {
+  color: #059669;
+  background: #ecfdf5;
+}
+
+/* Hide/show button transitions */
+.action-component:hover .time-button {
+  display: none;
+}
+
+.action-component:hover .jump-button {
+  display: block;
+}
+
+.jump-button {
+  display: none;
+}
+
+.current-snap {
+  min-width: 90px;
+  font-weight: bold;
+  border: none;
+  background: transparent;
+  font-size: 1rem;
+  color: #374151;
+  width: 100%;
+  padding: 2px 0;
+  text-align: center;
 }