adds icons to header drop down menu

Author: Lailo

src/components/layout/AppHeader.tsx

@@ -5,6 +5,8 @@ import dynamic from 'next/dynamic'
 import Dropdown from '@components/Dropdown'
 import routes from '@utils/routes'
 import { FiMoreHorizontal } from 'react-icons/fi'
+import { AiOutlineFontColors } from 'react-icons/ai'
+import { MdFeaturedPlayList } from 'react-icons/md'
 
 const ThemeSwitch = dynamic(() => import('@components/layout/ThemeSwitch'), {
   ssr: false,
@@ -34,23 +36,19 @@ const AppHeader: React.FC<Props> = ({ className }) => {
       </div>
       <div>
         <Dropdown buttonLabel={<FiMoreHorizontal />}>
-          <ul className="w-40 space-y-4 py-2">
+          <ul className="w-40 space-y-4 py-2 text-sm">
             <li>
               <Link {...routes.COMPONENTS}>
-                <a
-                  className="text-green-600 hover:underline"
-                  title="components"
-                >
+                <a className="text-primary hover:underline" title="components">
+                  <MdFeaturedPlayList className="inline mr-2" />
                   Components
                 </a>
               </Link>
             </li>
             <li>
               <Link {...routes.TYPOGRAPHY}>
-                <a
-                  className="text-green-600 hover:underline"
-                  title="Typography"
-                >
+                <a className="text-primary hover:underline" title="Typography">
+                  <AiOutlineFontColors className="inline mr-2" />
                   Typography
                 </a>
               </Link>
@@ -59,7 +57,7 @@ const AppHeader: React.FC<Props> = ({ className }) => {
               <hr className="dark:border-gray-700" />
             </li>
             <li className="flex items-center justify-between">
-              <span className="mr-auto text-sm text-gray-600">Theme</span>
+              <span className="mr-auto text-gray-600">Theme</span>
               <ThemeSwitch />
             </li>
           </ul>

src/components/layout/__snapshots__/AppHeader.test.tsx.snap

@@ -24,17 +24,20 @@ exports[`AppHeader matches snapshot 1`] = `
       buttonLabel={<FiMoreHorizontal />}
     >
       <ul
-        className="w-40 space-y-4 py-2"
+        className="w-40 space-y-4 py-2 text-sm"
       >
         <li>
           <Link
             as="/components"
             href="/components"
           >
             <a
-              className="text-green-600 hover:underline"
+              className="text-primary hover:underline"
               title="components"
             >
+              <MdFeaturedPlayList
+                className="inline mr-2"
+              />
               Components
             </a>
           </Link>
@@ -45,9 +48,12 @@ exports[`AppHeader matches snapshot 1`] = `
             href="/typography"
           >
             <a
-              className="text-green-600 hover:underline"
+              className="text-primary hover:underline"
               title="Typography"
             >
+              <AiOutlineFontColors
+                className="inline mr-2"
+              />
               Typography
             </a>
           </Link>
@@ -61,7 +67,7 @@ exports[`AppHeader matches snapshot 1`] = `
           className="flex items-center justify-between"
         >
           <span
-            className="mr-auto text-sm text-gray-600"
+            className="mr-auto text-gray-600"
           >
             Theme
           </span>