chore: misc. design updates

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 }>`

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 }>`

src/components/Operator/OperatorDetails/OperatorDetails.tsx

@@ -88,7 +88,7 @@ const OperatorDetails: React.FC<OperatorDetailsProps> = ({
             <AttributeValue>{operator?.background}</AttributeValue>
           </AttributeItem>
         </AttributesFirstGrid>
-        <AttributesSecondGrid>
+        <AttributesFirstGrid>
           <AttributeItem>
             <AttributeLabel>Helmet</AttributeLabel>
             <AttributeValue>{operator?.helmet}</AttributeValue>
@@ -97,11 +97,13 @@ const OperatorDetails: React.FC<OperatorDetailsProps> = ({
             <AttributeLabel>Jacket</AttributeLabel>
             <AttributeValue>{operator?.jacket}</AttributeValue>
           </AttributeItem>
+        </AttributesFirstGrid>
+        <AttributesFullGrid>
           <AttributeItem>
             <AttributeLabel>Skin</AttributeLabel>
             <AttributeValue>None</AttributeValue>
           </AttributeItem>
-        </AttributesSecondGrid>
+        </AttributesFullGrid>
 
         <DetailsList>
           {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)`
+const AttributesFullGrid = styled(AttributesFirstGrid)`
-  grid-template-columns: repeat(3, 1fr);
+  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`

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;

src/containers/Operator/OperatorContainer.tsx

@@ -12,13 +12,15 @@ const ExploreOperator: React.FC<ExploreOperatorProps> = ({ id }) => {
   const router = useRouter()
 
   const handleGoBack = () => {
-    // if router has history, go back, else go to home
+    router.push('/')
-    if (router?.back) {
+    // // if router has history, go back, else go to home
-      router.back()
+    // if (router?.back) {
-    } else {
+    //   router.back()
-      router.push('/')
+    // } else {
-    }
+    //   router.push('/')
+    // }
   }
+
   return (
     <Container>
       <GoBackButton aria-label="Share" onClick={handleGoBack}>