feat: 404 page

components/atoms/FullHeightContainer/full-height-container.tsx

@@ -0,0 +1,28 @@
+/**
+ * A react component that will ensure that its min-height is the same as the screen height.
+ * This is not possible with pure css because some mobile browsers don't account for the top and bottom bars
+ * when calculating `vh`.
+ * see https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97
+ */
+
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { useWindowSize } from "react-use";
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+
+export default function FullHeightContainer(props: Props) {
+  const { children, className, ...rest } = props;
+  const { height: innerHeight } = useWindowSize();
+  const [minHeight, setMinHeight] = useState<string>("100vh");
+
+  useEffect(() => {
+    setMinHeight(`${innerHeight}px`);
+  }, [innerHeight]);
+
+  return (
+    <div className={clsx("grid min-h-screen max-h-screen", className)} style={{ minHeight: minHeight }} {...rest}>
+      {children}
+    </div>
+  );
+}

components/molecules/AuthSection/auth-section.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 
 import { IoNotifications } from "react-icons/io5";
 import { FiLogOut, FiSettings } from "react-icons/fi";
+import { BiLinkExternal } from "react-icons/bi";
 import { Divider } from "@supabase/ui";
 
 import useSession from "lib/hooks/useSession";
@@ -85,6 +86,14 @@ const AuthSection: React.FC = ({}) => {
         </div>
         <Text className="group-hover:text-light-orange-10">{user?.user_metadata.user_name}</Text>
       </Link>,
+      <Link
+        href={"https://docs.opensauced.pizza/community/faqs/"}
+        key="faqs"
+        className="flex items-center px-4 py-2 text-lg transition rounded-md cursor-pointer group gap-x-3 hover:bg-light-orange-3"
+      >
+        <BiLinkExternal className="group-hover:text-light-orange-10" />
+        <Text className="group-hover:text-light-orange-10">FAQs</Text>
+      </Link>,
       <Link
         href="/user/settings"
         key="settings"
@@ -112,7 +121,6 @@ const AuthSection: React.FC = ({}) => {
       </span>,
     ],
   };
-
   return (
     <div className="flex p-2 m-1 sm:py-0">
       <div className="flex items-center gap-2 lg:gap-3">

components/molecules/DevCard/dev-card.tsx

@@ -27,6 +27,7 @@ export interface DevCardProps {
   isLoading?: boolean;
   isFlipped?: boolean;
   isInteractive?: boolean;
+  hideProfileButton?: boolean;
   age?: number;
   onFlip?: () => void;
 }
@@ -50,6 +51,9 @@ export default function DevCard(props: DevCardProps) {
   const profileHref = `/user/${props.username}`;
 
   function handleCardClick(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+    if (!isInteractive) {
+      return;
+    }
     // flip the card if the click is not on the button
     if (!(event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement)) {
       if (props.isFlipped === undefined) {
@@ -85,11 +89,10 @@ export default function DevCard(props: DevCardProps) {
 
   return (
     <div
-      className="DevCard rounded-3x"
+      className="DevCard"
       style={{
         width: "245px",
         height: "348px",
-        boxShadow: "0px 0px 20px -12px rgba(0, 0, 0, 0.25)",
       }}
     >
       <Tilt
@@ -98,8 +101,9 @@ export default function DevCard(props: DevCardProps) {
         trackOnWindow={isInteractive}
         glareBorderRadius="1.5rem"
         flipHorizontally={isFlipped}
-        className={clsx("DevCard-card", "relative", "rounded-3x", "w-full", "h-full")}
+        className={clsx("DevCard-card", "relative", "rounded-3xl", "w-full", "h-full", "border", "border-gray-400")}
         style={{
+          boxShadow: "0px 0px 20px -12px rgba(0, 0, 0, 0.25)",
           transformStyle: "preserve-3d",
         }}
       >
@@ -232,11 +236,13 @@ export default function DevCard(props: DevCardProps) {
             </div>
             {/* bottom */}
             <div className="px-2 mt-auto justify-self-end">
-              <Link href={profileHref} passHref>
-                <Button variant="primary" className="w-full text-center justify-center mt-4 !py-1">
-                  View Profile
-                </Button>
-              </Link>
+              {!props.hideProfileButton && (
+                <Link href={profileHref} passHref>
+                  <Button variant="primary" className="w-full text-center justify-center mt-4 !py-1">
+                    View Profile
+                  </Button>
+                </Link>
+              )}
               <div className="flex justify-center mt-2">
                 <Image className="rounded" alt="Open Sauced Logo" width={13} height={13} src={openSaucedImg} />
                 <p className={"font-semibold text-white ml-1"} style={{ fontSize: "8px" }}>

components/molecules/TopContributorsPanel/top-contributors-panel.tsx

@@ -7,7 +7,7 @@ interface TopContributorsPanelProps {
   loggedInUserLogin: string;
 }
 const TopContributorsPanel = ({ loggedInUserLogin }: TopContributorsPanelProps) => {
-  const { data, isLoading } = useFetchTopContributors();
+  const { data, isLoading } = useFetchTopContributors({ limit: 20 });
 
   const topContributorsWithoutLoggedInUser = data ? data.filter((user) => user.login !== loggedInUserLogin) : [];
   const top3Contributors = topContributorsWithoutLoggedInUser.slice(0, 3).map((user) => user.login);