More styling for dark theme for accounts list

cheshire137 · Feb 1, 2020 · 5d4367c · 5d4367c
1 parent 7846a4e
commit 5d4367c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/components/AccountListItem/AccountListItem.css b/src/components/AccountListItem/AccountListItem.css
@@ -6,7 +6,3 @@
 .btn-rank.btn-link:focus {
   text-decoration: none;
 }
-
-.theme-dark .Box .AvatarStack-body .avatar.account-hero-avatar {
-  background-color: #2f363d;
-}
diff --git a/src/components/AccountListItem/AccountListItemStyle.tsx b/src/components/AccountListItem/AccountListItemStyle.tsx
@@ -2,12 +2,16 @@ import styled from "styled-components";
 import { Box } from "@primer/components";
 import ButtonShownOnHover from "./ButtonShownOnHover";
 
+interface Props {
+  appTheme: string;
+}
+
 export default styled(Box).attrs({
   as: "li",
   p: 3
-})`
+})<Props>`
   & + & {
-    border-top: 1px solid ${props => props.theme.colors.gray[3]};
+    border-top: 1px solid ${props => props.appTheme === "dark" ? props.theme.colors.gray[7] : props.theme.colors.gray[3]};
   }
 
   &:hover ${ButtonShownOnHover} {

diff --git a/src/components/AccountListItem/index.tsx b/src/components/AccountListItem/index.tsx
@@ -134,7 +134,7 @@ const AccountListItem = ({
   const haveLatestResult = latestMatch && latestMatch.result;
 
   return (
-    <AccountListItemStyle>
+    <AccountListItemStyle appTheme={theme}>
       <Flex justifyContent="space-between" alignItems="center">
         <div className="width-full mb-2 mt-1">
           <Flex justifyContent="space-between" alignItems="center">

diff --git a/src/components/HeroImageTag.tsx b/src/components/HeroImageTag.tsx
@@ -5,7 +5,7 @@ interface Props {
 }
 
 const HeroImageTag = styled("img")<Props>`
-  background-color: ${props => props.appTheme === "dark" ? "#2f363d" : "inherit"};
+  background-color: ${props => props.appTheme === "dark" ? "#2f363d !important" : "inherit"};
 `;
 
 export default HeroImageTag;