Merge pull request #312 from arifszn/icon-placement

Fix icon placement
arifszn · Feb 18, 2023 · 22d6ee0 · 22d6ee0
2 parents 5631516 + f5b9ed4
commit 22d6ee0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -93,9 +93,9 @@ Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
 
 There are three ways to use **GitProfile**. Use any.
 
-- Forking this repo _(recommended)_
-- Setting up locally
-- Installing as package
+- [Forking this repo _(recommended)_](#forking-this-repo)
+- [Setting up locally](#setting-up-locally)
+- [Installing as package](#installing-as-package)
 
 ### Forking this repo
 

diff --git a/src/components/details/index.jsx b/src/components/details/index.jsx
@@ -1,13 +1,12 @@
-import { MdLocationOn, MdMail } from 'react-icons/md';
+import { MdLocationOn } from 'react-icons/md';
 import {
   AiFillGithub,
   AiFillInstagram,
   AiFillMediumSquare,
 } from 'react-icons/ai';
 import { SiTwitter } from 'react-icons/si';
-import { GrLinkedinOption } from 'react-icons/gr';
 import { CgDribbble } from 'react-icons/cg';
-import { RiPhoneFill } from 'react-icons/ri';
+import { RiPhoneFill, RiMailFill } from 'react-icons/ri';
 import { Fragment } from 'react';
 import {
   FaBehanceSquare,
@@ -19,6 +18,7 @@ import {
   FaMastodon,
   FaStackOverflow,
   FaTelegram,
+  FaLinkedin,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
@@ -49,8 +49,9 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
       rel="noreferrer"
       className="flex justify-start py-2 px-1 items-center"
     >
-      <span className="w-2 m-2">{icon}</span>
-      <div className="flex-grow font-medium px-2">{title}</div>
+      <div className="flex-grow font-medium gap-2 flex items-center my-1">
+        {icon} {title}
+      </div>
       <div
         className={`${
           skeleton ? 'flex-grow' : ''
@@ -93,14 +94,14 @@ const Details = ({ profile, loading, social, github }) => {
             <Fragment>
               {profile.location && (
                 <ListItem
-                  icon={<MdLocationOn className="mr-2" />}
+                  icon={<MdLocationOn />}
                   title="Based in:"
                   value={profile.location}
                 />
               )}
               {profile.company && (
                 <ListItem
-                  icon={<FaBuilding className="mr-2" />}
+                  icon={<FaBuilding />}
                   title="Company:"
                   value={profile.company}
                   link={
@@ -111,110 +112,110 @@ const Details = ({ profile, loading, social, github }) => {
                 />
               )}
               <ListItem
-                icon={<AiFillGithub className="mr-2" />}
+                icon={<AiFillGithub />}
                 title="GitHub:"
                 value={github.username}
                 link={`https://github.com/${github.username}`}
               />
               {social?.twitter && (
                 <ListItem
-                  icon={<SiTwitter className="mr-2" />}
+                  icon={<SiTwitter />}
                   title="Twitter:"
                   value={social.twitter}
                   link={`https://twitter.com/${social.twitter}`}
                 />
               )}
               {social?.mastodon && (
                 <ListItem
-                  icon={<FaMastodon className="mr-2" />}
+                  icon={<FaMastodon />}
                   title="Mastodon:"
                   value={getFormattedMastodonValue(social.mastodon, false)}
                   link={getFormattedMastodonValue(social.mastodon, true)}
                 />
               )}
               {social?.linkedin && (
                 <ListItem
-                  icon={<GrLinkedinOption className="mr-2" />}
+                  icon={<FaLinkedin />}
                   title="LinkedIn:"
                   value={social.linkedin}
                   link={`https://www.linkedin.com/in/${social.linkedin}`}
                 />
               )}
               {social?.dribbble && (
                 <ListItem
-                  icon={<CgDribbble className="mr-2" />}
+                  icon={<CgDribbble />}
                   title="Dribbble:"
                   value={social.dribbble}
                   link={`https://dribbble.com/${social.dribbble}`}
                 />
               )}
               {social?.behance && (
                 <ListItem
-                  icon={<FaBehanceSquare className="mr-2" />}
+                  icon={<FaBehanceSquare />}
                   title="Behance:"
                   value={social.behance}
                   link={`https://www.behance.net/${social.behance}`}
                 />
               )}
               {social?.facebook && (
                 <ListItem
-                  icon={<FaFacebook className="mr-2" />}
+                  icon={<FaFacebook />}
                   title="Facebook:"
                   value={social.facebook}
                   link={`https://www.facebook.com/${social.facebook}`}
                 />
               )}
               {social?.instagram && (
                 <ListItem
-                  icon={<AiFillInstagram className="mr-2" />}
+                  icon={<AiFillInstagram />}
                   title="Instagram:"
                   value={social.instagram}
                   link={`https://www.instagram.com/${social.instagram}`}
                 />
               )}
               {social?.medium && (
                 <ListItem
-                  icon={<AiFillMediumSquare className="mr-2" />}
+                  icon={<AiFillMediumSquare />}
                   title="Medium:"
                   value={social.medium}
                   link={`https://medium.com/@${social.medium}`}
                 />
               )}
               {social?.dev && (
                 <ListItem
-                  icon={<FaDev className="mr-2" />}
+                  icon={<FaDev />}
                   title="Dev:"
                   value={social.dev}
                   link={`https://dev.to/${social.dev}`}
                 />
               )}
               {social?.stackoverflow && (
                 <ListItem
-                  icon={<FaStackOverflow className="mr-2" />}
+                  icon={<FaStackOverflow />}
                   title="Stack Overflow:"
                   value={social.stackoverflow.split('/').slice(-1)}
                   link={`https://stackoverflow.com/users/${social.stackoverflow}`}
                 />
               )}
               {social?.website && (
                 <ListItem
-                  icon={<FaGlobe className="mr-2" />}
+                  icon={<FaGlobe />}
                   title="Website:"
                   value={social.website}
                   link={social.website}
                 />
               )}
               {social?.skype && (
                 <ListItem
-                  icon={<FaSkype className="mr-2" />}
+                  icon={<FaSkype />}
                   title="Skype"
                   value={social.skype}
                   link={`skype:${social.skype}?chat`}
                 />
               )}
               {social?.telegram && (
                 <ListItem
-                  icon={<FaTelegram className="mr-2" />}
+                  icon={<FaTelegram />}
                   title="Telegram"
                   value={social.telegram}
                   link={`https://t.me/${social.telegram}`}
@@ -223,15 +224,15 @@ const Details = ({ profile, loading, social, github }) => {
 
               {social?.phone && (
                 <ListItem
-                  icon={<RiPhoneFill className="mr-2" />}
+                  icon={<RiPhoneFill />}
                   title="Phone:"
                   value={social.phone}
                   link={`tel:${social.phone}`}
                 />
               )}
               {social?.email && (
                 <ListItem
-                  icon={<MdMail className="mr-2" />}
+                  icon={<RiMailFill />}
                   title="Email:"
                   value={social.email}
                   link={`mailto:${social.email}`}

diff --git a/src/components/theme-changer/index.jsx b/src/components/theme-changer/index.jsx
@@ -57,7 +57,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
               </div>
               <div
                 tabIndex={0}
-                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-b-box bg-base-200 text-base-content"
+                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content"
               >
                 <ul className="p-4 menu compact">
                   {[