styled buttons in buttons container

Author: garrettlchow

src/app/styles/components/_buttons.scss

@@ -177,16 +177,6 @@
   cursor: pointer;
 }
 
-.import-button:hover,
-.howToUse-button:hover,
-.export-button:hover,
-.pause-button:hover,
-.reconnect-button:hover {
-  color: $function-bar-text-hover;
-  box-shadow: 1px 1px 2px 1px rgba(30, 86, 171, 0.25);
-  transform: translate3d(0, -3px, 0);
-}
-
 .svg-inline--fa {
   //color: $blue-brand;
   margin-right: 0.75em;

src/app/styles/layout/_buttonsContainer.scss

@@ -8,6 +8,7 @@
   background: white;
   border-top: 1px solid #e5e7eb;
   padding: 12px;
+  gap: 8px;
 }
 
 .introjs-tooltip {
@@ -101,3 +102,19 @@
   align-items: center;
   height: 20%;
 }
+
+.buttons-container button {
+  display: flex;
+  align-items: center;
+  color: #6b7280;
+  font-size: 1rem;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  transition: all 200ms ease;
+}
+
+.buttons-container button:hover {
+  background-color: #f3f4f6;
+}

src/app/styles/layout/_mainContainer.scss

@@ -1,7 +1,7 @@
 .main-container {
   height: 100%;
   margin: 0 auto;
-  background-color: $function-bar-background;
+  background-color: white;
   overflow: hidden;
 }
 

src/app/styles/layout/_travelContainer.scss

@@ -45,7 +45,3 @@
     color: transparent;
   }
 }
-
-.button-icon {
-  color: $icon-primary;
-}