From c6df545d324bf55c9a4d8fb4cd5a5d0cbb791b85 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Wed, 13 Jan 2021 14:37:10 +1100
Subject: [PATCH] Mobile Nav fix - add cursor rule to nav actions - update
 slider animation rules - update CloseIcon to use white - fix CloseIcon
 positioning

---
 .../Nav/Mobile/NavSlides/Slider/Slider.tsx    |  4 +--
 .../components/Nav/Mobile/NavSlides/styles.ts |  5 ++--
 docs/components/Nav/Mobile/Navbar/styles.ts   |  1 +
 .../components/Nav/Mobile/icons/CloseIcon.tsx | 25 ++++++++++++-------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx b/docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx
index 802a4ed..9b88d30 100644
--- a/docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx
+++ b/docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx
@@ -151,8 +151,8 @@ export function Slider({
         animate={{ x: `${-100 * viewIndex}%` }}
         transition={{
           x: {
-            duration: 0.15,
-            stiffness: 10,
+            duration: 0.4,
+            stiffness: 2000,
             damping: 400
           },
           ...slideContainerTransition
diff --git a/docs/components/Nav/Mobile/NavSlides/styles.ts b/docs/components/Nav/Mobile/NavSlides/styles.ts
index 227da3d..9f899ac 100644
--- a/docs/components/Nav/Mobile/NavSlides/styles.ts
+++ b/docs/components/Nav/Mobile/NavSlides/styles.ts
@@ -37,6 +37,7 @@ export const NavLink = styled(AnchorLink)<{
   width: auto;
   font-size: 1.25rem;
   margin-bottom: 1em;
+  cursor: pointer;
 
   ${({ theme }) => `
     color: ${theme.colors.white};
@@ -47,10 +48,10 @@ export const CloseButtonContainer = styled(motion.div)`
   position: absolute;
   width: 30px;
   height: 30px;
-  background: white;
+  border: 1px solid white;
   border-radius: 50%;
   top: 1em;
-  right: 1em;
+  left: calc(50vw - 30px);
   padding: 0.5em;
   z-index: 1;
 `;
diff --git a/docs/components/Nav/Mobile/Navbar/styles.ts b/docs/components/Nav/Mobile/Navbar/styles.ts
index b3ab29a..4189a3d 100644
--- a/docs/components/Nav/Mobile/Navbar/styles.ts
+++ b/docs/components/Nav/Mobile/Navbar/styles.ts
@@ -24,6 +24,7 @@ export const NavCategoryButton = styled.button`
   outline: none;
   appearance: none;
   background: transparent;
+  cursor: pointer;
 
   ${({ theme }) => `
     color: ${theme.colors.primary};
diff --git a/docs/components/Nav/Mobile/icons/CloseIcon.tsx b/docs/components/Nav/Mobile/icons/CloseIcon.tsx
index f1c6631..08ed2ff 100644
--- a/docs/components/Nav/Mobile/icons/CloseIcon.tsx
+++ b/docs/components/Nav/Mobile/icons/CloseIcon.tsx
@@ -8,24 +8,31 @@ export function CloseIcon() {
       y="0px"
       viewBox="0 0 100 100"
     >
-      <style type="text/css">
-        {`
-  .st0{fill:#FFFFFF;stroke:#F15E22;stroke-width:3.2323;stroke-miterlimit:10;}
-  `}
-      </style>
       <g>
         <g>
           <path
-            className="st0"
             d="M87.8,97.1c-2.5,0-5-0.9-6.9-2.8L5.4,18.8C1.7,15,1.7,8.9,5.4,5.1c3.8-3.8,9.9-3.8,13.7,0l75.5,75.5
-			c3.8,3.8,3.8,9.9,0,13.7C92.7,96.2,90.3,97.1,87.8,97.1z"
+      c3.8,3.8,3.8,9.9,0,13.7C92.7,96.2,90.3,97.1,87.8,97.1z"
+            style={{
+              fill: 'transparent',
+              stroke: '#fff',
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeWidth: '3.2px'
+            }}
           />
         </g>
         <g>
           <path
-            className="st0"
             d="M12.3,97.1c-2.5,0-5-0.9-6.9-2.8c-3.8-3.8-3.8-9.9,0-13.7L80.9,5.1c3.8-3.8,9.9-3.8,13.7,0
-			c3.8,3.8,3.8,9.9,0,13.7L19.2,94.3C17.3,96.2,14.8,97.1,12.3,97.1z"
+      c3.8,3.8,3.8,9.9,0,13.7L19.2,94.3C17.3,96.2,14.8,97.1,12.3,97.1z"
+            style={{
+              fill: 'transparent',
+              stroke: '#fff',
+              strokeLinecap: 'round',
+              strokeLinejoin: 'round',
+              strokeWidth: '3.2px'
+            }}
           />
         </g>
       </g>