Footer tweaks

app/components/layout/Footer.tsx

@@ -13,8 +13,8 @@ import { DiscordIcon } from "../icons/Discord";
 import { GitHubIcon } from "../icons/GitHub";
 import { PatreonIcon } from "../icons/Patreon";
 import { TwitterIcon } from "../icons/Twitter";
+import { Image } from "../Image";
 
-// xxx: add some sendouLove
 export function Footer() {
   const data = useLoaderData<RootLoaderData>();
 
@@ -76,6 +76,7 @@ export function Footer() {
       <div>
         <h4 className="layout__footer__patron-title">
           Thanks to the patrons for the support
+          <Image alt="" path="/img/layout/sendou_love" width={24} height={24} />
         </h4>
         <ul className="layout__footer__patron-list">
           {data.patrons.map((patron) => (

app/routes/plus/voting/index.tsx

@@ -1,4 +1,8 @@
-import type { ActionFunction, LoaderFunction } from "@remix-run/node";
+import type {
+  ActionFunction,
+  LoaderFunction,
+  MetaFunction,
+} from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
 import { formatDistance } from "date-fns";
@@ -19,12 +23,18 @@ import {
   usePlusVoting,
 } from "~/modules/plus-server";
 import { isVotingActive } from "~/permissions";
-import { parseRequestFormData } from "~/utils/remix";
+import { makeTitle, parseRequestFormData } from "~/utils/remix";
 import { discordFullName } from "~/utils/strings";
 import { assertType, assertUnreachable } from "~/utils/types";
 import { safeJSONParse } from "~/utils/zod";
 import { PlusSuggestionComments } from "../suggestions";
 
+export const meta: MetaFunction = () => {
+  return {
+    title: makeTitle("Plus Server voting"),
+  };
+};
+
 const voteSchema = z.object({
   votedId: z.number(),
   score: z.number().refine((val) => [PLUS_DOWNVOTE, PLUS_UPVOTE].includes(val)),

app/styles/layout.css

@@ -1,7 +1,7 @@
 .layout__container {
   display: flex;
-  flex-direction: column;
   height: 100%;
+  flex-direction: column;
 }
 
 .layout__header {
@@ -37,11 +37,11 @@
 }
 
 .layout__main {
+  width: 100%;
   max-width: 48rem;
   margin: 0 auto;
   padding-block-end: var(--s-32);
   padding-inline: var(--s-3);
-  width: 100%;
 }
 
 .layout__burger {
@@ -191,12 +191,12 @@
 }
 
 .layout__footer {
-  background-color: var(--bg-darker);
-  margin-block-start: auto;
-  padding: var(--s-2-5);
   display: flex;
   flex-direction: column;
+  padding: var(--s-2-5);
+  background-color: var(--bg-darker);
   gap: var(--s-6);
+  margin-block-start: auto;
 }
 
 .layout__footer__link-list {
@@ -212,23 +212,28 @@
 
 .layout__footer__socials {
   display: flex;
-  gap: var(--s-2);
   justify-content: center;
+  gap: var(--s-2);
 }
 
 .layout__footer__social-link {
-  background-color: var(--theme-transparent-vibrant);
-  border-radius: var(--rounded);
-  height: 16rem;
-  flex: 1 1 0;
   display: flex;
-  align-items: center;
+  max-width: 10rem;
+  height: 12rem;
+  flex: 1 1 0;
   flex-direction: column;
+  align-items: center;
   justify-content: space-between;
   padding: var(--s-4);
-  font-size: var(--fonts-lg);
+  background-color: var(--theme-transparent-vibrant);
+  border-radius: var(--rounded);
   cursor: pointer;
-  max-width: 10rem;
+  font-size: var(--fonts-lg);
+}
+
+.layout__footer__social-icon {
+  height: 2.25rem;
+  transition: transform 0.25s ease-in-out;
 }
 
 .layout__footer__social-link:hover {
@@ -239,27 +244,6 @@
   transform: translateY(-0.3rem);
 }
 
-/* .layout__footer__social-link:hover > .layout__footer__social-icon.github {
-  fill: #333;
-}
-
-.layout__footer__social-link:hover > .layout__footer__social-icon.twitter {
-  fill: #1da1f2;
-}
-
-.layout__footer__social-link:hover > .layout__footer__social-icon.discord {
-  fill: #5865f2;
-}
-
-.layout__footer__social-link:hover > .layout__footer__social-icon.patreon {
-  fill: #f96854;
-} */
-
-.layout__footer__social-icon {
-  height: 2.25rem;
-  transition: transform 0.25s ease-in-out;
-}
-
 .layout__footer__social-header {
   text-align: center;
 }
@@ -269,17 +253,20 @@
 }
 
 .layout__footer__patron-title {
-  text-align: center;
-  font-weight: var(--semi-bold);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
   font-size: var(--fonts-sm);
+  font-weight: var(--semi-bold);
+  gap: var(--s-2);
 }
 
 .layout__footer__patron-list {
   display: flex;
-  list-style: none;
   flex-wrap: wrap;
+  justify-content: center;
   font-size: var(--fonts-xs);
   gap: var(--s-1);
-  justify-content: center;
+  list-style: none;
   margin-block-start: var(--s-2);
 }