Fonts (#100)

* Change primary colour

* Change fonts

* font options

* font selection confirmed

---------

Co-authored-by: Timothy Armes <tim@timothyarmes.com>

app/[lang]/components/Footer.tsx

@@ -8,7 +8,7 @@ export default function Footer() {
 
   return (
     <footer
-      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-teal-600 px-5 py-2 text-white dark:bg-gray-700"
+      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
       data-test="footer"
     >
       <div>

app/[lang]/components/HamburgerMenu.tsx

@@ -53,7 +53,7 @@ const HamburgerMenu = ({
       ref={menuRef}
       className={`fixed right-0 top-0 ${
         menuVisible ? "" : "translate-x-full"
-      } z-[9999] flex bg-teal-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
+      } z-[9999] flex bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
       onMouseEnter={handleMouseEnterMenu}
       onMouseLeave={handleMouseLeaveMenu}
     >

app/[lang]/components/Navbar.tsx

@@ -23,7 +23,9 @@ export default function Navbar() {
             className="text-gray-900 no-underline hover:no-underline dark:text-white"
             href="/"
           >
-            <span className="text-2xl">{t("title")}</span>
+            <span className="font-title text-2xl text-gray-800 dark:text-white">
+              {t("title")}
+            </span>
           </Link>
         </div>
         <div className="pb-2 md:hidden" data-test="mobile-menu">
@@ -38,7 +40,7 @@ export default function Navbar() {
             {links.map(({ title, route }) => (
               <li key={route} className="mr-10 h-full">
                 <Link
-                  className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
+                  className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-primary-600"
                   href={route}
                 >
                   {title}

app/[lang]/contactez-nous/ContactForm.tsx

@@ -77,7 +77,7 @@ const ContactForm = () => {
             onChange={handleChange}
             type="email"
             id="email"
-            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
             placeholder={t("emailPlaceholder")}
             required
             data-test="email-input"
@@ -95,7 +95,7 @@ const ContactForm = () => {
             onChange={handleChange}
             type="text"
             id="subject"
-            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
             placeholder={t("subjectPlaceholder")}
             required
             data-test="subject-input"
@@ -113,7 +113,7 @@ const ContactForm = () => {
             onChange={handleChange}
             id="message"
             rows={6}
-            className="focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
             placeholder={t("messagePlaceholder")}
             data-test="message-input"
             required
@@ -122,7 +122,7 @@ const ContactForm = () => {
         <button
           disabled={isSending}
           type="submit"
-          className="hover:bg-primary-800 focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 rounded-lg bg-teal-600 px-5 py-3 text-center text-sm font-medium text-white focus:outline-none focus:ring-4 disabled:opacity-25 dark:text-white sm:w-fit"
+          className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
           data-test="submit-button"
         >
           {isSending ? t("sending") : t("sendButton")}

app/[lang]/layout.tsx

@@ -1,5 +1,5 @@
 import { Analytics } from "@vercel/analytics/react";
-import { Inter } from "next/font/google";
+import { Inter, Julius_Sans_One } from "next/font/google";
 import { useLocale } from "next-intl";
 import { getTranslator } from "next-intl/server";
 import { notFound } from "next/navigation";
@@ -10,7 +10,12 @@ import "@/css/globals.css";
 import Providers from "./providers";
 import TestableLayout from "./components/TestableLayout";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const title = Julius_Sans_One({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-title",
+});
 
 export async function generateMetadata({
   params: { locale },
@@ -50,8 +55,8 @@ export default async function RootLayout({
   }
 
   return (
-    <html lang={locale}>
+    <html lang={locale} className={`${inter.variable} ${title.variable}`}>
-      <body className={inter.className}>
+      <body>
         <Providers>
           <TestableLayout locale={locale} messages={messages}>
             {children}

app/[lang]/page.tsx

@@ -18,7 +18,7 @@ export default function Home() {
         />
       </div>
       <div className="z-10 text-center text-white">
-        <h1 className="p-5 text-5xl" data-test="header1">
+        <h1 className="p-5 font-title text-5xl" data-test="header1">
           {t("title")}
         </h1>
         <h2 className="p-5 text-3xl">{t("purpose")}</h2>
@@ -33,7 +33,7 @@ export default function Home() {
         </h3>
         <Link
           href="/tournois"
-          className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800"
+          className="mb-2 mr-2 rounded-lg bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
         >
           {t("mapLink")}
         </Link>

app/[lang]/qui-sommes-nous/page.tsx

@@ -19,7 +19,7 @@ export default function About() {
         <p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
           {t.rich("p2", {
             homeLink: (chunks) => (
-              <Link href="/" className="text-teal-600">
+              <Link href="/" className="text-primary-600">
                 {chunks}
               </Link>
             ),
@@ -34,7 +34,7 @@ export default function About() {
         >
           {t("thanksTitle")}
         </h3>
-        <ul className="mb-4 text-center text-teal-600">
+        <ul className="mb-4 text-center text-primary-600">
           <li>
             <Link href="https://github.com/timothyarmes" target="_blank">
               timothyarmes
@@ -60,13 +60,13 @@ export default function About() {
         <p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
           {t.rich("techInfo", {
             homeLink: (chunks) => (
-              <Link href="/" className="text-teal-600">
+              <Link href="/" className="text-primary-600">
                 {chunks}
               </Link>
             ),
           })}
         </p>
-        <ul className="mb-4 flex justify-around text-teal-600">
+        <ul className="mb-4 flex justify-around text-primary-600">
           <li>
             <Link href="https://nextjs.org/" target="_blank">
               NextJS
@@ -91,7 +91,7 @@ export default function About() {
         <p className="mb-4 text-center font-light text-gray-500 dark:text-gray-400 md:text-xl">
           {t("techWith")}
         </p>
-        <ul className="mb-4 flex justify-around text-teal-600">
+        <ul className="mb-4 flex justify-around text-primary-600">
           <li>
             <Link href="https://leafletjs.com/" target="_blank">
               Leaflet
@@ -109,7 +109,7 @@ export default function About() {
               <Link
                 href="https://github.com/TheRealOwenRees/echecsfrance"
                 target="_blank"
-                className="text-teal-600"
+                className="text-primary-600"
               >
                 {chunks}
               </Link>

app/[lang]/tournois/ScrollToTopButton.tsx

@@ -25,7 +25,7 @@ const ScrollToTopButton = () => {
 
   return (
     <button
-      className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
+      className={`${scrollToTopButtonClass} z-10 text-2xl text-primary-900 dark:text-white`}
       data-test="scroll-to-top-button"
     >
       <FaArrowUp

app/[lang]/tournois/TimeControlFilters.tsx

@@ -33,7 +33,7 @@ const TimeControlFilters = () => {
           <label>
             <input
               type="checkbox"
-              className="mr-2"
+              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
               checked={atom[0]}
               onChange={() => atom[1](!atom[0])}
             />

app/[lang]/tournois/TournamentMap.tsx

@@ -317,7 +317,7 @@ export default function TournamentMap() {
 
       <div className="flex items-center justify-center lg:hidden">
         <button
-          className="p-3 text-teal-900 dark:text-white"
+          className="p-3 text-primary-900 dark:text-white"
           onClick={onScrollToTable}
         >
           <FaAngleDoubleDown />

app/[lang]/tournois/TournamentTable.tsx

@@ -61,7 +61,7 @@ export default function TournamentTable() {
           <label>
             <input
               type="checkbox"
-              className="mr-2"
+              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
               checked={syncVisible}
               onChange={() => setSyncVisible(!syncVisible)}
             />
@@ -71,7 +71,7 @@ export default function TournamentTable() {
           <label>
             <input
               type="checkbox"
-              className="mr-2"
+              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
               checked={normsOnly}
               onChange={() => setNormsOnly(!normsOnly)}
             />
@@ -92,19 +92,19 @@ export default function TournamentTable() {
       >
         <thead>
           <tr>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
               {t("date")}
             </th>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
               {t("town")}
             </th>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
               {t("tournament")}
             </th>
-            <th className="sticky top-0 bg-teal-600 p-3 text-white dark:bg-gray-600">
+            <th className="sticky top-0 bg-primary-600 p-3 text-white dark:bg-gray-600">
               {t("timeControl")}
             </th>
-            <th className="sticky top-0 w-[50px] bg-teal-600 p-3 text-white dark:bg-gray-600"></th>
+            <th className="sticky top-0 w-[50px] bg-primary-600 p-3 text-white dark:bg-gray-600"></th>
           </tr>
         </thead>
 

package-lock.json

@@ -38,6 +38,7 @@
       },
       "devDependencies": {
         "@swc-jotai/react-refresh": "^0.0.8",
+        "@tailwindcss/forms": "^0.5.4",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@types/leaflet": "^1.9.3",
@@ -804,6 +805,18 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.4.tgz",
+      "integrity": "sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz",
@@ -5070,6 +5083,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",

package.json

@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@swc-jotai/react-refresh": "^0.0.8",
+    "@tailwindcss/forms": "^0.5.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/leaflet": "^1.9.3",

tailwind.config.js

@@ -8,6 +8,26 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+        title: ['var(--font-title)'],
+      },
+      colors: {
+        'primary': {
+          DEFAULT: '#0086C7',
+          50: '#A8E3FF',
+          100: '#94DCFF',
+          200: '#6BCFFF',
+          300: '#42C1FF',
+          400: '#1AB4FF',
+          500: '#00A1F0',
+          600: '#0086C7',
+          700: '#00608F',
+          800: '#003A57',
+          900: '#00151F',
+          950: '#000203'
+        },
+      },
       minHeight: {
         // We use 100svh, falling back to vh for old browsers
         // The 144px is for the header and footer
@@ -18,5 +38,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')],
 };