🎨 Update color palette (#613)

Use more saturated colors and increase contrast to improve readability

README.md

@@ -1,15 +1,25 @@
+<img src="./docs/images/logo.png" alt="Rallly" />
+
+<div align="center">
+
 [![Actions Status](https://github.com/lukevella/rallly/workflows/ci/badge.svg?branch=main)](https://github.com/lukevella/rallly/actions)
 [![Crowdin](https://badges.crowdin.net/rallly/localized.svg)](https://crowdin.com/project/rallly)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL_v3-orange.svg)](https://www.gnu.org/licenses/agpl-3.0)
 [![Discord](https://img.shields.io/badge/-Join%20Chat-7289DA?logo=discord&logoColor=white)](https://discord.gg/uzg4ZcHbuM)
 [![Donate](https://img.shields.io/badge/-Donate%20with%20Paypal-white?logo=paypal)](https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E)
 
-![hero](./docs/images/hero-image.png)
+</div>
 
 Schedule group meetings with friends, colleagues and teams. Create meeting polls to find the best date and time to organize an event based on your participants' availability. Save time and avoid back-and-forth emails.
 
 Built with [Next.js](https://github.com/vercel/next.js/), [Prisma](https://github.com/prisma/prisma), [tRPC](https://github.com/trpc/trpc) & [TailwindCSS](https://github.com/tailwindlabs/tailwindcss)
 
+<div align="center">
+
+<img src="./docs/images/poll-image.png" alt="Rallly"  />
+
+</div>
+
 ## Self-hosting
 
 Check out the [self-hosting repo](https://github.com/lukevella/rallly-selfhosted) for more information on running your own instance of Rallly.
@@ -92,8 +102,8 @@ Big thanks to these folks for sponsoring the project!
 
 And thanks to these companies for providing their services to host and run [rallly.co](https://rallly.co).
 
-<a href="https://vercel.com/?utm_source=rallly&utm_campaign=oss"><img src="/apps/web/public/vercel-logotype-dark.svg" alt="Powered by Vercel" height="30" /></a>
+<a href="https://vercel.com/?utm_source=rallly&utm_campaign=oss"><img src="./apps/web/public/vercel-logotype-dark.svg" alt="Powered by Vercel" height="30" /></a>
 &nbsp;&nbsp;&nbsp;
-<a href="https://m.do.co/c/f91efc9c9e50"><img src="/apps/web/public/digitalocean.svg" alt="Digital Ocean" height="30" /></a>
+<a href="https://m.do.co/c/f91efc9c9e50"><img src="./apps/web/public/digitalocean.svg" alt="Digital Ocean" height="30" /></a>
 &nbsp;&nbsp;&nbsp;
-<a href="https://sentry.io"><img src="/apps/web/public/sentry.svg" alt="Sentry" height="30" /></a>
+<a href="https://sentry.io"><img src="./apps/web/public/sentry.svg" alt="Sentry" height="30" /></a>

apps/web/public/locales/en/homepage.json

@@ -17,7 +17,7 @@
   "mobileFriendlyDescription": "Works great on mobile devices so participants can respond to polls wherever they may be.",
   "new": "New",
   "noLoginRequired": "No login required",
-  "noLoginRequiredDescription": "You don't need to login to create or participate in a poll",
+  "noLoginRequiredDescription": "You don't need to login to create or participate in a poll.",
   "notifications": "Notifications",
   "notificationsDescription": "Keep track of who's responded. Get notified when participants vote or comment on your poll.",
   "openSource": "Open-source",
@@ -33,7 +33,7 @@
   "principles": "Principles",
   "principlesSubheading": "We're not like the others",
   "selfHostable": "Self-hostable",
-  "selfHostableDescription": "Run it on your own server to take full control of your data",
+  "selfHostableDescription": "Run it on your own server to take full control of your data.",
   "timeSlots": "Time slots",
   "timeSlotsDescription": "Set individual start and end times for each option in your poll. Times can be automatically adjusted to each participant's timezone or they can be set to ignore timezones completely."
 }

apps/web/src/components/auth/auth-layout.tsx

@@ -7,8 +7,8 @@ export const AuthLayout = ({ children }: { children?: React.ReactNode }) => {
     <div className="h-full bg-gray-100 p-3 sm:p-8">
       <div className="flex h-full items-start justify-center">
         <div className="w-[480px] max-w-full overflow-hidden rounded-lg border bg-white shadow-sm">
-          <div className="bg-pattern border-t-primary-500 border-b border-t-4 bg-slate-500/5 p-4 text-center sm:p-8">
-            <Logo className="text-primary-500 inline-block h-7" />
+          <div className="bg-pattern border-t-primary-600 border-b border-t-4 bg-slate-500/5 p-4 text-center sm:p-8">
+            <Logo className="text-primary-600 inline-block h-7" />
           </div>
           <div className="p-4 sm:p-6">{children}</div>
         </div>

apps/web/src/components/auth/login-form.tsx

@@ -94,7 +94,7 @@ const VerifyCode: React.FunctionComponent<{
               {formState.errors.code.message}
             </p>
           ) : null}
-          <p className="mt-2 text-sm text-slate-400">
+          <p className="mt-2 text-sm text-slate-500">
             {t("verificationCodeHelp")}
           </p>
         </fieldset>

apps/web/src/components/auth/login-modal.tsx

@@ -17,7 +17,7 @@ export const LoginModal: React.FunctionComponent<{
       data-testid="login-modal"
       className="w-[420px] max-w-full overflow-hidden bg-white shadow-sm"
     >
-      <div className="bg-pattern border-t-primary-500 border-b border-t-4 bg-slate-500/5 p-4 text-center sm:p-8">
+      <div className="bg-pattern border-t-primary-600 border-b border-t-4 bg-slate-500/5 p-4 text-center sm:p-8">
         <Logo className="text-2xl" />
       </div>
       <div className="p-4 sm:p-6">

apps/web/src/components/compact-button.tsx

@@ -17,7 +17,7 @@ const CompactButton: React.FunctionComponent<CompactButtonProps> = ({
   return (
     <button
       type="button"
-      className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-slate-100 text-slate-400 transition-colors hover:bg-slate-200 active:bg-slate-300 active:text-slate-500"
+      className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-slate-100 text-slate-500 transition-colors hover:bg-slate-200 active:bg-slate-300 active:text-slate-500"
       onClick={onClick}
     >
       {Icon ? <Icon className="h-3 w-3" /> : children}

apps/web/src/components/cookie-consent.tsx

@@ -40,7 +40,7 @@ const CookieConsentPopover: React.FunctionComponent = () => {
           <div className="flex items-center space-x-6">
             <Link
               href="/privacy-policy"
-              className="hover:text-primary-500 text-slate-400"
+              className="hover:text-primary-600 text-slate-500"
             >
               Privacy Policy
             </Link>
@@ -49,7 +49,7 @@ const CookieConsentPopover: React.FunctionComponent = () => {
                 Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
                 setVisible(false);
               }}
-              className="bg-primary-500 hover:bg-primary-500/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1  font-semibold text-white shadow-sm transition-all focus:ring-2"
+              className="bg-primary-600 hover:bg-primary-600/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1  font-semibold text-white shadow-sm transition-all focus:ring-2"
             >
               OK
             </button>

apps/web/src/components/create-poll.tsx

@@ -173,7 +173,7 @@ const Page: React.FunctionComponent = () => {
                   );
               }
             })()}
-            <div className="flex w-full justify-end space-x-3 border-t bg-slate-50 px-4 py-3">
+            <div className="flex w-full justify-end space-x-3 border-t bg-gray-50 p-3">
               {currentStepIndex > 0 ? (
                 <Button
                   disabled={isBusy}

apps/web/src/components/date-card.tsx

@@ -28,7 +28,7 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
       ) : null}
       <div>
         {dow ? (
-          <div className="-mt-3 bg-white text-center text-xs text-slate-400">
+          <div className="-mt-3 bg-white text-center text-xs text-slate-500">
             {dow}
           </div>
         ) : null}

apps/web/src/components/discussion/discussion.tsx

@@ -102,7 +102,7 @@ const Discussion: React.FunctionComponent = () => {
                     isYou={session.ownsObject(comment)}
                   />
                   <div className="mb-1">
-                    <span className="mr-1 text-slate-400">&bull;</span>
+                    <span className="mr-1 text-slate-500">&bull;</span>
                     <span className="text-sm text-slate-500">
                       {dayjs(new Date(comment.createdAt)).fromNow()}
                     </span>

apps/web/src/components/error-page.tsx

@@ -25,8 +25,8 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
       </Head>
       <div className="flex items-start">
         <div className="text-center">
-          <Icon className="mb-4 inline-block w-24 text-slate-400" />
-          <div className="text-primary-500 mb-2 text-3xl font-bold ">
+          <Icon className="mb-4 inline-block w-24 text-slate-500" />
+          <div className="text-primary-600 mb-2 text-3xl font-bold ">
             {title}
           </div>
           <p>{description}</p>

apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx

@@ -104,7 +104,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                 return (
                   <div
                     key={dayOfWeek}
-                    className="flex items-center justify-center pb-2 text-sm font-medium text-slate-400"
+                    className="flex items-center justify-center pb-2 text-sm font-medium text-slate-500"
                   >
                     {dayOfWeek.substring(0, 2)}
                   </div>
@@ -163,9 +163,9 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                       className={clsx(
                         "relative flex h-full w-full items-center justify-center text-sm hover:bg-slate-50 focus:z-10 focus:rounded active:bg-slate-100",
                         {
-                          "bg-slate-50 text-slate-400": day.outOfMonth,
+                          "bg-slate-50 text-slate-500": day.outOfMonth,
                           "font-bold": day.today,
-                          "text-primary-500": day.today && !day.selected,
+                          "text-primary-600": day.today && !day.selected,
                           "font-normal text-white after:absolute after:-z-0 after:h-8 after:w-8 after:rounded-full after:bg-green-500 after:content-['']":
                             day.selected,
                         },
@@ -192,7 +192,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
           <div className="flex items-center space-x-3 p-3 sm:p-4">
             <div className="grow">
               <div className="font-medium">{t("specifyTimes")}</div>
-              <div className="text-sm text-slate-400">
+              <div className="text-sm text-slate-500">
                 {t("specifyTimesDescription")}
               </div>
             </div>

apps/web/src/components/full-page-loader.tsx

@@ -14,7 +14,7 @@ const FullPageLoader: React.FunctionComponent<FullPageLoaderProps> = ({
 }) => {
   return (
     <div className={clsx("flex h-full items-center justify-center", className)}>
-      <div className="bg-primary-500 flex items-center rounded-lg px-4 py-3 text-sm text-white shadow-sm">
+      <div className="bg-primary-600 flex items-center rounded-lg px-4 py-3 text-sm text-white shadow-sm">
         <Spinner className="mr-3 h-5 animate-spin" />
         {children}
       </div>

apps/web/src/components/home/features.tsx

@@ -14,7 +14,7 @@ const Features: React.FunctionComponent = () => {
       <p className="subheading">{t("featuresSubheading")}</p>
       <div className="grid grid-cols-2 gap-12">
         <div className="col-span-2 md:col-span-1">
-          <div className="mb-4 inline-block rounded-2xl bg-green-100/50 p-3 text-green-400">
+          <div className="mb-4 inline-block rounded-2xl bg-green-100/50 p-3 text-green-500">
             <Clock className="h-8 w-8" />
           </div>
           <h3 className="heading-sm flex items-center">
@@ -26,21 +26,21 @@ const Features: React.FunctionComponent = () => {
           <p className="text">{t("timeSlotsDescription")}</p>
         </div>
         <div className="col-span-2 md:col-span-1">
-          <div className="mb-4 inline-block rounded-2xl bg-cyan-100/50 p-3 text-cyan-400">
+          <div className="mb-4 inline-block rounded-2xl bg-cyan-100/50 p-3 text-cyan-500">
             <DeviceMobile className="h-8 w-8" />
           </div>
           <h3 className="heading-sm">{t("mobileFriendly")}</h3>
           <p className="text">{t("mobileFriendlyDescription")}</p>
         </div>
         <div className="col-span-2 md:col-span-1">
-          <div className="mb-4 inline-block rounded-2xl bg-rose-100/50 p-3 text-rose-400">
+          <div className="mb-4 inline-block rounded-2xl bg-rose-100/50 p-3 text-rose-500">
             <Bell className="h-8 w-8" />
           </div>
           <h3 className="heading-sm">{t("notifications")}</h3>
           <p className="text">{t("notificationsDescription")}</p>
         </div>
         <div className="col-span-2 md:col-span-1">
-          <div className="mb-4 inline-block rounded-2xl bg-yellow-100/50 p-3 text-yellow-400">
+          <div className="mb-4 inline-block rounded-2xl bg-yellow-100/50 p-3 text-yellow-500">
             <Chat className="h-8 w-8" />
           </div>
           <h3 className="heading-sm">{t("comments")}</h3>

apps/web/src/components/home/hero.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable @next/next/no-html-link-for-pages */
 import { m } from "framer-motion";
+import Link from "next/link";
 import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
@@ -21,25 +21,25 @@ const Hero: React.FunctionComponent = () => {
             i18nKey="heroText"
             components={{
               br: <br />,
-              s: <span className="text-primary-500 whitespace-nowrap" />,
+              s: <span className="text-primary-600 whitespace-nowrap" />,
             }}
           />
         </h1>
-        <div className="mb-12 text-xl text-gray-400">{t("heroSubText")}</div>
+        <div className="mb-12 text-xl text-slate-500">{t("heroSubText")}</div>
         <div className="space-x-3">
-          <a
+          <Link
             href="/new"
-            className="bg-primary-500 hover:bg-primary-500/90 active:bg-primary-600/90 rounded-lg px-5 py-3 font-semibold  text-white shadow-sm transition-all hover:text-white hover:no-underline hover:shadow-md"
+            className="bg-primary-600 hover:bg-primary-600/90 active:bg-primary-600/90 rounded-md px-5 py-3 font-semibold text-white  shadow-sm transition-all hover:text-white hover:no-underline hover:shadow-md"
           >
             {t("getStarted")}
-          </a>
-          <a
+          </Link>
+          <Link
             href="/demo"
-            className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md active:bg-slate-600/90"
+            className="rounded-md bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md active:bg-slate-600/90"
             rel="nofollow"
           >
             {t("liveDemo")}
-          </a>
+          </Link>
         </div>
       </div>
       <div className="pointer-events-none mt-24 hidden h-[380px] select-none items-end justify-center md:flex lg:mt-8 lg:ml-8">
@@ -47,13 +47,13 @@ const Hero: React.FunctionComponent = () => {
           <DayjsProvider>
             <div className="relative inline-block">
               <m.div
-                className="border-primary-500 bg-primary-200/10 absolute z-20 h-full rounded-2xl border-4 shadow-md"
+                className="border-primary-600 bg-primary-200/10 absolute z-20 h-full rounded-2xl border-4 shadow-md"
                 initial={{ opacity: 0, width: 100, scale: 1.1, x: 480 }}
                 animate={{ opacity: 1, x: 381 }}
                 transition={{ type: "spring", delay: 1 }}
               />
               <m.div
-                className="bg-primary-500 absolute z-20 rounded-full py-1 px-3 text-sm text-slate-100"
+                className="bg-primary-600 absolute z-20 rounded-full py-1 px-3 text-sm text-slate-100"
                 initial={{
                   opacity: 0,
                   right: 190,
@@ -64,7 +64,7 @@ const Hero: React.FunctionComponent = () => {
                 transition={{ type: "spring", delay: 2 }}
               >
                 {t("perfect")} 🤩
-                <ScribbleArrow className="absolute -right-8 top-3 text-slate-400" />
+                <ScribbleArrow className="absolute -right-8 top-3 text-slate-500" />
               </m.div>
               <m.div
                 className="rounded-lg"

apps/web/src/components/home/poll-demo.tsx

@@ -11,22 +11,22 @@ const columnWidth = 100;
 const participants = [
   {
     name: "Reed",
-    color: "bg-sky-400",
+    color: "bg-sky-500",
     votes: [0, 2],
   },
   {
     name: "Susan",
-    color: "bg-blue-400",
+    color: "bg-blue-500",
     votes: [0, 1, 2],
   },
   {
     name: "Johnny",
-    color: "bg-primary-400",
+    color: "bg-primary-500",
     votes: [2, 3],
   },
   {
     name: "Ben",
-    color: "bg-purple-400",
+    color: "bg-purple-500",
     votes: [0, 1, 2, 3],
   },
 ];
@@ -44,7 +44,7 @@ const PollDemo: React.FunctionComponent = () => {
     >
       <div className="flex">
         <div
-          className="flex shrink-0 items-center py-2 pl-4 pr-2 font-medium"
+          className="flex shrink-0 items-center pt-2 pb-4 pl-4 pr-2 font-medium"
           style={{ width: sidebarWidth }}
         >
           <div className="flex h-full grow items-end">
@@ -62,7 +62,7 @@ const PollDemo: React.FunctionComponent = () => {
           return (
             <div
               key={i}
-              className="shrink-0 space-y-3 py-2 pt-3 text-center transition-colors"
+              className="shrink-0 space-y-3 py-2 pt-3 pb-4 text-center transition-colors"
               style={{ width: columnWidth }}
             >
               <div>

apps/web/src/components/layouts/page-layout.tsx

@@ -26,7 +26,7 @@ const Menu: React.FunctionComponent<{ className: string }> = ({
       <Link
         href="/"
         className={clsx(
-          "hover:text-primary-500 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2",
+          "hover:text-primary-600 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2",
           {
             "pointer-events-none font-bold text-gray-600": pathname === "/home",
           },
@@ -37,20 +37,20 @@ const Menu: React.FunctionComponent<{ className: string }> = ({
       <Link
         href="https://blog.rallly.co"
         className={clsx(
-          "hover:text-primary-500 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2",
+          "hover:text-primary-600 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2",
         )}
       >
         {t("blog")}
       </Link>
       <a
         href="https://support.rallly.co"
-        className="hover:text-primary-500 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2"
+        className="hover:text-primary-600 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2"
       >
         {t("support")}
       </a>
       <Link
         href="https://github.com/lukevella/rallly"
-        className="hover:text-primary-500 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2"
+        className="hover:text-primary-600 rounded text-gray-400 transition-colors hover:no-underline hover:underline-offset-2"
       >
         <Github className="w-6" />
       </Link>
@@ -67,7 +67,7 @@ const PageLayout: React.FunctionComponent<PageLayoutProps> = ({ children }) => {
           <div className="grow">
             <div className="relative inline-block">
               <Link className="inline-block rounded" href="/">
-                <Logo className="text-primary-500 w-40" alt="Rallly" />
+                <Logo className="text-primary-600 w-40" alt="Rallly" />
               </Link>
               <span className="absolute -bottom-6 right-0 text-sm text-slate-400 transition-colors">
                 <Trans t={t} i18nKey="3Ls" components={{ e: <em /> }} />
@@ -77,7 +77,7 @@ const PageLayout: React.FunctionComponent<PageLayoutProps> = ({ children }) => {
           <Menu className="hidden items-center space-x-8 sm:flex" />
           <Popover>
             <PopoverTrigger asChild={true}>
-              <button className="hover:text-primary-500 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2 sm:hidden">
+              <button className="hover:text-primary-600 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2 sm:hidden">
                 <DotsVertical className="w-5" />
               </button>
             </PopoverTrigger>

apps/web/src/components/layouts/page-layout/footer.tsx

@@ -30,7 +30,7 @@ const Footer: React.FunctionComponent = () => {
                 components={{
                   a: (
                     <a
-                      className="font-normal leading-loose text-slate-400 underline hover:text-slate-800 hover:underline"
+                      className="font-normal leading-loose text-slate-500 underline hover:text-slate-800 hover:underline"
                       href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
                     />
                   ),
@@ -44,7 +44,7 @@ const Footer: React.FunctionComponent = () => {
                 components={{
                   a: (
                     <a
-                      className="font-normal leading-loose text-slate-400 underline hover:text-slate-800 hover:underline"
+                      className="font-normal leading-loose text-slate-500 underline hover:text-slate-800 hover:underline"
                       href="https://twitter.com/imlukevella"
                     />
                   ),
@@ -55,19 +55,19 @@ const Footer: React.FunctionComponent = () => {
           <div className="mb-8 flex items-center space-x-6">
             <a
               href="https://twitter.com/ralllyco"
-              className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline"
+              className="hover:text-primary-600 text-sm text-slate-500 transition-colors hover:no-underline"
             >
               <Twitter className="h-5 w-5" />
             </a>
             <a
               href="https://discord.gg/uzg4ZcHbuM"
-              className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline"
+              className="hover:text-primary-600 text-sm text-slate-500 transition-colors hover:no-underline"
             >
               <Discord className="h-5 w-5" />
             </a>
             <a
               href="https://github.com/lukevella/rallly"
-              className="hover:bg-primary-500 focus:ring-primary-500 active:bg-primary-600 inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-400 transition-colors hover:text-white hover:no-underline focus:ring-2 focus:ring-offset-1"
+              className="hover:bg-primary-600 focus:ring-primary-600 active:bg-primary-600 inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-500 transition-colors hover:text-white hover:no-underline focus:ring-2 focus:ring-offset-1"
             >
               <Star className="mr-2 inline-block w-5" />
               <span>{t("starOnGithub")}</span>
@@ -79,7 +79,7 @@ const Footer: React.FunctionComponent = () => {
           <ul className="space-y-2">
             <li>
               <a
-                className="inline-block font-normal text-slate-400 hover:text-slate-800 hover:no-underline"
+                className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
                 href="https://github.com/lukevella/rallly/discussions"
               >
                 {t("discussions")}
@@ -88,7 +88,7 @@ const Footer: React.FunctionComponent = () => {
             <li>
               <Link
                 href="https://blog.rallly.co"
-                className="inline-block font-normal text-slate-400 hover:text-slate-800 hover:no-underline"
+                className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
               >
                 {t("blog")}
               </Link>
@@ -96,7 +96,7 @@ const Footer: React.FunctionComponent = () => {
             <li>
               <a
                 href="https://support.rallly.co"
-                className="inline-block font-normal text-slate-400 hover:text-slate-800 hover:no-underline"
+                className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
               >
                 {t("support")}
               </a>
@@ -104,7 +104,7 @@ const Footer: React.FunctionComponent = () => {
             <li>
               <Link
                 href="/privacy-policy"
-                className="inline-block font-normal text-slate-400 hover:text-slate-800 hover:no-underline"
+                className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
               >
                 {t("privacyPolicy")}
               </Link>
@@ -144,7 +144,7 @@ const Footer: React.FunctionComponent = () => {
           />
           <a
             href="https://github.com/lukevella/rallly/wiki/Guide-for-translators"
-            className="hover:border-primary-500 hover:text-primary-500 inline-flex items-center rounded-md border px-3 py-2 text-xs text-slate-500"
+            className="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-slate-500"
           >
             <Translate className="mr-2 h-5 w-5" />
             {t("volunteerTranslator")} &rarr;

apps/web/src/components/layouts/standard-layout.tsx

@@ -14,7 +14,7 @@ const Feedback = dynamic(() => import("../feedback"), { ssr: false });
 
 const appVersion = process.env.NEXT_PUBLIC_APP_VERSION
   ? `v${process.env.NEXT_PUBLIC_APP_VERSION}`
-  : null;
+  : "v2.8.0";
 
 const AppVersion = () => {
   if (!appVersion) return null;
@@ -22,7 +22,7 @@ const AppVersion = () => {
   return (
     <Link
       href="https://github.com/lukevella/rallly/releases"
-      className="fixed bottom-0 left-0 hidden rounded-none rounded-tr px-2 py-1 text-xs text-slate-400 lg:block"
+      className="fixed bottom-2 left-2 hidden p-1 text-xs tabular-nums text-slate-400 lg:block"
     >
       {appVersion}
     </Link>

apps/web/src/components/layouts/standard-layout/home-link.tsx

@@ -5,7 +5,7 @@ import Logo from "~/public/logo.svg";
 export const HomeLink = (props: { className?: string }) => {
   return (
     <Link href="/" className={props.className}>
-      <Logo className="text-primary-500 active:text-primary-600 inline-block w-28 transition-colors lg:w-32" />
+      <Logo className="text-primary-600 active:text-primary-600 inline-block w-28 transition-colors lg:w-32" />
     </Link>
   );
 };

apps/web/src/components/layouts/standard-layout/mobile-navigation.tsx

@@ -65,7 +65,7 @@ export const MobileNavigation = (props: { className?: string }) => {
               type="button"
               className="group flex items-center rounded px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
             >
-              <Menu className="group-hover:text-primary-500 mr-2 w-5" />
+              <Menu className="group-hover:text-primary-600 mr-2 w-5" />
               <Logo />
             </button>
           }
@@ -119,7 +119,7 @@ export const MobileNavigation = (props: { className?: string }) => {
                   )}
                 >
                   <div className="relative shrink-0">
-                    <UserCircle className="group-hover:text-primary-500 w-5 opacity-75 group-hover:opacity-100" />
+                    <UserCircle className="group-hover:text-primary-600 w-5 opacity-75 group-hover:opacity-100" />
                   </div>
                   <div className="xs:block max-w-[120px] truncate font-medium">
                     {user.isGuest ? t("app:guest") : user.shortName}
@@ -136,7 +136,7 @@ export const MobileNavigation = (props: { className?: string }) => {
               type="button"
               className="group flex items-center whitespace-nowrap rounded px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
             >
-              <Adjustments className="group-hover:text-primary-500 h-5 opacity-75" />
+              <Adjustments className="group-hover:text-primary-600 h-5 opacity-75" />
               <span className="ml-2 hidden sm:block">
                 {t("app:preferences")}
               </span>

apps/web/src/components/layouts/standard-layout/user-dropdown.tsx

@@ -34,7 +34,7 @@ export const UserDropdown: React.FunctionComponent<DropdownProps> = ({
               content: (
                 <div className="w-96 max-w-full p-6 pt-28">
                   <div className="absolute left-0 -top-8 w-full text-center">
-                    <div className="to-primary-500 inline-flex h-20 w-20 items-center justify-center rounded-full border-8 border-white bg-gradient-to-b from-purple-400">
+                    <div className="to-primary-600 inline-flex h-20 w-20 items-center justify-center rounded-full border-8 border-white bg-gradient-to-b from-purple-400">
                       <User className="h-7 text-white" />
                     </div>
                     <div className="">

apps/web/src/components/logo.tsx

@@ -8,7 +8,7 @@ export const Logo = (props: { className?: string; color?: boolean }) => {
         className={clsx(
           "font-semibold uppercase tracking-widest",
           {
-            "text-primary-500": color,
+            "text-primary-600": color,
           },
           props.className,
         )}

apps/web/src/components/maintenance.tsx

@@ -11,7 +11,7 @@ const Maintenance: React.FunctionComponent = () => {
       </Head>
       <div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
         <div className="mb-4">
-          <Clock className="text-primary-500 inline-block h-20" />
+          <Clock className="text-primary-600 inline-block h-20" />
         </div>
         <div className="">
           The site is currently down for some maintenance and will be back

apps/web/src/components/modal/modal.tsx

@@ -73,7 +73,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
                 {showClose ? (
                   <button
                     role="button"
-                    className="absolute top-1 right-1 z-10 rounded p-2 text-slate-400 transition-colors hover:bg-slate-500/10 hover:text-slate-500 focus:ring-0 focus:ring-offset-0 active:bg-slate-500/20"
+                    className="absolute top-1 right-1 z-10 rounded p-2 text-slate-500 transition-colors hover:bg-slate-500/10 hover:text-slate-500 focus:ring-0 focus:ring-offset-0 active:bg-slate-500/20"
                     onClick={onCancel}
                   >
                     <X className="h-4" />

apps/web/src/components/open-beta-modal.tsx

@@ -21,25 +21,25 @@ const OpenBeta = () => {
           <ul className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <a
               href="https://github.com/lukevella/rallly/issues/new?assignees=&labels=bug&template=---bug-report.md&title="
-              className="hover:text-primary-500 rounded border p-3"
+              className="hover:text-primary-600 rounded border p-3"
             >
               🐞 Submit a bug report
             </a>
             <a
               href="https://github.com/lukevella/rallly/discussions/new/choose"
-              className="hover:text-primary-500 rounded border p-3"
+              className="hover:text-primary-600 rounded border p-3"
             >
               📢 Open a discussion with the community
             </a>
             <a
               href="https://discord.gg/uzg4ZcHbuM"
-              className="hover:text-primary-500 rounded border p-3"
+              className="hover:text-primary-600 rounded border p-3"
             >
               💬 Chat on Discord
             </a>
             <a
               href="mailto:feedback@rallly.co"
-              className="hover:text-primary-500 rounded border p-3"
+              className="hover:text-primary-600 rounded border p-3"
             >
               ✉️ Send an email
             </a>

apps/web/src/components/participant-dropdown.tsx

@@ -155,7 +155,7 @@ const ChangeNameModal = (props: {
         {errors.name ? (
           <div className="text-sm text-rose-500">{errors.name.message}</div>
         ) : null}
-        <div className="mt-2 text-sm text-slate-400">{t("changeNameInfo")}</div>
+        <div className="mt-2 text-sm text-slate-500">{t("changeNameInfo")}</div>
       </fieldset>
       <div className="flex gap-2 ">
         <Button disabled={formState.isSubmitting} onClick={props.onDone}>

apps/web/src/components/poll/desktop-poll.tsx

@@ -129,7 +129,7 @@ const Poll: React.FunctionComponent = () => {
                   </div>
                   {poll.closed ? null : (
                     <button
-                      className="hover:text-primary-500 rounded"
+                      className="hover:text-primary-600 rounded"
                       onClick={() => {
                         setEditingParticipantId(null);
                         setShouldShowNewParticipantForm(true);

apps/web/src/components/poll/desktop-poll/poll-header.tsx

@@ -21,7 +21,7 @@ const TimeRange: React.FunctionComponent<{
       )}
     >
       <div>{startTime}</div>
-      <div className="text-slate-400">{endTime}</div>
+      <div className="text-slate-500">{endTime}</div>
     </div>
   );
 };

apps/web/src/components/poll/mobile-poll/poll-option.tsx

@@ -93,7 +93,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
     >
       <div>
         {noVotes ? (
-          <div className="rounded-lg bg-slate-50 p-2 text-center text-slate-400">
+          <div className="rounded-lg bg-slate-50 p-2 text-center text-slate-500">
             {t("noVotes")}
           </div>
         ) : (
@@ -190,7 +190,7 @@ const PollOption: React.FunctionComponent<PollOptionProps> = ({
   return (
     <div
       className={clsx("space-y-4 overflow-hidden p-3", {
-        "bg-slate-400/5": editable && active,
+        "bg-slate-500/5": editable && active,
       })}
       onTouchStart={() => setActive(editable)}
       onTouchEnd={() => setActive(false)}
@@ -218,7 +218,7 @@ const PollOption: React.FunctionComponent<PollOptionProps> = ({
               ) : null}
               <ChevronDown
                 className={clsx(
-                  "h-5 shrink-0 text-slate-400 transition-transform",
+                  "h-5 shrink-0 text-slate-500 transition-transform",
                   {
                     "-rotate-180": expanded,
                   },

apps/web/src/components/poll/mobile-poll/time-slot-option.tsx

@@ -19,7 +19,7 @@ const TimeSlotOption: React.FunctionComponent<TimeSlotOptionProps> = ({
     <PollOption {...rest}>
       <div className="grow">
         <div className="h-7">{`${startTime}`}</div>
-        <div className="flex grow items-center text-sm text-slate-400">
+        <div className="flex grow items-center text-sm text-slate-500">
           <Clock className="leading- mr-1 inline w-4" />
           {duration}
         </div>

apps/web/src/components/poll/score-summary.tsx

@@ -35,7 +35,7 @@ export const ScoreSummary: React.FunctionComponent<PopularityScoreProps> =
         className={clsx(
           "flex select-none items-center gap-1 px-2 text-sm font-bold tabular-nums",
           {
-            "rounded-full bg-green-50 text-green-400": highlight,
+            "rounded-full bg-green-50 text-green-500": highlight,
           },
           { "text-slate-400": !highlight },
         )}

apps/web/src/components/poll/user-avatar.tsx

@@ -20,14 +20,14 @@ const UserAvatarContext = React.createContext<
 >(null);
 
 const colors = [
-  "bg-violet-400",
-  "bg-sky-400",
-  "bg-cyan-400",
-  "bg-blue-400",
-  "bg-indigo-400",
-  "bg-purple-400",
-  "bg-fuchsia-400",
-  "bg-pink-400",
+  "bg-violet-500",
+  "bg-sky-500",
+  "bg-cyan-500",
+  "bg-blue-500",
+  "bg-indigo-500",
+  "bg-purple-500",
+  "bg-fuchsia-500",
+  "bg-pink-500",
 ];
 
 const defaultColor = "bg-slate-400";

apps/web/src/components/poll/vote-icon.tsx

@@ -16,7 +16,7 @@ const VoteIcon: React.FunctionComponent<{
     case "yes":
       return (
         <CheckCircle
-          className={clsx("text-green-400", className, {
+          className={clsx("text-green-500", className, {
             "h-5": size === "md",
             "h-3": size === "sm",
           })}
@@ -26,7 +26,7 @@ const VoteIcon: React.FunctionComponent<{
     case "ifNeedBe":
       return (
         <IfNeedBe
-          className={clsx("text-amber-300", className, {
+          className={clsx("text-amber-400", className, {
             "h-5": size === "md",
             "h-3": size === "sm",
           })}
@@ -36,7 +36,7 @@ const VoteIcon: React.FunctionComponent<{
     case "no":
       return (
         <X
-          className={clsx("text-slate-300", className, {
+          className={clsx("text-slate-400", className, {
             "h-5": size === "md",
             "h-3": size === "sm",
           })}

apps/web/src/components/profile.tsx

@@ -48,7 +48,7 @@ export const Profile: React.FunctionComponent = () => {
       </Head>
       <div className="flex gap-4 rounded-md border bg-white p-3 shadow-sm">
         <div className="border-primary-200/50 bg-primary-50 inline-flex h-12 w-12 items-center justify-center rounded border">
-          <User className="text-primary-500 h-7" />
+          <User className="text-primary-600 h-7" />
         </div>
         <div>
           <div
@@ -92,7 +92,7 @@ export const Profile: React.FunctionComponent = () => {
                     >
                       <span className="flex gap-4">
                         <span>
-                          <Calendar className="text-primary-500 w-10" />
+                          <Calendar className="text-primary-600 w-10" />
                         </span>
                         <span>
                           <span className="flex items-center gap-2">

apps/web/src/components/sharing.tsx

@@ -36,7 +36,7 @@ const Sharing: React.FunctionComponent<SharingProps> = ({
         </div>
         <button
           onClick={onHide}
-          className="h-8 items-center justify-center rounded-md px-3 text-slate-400 transition-colors hover:bg-slate-500/10 hover:text-slate-500 active:bg-slate-500/20"
+          className="h-8 items-center justify-center rounded-md px-3 text-slate-500 transition-colors hover:bg-slate-500/10 hover:text-slate-500 active:bg-slate-500/20"
         >
           {t("hide")}
         </button>

apps/web/src/components/text-input.tsx

@@ -20,7 +20,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         ref={ref}
         type="text"
         className={clsx(
-          "appearance-none rounded border border-gray-300 text-slate-700 placeholder:text-slate-400",
+          "appearance-none rounded border border-gray-300 text-slate-700 placeholder:text-slate-500",
           className,
           {
             "px-2 py-1": size === "md",

apps/web/src/pages/_document.tsx

@@ -6,23 +6,92 @@ export default function Document() {
     <Html>
       <Head>
         <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
+          rel="apple-touch-icon-precomposed"
+          sizes="57x57"
+          href="apple-touch-icon-57x57.png"
+        />
+        <link
+          rel="apple-touch-icon-precomposed"
+          sizes="114x114"
+          href="apple-touch-icon-114x114.png"
+        />
+        <link
+          rel="apple-touch-icon-precomposed"
+          sizes="72x72"
+          href="apple-touch-icon-72x72.png"
+        />
+        <link
+          rel="apple-touch-icon-precomposed"
+          sizes="144x144"
+          href="apple-touch-icon-144x144.png"
+        />
+        <link
+          rel="apple-touch-icon-precomposed"
+          sizes="60x60"
+          href="apple-touch-icon-60x60.png"
+        />
+        <link
+          rel="apple-touch-icon-precomposed"
+          sizes="120x120"
+          href="apple-touch-icon-120x120.png"
+        />
+        <link
+          rel="apple-touch-icon-precomposed"
+          sizes="76x76"
+          href="apple-touch-icon-76x76.png"
+        />
+        <link
+          rel="apple-touch-icon-precomposed"
+          sizes="152x152"
+          href="apple-touch-icon-152x152.png"
         />
         <link
           rel="icon"
           type="image/png"
+          href="favicon-196x196.png"
+          sizes="196x196"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          href="favicon-96x96.png"
+          sizes="96x96"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          href="favicon-32x32.png"
           sizes="32x32"
-          href="/favicon-32x32.png"
         />
         <link
           rel="icon"
           type="image/png"
+          href="favicon-16x16.png"
           sizes="16x16"
-          href="/favicon-16x16.png"
         />
-        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <link
+          rel="icon"
+          type="image/png"
+          href="favicon-128.png"
+          sizes="128x128"
+        />
+        <meta name="application-name" content="Rallly" />
+        <meta name="msapplication-TileColor" content="#FFFFFF" />
+        <meta name="msapplication-TileImage" content="mstile-144x144.png" />
+        <meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
+        <meta
+          name="msapplication-square150x150logo"
+          content="mstile-150x150.png"
+        />
+        <meta
+          name="msapplication-wide310x150logo"
+          content="mstile-310x150.png"
+        />
+        <meta
+          name="msapplication-square310x310logo"
+          content="mstile-310x310.png"
+        />
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
         <link rel="manifest" href="/site.webmanifest" />
         <meta name="theme-color" content="#f9fafb" />
       </Head>

apps/web/src/pages/auth/login.tsx

@@ -45,7 +45,7 @@ const Redirect = () => {
       <div className="flex h-10 items-center justify-center gap-4">
         {enabled ? (
           <CheckCircle
-            className={clsx("animate-popIn h-10 text-green-400", {
+            className={clsx("animate-popIn h-10 text-green-500", {
               "opacity-0": !enabled,
             })}
           />

apps/web/style.css

@@ -4,7 +4,7 @@
 
 @layer base {
   html {
-    @apply h-full bg-slate-50 font-sans text-base text-slate-600;
+    @apply h-full bg-gray-50 font-sans text-base text-slate-800;
   }
   body,
   #__next {
@@ -18,7 +18,7 @@
   h3,
   h4,
   h5 {
-    @apply mb-4 font-sans font-semibold text-slate-700;
+    @apply mb-4 font-sans font-semibold text-slate-800;
   }
   h1 {
     @apply text-2xl;
@@ -51,13 +51,13 @@
 
 @layer components {
   .text-link {
-    @apply rounded font-medium text-primary-500 outline-none hover:text-primary-500 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1;
+    @apply text-primary-600 hover:text-primary-600 focus-visible:ring-primary-600 rounded font-medium outline-none hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
   }
   .formField {
     @apply mb-4;
   }
   .input {
-    @apply appearance-none border px-2 py-1 text-slate-700 placeholder:text-slate-400;
+    @apply appearance-none border px-2 py-1 text-slate-800 placeholder:text-slate-500;
   }
   input.input {
     @apply h-9;
@@ -69,7 +69,7 @@
     @apply focus:ring-rose-500;
   }
   .checkbox {
-    @apply h-4 w-4 rounded border-slate-300 text-primary-500 shadow-sm focus:ring-primary-500;
+    @apply text-primary-600 focus:ring-primary-600 h-4 w-4 rounded border-slate-300 shadow-sm;
   }
   .btn {
     @apply inline-flex h-9 select-none items-center justify-center whitespace-nowrap border px-3 font-medium shadow-sm;
@@ -79,17 +79,17 @@
   }
 
   .btn-default {
-    @apply btn bg-white text-slate-700 hover:bg-gray-50 active:bg-gray-100;
+    @apply btn bg-white text-slate-800 hover:bg-gray-50 active:bg-gray-100;
   }
 
   a.btn-default {
-    @apply hover:text-primary-500;
+    @apply hover:text-primary-600;
   }
   .btn-danger {
     @apply btn border-rose-600 bg-rose-500 text-white hover:bg-rose-600 focus-visible:ring-rose-500;
   }
   .btn-link {
-    @apply inline-flex items-center text-primary-500 underline;
+    @apply text-primary-600 inline-flex items-center underline;
   }
   .btn.btn-disabled {
     text-shadow: none;
@@ -97,7 +97,7 @@
   }
   .btn-primary {
     text-shadow: rgb(0 0 0 / 20%) 0px 1px 1px;
-    @apply btn border-primary-600 bg-primary-500 text-white hover:bg-opacity-90 active:bg-primary-600;
+    @apply btn border-primary-600 bg-primary-600 active:bg-primary-600 text-white hover:bg-opacity-90;
   }
 
   a.btn-primary {
@@ -139,13 +139,13 @@
 
 @layer components {
   .heading {
-    @apply text-xl text-primary-500;
+    @apply text-primary-600 text-xl;
   }
   .subheading {
     @apply mb-16 text-4xl font-bold text-slate-800;
   }
   .heading-sm {
-    @apply text-xl font-bold text-slate-700;
+    @apply text-xl font-bold text-slate-800;
   }
   .text {
     @apply text-lg leading-relaxed text-slate-500;
@@ -201,7 +201,7 @@
 }
 
 .rbc-header a {
-  @apply block h-full w-full p-1 no-underline hover:text-gray-700;
+  @apply block h-full w-full p-1 no-underline hover:text-slate-800;
 }
 
 .rbc-day-slot .rbc-events-container {

packages/emails/src/templates/components/styled-components.tsx

@@ -40,7 +40,7 @@ export const Button = (props: ButtonProps) => {
     <UnstyledButton
       {...props}
       className={clsx(
-        "bg-primary-500 rounded px-3 py-2 font-sans text-white",
+        "bg-primary-600 rounded px-3 py-2 font-sans text-white",
         props.className,
       )}
     />
@@ -51,7 +51,7 @@ export const Link = (props: LinkProps) => {
   return (
     <UnstyledLink
       {...props}
-      className={clsx("text-primary-500", props.className)}
+      className={clsx("text-primary-600", props.className)}
     />
   );
 };