Merge pull request #61 from brown-ccv/fix-error-messages

Fix: error message size and color

src/components/CustomInput.tsx

@@ -34,7 +34,7 @@ export const CustomInput = React.forwardRef<
         required
       />
     </Form.Control>
-    <Form.Message className="text-red-600 text-lg" match="valueMissing">
+    <Form.Message className="text-primary-300" match="valueMissing">
       Please enter your {label}
     </Form.Message>
     {match !== undefined && (

src/components/CustomTextarea.tsx

@@ -24,7 +24,7 @@ export const CustomTextarea = React.forwardRef<
         required
       />
     </Form.Control>
-    <Form.Message className="text-red-600 text-lg" match="valueMissing">
+    <Form.Message className="text-primary-300" match="valueMissing">
       Please enter your {label}
     </Form.Message>
   </Form.Field>

src/components/ProjectAim.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  color: "blue" | "primary" | "brown"
+}
+
+const { color } = Astro.props
+---
+
+<div class="flex-1 flex flex-col gap-4">
+  <span
+    class={color === "blue"
+      ? "text-secondary-blue-500"
+      : color === "primary"
+        ? "text-primary-500"
+        : "text-secondary-brown-500"}
+  >
+    <slot name="icon" />
+  </span>
+  <hr
+    class={`h-1 w-36 border-none ${
+      color === "blue"
+        ? "bg-secondary-blue-500"
+        : color === "primary"
+          ? "bg-primary-500"
+          : "bg-secondary-brown-500"
+    } `}
+  />
+  <p><slot /></p>
+</div>

src/layouts/Home.astro

@@ -2,7 +2,6 @@
 import BaseHead from "../components/BaseHead.astro"
 import Header from "../components/Header.astro"
 import Footer from "../components/Footer.astro"
-import FootPrint from "../components/svg/FootPrint"
 
 interface Props {
   title: string

src/pages/index.astro

@@ -1,8 +1,9 @@
 ---
 import Home from "../layouts/Home.astro"
-import CircleIcon from "../components/svg/Circle"
 import MiniMapSvg from "../components/svg/MiniMaps"
 import FootPrint from "../components/svg/FootPrint"
+import { GlobeIcon, Pencil1Icon, TargetIcon } from "@radix-ui/react-icons"
+import ProjectAim from "../components/ProjectAim.astro"
 ---
 
 <Home
@@ -13,8 +14,8 @@ import FootPrint from "../components/svg/FootPrint"
   <div class="hidden xl:block absolute top-24 left-12">
     <FootPrint />
   </div>
-  <div class="space-y-24">
-    <section class="space-y-6 py-6 lg:w-3/4">
+  <div class="flex flex-col gap-24">
+    <section class="space-y-8 py-6 lg:w-3/4">
       <p>
         The Mexican Migration Project (MMP) was created in 1982 by an interdisciplinary team of
         researchers to further our understanding of the complex process of Mexican migration to the
@@ -36,24 +37,24 @@ import FootPrint from "../components/svg/FootPrint"
         behavior of Mexican migrants.
       </p>
     </section>
-    <section class="space-y-4">
+    <section class="space-y-12">
       <h3 class="title font-semibold">Project Aims</h3>
-      <div class="flex space-x-6">
-        <div>
-          <CircleIcon styling="fill-secondary-blue-500" />
-          <p>Gather and maintain high quality data on Mexican migration to the US</p>
-        </div>
-        <div>
-          <CircleIcon styling="fill-primary-500" />
-          <p>Make data public and confidential</p>
-        </div>
-        <div>
-          <CircleIcon styling="fill-secondary-brown-500" />
-          <p>Investigate the evolving transnational dynamics of migration</p>
-        </div>
+      <div class="flex flex-wrap gap-20 justify-center">
+        <ProjectAim color="blue">
+          <TargetIcon slot="icon" height={36} width={36} />
+          Gather and maintain high quality data on Mexican migration to the US
+        </ProjectAim>
+        <ProjectAim color="primary">
+          <GlobeIcon slot="icon" height={36} width={36} />
+          Make data public and confidential
+        </ProjectAim>
+        <ProjectAim color="brown">
+          <Pencil1Icon slot="icon" height={36} width={36} />
+          Investigate the evolving transnational dynamics of migration
+        </ProjectAim>
       </div>
     </section>
-    <section class="space-y-4 lg:w-3/4">
+    <section class="space-y-12 lg:w-3/4">
       <h3 class="title font-semibold">Where are we located?</h3>
       <p>
         The MMP has offices, in Mexico, at the Departamento de Investigacion sobre Movimientos

src/styles/global.css

@@ -24,7 +24,6 @@
 
     body > * {
         grid-column: 2;
-        @apply max-w-[1000px];
         @apply px-3;
     }