Merge pull request #121 from codersforcauses/issue-113-Help_center_page

Issue 113 help center page

client/src/components/ui/icons.tsx

@@ -73,6 +73,45 @@ export function DropdownIcon({
   );
 }
 
+export function PhoneIcon({
+  //Phone Icon used in help page
+  strokeColour = "penni-text-regular-light-mode",
+}: {
+  strokeColour?: string;
+}) {
+  return (
+    <svg
+      className={`fill-none pr-[0.1rem] pt-[0.1rem] stroke-${strokeColour}`}
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M23 7V1H17"
+        stroke="current"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 8L23 1"
+        stroke="current"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M22 16.92V19.92C22.0011 20.1985 21.9441 20.4741 21.8325 20.7293C21.7209 20.9845 21.5573 21.2136 21.3521 21.4018C21.1468 21.5901 20.9046 21.7335 20.6407 21.8227C20.3769 21.9119 20.0974 21.945 19.82 21.92C16.7428 21.5856 13.787 20.5341 11.19 18.85C8.77382 17.3146 6.72533 15.2661 5.18999 12.85C3.49997 10.2412 2.44824 7.27097 2.11999 4.17997C2.095 3.90344 2.12787 3.62474 2.21649 3.3616C2.30512 3.09846 2.44756 2.85666 2.63476 2.6516C2.82196 2.44653 3.0498 2.28268 3.30379 2.1705C3.55777 2.05831 3.83233 2.00024 4.10999 1.99997H7.10999C7.5953 1.9952 8.06579 2.16705 8.43376 2.48351C8.80173 2.79996 9.04207 3.23942 9.10999 3.71997C9.23662 4.68004 9.47144 5.6227 9.80999 6.52997C9.94454 6.8879 9.97366 7.27689 9.8939 7.65086C9.81415 8.02482 9.62886 8.36809 9.35999 8.63998L8.08999 9.90997C9.51355 12.4135 11.5864 14.4864 14.09 15.91L15.36 14.64C15.6319 14.3711 15.9751 14.1858 16.3491 14.1061C16.7231 14.0263 17.1121 14.0554 17.47 14.19C18.3773 14.5285 19.3199 14.7634 20.28 14.89C20.7658 14.9585 21.2094 15.2032 21.5265 15.5775C21.8437 15.9518 22.0122 16.4296 22 16.92Z"
+        stroke="current"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 /* Bottom navBar icons */
 interface BottomNavIconProps extends React.SVGProps<SVGSVGElement> {
   className?: string; // use to change color of the svg pic

client/src/pages/account/help.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import Header from "@/components/ui/header";
+import { InfoIcon, PhoneIcon } from "@/components/ui/icons";
+import ProfileTag from "@/components/ui/profile-tags";
+
+export default function Help() {
+  return (
+    <div className="flex min-h-screen flex-col bg-penni-background-input-light-mode">
+      <Header title="Help centre" />
+      <div className="h-[0.12rem] grow-0 bg-penni-background-input-light-mode pt-3"></div>
+      <div className="-ml-2 flex flex-grow flex-col overflow-auto">
+        <ProfileTag icon={PhoneIcon} title="Contact us" description="" />
+        <ProfileTag
+          icon={InfoIcon}
+          title="Report a problem"
+          description=""
+          link="/account/report"
+        />
+      </div>
+    </div>
+  );
+}