updates footer x icon, homepage margins

nicole-m-martin · Jun 10, 2024 · e9c1e1d · e9c1e1d
1 parent acf5442
commit e9c1e1d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en" className="dark" className="m-0 p-0">
   <head>
     <!-- Meta  -->
     <meta charset="utf-8" />
@@ -57,7 +57,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Nicole Martin | Software Developer</title>
   </head>
-  <body>
+  <body className="m-0 p-0" >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

diff --git a/src/Components/Contact.js b/src/Components/Contact.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { init, sendForm } from 'emailjs-com';
-init('user_FkoSWYEQ8F2cqar2OKJ2V');
+import x from '../assets/square-x-twitter.svg'
+// import { init, sendForm } from 'emailjs-com';
+// init('user_FkoSWYEQ8F2cqar2OKJ2V');
 
 function Contact() {
   const {
@@ -40,19 +41,21 @@ function Contact() {
     <div className={styles.main_div}>
       <div className={styles.flex_div}>
         <div className="p-5">
+        <h1 className={styles.chat}>Let's Chat! 💬 </h1>
           <p className={styles.social}>Social Links:</p>
-          <a href="https://twitter.com/nmartinpdx">
-          <i className="fab fa-twitter-square fa-3x m-4 hover:bg-yellow-300"></i>
+          <div className={styles.iconBox}> <a href="https://twitter.com/nmartinpdx">
+          <img src={x} alt='twitter-x' className='fa-3x m-4 hover:bg-yellow-300' />
           </a>
           <a href="https://github.com/nicole-m-martin">
             <i className="fab fa-github-square fa-3x m-4 hover:bg-green-300"></i>
           </a>
           <a href="https://www.linkedin.com/in/nicolemartinpdx/">
             <i className="fab fa-linkedin fa-3x m-4 hover:bg-blue-400"></i>
           </a>
+          </div>
         </div>
       </div>
-      <h1 className={styles.chat}>Let's Chat! </h1>
+
       <div className={styles.main_form_container}>
         {/* <section className="flex justify-center">
           <div className="w-full max-w-xs">
@@ -144,10 +147,11 @@ const styles = {
   main_div: 'bg-white dark:bg-gray-600 h-screen grid place-content-center',
   flex_div: 'flex flex-row justify-center',
   social: 'font-Pt dark:text-white text-2xl font-semibold mt-.5 text-center',
-  chat: 'font-Poppins dark:text-white text-4xl font-semibold mt-.5 tracking-wide text-center',
+  iconBox: 'flex flex-row justify-center m-4',
+  chat: 'font-Poppins dark:text-white text-5xl font-semibold mt-.5 tracking-wide text-center m-10',
   main_form_container: 'flex justify-center items-center p-5',
   labels:
-    'block text-grey-darker text-lg text-left  font-bold font-Pt dark:text-white mb-2 pt-4',
+    'block text-grey-darker text-lg text-left  hover:bg-pink-300 dark:hover:bg-pink-400  font-bold font-Pt dark:text-white margin-2 p-2',
   name_input:
     'border-2 border-black ring ring-yellow-300 dark:ring-pink-400 rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline dark:bg-white',
   email_input:

diff --git a/src/Components/UI/Footer.js b/src/Components/UI/Footer.js
@@ -1,12 +1,13 @@
 import React from 'react';
+import x from '../../assets/square-x-twitter.svg';
 
 function Footer() {
   return (
     <section className="fixed bottom-0 w-screen">
       <div className="flex justify-evenly items-center bg-green-200 dark:bg-blue-300  h-10 text-black ">
-        <div>
+        <div className={styles.iconBox}>
           <a href="https://twitter.com/nmartinpdx">
-            <i className="fab fa-twitter-square fa-2x m-4 hover:bg-yellow-300"></i>
+          <img src={x} alt='twitter-x' className='fa-3x m-4 hover:bg-yellow-300' width="28" height="32" />
           </a>
           <a href="https://github.com/nicole-m-martin">
             <i className="fab fa-github-square fa-2x m-4 hover:bg-green-300"></i>
@@ -20,4 +21,9 @@ function Footer() {
   );
 }
 
+const styles = {
+  iconBox: 'flex justify-center items-center',
+ };
+
+
 export default Footer;
diff --git a/src/assets/square-x-twitter.svg b/src/assets/square-x-twitter.svg
diff --git a/src/containers/home.js b/src/containers/home.js
@@ -51,12 +51,12 @@ const Home = () => {
 };
 
 const styles = {
-  mainSection: 'bg-white dark:bg-gray-600 h-screen',
+  mainSection: 'bg-white dark:bg-gray-600 min-h-screen',
   innerSection: 'bg-white dark:bg-gray-600 grid place-items-center',
   title:
-    'lg:text-9xl md:text-7xl sm:text-5xl text-3xl text-gray-900 dark:text-white font-Pt font-extrabold lg:m-14 md:m-16 sm:mt-16',
+    'lg:text-9xl md:text-7xl sm:text-5xl text-3xl text-gray-900 dark:text-white font-Pt font-extrabold lg:m-8 md:m-16 sm:mt-16',
   subtitle:
-    'text-lg font-Poppins italic text-gray-600 dark:text-gray-300 mt-10 sm:mt-2',
+    'text-lg font-Poppins italic text-gray-600 dark:text-gray-300 lg:m-2 mt-10 sm:mt-2',
   nicoleColor: 'text-green-400 dark:text-blue-400 text-lg',
   techNames: 'text-lg font-Poppins text-gray-600 dark:text-gray-300 mt-4',
   techBox: