Merge pull request #293 from wyeworks/visual-tweaks

Visual Tweaks & Rebranding

README.md

@@ -100,7 +100,7 @@ Environment variables are configuration units relevant to the app's build or run
 |`SMTP_USER`|User to be used to send emails through the configured SMTP service||
 |`SMTP_PASS`|Password of the user to be used to send emails through the configured SMTP service||
 |`SMTP_FROM`|Default address to be used in behalf of the application||
-|`SMTP_FROM`|Default name to be used in behalf of the application|`Richard Burton`|
+|`SMTP_FROM`|Default name to be used in behalf of the application|`Richard & Isabel Burton`|
 
 
 

backend/lib/richard_burton/email.ex

@@ -47,10 +47,10 @@ defmodule RichardBurton.Email do
       {:ok, _} ->
         send_email(
           %{
-            name: "Richard Burton",
+            name: "Richard & Isabel Burton Platform",
             institution: "IFRS Canoas",
             address: System.get_env("SMTP_FROM"),
-            subject: "Contact Confirmation from Richard Burton",
+            subject: "Contact Confirmation from Richard & Isabel Burton Platform",
             message: get_confimation_message(email),
             to: address
           },
@@ -64,7 +64,7 @@ defmodule RichardBurton.Email do
 
   defp get_confimation_message(email) do
     """
-    Thank you for contacting the Richard Burton Platform research team. We will get back to you as soon as possible.
+    Thank you for contacting the Richard & Isabel Burton Platform research team. We will get back to you as soon as possible.
 
     The contact information and message you sent are as follows:
 

frontend/components/Anchor.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { FC, PropsWithChildren } from "react";
+
+interface Props extends PropsWithChildren {
+  query?: string;
+  href?: string;
+}
+
+const Anchor: FC<Props> = ({ query, href = "", children }) => {
+  const Tag = href.startsWith("http") ? "a" : Link;
+
+  return (
+    <Tag href={`${href}${query ? `?${query}` : ""}`} className="group">
+      {children}
+      <div
+        role="presentation"
+        className="w-0 h-px mx-auto -mt-px transition-all bg-current group-hover:w-full"
+      />
+    </Tag>
+  );
+};
+
+export default Anchor;

frontend/components/AppLoader.tsx

@@ -1,22 +1,47 @@
-import { FloatingPortal } from "@floating-ui/react";
-import LogoOutlinedAnimatedThumb from "assets/logo-outlined-animated-thumb.svg";
+import {
+  FloatingFocusManager,
+  FloatingPortal,
+  useFloating,
+} from "@floating-ui/react";
+import LogoOutlinedAnimated from "assets/logo-outlined-animated.svg";
 import { motion } from "framer-motion";
 import { FC } from "react";
 
 const AppLoader: FC = () => {
+  const { context, refs } = useFloating();
+
   return (
     <FloatingPortal>
-      <div aria-modal="true" className="fixed inset-0 z-50 bg-indigo-900/30">
+      <FloatingFocusManager context={context} initialFocus={refs.floating}>
         <motion.div
-          role="presentation"
-          className="absolute flex flex-col justify-between h-32 p-2 pb-6 bg-white rounded-full shadow shadow-indigo-200 bottom-4 right-4 w-30"
-          initial={{ scale: 0.6 }}
-          animate={{ scale: 1 }}
+          ref={refs.setFloating}
+          aria-modal="true"
+          className="fixed inset-0 z-50 flex items-center justify-center text-indigo-700 bg-indigo-900/30"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          autoFocus
         >
-          <LogoOutlinedAnimatedThumb className="text-indigo-700 size-fit" />
-          <div className="text-sm font-normal text-indigo-700">Loading...</div>
+          <motion.div
+            role="dialog"
+            className="flex flex-col items-center justify-center gap-2 p-3 bg-gray-200 rounded-full shadow-xl h-72"
+            initial={{ scale: 0.5 }}
+            animate={{ scale: 1 }}
+          >
+            <LogoOutlinedAnimated role="presentation" className="h-full" />
+
+            <div className="absolute z-50 px-2 py-1 text-center bg-gray-200 rounded-full absoluce-center-y">
+              Your request is being processed
+            </div>
+          </motion.div>
+          <input
+            role="presentation"
+            aria-label="Your request is being processed"
+            className="sr-only"
+            autoFocus
+          />
         </motion.div>
-      </div>
+      </FloatingFocusManager>
     </FloatingPortal>
   );
 };

frontend/components/ContactModal.tsx

@@ -24,8 +24,8 @@ const Contact = z.object({
 
 type Contact = z.infer<typeof Contact>;
 
-const SENDER_INTRODUCTION = `Please share your contact details to enable us to address your query promptly. Your full name and email address are essential for us to send you a response. If you're associated with an institution and you think it's relevant to your message, feel free to include that information as well, though it's completely optional. We assure you that your details will be kept confidential and used solely for communication purposes related to your inquiry.`;
-const MESSAGE_INTRODUCTION = `Kindly provide a concise description of your purpose for reaching out. Whether you're interested in collaborating with our research, offering feedback on our data, or sharing insights about our web application, we invite you to outline your thoughts succinctly. This initial communication is an important step in establishing a productive dialogue. We're committed to understanding your perspective and exploring how we can effectively respond or engage in further discussions.`;
+const SENDER_INTRODUCTION = `Please fill in your contact details to enable us to address your query promptly. Your full name and email address are essential for us to send you a response, and you can include your institution details as well (optional field though). We assure you that your details will be kept confidential and used solely for communication purposes only.`;
+const MESSAGE_INTRODUCTION = `Provide a concise description of your purpose for reaching out. Whether you're interested in collaborating with our research, offering feedback on our data, or sharing insights about our web application, we invite you to outline your thoughts briefly. This initial communication is an important step for us to give you an effective reply and/or engaging in further discussions`;
 
 const ContactForm: FC = () => {
   const { close } = useURLQueryModal(CONTACT_MODAL_KEY);
@@ -80,6 +80,7 @@ const ContactForm: FC = () => {
           <TextInput label="Subject" {...inputs.subject} />
           <TextArea label="Write your message here..." {...inputs.message} />
         </fieldset>
+        <div>Thank you for your contact!</div>
       </section>
 
       <footer className="flex justify-end gap-2">

frontend/components/Layout.tsx

@@ -1,17 +1,21 @@
+import Dot from "assets/dot.svg";
 import Logo from "assets/logo.svg";
 import Head from "next/head";
 import Link from "next/link";
 import { FC, ReactNode } from "react";
+import Anchor from "./Anchor";
+import { CONTACT_MODAL_KEY } from "./ContactModal";
+import { LEARN_MORE_MODAL_KEY } from "./LearnMoreModal";
 
 type Props = {
-  title: string;
+  title?: string;
   footer?: ReactNode;
   content: ReactNode;
   subheader?: ReactNode;
   leftAside?: ReactNode;
 };
 
-const HEADING_TEXT = "Richard Burton Platform";
+const HEADING_TEXT = "Richard & Isabel Burton Platform";
 const SUBHEADING_TEXT = "A database about Brazilian literature in translation";
 
 const Layout: FC<Props> = ({
@@ -23,23 +27,31 @@ const Layout: FC<Props> = ({
 }) => {
   return (
     <>
-      <Head>
-        <title>{title}</title>
-      </Head>
+      {title && (
+        <Head>
+          <title>{title}</title>
+        </Head>
+      )}
       <div className="flex flex-col h-full px-1 sm:px-8 overflow-x-clip">
         <header className="sticky top-0 z-20 bg-gray-100 sm:pb-6">
           <h1 className="select-none py-1.5 -mx-8 text-center text-white bg-indigo-600 flex items-center justify-center">
-            <Link
-              href="/"
-              className="flex sm:flex-row flex-col items-center justify-center flex-shrink gap-2 sm:gap-4 px-2 py-0.5 transition-colors rounded hover:bg-indigo-500 shadow-white"
-            >
-              <span className="inline-flex items-center gap-3 py-1 pr-5 text-lg font-medium sm:pr-0">
-                <Logo className="h-8" />
-                {HEADING_TEXT}
-              </span>
-              <hr className="w-0.5 h-8 bg-current border-none hidden sm:block" />
+            <div className="flex flex-col items-center justify-center flex-shrink transition-colors sm:flex-row sm:gap-4 shadow-white">
+              <Link
+                href="/"
+                className="px-3 py-0.5 rounded hover:bg-indigo-500"
+              >
+                <span className="inline-flex items-center gap-3 py-1 pr-5 text-lg font-medium sm:pr-0">
+                  <Logo className="h-8" />
+                  {HEADING_TEXT}
+                </span>
+              </Link>
+              <hr className="w-0.5 mr-2 h-8 bg-current border-none hidden sm:block" />
               <div className="inline text-base">{SUBHEADING_TEXT}</div>
-            </Link>
+              <hr className="w-0.5 h-8 mx-2 bg-current border-none hidden sm:block" />
+              <Anchor query={`${LEARN_MORE_MODAL_KEY}=true`}>Learn More</Anchor>
+              <Dot className="size-1" />
+              <Anchor query={`${CONTACT_MODAL_KEY}=true`}>Contact Us</Anchor>
+            </div>
           </h1>
           {subheader}
         </header>