🎨 Update color palette (#613)

Use more saturated colors and increase contrast to improve readability

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/sample.env

@@ -1,9 +0,0 @@
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
-DATABASE_URL=postgres://your-database/db
-SECRET_PASSWORD=minimum-32-characters
-SUPPORT_EMAIL=foo@yourdomain.com
-SMTP_HOST=your-smtp-server
-SMTP_PORT=587
-SMTP_SECURE=false
-SMTP_USER=your-smtp-user
-SMTP_PWD=your-smtp-password

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 {