finally finished styling current shapshot button

Author: garrettlchow

src/app/components/Actions/Action.tsx

@@ -88,9 +88,12 @@ const Action = (props: ActionProps): JSX.Element => {
                 />
               </div>
               {isCurrIndex ? (
-                <button className='current-snap' type='button'>
-                  {`Snapshot: ${displayName}`}
-                </button>
+                <input
+                  className='current-snap'
+                  key={`ActionInput${displayName}`}
+                  type='text'
+                  placeholder={`Snapshot: ${displayName}`}
+                />
               ) : (
                 <button className='time-button' type='button'>
                   {displayTime}

src/app/styles/abstracts/_variablesLM.scss

@@ -117,11 +117,11 @@
 }
 
 .current-snap {
-  font-weight: bold;
+  font-weight: 900;
   border: none;
   background: transparent;
   font-size: 1rem;
   color: #374151;
   width: 100%;
-  padding: 2px 24px 2px 0px;
+  padding: 2px 0px;
 }

src/app/styles/components/_actionComponent.scss

@@ -37,7 +37,6 @@
 
 .accessibility-controls label:hover {
   background-color: #0d9488;
-  transform: translateY(-1px);
 }
 
 .accessibility-disable input[type='radio'] {
@@ -65,7 +64,6 @@
 .accessibility-disable label:hover {
   border-color: #d1d5db;
   background-color: #f3f4f6;
-  transform: translateY(-1px);
 }
 
 .accessibility-text {

src/app/styles/components/_ax.scss

@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 8px;
   width: 100px;
   height: 40px;
   padding: 8px 12x;
@@ -22,13 +23,6 @@
 
   &:hover {
     background-color: #374151;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-  }
-
-  &:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   &:focus {
@@ -184,54 +178,6 @@ aside {
   display: none;
 }
 
-/* ^ sidebar button open and closing functionality */
-.reconnect-button-pop-up {
-  padding: 3px;
-  outline: transparent;
-  background-color: #050787;
-  color: $reconnect-button-text !important;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  line-height: 1.5em;
-  font: 500 $button-text-size $text-font-stack;
-  width: 120px;
-  &:hover {
-    color: black !important;
-    background-color: #ff0001;
-  }
-}
-
-.cancel-button-pop-up {
-  padding: 3px;
-  outline: transparent;
-  color: black;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  line-height: 1.5em;
-  font: 500 $button-text-size $text-font-stack;
-  width: 120px;
-  &:hover {
-    color: $contrasting-color;
-    background-color: #ff0001;
-  }
-}
-
-.close-icon-pop-up {
-  cursor: pointer;
-  color: #ff0001;
-  font-size: 20px;
-  padding-right: 8px;
-  color: black;
-}
-
-.warning-icon-pop-up {
-  color: #d72828;
-  margin-left: 5px;
-  margin-right: -22px;
-}
-
 .clear-button-modern {
   width: 100% !important;
   background-color: #f3f4f6 !important;

src/app/styles/components/_buttons.scss

@@ -64,7 +64,6 @@
 
 .introjs-tooltiptext {
   font-size: 14px;
-  // color: #333;
 }
 
 .introjs-progressbar {
@@ -80,17 +79,6 @@
   border-radius: 8px;
 }
 
-.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-tooltip {
   color: black;
   background-color: white;
@@ -132,48 +120,6 @@
   outline: none;
 }
 
-.dialog-pop-up {
-  border: 1px solid #ff0001;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-  padding: 13px;
-}
-
-.dialog-pop-up-header {
-  color: #ff0001;
-  padding: 8px 16px;
-  font-size: 20px;
-  font-family: $text-font-stack;
-}
-
-.dialog-pop-up-contents {
-  background-color: $pop-up-window-background;
-  color: $pop-up-window-text;
-  font-family: $text-font-stack;
-  line-height: 1.4;
-  padding: 0px 15px 15px 15px !important;
-}
-
-.dialog-pop-up-actions {
-  padding: 15px;
-  background-color: #ff0001;
-}
-
-.close-icon-pop-up-div {
-  height: 40px;
-  width: 100%;
-  background-color: #ff0001;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.warning-header-container {
-  background-color: $pop-up-window-background;
-  display: flex;
-  align-items: center;
-  height: 20%;
-}
-
 .buttons-container button {
   display: flex;
   align-items: center;

src/app/styles/layout/_buttonsContainer.scss

@@ -74,14 +74,10 @@
 
 .launch-button:hover {
   background-color: #374151;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .launch-button:active {
   background-color: #111827;
-  transform: translateY(0);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .github-link {

src/app/styles/layout/_errorContainer.scss

@@ -5,24 +5,11 @@
   align-items: center;
   border-top: 1px solid #e5e7eb;
   padding-left: 16px;
-  gap: 12px;
+  gap: 8px;
 }
 
 .react-select-container {
   font-size: 16px;
   min-width: 90px;
   margin: 8px;
 }
-
-.react-select__control {
-  background-color: #f3f4f6 !important;
-  border: none !important;
-  border-radius: 6px !important;
-  box-shadow: none !important;
-}
-
-.react-select__single-value {
-  color: #374151 !important;
-  font-size: 0.875rem !important;
-  font-weight: 500 !important;
-}

src/app/styles/layout/_travelContainer.scss

@@ -18,26 +18,17 @@ body {
   height: 100%;
 }
 
-// 1. Configuration and helpers
-@import 'abstracts/variablesLM';
-
-// 3. Base
 @import 'base/helpers';
 
-// 4. Layout-related sections
 @import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
   'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
   'layout/buttonsContainer';
 
-// 5. Components
 @import 'components/buttons', 'components/actionComponent', 'components/performanceVisx',
   'components/componentMap', 'components/ax';
 
-// slider component
 @import './components/rc-slider';
 
-// d3 chart component
 @import './components/d3graph';
 
-// diff component
 @import './components/diff';