feat: add light mode + rewrite in Tailwind CSS (#15)

components/Interests/InterestParagraph.tsx

@@ -10,8 +10,10 @@ export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {
 
   return (
     <>
-      <p className='text-center'>
-        <strong className='important'>{title}</strong>
+      <p className='text-center my-6 text-gray dark:text-gray-dark'>
+        <strong className='text-yellow font-medium text-lg dark:text-yellow-dark'>
+          {title}
+        </strong>
         <br />
         <span className='paragraph-color'>{htmlParser(description)}</span>
       </p>

components/Interests/InterestsList/InterestItem.tsx

@@ -1,41 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import { Tooltip } from 'components/design/Tooltip'
 
 interface InterestItemProps {
   title: string
   fontAwesomeIcon: IconDefinition
 }
 
-export const InterestItem: React.FC<InterestItemProps> = props => {
+export const InterestItem: React.FC<InterestItemProps> = (props) => {
   const { fontAwesomeIcon, title } = props
 
   return (
-    <>
-      <li className='interest-item'>
-        <Tooltip title={title}>
-          <FontAwesomeIcon
-            className='color-primary'
-            style={{
-              cursor: 'pointer',
-              height: '100%',
-              width: '100%',
-              display: 'block'
-            }}
-            icon={fontAwesomeIcon}
-          />
-        </Tooltip>
-      </li>
-
-      <style jsx>
-        {`
-          .interest-item {
-            margin: 7px 5px;
-            width: 34px;
-            height: 34px;
-          }
-        `}
-      </style>
-    </>
+    <li className='interest-item my-2 mx-2 w-8 h-8' title={title}>
+      <FontAwesomeIcon
+        className='text-yellow cursor-pointer h-full w-full block dark:text-yellow-dark'
+        icon={fontAwesomeIcon}
+      />
+    </li>
   )
 }

components/Interests/InterestsList/index.tsx

@@ -5,41 +5,18 @@ import { InterestItem } from './InterestItem'
 
 export const InterestsList: React.FC = () => {
   return (
-    <>
-      <div className='container-list'>
-        <ul className='interests-list'>
-          <InterestItem
-            title='Developer Full Stack Junior'
-            fontAwesomeIcon={faCode}
-          />
-          <InterestItem
-            title='Passionate about High-Tech'
-            fontAwesomeIcon={faMicrochip}
-          />
-          <InterestItem
-            title='Open-Source enthusiast'
-            fontAwesomeIcon={faGit}
-          />
-        </ul>
-      </div>
-
-      <style jsx>
-        {`
-          .container-list {
-            display: flex;
-            justify-content: center;
-            margin: 15px 0 15px 0;
-          }
-          .interests-list {
-            display: flex;
-            justify-content: space-around;
-            padding: 0;
-            margin: 0;
-            width: 60%;
-            list-style: none;
-          }
-        `}
-      </style>
-    </>
+    <div className='flex justify-center my-4'>
+      <ul className='flex justify-around p-0 m-0 list-none w-96'>
+        <InterestItem
+          title='Developer Full Stack Junior'
+          fontAwesomeIcon={faCode}
+        />
+        <InterestItem
+          title='Passionate about High-Tech'
+          fontAwesomeIcon={faMicrochip}
+        />
+        <InterestItem title='Open-Source enthusiast' fontAwesomeIcon={faGit} />
+      </ul>
+    </div>
   )
 }

components/Interests/index.tsx

@@ -6,13 +6,17 @@ import { InterestsList } from './InterestsList'
 export const Interests: React.FC = () => {
   const { t } = useTranslation()
 
-  const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
-    returnObjects: true
-  })
+  const paragraphs: InterestParagraphProps[] = t(
+    'home:interests.paragraphs',
+    {},
+    {
+      returnObjects: true
+    }
+  )
 
   return (
     <>
-      <div className='col-24'>
+      <div className='max-w-full'>
         {paragraphs.map((paragraph, index) => {
           return <InterestParagraph key={index} {...paragraph} />
         })}