From a2d4abe3d8ac3827ba1f7029fc40d55c9f6f0dc1 Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Mon, 13 Jan 2025 11:17:53 +0000
Subject: [PATCH] Unified look of contact form with rest of site

---
 bun.lockb                             | Bin 113159 -> 113503 bytes
 package.json                          |  13 +++--
 src/lib/components/ContactForm.svelte |  77 ++++++++------------------
 src/lib/styles/ContactForm.scss       |   6 +-
 src/lib/styles/styles.css             |   7 ++-
 src/routes/contact/ContactPage.scss   |  10 ++++
 tailwind.config.js                    |  18 ++++--
 7 files changed, 63 insertions(+), 68 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 76aeb275d4bdcfce8791fa7732f30f17bef49157..cd0ca02567ffccfbc4e52e11111257621aae2aad 100755
GIT binary patch
delta 8192
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
DS4f;7

delta 8054
zcmeI1d2m(L9mnr^AtX2O$j(a$AsefZ7}ggEBt)<no*{`@URF(j0AVpKvK3>3RN0Ir
z9`WLWEQ%B@4jM7wxDb#fKqRqH%hXz@BdydjS~W_PK)>Jn&SM@U&UB`<{U>MUlkfTc
z&bjBFJ?EbH=kL0&{kHq2gdvx6_ij7vUA1N7{&^o={BTM{cWwIV5tp}|FRLHsH`YEn
zWBEa$F~rq7qb#=Q*H&!zNm~iKr>4~=P17`gXgstBGzLn)uhP|-n${b3#gZB2^UG&e
zJOJAYyG)k*M#W@jYnl#gD0Cq7Zj>4b4aw0oKj@=!hp$avmg};rWs|Qh@IapHnc4HJ
zrZ28op-qw(eWPkR^Ids%Bb6mQ2@QtMtXNh)e`$p_qpE6NWre1#g`e*qf;X{V(+f2%
z0@@B`P5uV$1w9Mp^Tz{R{*Vc-=Q5Q)32H<7d2|ih>sLE#X60g(sd+Wj>$`m#CI;S>
zB96)C%v5~}y5bkes>%9byQq`tS*ey&)8vM%6cHqwvr@ec^hvI)3r^O*MJx$fy<}h?
zyBH?dXQzrP*_@rKAIj1+G_kguY>Tt&i_u@BU<uh4Yu8W08eyi@!@2@%oM{C{+x0Q`
zXxdy@UNSq%uAhZ95tc<}XW7L>xjrXVZ$)3Hm^n~Ay%+kLWm#lkrd^*1YmAx3x7NZM
zZ>F_{+4Z+!@jZei3oohXrHW}X9e;JXJ}*_zKy~@7*=&6cEIzBrwotqGd$1CvH9T4O
zak^W~`lZ4eWxgRW+%A?#-I?mW55B3=dS|lt4~R{ZEuqQ!T?MYPy=8r<U4IA`pVDMt
zf4lxVtmNy~C0Gtv-m-0iU9ZNdp^(}DiSqT(B6kb;woI8`n5x&o$H79$33mN!l>@zw
z77r`dv^$VyF|GSyF=uzSNPhzs2Cud+)4bzK(9g2PmaNY}EYZvrh+GoZ^**z-l*kRm
z<Az|ma>{C4WI+JaPm2Z&(SZIKpviN^QSwT00Olzcqv`1^j;gUBhQ*^%2h)o{^#Vg_
zAW)ee4|;=1%DxlI;HlkUr<>lJE6YKbn&o3^Pc^e5@)Ko2m~duBEITuJDjSB0U^Wn=
zf(CY$*f4uF4TEL|Pi1ZlpP3uOVg@R!gKjkgmG-?Z(^MfBl-knhC|6#pH<+btDodXY
z_;jVxc~Azbknfa61^Obklr99Ske5nr<^ZgO<pXK~L#_GOr5uPgfbaN~(np{SH`DI$
zZ!}X~$~x64o67Pw0hU*<X*Ccta$TA5glV~y1w5&2Pi4N%fclh5r!xN*Wm8$9=K){5
z12F$iz_63=XTmPiyiu9)B|zP+(y7e<GNAtzz(A${RT>EYwz}GX;{%*}uLEq&+PlC8
z&H;v7tu?p0z?+p9ii-c;to~25=I0XrM}G7_YsRs=q-yA?oJ?N=j`de6ol5`Lfc|d)
zgQs!`zX#0M0T^zk7LNaqAOQ40X}zG~P!`+=e^{|dC<}_BQz^HA{>r8@IzZW;%8Cq8
zeov)89{w7pCEyR2$tac4Q|TIwKdgXVrF$y<W0jxE=s2ax%1`ABQ=$B4k)`}l*ZlWz
zAo+$2|23O+$QEk-Wy4}u=R#T20#!pQqlHR~lomrd1ZB!DhcZyPlg?50&6MTOM>^kE
zW%fTK>H$yXhP@nqCaqBEp2~tAgr7tAFqHPAP!7pDm7hv`1C*|f%J0@1M*NZR43rt4
zQyDy!HQlEC|B154UPL*p@XN09YTOZ1*@9Qqi#(MT+Xp{;<N%ae4k~?%1_G7&7&yrY
zlY#(ORWx9T2K2`O{MY_{alfu(3Hzh#SkiSYxqfU>+u{x97%tAPW695)V{Y+r1^wT3
zEa^IybRA3nPsfs}x9(Wd(6Qjf9NFIFke@eMWyWELXqQhPcFHY>t+Er=_cHy6Q{HvN
zD)%07hz{8S>oTm;_Z{L#x#xYS{LTATX+7!?owD$#Qx+Vx%6E=BEY~#YcPwA}9<#~?
z#~eb)gU6im0IbO44%}!}9(T$)$E~sjmbVN);gn$~tg`xqL-@#MSSMh`H#>0OwX)eM
zS2SDYpJ4TnLryy7;FDHachVuO@;t0Rz?yK%A^hd~Q%<?=lvQ4W6)4A^cFLsFR=M@G
zLj=o<us(;C(c%!H^63^dumuf-Ws~V2pn)Htfgd<Txa@#+8CK~Thlr4S&Y*#3(7;xQ
zh?Iq`XkaTE2rEkJZBFUihW52NM2tKL>p+{eA@al2V7c%@Pw}R#zAz=!eOWtWer3Yk
zC9X5zYI*)bgLVHsuItbv&_J1XZq*aP-C~whELc{tSku1Cb=`^b$Y{@V-M^+mtqp1C
z23Z=)F0Qfrl|}PlgfG7sqhE|jas5-gdd(G>&<p9z;zt9)ZL?7KLD^sB;URh?Ga&@P
z$2|O(ipxK<j3DLXA$c@l2vN`Sz?`JMm9$Xh<afp@z=C@#9}mb?fWfAGym4Cy__8qN
zV}*wz&JeDAJrL(7A=COOAFm*WBhIvlMCG)?cp5PDg^w-a3Hw<(5c;Wn{>GwM5j=sP
zwp+~vO=E{LI}hhO0gH-N*@F<@2ADri`GSom6yX=mJP2<LG~OB{1{z^;V)6hU_}R(Z
z!49w!@N4EVPzN3dn~c?QA|jGsNj0Dr@C$1pSOgvb<;Fo|3CclqJeUAdK#*qqHBR(P
zkHBmDf=Cbr__2NkTm{!aJV*eygG4X_aF{uSV}KnbfpJDge-W3$OM-Ur9cTdi0Z(1~
zz)&h){Tg^3G=Mk3F0dPXq#3XF7gN*A5a;LF^ML!~vmgub8*mNag+(QFE|>=#u=!z|
z2l9avq=Gw)v;o3i(;vwL2wVffAiyhyLin(9v>brNqCE(z!9##cVFBP=!(uXTC#OSa
z0)9wjf;+(^Fd6VJ<TBuO)_dR(Xaa{d&G>$RNRRmn#y<g1Jzs!-0DjA^1^iepHp&Nz
z;F`g34+Ol*xD9X)=fQr2*}*!n9&7-$U^RFc+zXb1*<cQEf?eQiz)xh}Toi$P*t|qE
zfCL-CV_*%qkIkNs2(MUQ0-M1|Jj7c@u7_s;*T8dt6TS{S4t@>Fz&!9<uot`tUIz7G
z6BvVXxD&hq{Uvl2SO^w@8K4xbWmhgoWEtQ}<;oldxRPD~I{<Gew}I_|w%h+HhZdnV
zo=Ye;kSmJ2h7JU{(%3#oEb*@4NO5wugKt3$7zUyM{ha?l0FEYaw3yCkG?c-Kd<}4I
zbOW8h0yt~9X)>L0`nZNZ2h7WX_r>!T-Ul(!2Zk3Nh;x;ABi;>kSIRiI!4MD(xMgww
zbibH;E(;BWTA2>`LU(0)!tMbA0P}L+=B^dV`ylR{oCE9`?t|PP*(&ax{h@4$FO*wf
z1k(_h&#f_tGc6iK0rrGDAD?4BR+i<PS8tFoUML~>85a^nl;L~3c&_o?+eN6*S!FXc
zew-+<5BeIN_lWQa_fM50pP2E>rmfqnEh1!^>mORYF+4|vizLI5BWB+uUk=u$6|1An
zXhFUR_ivhwVMjl1ZN2)LMcg|gAu(b2SZ%c-az#eG`~PdzmNWhjt-IR@5MQ7K{8PF9
z!)JQ^{y%=ww&s#W^fp%IiWre?Y|RxbMUi346C=e-h9gg8#1>_vnRtpbxi56{&KGRu
zZ+oo|5ZkfKgu-J)XNo??**q~#gcx!8VrX1H>^-qasfO~6pPs3_FJbzQJ*ebxRuYTe
zScHtC-q@OtMjtX7^F^{)W_*(`GQ?UV%_(M!CyhN$v0Cglh8CbU2aNj)@IaHXu|R~!
z{Uy)!OX#x72P)XhgS%A*OwoT>5g<B{5`b4uGLGZ15cf~C57svo`5cPgY7t-N8@&p}
zxY6z(Q@zGDyf%LBQ=hN{lg!Gwe{S74;QnWG_s#qQDPs~)Z%vzSR2Pa2%h^KXbfE}~
zaQ|*Q^39md`z*VDw20veBN7uv;DXY)Rw%+P?S)34A~D%=wa_Rl60`h%hdmYx5<m1B
ztwrKCPn!h_FC(&8?6vePVfHZNvtkj8Zty7)BmL&6nKrn@m|P+z8;_QV!?uDF*YvC6
fr5b|Y_@zlH(Zh|e5=2<z@>0>5(KzcB(c%9uq;Ff9

diff --git a/package.json b/package.json
index d412ae2..fdc4cae 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib/components/ContactForm.svelte b/src/lib/components/ContactForm.svelte
index 3b5f161..fdc4da0 100644
--- a/src/lib/components/ContactForm.svelte
+++ b/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}
diff --git a/src/lib/styles/ContactForm.scss b/src/lib/styles/ContactForm.scss
index d5d50fb..88ab0b2 100644
--- a/src/lib/styles/ContactForm.scss
+++ b/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 {
diff --git a/src/lib/styles/styles.css b/src/lib/styles/styles.css
index 6210763..48f6410 100644
--- a/src/lib/styles/styles.css
+++ b/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;
diff --git a/src/routes/contact/ContactPage.scss b/src/routes/contact/ContactPage.scss
index c6ef7d1..cf982ad 100644
--- a/src/routes/contact/ContactPage.scss
+++ b/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%;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index e325f7e..de6a268 100644
--- a/tailwind.config.js
+++ b/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"],
+        },
+    },
 };