Unified look of contact form with rest of site

package.json

@@ -13,16 +13,17 @@
         "@sveltejs/kit": "^2.15.2",
         "@sveltejs/package": "^2.3.7",
         "@sveltejs/vite-plugin-svelte": "^4.0.4",
+        "autoprefixer": "^10.4.20",
+        "globals": "^15.14.0",
+        "publint": "^0.2.12",
+        "sass": "^1.83.1",
         "svelte": "^5.17.3",
         "svelte-preprocess": "^5.1.4",
-        "sass": "^1.83.1",
-        "autoprefixer": "^10.4.20",
-        "publint": "^0.2.12",
         "tailwindcss": "^3.4.17",
-        "typescript": "^5.7.3",
         "terser": "^5.37.0",
-        "vite-plugin-compression": "^0.5.1",
-        "vite": "^5.4.11"
+        "typescript": "^5.7.3",
+        "vite": "^5.4.11",
+        "vite-plugin-compression": "^0.5.1"
     },
     "dependencies": {
         "@tailwindcss/forms": "^0.5.10",

src/lib/components/ContactForm.svelte

@@ -1,5 +1,6 @@
 <script>
     import { Send, Loader2 } from "lucide-svelte";
+    import "$lib/styles/ContactForm.scss";
 
     let formData = {
         name: "",
@@ -58,42 +59,27 @@
 
 {#if submitted}
     <div class="form-container {$$props.class}">
-        <div class="text-center success-message">
-            <h2 class="text-2xl font-semibold text-green-600 mb-4">
-                Thank You!
-            </h2>
-            <p class="text-gray-600 mb-4">
-                Your message has been sent successfully.
-            </p>
-            <button
-                on:click={() => (submitted = false)}
-                class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
-            >
-                Send Another Message
-            </button>
+        <div class="success-message">
+            <h1 class="text-green-600 mb-4">Thank You!</h1>
+            <h2>Your message has been sent successfully.</h2>
         </div>
     </div>
 {:else}
     <div class="form-container {$$props.class}">
-        <h2 class="text-2xl font-semibold text-gray-800 mb-6">Contact Form</h2>
+        <h1 class="text-6xl mb-4">Contact Form</h1>
 
         <form on:submit={handleSubmit} class="space-y-4">
             <div>
-                <label
-                    for="name"
-                    class="block text-sm font-medium text-gray-700 mb-1"
-                >
-                    Name
-                </label>
+                <label for="name"> Name </label>
                 <input
                     type="text"
                     id="name"
                     name="name"
+                    placeholder="Carl Deckard"
                     bind:value={formData.name}
                     on:input={handleInput}
-                    class="w-full px-3 py-2 border rounded-md {errors.name
-                        ? 'error'
-                        : 'border-gray-300'}"
+                    class="w-full text-lg px-3 py-2 rounded-md border-[1px] border-solid border-gray-300 hover:border-blue-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class:border-red-500={errors.name}
                 />
                 {#if errors.name}
                     <p class="mt-1 text-sm text-red-500">{errors.name}</p>
@@ -101,21 +87,16 @@
             </div>
 
             <div>
-                <label
-                    for="email"
-                    class="block text-sm font-medium text-gray-700 mb-1"
-                >
-                    Email
-                </label>
+                <label for="email"> Email </label>
                 <input
-                    type="email"
+                    type="text"
                     id="email"
                     name="email"
+                    placeholder="example@university.edu"
                     bind:value={formData.email}
                     on:input={handleInput}
-                    class="w-full px-3 py-2 border rounded-md {errors.email
-                        ? 'error'
-                        : 'border-gray-300'}"
+                    class="w-full text-lg px-3 py-2 rounded-md border-[1px] border-solid border-gray-300 hover:border-blue-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class:border-red-500={errors.email}
                 />
                 {#if errors.email}
                     <p class="mt-1 text-sm text-red-500">{errors.email}</p>
@@ -123,21 +104,16 @@
             </div>
 
             <div>
-                <label
-                    for="subject"
-                    class="block text-sm font-medium text-gray-700 mb-1"
-                >
-                    Subject
-                </label>
+                <label for="subject"> Subject </label>
                 <input
                     type="text"
                     id="subject"
                     name="subject"
+                    placeholder="I want to discuss AM"
                     bind:value={formData.subject}
                     on:input={handleInput}
-                    class="w-full px-3 py-2 border rounded-md {errors.subject
-                        ? 'error'
-                        : 'border-gray-300'}"
+                    class="w-full text-lg px-3 py-2 rounded-md border-[1px] border-solid border-gray-300 hover:border-blue-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class:border-red-500={errors.subject}
                 />
                 {#if errors.subject}
                     <p class="mt-1 text-sm text-red-500">{errors.subject}</p>
@@ -145,22 +121,17 @@
             </div>
 
             <div>
-                <label
-                    for="message"
-                    class="block text-sm font-medium text-gray-700 mb-1"
-                >
-                    Message
-                </label>
+                <label for="message"> Message </label>
                 <textarea
                     id="message"
                     name="message"
+                    placeholder="Enter your question or message"
                     bind:value={formData.message}
                     on:input={handleInput}
-                    rows={4}
-                    class="w-full px-3 py-2 border rounded-md {errors.message
-                        ? 'error'
-                        : 'border-gray-300'}"
-                />
+                    rows={8}
+                    class="w-full text-lg px-3 py-2 rounded-md border-[1px] border-solid border-gray-300 hover:border-blue-500 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class:border-red-500={errors.message}
+                ></textarea>
                 {#if errors.message}
                     <p class="mt-1 text-sm text-red-500">{errors.message}</p>
                 {/if}

src/lib/styles/ContactForm.scss

@@ -19,9 +19,9 @@
   }
 
   .submit-button {
-    width: 100%;
+    width: auto;
     padding: 0.5rem 1rem;
-    background-color: #2563eb;
+    background-color: var(--background);
     color: white;
     border-radius: 0.375rem;
     display: flex;
@@ -31,7 +31,7 @@
     transition: background-color 0.2s ease;
 
     &:hover:not(:disabled) {
-      background-color: #1d4ed8;
+      background-color: var(--cpalettemedium);
     }
 
     &:focus {

src/lib/styles/styles.css

@@ -33,7 +33,8 @@ h1 {
     padding-bottom: 18px;
 }
 
-h2 {
+h2,
+label {
     font-family: "Assistant";
     color: #828282;
     font-size: 32pt;
@@ -41,6 +42,10 @@ h2 {
     line-height: 1.5;
 }
 
+label {
+    font-size: 1.75rem;
+}
+
 p {
     font-family: "Assistant";
     font-size: 24pt;

src/routes/contact/ContactPage.scss

@@ -46,3 +46,13 @@
   max-width: var(--contact-img-size);
   max-height: var(--contact-img-size);
 }
+
+@media (orientation: landscape) and (min-width: 1200px) {
+  .contact-form-column {
+    width: 67%;
+  }
+
+  .infscr-row-reverse {
+    width: 33%;
+  }
+}

tailwind.config.js

@@ -2,11 +2,19 @@ import forms from '@tailwindcss/forms';
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+    content: ['./src/**/*.{html,js,svelte,ts}'],
 
-  theme: {
-    extend: {}
-  },
+    theme: {
+        extend: {}
+    },
 
-  plugins: [forms]
+    plugins: [forms],
+
+    theme: {
+        fontFamily: {
+            sans: ["Assistant", "sans-serif"],
+            serif: ["Martel", "serif"],
+            mono: ["Consolas", "monospace"],
+        },
+    },
 };