add rules & privacy (fixes #2) (related #46)

packages/client/src/components/Info/InfoSidebar.tsx

@@ -3,6 +3,8 @@ import { useAppContext } from "../../contexts/AppContext";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import { Rules } from "./Rules";
+import { Privacy } from "./Privacy";
 
 /**
  * Information sidebar
@@ -16,7 +18,7 @@ export const InfoSidebar = () => {
 
   return (
     <div
-      className="sidebar sidebar-left"
+      className="sidebar sidebar-left md:max-w-[30vw]"
       style={{ ...(infoSidebar ? {} : { display: "none" }) }}
     >
       <header>
@@ -64,6 +66,9 @@ export const InfoSidebar = () => {
         <b>Build {__COMMIT_HASH__}</b>
         <div id="grecaptcha-badge"></div>
       </section>
+
+      <Rules />
+      <Privacy />
     </div>
   );
 };

packages/client/src/components/Info/Privacy.tsx

@@ -0,0 +1,25 @@
+/**
+ * Privacy policy listed in InfoSidebar
+ *
+ * TODO: Customize this w/o editing the source #46
+ *
+ * @returns
+ */
+export const Privacy = () => {
+  return (
+    <>
+      <header>
+        <h2>Privacy</h2>
+      </header>
+      <section>
+        <ul className="list-disc ml-5">
+          <li>
+            Google Invisible Recaptcha is used to help prevent bots. Google's
+            privacy policy and terms are available above.
+          </li>
+          <li>Usernames should not be assumed to be private</li>
+        </ul>
+      </section>
+    </>
+  );
+};

packages/client/src/components/Info/Rules.tsx

@@ -0,0 +1,46 @@
+/**
+ * Rules listed inside InfoSidebar
+ *
+ * TODO: Customize this w/o editing the source #46
+ *
+ * @returns
+ */
+export const Rules = () => {
+  return (
+    <>
+      <header>
+        <h2>Rules</h2>
+      </header>
+      <section>
+        <p>Welcome to Canvas!</p>
+        <p>
+          We just have a couple rules, to use the canvas you must agree to them
+        </p>
+        <ol className="list-decimal ml-5">
+          <li>
+            <b>No alternative accounts</b>
+            <br />
+            We want to keep it fair and not require people to create more
+            accounts to defend their art
+          </li>
+          <li>
+            <b>No bots/automated placements</b>
+            <br />
+            We're land of the humans, not bots
+          </li>
+          <li>
+            <b>No hate speech or adjacent</b>
+          </li>
+          <li>
+            <b>No gore or nudity (NSFW/NSFL)</b>
+          </li>
+        </ol>
+        <i>
+          This canvas is built upon good faith rules, therefore moderators have
+          complete discretion on the rules. If you have any questions, ask in
+          the Matrix space or the Discord
+        </i>
+      </section>
+    </>
+  );
+};

packages/client/src/style.scss

@@ -157,6 +157,9 @@ main {
   min-width: 20rem;
   max-width: 75vw;
 
+  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.5);
+  overflow-y: auto;
+
   &-right {
     right: 0;
   }