Merge pull request #22 from TienNHM/home

change social button ui

src/data/contacts.tsx

@@ -1,9 +1,35 @@
+type Contact = {
+  link: string;
+  icon: React.ComponentType<React.ComponentProps<'svg'>>;
+};
+
 export const CONTACTS = {
-  Facebook: 'https://www.facebook.com/01.tien/',
-  Github: 'https://github.com/TienNHM',
-  Linkedin: 'https://www.linkedin.com/in/tien-nhm/',
-  Email: 'mailto:tiennhm.it@gmail.com',
-  Phone: 'tel:+84388963345',
-  Skype: 'https://join.skype.com/invite/ybhXQOv30y5F',
-  Youtube: 'https://www.youtube.com/TienNguyen09',
+  Facebook: {
+    link: 'https://www.facebook.com/01.tien/',
+    icon: require('@site/static/img/logo/facebook.svg').default,
+  } as Contact,
+  Github: {
+    link: 'https://github.com/TienNHM',
+    icon: require('@site/static/img/logo/github.svg').default,
+  } as Contact,
+  Linkedin: {
+    link: 'https://www.linkedin.com/in/tien-nhm/',
+    icon: require('@site/static/img/logo/linkedin.svg').default,
+  } as Contact,
+  Email: {
+    link: 'mailto:tiennhm.it@gmail.com',
+    icon: require('@site/static/img/logo/email.svg').default,
+  } as Contact,
+  Phone: {
+    link: 'tel:+84388963345',
+    icon: require('@site/static/img/logo/phone.svg').default,
+  } as Contact,
+  Skype: {
+    link: 'https://join.skype.com/invite/ybhXQOv30y5F',
+    icon: require('@site/static/img/logo/skype.svg').default,
+  } as Contact,
+  Youtube: {
+    link: 'https://www.youtube.com/TienNguyen09',
+    icon: require('@site/static/img/logo/youtube.svg').default,
+  } as Contact,
 }

src/pages/index.module.css

@@ -62,16 +62,16 @@
 }
 
 .cardInfoButton {
-  padding: 0.5rem;
-  border-radius: 25%;
+  padding: 0.4rem;
+  border-radius: 50%;
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
-  background-color: rgba(34, 34, 34, 0.5);
+  background-color: rgba(34, 34, 34, 0.1);
   width: 3rem;
   height: 3rem;
   border: none;
 }
 .cardInfoButton:hover {
-  background-color: rgba(118, 0, 0, 0.9);
+  background-color: rgba(34, 34, 34, 0.5);
   color: white;
 }
 

src/pages/index.tsx

@@ -8,18 +8,17 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faFacebook, faGithub, faLinkedin,faYoutube, faSkype } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons'
-
 import styles from './index.module.css';
 import { CONTACTS } from '@site/src/data/contacts';
 
-function ContactItem({icon, link, title}) {
+function ContactItem({icon, contact, title}) {
+  const Svg = contact.icon;
   return (
     <div className={styles.buttons}>
-      <Link
-        title={title}
-        className={clsx('button button--outline button--secondary button--lg', styles.cardInfoButton)}
-        to={link}>
-        <FontAwesomeIcon icon={icon} size='xl'/>
+      <Link className={clsx('button button--lg', styles.cardInfoButton)}
+        title={title} to={contact.link}>
+          {contact.icon && <Svg role="img" />}
+          {!contact.icon && <FontAwesomeIcon icon={icon} size='xl'/>}
       </Link>
     </div>
   );
@@ -38,13 +37,13 @@ function HomepageHeader() {
           <h2 className="hero__subtitle">{siteConfig.tagline}</h2>
 
           <div className={clsx(styles.buttonsGroup)}>
-            <ContactItem icon={faEnvelope} link={CONTACTS.Email} title={'Email'}/>
-            <ContactItem icon={faPhone} link={CONTACTS.Phone} title={'Phone'}/>
-            <ContactItem icon={faFacebook} link={CONTACTS.Facebook} title={'Facebook'}/>
-            <ContactItem icon={faGithub} link={CONTACTS.Github} title={'Github'}/>
-            <ContactItem icon={faLinkedin} link={CONTACTS.Linkedin} title={'Linkedin'}/>
-            <ContactItem icon={faYoutube} link={CONTACTS.Youtube} title={'Youtube'}/>
-            <ContactItem icon={faSkype} link={CONTACTS.Skype} title={'Skype'}/>
+            <ContactItem icon={faEnvelope} contact={CONTACTS.Email} title={'Email'}/>
+            <ContactItem icon={faPhone} contact={CONTACTS.Phone} title={'Phone'}/>
+            <ContactItem icon={faFacebook} contact={CONTACTS.Facebook} title={'Facebook'}/>
+            <ContactItem icon={faGithub} contact={CONTACTS.Github} title={'Github'}/>
+            <ContactItem icon={faLinkedin} contact={CONTACTS.Linkedin} title={'Linkedin'}/>
+            <ContactItem icon={faYoutube} contact={CONTACTS.Youtube} title={'Youtube'}/>
+            <ContactItem icon={faSkype} contact={CONTACTS.Skype} title={'Skype'}/>
           </div>
         </div>
       </div>