diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 37d0df80a6..18c4208e7f 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -106,11 +106,21 @@ const DropdownHeader = styled.div<{ isExpanded: boolean }>` align-items: center; padding: 10px; cursor: pointer; - background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')}; - color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')}; border: 1px solid white; border-left: none; + + background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')}; + color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')}; + + &:hover { + background-color: white; + color: black; + + img { + filter: invert(100%); + } + } ` const Chevron = styled.span<{ isExpanded: boolean }>` diff --git a/src/components/Operator/OperatorDetails/DownloadDropdown.tsx b/src/components/Operator/OperatorDetails/DownloadDropdown.tsx index 396de17a1a..a5dcec5a1e 100644 --- a/src/components/Operator/OperatorDetails/DownloadDropdown.tsx +++ b/src/components/Operator/OperatorDetails/DownloadDropdown.tsx @@ -135,6 +135,15 @@ const DropdownButton = styled.button<{ isOpen: boolean }>` line-height: 20px; letter-spacing: 0.14px; } + + &:hover { + background-color: white; + color: black; + + img { + filter: invert(100%); + } + } ` const ChevronIconWrapper = styled.div<{ isOpen: boolean }>` diff --git a/src/components/Operator/OperatorDetails/OperatorDetails.tsx b/src/components/Operator/OperatorDetails/OperatorDetails.tsx index 2d9289fea5..2fa72f76bc 100644 --- a/src/components/Operator/OperatorDetails/OperatorDetails.tsx +++ b/src/components/Operator/OperatorDetails/OperatorDetails.tsx @@ -88,7 +88,7 @@ const OperatorDetails: React.FC = ({ {operator?.background} - + Helmet {operator?.helmet} @@ -97,11 +97,13 @@ const OperatorDetails: React.FC = ({ Jacket {operator?.jacket} + + Skin None - + {isIncripted && @@ -176,6 +178,11 @@ const Button = styled.button` color: #fff; font-size: 14px; cursor: pointer; + + &:hover { + background-color: white; + color: black; + } ` const OperatorTitle = styled.h1` @@ -200,11 +207,11 @@ const AttributesFirstGrid = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; - margin-top: 24px; + margin-top: 2px; ` -const AttributesSecondGrid = styled(AttributesFirstGrid)` - grid-template-columns: repeat(3, 1fr); +const AttributesFullGrid = styled(AttributesFirstGrid)` + grid-template-columns: 1fr; margin-top: 2px; ` @@ -230,6 +237,7 @@ const ArchetypeSection = styled.div` background-color: var(--grey-900); padding: 16px 8px; margin-top: 24px; + margin-bottom: 24px; ` const DetailsList = styled.div` diff --git a/src/containers/Explore/ExploreContainer.tsx b/src/containers/Explore/ExploreContainer.tsx index a82fc50af2..81e8f66d67 100644 --- a/src/containers/Explore/ExploreContainer.tsx +++ b/src/containers/Explore/ExploreContainer.tsx @@ -131,7 +131,9 @@ const DropdownContainer = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: 70px; + + max-width: 911px; + margin: 70px auto 0 auto; & > div:first-of-type { border-left: 1px solid white; diff --git a/src/containers/Operator/OperatorContainer.tsx b/src/containers/Operator/OperatorContainer.tsx index dc012f99e1..163292688e 100644 --- a/src/containers/Operator/OperatorContainer.tsx +++ b/src/containers/Operator/OperatorContainer.tsx @@ -12,13 +12,15 @@ const ExploreOperator: React.FC = ({ id }) => { const router = useRouter() const handleGoBack = () => { - // if router has history, go back, else go to home - if (router?.back) { - router.back() - } else { - router.push('/') - } + router.push('/') + // // if router has history, go back, else go to home + // if (router?.back) { + // router.back() + // } else { + // router.push('/') + // } } + return (