From 32846c72b6ab9ad904ed07a8cad51d959c38b503 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 10:47:56 -0300
Subject: [PATCH] Some interactions

---
 .../core/UserNav/DropdownMenu.module.css      |  8 ++++--
 components/core/UserNav/DropdownMenu.tsx      |  9 +++++--
 components/icon/Moon.tsx                      | 19 +++++++++++++
 components/icon/Sun.tsx                       | 27 +++++++++++++++++++
 components/icon/index.ts                      |  2 ++
 5 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 components/icon/Moon.tsx
 create mode 100644 components/icon/Sun.tsx

diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css
index 9568f9fb1..ee30070d2 100644
--- a/components/core/UserNav/DropdownMenu.module.css
+++ b/components/core/UserNav/DropdownMenu.module.css
@@ -3,7 +3,7 @@
 
   @screen lg {
     @apply absolute right-0 w-screen;
-    max-width: 160px;
+    max-width: 200px;
   }
 
   & .dropdownMenuContainer {
@@ -15,8 +15,12 @@
   }
 
   & .link {
-    @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+    @apply flex space-x-2 cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
     text-transform: capitalize;
+
+    & .icons svg {
+      @apply w-6 h-6;
+    }
   }
 
   &.off {
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index f6a3d53e8..e510bdd29 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -9,7 +9,7 @@ import {
 } from '@react-aria/overlays'
 import Link from 'next/link'
 import cn from 'classnames'
-
+import { Moon, Sun } from '@components/icon'
 interface DropdownMenuProps {
   onClose: () => void
   innerRef: React.MutableRefObject<HTMLInputElement>
@@ -54,7 +54,12 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
               theme === 'dark' ? setTheme('light') : setTheme('dark')
             }
           >
-            Theme: <strong>{theme}</strong>
+            <span>
+              Theme: <strong>{theme}</strong>{' '}
+            </span>
+            <span className={s.icons}>
+              {theme === 'dark' ? <Moon /> : <Sun />}
+            </span>
           </a>
           <Link href="#">
             <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
diff --git a/components/icon/Moon.tsx b/components/icon/Moon.tsx
new file mode 100644
index 000000000..db94ac7bd
--- /dev/null
+++ b/components/icon/Moon.tsx
@@ -0,0 +1,19 @@
+const Moon = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+    >
+      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+    </svg>
+  )
+}
+
+export default Moon
diff --git a/components/icon/Sun.tsx b/components/icon/Sun.tsx
new file mode 100644
index 000000000..7457650b0
--- /dev/null
+++ b/components/icon/Sun.tsx
@@ -0,0 +1,27 @@
+const Sun = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <path d="M12 1v2" />
+      <path d="M12 21v2" />
+      <path d="M4.22 4.22l1.42 1.42" />
+      <path d="M18.36 18.36l1.42 1.42" />
+      <path d="M1 12h2" />
+      <path d="M21 12h2" />
+      <path d="M4.22 19.78l1.42-1.42" />
+      <path d="M18.36 5.64l1.42-1.42" />
+    </svg>
+  )
+}
+
+export default Sun
diff --git a/components/icon/index.ts b/components/icon/index.ts
index 725587c69..929003d6f 100644
--- a/components/icon/index.ts
+++ b/components/icon/index.ts
@@ -6,3 +6,5 @@ export { default as ArrowLeft } from './ArrowLeft'
 export { default as Plus } from './Plus'
 export { default as Minus } from './Minus'
 export { default as Check } from './Check'
+export { default as Sun } from './Sun'
+export { default as Moon } from './Moon'