From 5676d6f6525ebae3a9d8a5f14b3fb3135c479c11 Mon Sep 17 00:00:00 2001
From: kyteinsky <kyteinsky@gmail.com>
Date: Wed, 20 Oct 2021 05:22:17 +0000
Subject: [PATCH] fix: Added hover state to the black-colored Launch button on
 Applications Page. (#8279)

* Added hover state to the black Launch button on Applications Page.
The black button didn't exhibit hover changes while the orange Edit button did
because the Button base component made the buttons darker, and the launch button
was already dark.
Custom CSS was included in Applications.tsx for hover state background-color
change.

* Fix: Added hover state to Launch button on Applications page

default: black background, white text
hover: transparent background, black text and border

* replaced harcoded colors with src/constants/Colors.tsx properties
---
 .../pages/Applications/ApplicationCard.tsx    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx
index d0f1af806d..1e5570154a 100644
--- a/app/client/src/pages/Applications/ApplicationCard.tsx
+++ b/app/client/src/pages/Applications/ApplicationCard.tsx
@@ -97,9 +97,21 @@ const NameWrapper = styled((props: HTMLDivProps & NameWrapperProps) => (
                 z-index: 1;
 
                 & .t--application-view-link {
-                  border: none;
-                  background-color: #000;
-                  color: #fff;
+                  border: 2px solid ${Colors.BLACK};
+                  background-color: ${Colors.BLACK};
+                  color: ${Colors.WHITE};
+                }
+
+                & .t--application-view-link:hover {
+                  background-color: transparent;
+                  border: 2px solid ${Colors.BLACK};
+                  color: ${Colors.BLACK};
+
+                  svg {
+                    path {
+                      fill: ${Colors.BLACK};
+                    }
+                  }
                 }
 
                 & .t--application-edit-link, & .t--application-view-link {
@@ -110,7 +122,7 @@ const NameWrapper = styled((props: HTMLDivProps & NameWrapperProps) => (
                       width: 16px;
                       height: 16px;
                       path {
-                        fill: #fff;
+                        fill: ${Colors.WHITE};
                       }
                     }
                   }