Contact fonts and form input ui updates

Author: realstoman

src/components/contact/ContactDetails.vue

@@ -3,11 +3,11 @@
 	<div class="w-full md:w-1/2">
 		<div class="text-left max-w-xl px-6">
 			<h2
-				class="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8"
+				class="font-general-medium text-2xl text-primary-dark dark:text-primary-light mt-12 mb-8"
 			>
 				Contact details
 			</h2>
-			<ul class="">
+			<ul class="font-general-medium">
 				<li class="flex" v-for="contact in contacts" :key="contact.id">
 					<i
 						:data-feather="contact.icon"

src/components/contact/ContactForm.vue

@@ -6,18 +6,18 @@
 				class="max-w-xl m-4 p-6 sm:p-10 bg-secondary-light dark:bg-secondary-dark rounded-xl shadow-xl text-left"
 			>
 				<p
-					class="text-primary-dark dark:text-primary-light text-2xl font-semibold mb-8"
+					class="font-general-medium text-primary-dark dark:text-primary-light text-2xl mb-8"
 				>
 					Contact Form
 				</p>
-				<div class="">
+				<div class="font-general-medium">
 					<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-0 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 dark:font-medium"
 						id="name"
 						name="name"
 						type="text"
@@ -26,14 +26,14 @@
 						aria-label="Name"
 					/>
 				</div>
-				<div class="mt-6">
+				<div class="mt-6 font-general-medium">
 					<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-0 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 dark:font-medium"
 						id="email"
 						name="email"
 						type="text"
@@ -42,14 +42,14 @@
 						aria-label="Email"
 					/>
 				</div>
-				<div class="mt-6">
+				<div class="mt-6 font-general-medium">
 					<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-0 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 dark:font-medium"
 						id="subject"
 						name="subject"
 						type="text"
@@ -59,14 +59,14 @@
 					/>
 				</div>
 
-				<div class="mt-6">
+				<div class="mt-6 font-general-medium">
 					<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-0 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 dark:font-medium"
 						id="message"
 						name="message"
 						cols="14"
@@ -77,7 +77,7 @@
 
 				<div class="mt-6">
 					<button
-						class="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="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"
 						type="submit"
 						aria-label="Send Message"
 					>