Use design system colors

MichaelKohler · Feb 11, 2024 · 1042eed · 1042eed
1 parent 46aa531
commit 1042eed
Show file tree

Hide file tree

Showing 16 changed files with 106 additions and 102 deletions.
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -3,7 +3,7 @@ import { Link } from "@remix-run/react";
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col items-center justify-center bg-slate-800 p-4 text-white">
+    <footer className="flex flex-col items-center justify-center bg-mk p-4 text-white">
       <nav className="flex flex-row">
         <Link
           to="/announcements"

diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -131,7 +131,7 @@ export default function TripForm({
             ref={fromRef}
             type="date"
             name="from"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+            className="flex-1 rounded-md border-2 border-mk px-3 text-lg leading-loose"
             aria-invalid={actionData?.errors.from ? true : undefined}
             aria-errormessage={
               actionData?.errors.from ? "from-error" : undefined
@@ -141,7 +141,7 @@ export default function TripForm({
           />
         </label>
         {actionData?.errors.from && (
-          <div className="pt-1 text-red-700" id="from=error">
+          <div className="pt-1 text-mkerror" id="from=error">
             {actionData.errors.from}
           </div>
         )}
@@ -155,15 +155,15 @@ export default function TripForm({
             type="date"
             name="to"
             onChange={handleUntilDateChange}
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+            className="flex-1 rounded-md border-2 border-mk px-3 text-lg leading-loose"
             aria-invalid={actionData?.errors.to ? true : undefined}
             aria-errormessage={actionData?.errors.to ? "to-error" : undefined}
             data-testid="new-trip-to-input"
             defaultValue={initialData?.to?.substring(0, 10)}
           />
         </label>
         {actionData?.errors.to && (
-          <div className="pt-1 text-red-700" id="to=error">
+          <div className="pt-1 text-mkerror" id="to=error">
             {actionData.errors.to}
           </div>
         )}
@@ -175,7 +175,7 @@ export default function TripForm({
           <input
             ref={destinationRef}
             name="destination"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+            className="flex-1 rounded-md border-2 border-mk px-3 text-lg leading-loose"
             aria-invalid={actionData?.errors.destination ? true : undefined}
             aria-errormessage={
               actionData?.errors.destination ? "destination-error" : undefined
@@ -184,7 +184,7 @@ export default function TripForm({
           />
         </label>
         {actionData?.errors.destination && (
-          <div className="pt-1 text-red-700" id="destination=error">
+          <div className="pt-1 text-mkerror" id="destination=error">
             {actionData.errors.destination}
           </div>
         )}
@@ -196,7 +196,7 @@ export default function TripForm({
           <input
             ref={countryRef}
             name="country"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+            className="flex-1 rounded-md border-2 border-mk px-3 text-lg leading-loose"
             aria-invalid={actionData?.errors.country ? true : undefined}
             aria-errormessage={
               actionData?.errors.country ? "country-error" : undefined
@@ -205,7 +205,7 @@ export default function TripForm({
           />
         </label>
         {actionData?.errors.country && (
-          <div className="pt-1 text-red-700" id="country=error">
+          <div className="pt-1 text-mkerror" id="country=error">
             {actionData.errors.country}
           </div>
         )}
@@ -216,7 +216,7 @@ export default function TripForm({
           <span>Copy location from previous trip: </span>
           <select
             name="usedOnClientOnlyPreviousTripCopyLocation"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 py-2 leading-loose"
+            className="flex-1 rounded-md border-2 border-mk px-3 py-2 leading-loose"
             onChange={handleLocationCopy}
           >
             <option value="">Select a trip to copy from</option>
@@ -229,7 +229,7 @@ export default function TripForm({
           </select>
         </label>
         {actionData?.errors.country && (
-          <div className="pt-1 text-red-700" id="country=error">
+          <div className="pt-1 text-mkerror" id="country=error">
             {actionData.errors.country}
           </div>
         )}
@@ -257,12 +257,12 @@ export default function TripForm({
           ></Marker>
         </Map>
         {actionData?.errors?.lat && (
-          <div className="pt-1 text-red-700" id="lat=error">
+          <div className="pt-1 text-mkerror" id="lat=error">
             {actionData.errors.lat}
           </div>
         )}
         {actionData?.errors?.long && (
-          <div className="pt-1 text-red-700" id="long=error">
+          <div className="pt-1 text-mkerror" id="long=error">
             {actionData.errors.long}
           </div>
         )}
@@ -274,7 +274,7 @@ export default function TripForm({
           <textarea
             ref={descriptionRef}
             name="description"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+            className="flex-1 rounded-md border-2 border-mk px-3 text-lg leading-loose"
             aria-invalid={actionData?.errors.description ? true : undefined}
             aria-errormessage={
               actionData?.errors.description ? "description-error" : undefined
@@ -283,7 +283,7 @@ export default function TripForm({
           />
         </label>
         {actionData?.errors.description && (
-          <div className="pt-1 text-red-700" id="description=error">
+          <div className="pt-1 text-mkerror" id="description=error">
             {actionData.errors.description}
           </div>
         )}
@@ -296,7 +296,7 @@ export default function TripForm({
             ref={flightsRef}
             type="number"
             name="flights"
-            className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+            className="flex-1 rounded-md border-2 border-mk px-3 text-lg leading-loose"
             aria-invalid={actionData?.errors.flights ? true : undefined}
             aria-errormessage={
               actionData?.errors.flights ? "flights-error" : undefined
@@ -305,7 +305,7 @@ export default function TripForm({
           />
         </label>
         {actionData?.errors.flights && (
-          <div className="pt-1 text-red-700" id="flights=error">
+          <div className="pt-1 text-mkerror" id="flights=error">
             {actionData.errors.flights}
           </div>
         )}
@@ -337,14 +337,14 @@ export default function TripForm({
       {isEdit && <input type="hidden" name="id" value={initialData?.id} />}
 
       {actionData?.errors.generic && (
-        <div className="pt-1 text-red-700" id="generic=error">
+        <div className="pt-1 text-mkerror" id="generic=error">
           {actionData.errors.generic}
         </div>
       )}
 
       <button
         type="submit"
-        className="rounded bg-slate-600 px-4 py-2 text-white hover:bg-slate-500 active:bg-slate-500"
+        className="rounded bg-mk px-4 py-2 text-white hover:bg-mk-tertiary active:bg-mk-tertiary"
         disabled={!!navigation.formData}
       >
         {navigation.formData ? (

diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -16,13 +16,13 @@ export default function Header() {
 
   return (
     <header
-      className={`flex bg-slate-800 p-4 text-white ${
+      className={`flex bg-mk p-4 text-white ${
         menuOpen ? "flex-col" : "flex-row"
       }`}
     >
       <h1 className="text-3xl font-bold">
         <Link to="/">
-          where<span className="text-sky-200">.directory</span>
+          where<span className="text-mklight-300">.directory</span>
         </Link>
       </h1>
 
@@ -42,23 +42,23 @@ export default function Header() {
                 to="/trips"
                 className={`text-white-700 flex ${
                   menuOpen ? "border-b py-8" : "px-8 py-2"
-                } text-base font-semibold hover:text-blue-300 hover:transition-colors hover:duration-300 focus:text-blue-300`}
+                } text-base font-semibold hover:text-mklight-300 hover:transition-colors hover:duration-300 focus:text-mklight-300`}
               >
                 Trips
               </Link>
               <Link
                 to={`/${user.username}`}
                 className={`text-white-700 flex ${
                   menuOpen ? "border-b py-8" : "px-8 py-2"
-                } text-base font-semibold hover:text-blue-300 hover:transition-colors hover:duration-300 focus:text-blue-300`}
+                } text-base font-semibold hover:text-mklight-300 hover:transition-colors hover:duration-300 focus:text-mklight-300`}
               >
                 Profile
               </Link>
               <Link
                 to="/account"
                 className={`text-white-700 flex ${
                   menuOpen ? "border-b py-8" : "px-8 py-2"
-                } text-base font-semibold hover:text-blue-300 hover:transition-colors hover:duration-300 focus:text-blue-300`}
+                } text-base font-semibold hover:text-mklight-300 hover:transition-colors hover:duration-300 focus:text-mklight-300`}
               >
                 Account
               </Link>
@@ -71,7 +71,7 @@ export default function Header() {
             <Form action="/logout" method="post">
               <button
                 type="submit"
-                className="text-white-100 rounded bg-slate-600 py-2 px-4 hover:bg-slate-500 active:bg-slate-500"
+                className="text-white-100 rounded bg-mk-tertiary py-2 px-4 hover:bg-mk-tertiary active:bg-mk-tertiary"
               >
                 Logout
               </button>
@@ -84,13 +84,13 @@ export default function Header() {
             >
               <Link
                 to="/join"
-                className="text-white-100 flex items-center justify-center rounded bg-yellow-600 py-2 px-4 font-medium hover:bg-yellow-500 active:bg-yellow-500"
+                className="text-mk-text flex items-center justify-center rounded bg-mkwarning py-2 px-4 font-medium hover:bg-mkwarning-muted active:bg-mkwarning-muted"
               >
                 Sign up
               </Link>
               <Link
                 to="/login"
-                className="text-white-100 flex items-center justify-center rounded bg-slate-600 py-2 px-4 font-medium hover:bg-slate-500 active:bg-slate-500"
+                className="text-white-100 flex items-center justify-center rounded bg-mk-tertiary py-2 px-4 font-medium hover:bg-mk active:bg-mk"
               >
                 Log In
               </Link>
@@ -101,7 +101,7 @@ export default function Header() {
 
       <button
         onClick={() => setMenuOpen(!menuOpen)}
-        className="text-white-100 absolute top-3 right-3 h-10 w-10 rounded bg-slate-600 hover:bg-slate-500 active:bg-slate-500 lg:hidden"
+        className="text-white-100 absolute top-3 right-3 h-10 w-10 rounded bg-mk-tertiary hover:bg-mk active:bg-mk lg:hidden"
       >
         {menuOpen ? "✕" : "☰"}
       </button>

diff --git a/app/routes/$username.tsx b/app/routes/$username.tsx
@@ -97,7 +97,7 @@ export default function UserDetailsPage() {
 
   return (
     <main className="w-12/12 mx-auto my-12 flex min-h-full flex-col bg-white px-8 md:w-11/12">
-      <section className="bg-slate-800 px-7 text-white">
+      <section className="bg-mk px-7 text-white">
         {data.nextTrip && (
           <div className="mt-10">
             <h2 className="font-title text-3xl">
@@ -148,7 +148,7 @@ export default function UserDetailsPage() {
       </section>
 
       <table className="mt-7 text-left leading-8">
-        <thead className="text-bold hidden bg-slate-800 font-title text-white sm:table-header-group ">
+        <thead className="text-bold hidden bg-mk font-title text-white sm:table-header-group ">
           <tr>
             <th className="w-1/12 pl-2">From</th>
             <th className="w-1/12 pl-2">Until</th>
@@ -158,7 +158,7 @@ export default function UserDetailsPage() {
             <th className="hidden w-1/12 pl-2 pr-2 lg:block">Flights</th>
           </tr>
         </thead>
-        <tbody className="divide-y-2 divide-slate-100 text-center sm:text-left">
+        <tbody className="divide-y-2 divide-mklight-100 text-center sm:text-left">
           {data.trips.map((trip) => (
             <tr
               key={trip.id}

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -7,7 +7,7 @@ export default function Index() {
 
   return (
     <main className="flex w-full flex-col bg-white">
-      <div className="flex h-128 w-full flex-col justify-center bg-gradient-to-b from-slate-800 to-slate-700 px-8 text-center text-white">
+      <div className="flex h-128 w-full flex-col justify-center bg-gradient-to-b from-mk to-mk-tertiary px-8 text-center text-white">
         <h1 className="font-title text-6xl">Where have you been?</h1>
         <p className="mt-9 text-2xl">
           Track your vacations and trips in both list and map views
@@ -16,13 +16,13 @@ export default function Index() {
           <div className="mt-9 flex flex-row justify-center space-x-4 lg:hidden">
             <Link
               to="/join"
-              className="text-white-100 flex items-center justify-center rounded bg-slate-600 py-2 px-4 font-medium hover:bg-slate-500 active:bg-yellow-500"
+              className="text-white-100 flex items-center justify-center rounded bg-mk py-2 px-4 font-medium hover:bg-mk-tertiary active:bg-mk-tertiary"
             >
               Sign up
             </Link>
             <Link
               to="/login"
-              className="flex items-center justify-center rounded bg-slate-600 px-4 py-2 font-medium text-white hover:bg-slate-500 active:bg-slate-500"
+              className="flex items-center justify-center rounded bg-mk px-4 py-2 font-medium text-white hover:bg-mk-tertiary active:bg-mk-tertiary"
             >
               Log In
             </Link>
@@ -31,7 +31,7 @@ export default function Index() {
         <div className="flex justify-center">
           <Link
             to="/demo"
-            className="mt-12 flex items-center justify-center rounded bg-yellow-600 px-4 py-2 font-medium text-white hover:bg-yellow-500"
+            className="mt-12 flex items-center justify-center rounded bg-mk px-4 py-2 font-medium text-white hover:bg-mk-tertiary"
           >
             Demo profile
           </Link>

diff --git a/app/routes/account.tsx b/app/routes/account.tsx
@@ -67,7 +67,7 @@ export default function AccountPage() {
             <input
               ref={usernameRef}
               name="username"
-              className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
+              className="flex-1 rounded-md border-2 border-mk px-3 text-lg leading-loose"
               aria-invalid={actionData?.errors.username ? true : undefined}
               aria-errormessage={
                 actionData?.errors.username ? "username-error" : undefined
@@ -76,14 +76,14 @@ export default function AccountPage() {
             />
           </label>
           {actionData?.errors.username && (
-            <div className="pt-1 text-red-700" id="username=error">
+            <div className="pt-1 text-mkerror" id="username=error">
               {actionData.errors.username}
             </div>
           )}
         </div>
         <button
           type="submit"
-          className="rounded bg-slate-600 px-4 py-2 text-white hover:bg-slate-500 active:bg-slate-500"
+          className="rounded bg-mk px-4 py-2 text-white hover:bg-mk-tertiary active:bg-mk-tertiary"
           disabled={!!navigation.formData}
         >
           {navigation.formData ? (
@@ -100,7 +100,7 @@ export default function AccountPage() {
 
         <Link
           to="/password/change"
-          className="rounded bg-slate-600 px-4 py-2 text-center text-white hover:bg-slate-500 active:bg-slate-500"
+          className="rounded bg-mk px-4 py-2 text-center text-white hover:bg-mk-tertiary active:bg-mk-tertiary"
         >
           Go to change password form
         </Link>
@@ -109,7 +109,7 @@ export default function AccountPage() {
 
         <Link
           to="/deletion"
-          className="rounded bg-red-700 px-4 py-2 text-center text-white hover:bg-red-500 active:bg-red-500"
+          className="rounded bg-mkerror px-4 py-2 text-center text-mk-text hover:bg-mkerror-muted active:bg-mkerror-muted"
         >
           Delete my account and all trips
         </Link>

diff --git a/app/routes/deletion.tsx b/app/routes/deletion.tsx
@@ -42,7 +42,7 @@ export default function DeletionPage() {
         }}
       >
         {actionData?.errors.deletion && (
-          <div className="pt-1 text-red-700" id="deletion=error">
+          <div className="pt-1 text-mkerror" id="deletion=error">
             {actionData.errors.deletion}
           </div>
         )}
@@ -54,11 +54,7 @@ export default function DeletionPage() {
         </p>
         <p>
           If you think you might use this service again in the future, you can{" "}
-          <a
-            href="/trips/export"
-            className="text-blue-500 underline"
-            target="_blank"
-          >
+          <a href="/trips/export" className="text-mk underline" target="_blank">
             export
           </a>{" "}
           your data and later on import it on a new account again. Right-click
@@ -68,7 +64,7 @@ export default function DeletionPage() {
 
         <button
           type="submit"
-          className="rounded bg-red-700 px-4 py-2 text-center text-white hover:bg-red-500 active:bg-red-500"
+          className="rounded bg-mkerror px-4 py-2 text-center text-white hover:bg-mkerror-muted active:bg-mkerror-muted"
           disabled={!!navigation.formData}
         >
           {navigation.formData ? (