Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Added hover state to the black-colored Launch button on Applications Page. (#8279)

Browse Source 
* 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
This commit is contained in:
kyteinsky 2021-10-20 05:22:17 +00:00 committed by GitHub
parent 3ba3aed30f
commit 5676d6f652
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/client/src/pages/Applications/ApplicationCard.tsx
View File

@ -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};
}
}
}