From 15fc12627ada396146aa1f0bcf714c4458942c14 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Thu, 15 Jun 2023 13:51:28 -0700
Subject: [PATCH] minor style updates

---
 frontend/src/styles/globals.css                           | 8 ++++++++
 frontend/src/views/DashboardPage/DashboardEnvOverview.tsx | 8 ++++----
 .../components/EnvComparisonRow/FolderComparisonRow.tsx   | 4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 693da7ce6..de4adfff4 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -49,6 +49,14 @@
     @apply bg-mineshaft-800;
   }
 
+  .breadcrumb:hover::before {
+    @apply bg-mineshaft-600;
+  }
+
+  .breadcrumb:hover::after {
+    @apply bg-mineshaft-600;
+  }
+
   .breadcrumb::after {
     left: 5px;
     bottom: -3px;
diff --git a/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx b/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
index c95a795db..0ac6a5651 100644
--- a/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
+++ b/frontend/src/views/DashboardPage/DashboardEnvOverview.tsx
@@ -170,10 +170,10 @@ export const DashboardEnvOverview = () => {
           </a>
         </p>
       </div>
-      <div className="mt-4 flex items-center justify-between">
+      <div className="mt-8 flex items-center justify-between">
         <div className="flex items-center space-x-2">
           <div
-            className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 px-5"
+            className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 hover:bg-mineshaft-600 py-1 pl-5 pr-2 text-sm"
             onClick={() => onFolderCrumbClick(0)}
             onKeyDown={() => null}
             role="button"
@@ -189,7 +189,7 @@ export const DashboardEnvOverview = () => {
                 key={`secret-path-${index + 1}`}
                 className={`breadcrumb relative z-20 ${
                   index + 1 === arr.length ? 'cursor-default' : 'cursor-pointer'
-                } border-solid border-mineshaft-600 py-1 px-5`}
+                } border-solid border-mineshaft-600 py-1 pl-5 pr-2 text-sm text-mineshaft-200`}
                 onClick={() => onFolderCrumbClick(index + 1)}
                 onKeyDown={() => null}
                 role="button"
@@ -210,7 +210,7 @@ export const DashboardEnvOverview = () => {
         </div>
       </div>
       <div className="overflow-y-auto">
-        <div className="sticky top-0 mt-8 flex h-10 min-w-[60.3rem] flex-row rounded-md border border-mineshaft-600 bg-mineshaft-800">
+        <div className="sticky top-0 mt-3 flex h-10 min-w-[60.3rem] flex-row rounded-md border border-mineshaft-600 bg-mineshaft-800">
           <div className="sticky top-0 flex w-10 items-center justify-center border-none px-4">
             <div className="w-10 text-center text-xs text-transparent">{0}</div>
           </div>
diff --git a/frontend/src/views/DashboardPage/components/EnvComparisonRow/FolderComparisonRow.tsx b/frontend/src/views/DashboardPage/components/EnvComparisonRow/FolderComparisonRow.tsx
index a8870afc9..188106a96 100644
--- a/frontend/src/views/DashboardPage/components/EnvComparisonRow/FolderComparisonRow.tsx
+++ b/frontend/src/views/DashboardPage/components/EnvComparisonRow/FolderComparisonRow.tsx
@@ -1,4 +1,4 @@
-import { faCheck, faFolder, faX } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faFolder, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 type Props = {
@@ -35,7 +35,7 @@ export const FolderComparisonRow = ({
         }`}
         key={`${folderName}-${slug}`}
       >
-        <FontAwesomeIcon icon={folderInEnv[slug] ? faCheck : faX} />
+        <FontAwesomeIcon icon={folderInEnv[slug] ? faCheck : faXmark} />
       </td>
     ))}
   </tr>