From fb1d423bf04bf0148bb5bc51e87aa5854d8c85b2 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 10 Jul 2022 18:26:51 +0300
Subject: [PATCH] Info to FAQ on how to get a badge for event

---
 app/routes/badges.tsx | 14 +++++++++++++-
 app/routes/faq.tsx    | 17 ++++++++++++++++-
 app/styles/badges.css | 10 +++++++++-
 app/utils/urls.ts     |  1 +
 4 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/app/routes/badges.tsx b/app/routes/badges.tsx
index 7cc06d6bd..79830cedd 100644
--- a/app/routes/badges.tsx
+++ b/app/routes/badges.tsx
@@ -1,11 +1,12 @@
 import { json } from "@remix-run/node";
 import type { LinksFunction, LoaderFunction } from "@remix-run/node";
-import { NavLink, Outlet, useLoaderData } from "@remix-run/react";
+import { Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
 import { Badge } from "~/components/Badge";
 import { Main } from "~/components/Main";
 import { db } from "~/db";
 import type { All } from "~/db/models/badges.server";
 import styles from "~/styles/badges.css";
+import { BORZOIC_TWITTER, FAQ_PAGE } from "~/utils/urls";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -39,6 +40,17 @@ export default function BadgesPageLayout() {
           ))}
         </div>
       </div>
+      <div className="badges__general-info-texts">
+        <p>
+          Badges by{" "}
+          <a href={BORZOIC_TWITTER} target="_blank" rel="noreferrer">
+            borzoic
+          </a>
+        </p>
+        <p>
+          <Link to={FAQ_PAGE}>Badge for your event?</Link>
+        </p>
+      </div>
     </Main>
   );
 }
diff --git a/app/routes/faq.tsx b/app/routes/faq.tsx
index 35d338f23..36a09ccae 100644
--- a/app/routes/faq.tsx
+++ b/app/routes/faq.tsx
@@ -16,7 +16,7 @@ export const links: LinksFunction = () => {
 
 export default function FAQPage() {
   return (
-    <Main>
+    <Main className="stack md">
       <details className="faq__details">
         <summary className="faq__summary">What is the Plus Server?</summary>
         <p>
@@ -33,6 +33,21 @@ export default function FAQPage() {
           a score below 50% they get demoted a tier or in the case of +3 kicked.
         </p>
       </details>
+      <details className="faq__details">
+        <summary className="faq__summary">
+          How to get a badge prize for my event?
+        </summary>
+        <p>
+          You commission borzoic#1991 to make the badge. Price is 10-30€
+          depending on the complexity. Afterwards contact Sendou to get it added
+          to the web page.
+        </p>
+        <p>
+          Any tournament can have a badge as a prize. If you want to award
+          badges for other feats it&apos;s best to consult Sendou first about
+          your idea.
+        </p>
+      </details>
     </Main>
   );
 }
diff --git a/app/styles/badges.css b/app/styles/badges.css
index 1aa827748..1acddbd88 100644
--- a/app/styles/badges.css
+++ b/app/styles/badges.css
@@ -20,6 +20,14 @@
   display: none;
 }
 
+.badges__general-info-texts {
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-lighter);
+  font-size: var(--fonts-xs);
+  padding-inline: var(--s-1);
+}
+
 .badges__explanation {
   color: var(--theme);
   font-weight: var(--semi-bold);
@@ -100,8 +108,8 @@
 }
 
 .badges-edit__differences > li::before {
-  padding-inline-end: 5px;
   content: "-";
+  padding-inline-end: 5px;
 }
 
 .badges-edit__submit-button {
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index 60ef8d586..9eaf8ea09 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -4,6 +4,7 @@ export const SENDOU_INK_DISCORD_URL = "https://discord.gg/sendou";
 export const SENDOU_INK_TWITTER_URL = "https://twitter.com/sendouink";
 export const SENDOU_INK_PATREON_URL = "https://patreon.com/sendou";
 export const SENDOU_INK_GITHUB_URL = "https://github.com/Sendouc/sendou.ink";
+export const BORZOIC_TWITTER = "https://twitter.com/borzoic_";
 export const LOG_IN_URL = "/auth";
 export const LOG_OUT_URL = "/auth/logout";
 export const PLUS_SUGGESTIONS_PAGE = "/plus/suggestions";