Contact form and contact details fonts refactoring

Author: realstoman

src/components/contact/ContactDetails.vue

@@ -7,7 +7,7 @@
 			>
 				Contact details
 			</h2>
-			<ul class="font-general-medium">
+			<ul class="font-general-regular">
 				<li class="flex" v-for="contact in contacts" :key="contact.id">
 					<i
 						:data-feather="contact.icon"

src/components/contact/ContactForm.vue

@@ -1,23 +1,23 @@
 <template>
 	<!-- Contact form -->
 	<div class="w-full md:w-1/2">
-		<div class="leading-loose">
-			<form
-				class="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
+		<div
+			class="leading-loose max-w-xl m-4 p-7 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
+		>
+			<p
+				class="font-general-medium text-primary-dark dark:text-primary-light text-2xl mb-8"
 			>
-				<p
-					class="font-general-medium text-primary-dark dark:text-primary-light text-2xl mb-8"
-				>
-					Contact Form
-				</p>
-				<div class="font-general-medium">
+				Contact Form
+			</p>
+			<form action="#" class="font-general-regular space-y-7">
+				<div>
 					<label
 						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
 						for="name"
 						>Full Name</label
 					>
 					<input
-						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
 						id="name"
 						name="name"
 						type="text"
@@ -26,14 +26,14 @@
 						aria-label="Name"
 					/>
 				</div>
-				<div class="mt-6 font-general-medium">
+				<div>
 					<label
 						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
 						for="email"
 						>Email</label
 					>
 					<input
-						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
 						id="email"
 						name="email"
 						type="text"
@@ -42,14 +42,14 @@
 						aria-label="Email"
 					/>
 				</div>
-				<div class="mt-6 font-general-medium">
+				<div>
 					<label
 						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
 						for="subject"
 						>Subject</label
 					>
 					<input
-						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
 						id="subject"
 						name="subject"
 						type="text"
@@ -59,14 +59,14 @@
 					/>
 				</div>
 
-				<div class="mt-6 font-general-medium">
+				<div>
 					<label
 						class="block text-lg text-primary-dark dark:text-primary-light mb-2"
 						for="message"
 						>Message</label
 					>
 					<textarea
-						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md dark:font-medium"
+						class="w-full px-5 py-2 border border-gray-300 dark:border-primary-dark border-opacity-50 text-primary-dark dark:text-secondary-light bg-ternary-light dark:bg-ternary-dark rounded-md shadow-sm text-md"
 						id="message"
 						name="message"
 						cols="14"
@@ -75,10 +75,10 @@
 					></textarea>
 				</div>
 
-				<div class="mt-6">
+				<div>
 					<Button
 						title="Send Message"
-						class="font-general-medium 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"
+						class="px-4 py-2.5 text-white tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-lg"
 						type="submit"
 						aria-label="Send Message"
 					/>