Spacing all around

Author: realstoman

src/components/AboutClientSingle.js

@@ -3,7 +3,7 @@ const AboutClientSingle = ({ title, image }) => {
 		<>
 			<img
 				src={image}
-				className="w-64 py-5 px-10 border bg-secondary-light border-ternary-light dark:border-ternary-dark shadow-sm rounded-xl mb-8 cursor-pointer"
+				className="w-64 py-5 px-10 border bg-secondary-light border-ternary-light dark:border-ternary-dark shadow-sm rounded-lg mb-8 cursor-pointer"
 				alt={title}
 			/>
 		</>

src/components/AboutMeBio.js

@@ -6,7 +6,7 @@ const AboutMeBio = () => {
 		<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
 			{/* About me portfolio image start */}
 			<div className="w-full sm:w-1/4 mb-7 sm:mb-0">
-				<img src={profileImage} className="rounded-xl w-96" alt="" />
+				<img src={profileImage} className="rounded-lg w-96" alt="" />
 			</div>
 			{/* About me portfolio image end */}
 

src/components/AppBanner.js

@@ -19,7 +19,7 @@ const AppBanner = () => {
 					<a
 						download="Stoman-Resume.pdf"
 						href="/files/Stoman-Resume.pdf"
-						className="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
+						className="flex justify-center items-center w-36 sm:w-48 mt-12 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-lg bg-indigo-50 focus:ring-1 focus:ring-indigo-900 hover:bg-indigo-500 text-gray-500 hover:text-white"
 						aria-label="Download Resume"
 					>
 						<FiArrowDownCircle className="ml-0 sm:ml-1 mr-2 sm:mr-3 h-5 w-5 sn:w-6 sm:h-6"></FiArrowDownCircle>

src/components/AppHeader.js

@@ -181,7 +181,7 @@ const AppHeader = () => {
 						<div>
 							<button
 								onClick={showHireMeModal}
-								className="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
+								className="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-5 py-2.5"
 								aria-label="Hire Me Button"
 							>
 								Hire Me

src/components/ContactForm.js

@@ -6,7 +6,7 @@ const ContactForm = () => {
 					onSubmit={(e) => {
 						e.preventDefault();
 					}}
-					className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
+					className="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-lg shadow-xl text-left"
 				>
 					<p className="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8">
 						Contact Form
@@ -82,7 +82,7 @@ const ContactForm = () => {
 
 					<div className="mt-6">
 						<button
-							className="px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-lg"
+							className="px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-md"
 							type="submit"
 							aria-label="Send Message"
 						>

src/components/HireMeModal.js

@@ -9,7 +9,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 			{/* Modal Content */}
 			<main className="flex flex-col items-center justify-center h-full w-full">
 				<div className="modal-wrapper flex items-center z-30">
-					<div className="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-xl relative">
+					<div className="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-lg relative">
 						<div className="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark">
 							<h5 className=" text-primary-dark dark:text-primary-light text-2xl">
 								What project are you looking for?
@@ -30,7 +30,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 							>
 								<div className="">
 									<input
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="name"
 										name="name"
 										type="text"
@@ -41,7 +41,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 								</div>
 								<div className="mt-6">
 									<input
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="email"
 										name="email"
 										type="text"
@@ -52,7 +52,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 								</div>
 								<div className="mt-6">
 									<select
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="subject"
 										name="subject"
 										type="text"
@@ -65,7 +65,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
 
 								<div className="mt-6">
 									<textarea
-										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
+										className="w-full px-5 py-2 border dark:border-secondary-dark rounded-md text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
 										id="message"
 										name="message"
 										cols="14"
@@ -89,7 +89,6 @@ const HireMeModal = ({ onClose, onRequest }) => {
 											bg-indigo-500
 											hover:bg-indigo-600
 											rounded-md
-											sm:rounded-lg
 											focus:ring-1 focus:ring-indigo-900"
 										aria-label="Submit Request"
 									>
@@ -108,7 +107,6 @@ const HireMeModal = ({ onClose, onRequest }) => {
 									bg-indigo-400
 									hover:bg-indigo-500
 									rounded-md
-									sm:rounded-lg
 									font-normal
 									sm:font-bold
 									text-primary-light

src/components/ProjectGallery.js

@@ -8,7 +8,7 @@ const ProjectGallery = () => {
 					<div className="mb-10 sm:mb-0" key={project.id}>
 						<img
 							src={project.img}
-							className="rounded-2xl cursor-pointer shadow-lg sm:shadow-none"
+							className="rounded-xl cursor-pointer shadow-lg sm:shadow-none"
 							alt={project.title}
 							key={project.id}
 						/>

src/components/ProjectInfo.js

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { ProjectInfo as ProjectsData } from '../utils/SingleProjectData';
 
 const ProjectInfo = () => {
@@ -66,15 +67,17 @@ const ProjectInfo = () => {
 					<div className="flex items-center gap-3 mt-5">
 						{ProjectsData.SocialSharing.map((social) => {
 							return (
-								<a
+								<Link
 									key={social.id}
-									href={social.url}
+									to={social.url}
 									target="__blank"
 									aria-label="Share Project"
 									className="bg-ternary-light dark:bg-ternary-dark text-gray-400 hover:text-primary-dark dark:hover:text-primary-light p-2 rounded-lg shadow-sm"
 								>
-									{social.icon}
-								</a>
+									<span className="text-lg lg:text-2xl">
+										{social.icon}
+									</span>
+								</Link>
 							);
 						})}
 					</div>

src/components/ProjectRelatedProjects.js

@@ -12,7 +12,7 @@ const ProjectRelatedProjects = () => {
 					return (
 						<img
 							src={project.img}
-							className="rounded-2xl cursor-pointer"
+							className="rounded-xl cursor-pointer"
 							alt={project.title}
 							key={project.id}
 						/>

src/components/ProjectSingle.js

@@ -4,13 +4,13 @@ const ProjectSingle = ({ title, category, image }) => {
 	return (
 		<Link
 			to="/projects/single-project"
-			className="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
+			className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			aria-label="Single Project"
 		>
 			<div>
 				<img
 					src={image}
-					className="rounded-t-3xl border-none"
+					className="rounded-t-xl border-none"
 					alt="Single Project"
 				/>
 			</div>