fe updates + styling fixs

src/components/Accordion.tsx

@@ -5,10 +5,11 @@ import { cn } from "@/lib/client/utils";
 
 interface AccordionProps {
   label: string;
+  className?: string;
   children?: ReactNode;
 }
 
-const Accordion = ({ label, children }: AccordionProps) => {
+const Accordion = ({ label, children, className = "" }: AccordionProps) => {
   const [isOpen, setIsOpen] = useState(true);
 
   return (
@@ -42,7 +43,12 @@ const Accordion = ({ label, children }: AccordionProps) => {
               : "grid-rows-[0fr] opacity-0"
           )}
         >
-          <p className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-inter font-normal">
+          <p
+            className={cn(
+              "block overflow-hidden pt-4 text-primary text-sm leading-5 font-inter font-normal",
+              className
+            )}
+          >
             {children}
           </p>
         </div>

src/components/Stats.tsx

@@ -0,0 +1,26 @@
+interface StatsProps {
+  title: string;
+  items?: { label: string; value?: string }[];
+}
+export const Stats = ({ title, items = [] }: StatsProps) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="text-sm font-normal text-primary">{title}</div>
+      <div className="h-[1px] bg-white/20 w-full"></div>
+      {items?.length > 0 && (
+        <div className="flex gap-2">
+          {items?.map(({ label, value }, index) => {
+            return (
+              <span
+                key={index}
+                className="text-sm font-inter font-medium text-white/50 [&>strong]:text-white"
+              >
+                {`${label}:`} <strong>{value}</strong>
+              </span>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/Tabs.tsx

@@ -1,9 +1,10 @@
 import { Tab } from "@headlessui/react";
 import { classed } from "@tw-classed/react";
 import { AppContent } from "./AppContent";
+import { ReactNode } from "react";
 
 interface TabProps {
-  label: string;
+  label: ReactNode;
   badge?: boolean;
   children: React.ReactNode;
 }

src/components/jobs/CandidateJobsView.tsx

@@ -59,8 +59,6 @@ export default function CandidateJobsView({
   const hasOpportunities = true;
   const hasOptedIn = true;
 
-  console.log(pendingMatches);
-
   return (
     <>
       <Modal

src/components/jobs/CandidatePage.tsx

@@ -140,25 +140,25 @@ export default function CandidatePage({
   };
 
   return (
-    <AppContent className="overflow-hidden">
-      <FormStepLayout
-        childrenClassName="!gap-4"
-        onSubmit={handleSubmit(onSubmitForm)}
-        title="Candidate profile"
-        subtitle={
-          <span className="block pb-4 text-white/50">
-            {`We will show you opportunities that match your preferences and you can choose if you want to match with a recruiter.`}
+    <FormStepLayout
+      childrenClassName="!gap-4"
+      onSubmit={handleSubmit(onSubmitForm)}
+      title="Candidate profile"
+      subtitle={
+        <span className="block pb-4 text-white/50">
+          {`We will show you opportunities that match your preferences and you can choose if you want to match with a recruiter.`}
+        </span>
+      }
+      footer={
+        <div className="flex flex-col gap-2 bg-[#000]">
+          <Button type="submit">Save and continue</Button>
+          <span className="text-center text-secondary text-sm font-inter">
+            Review your answers. They cannot be edited later.
           </span>
-        }
-        footer={
-          <div className="flex flex-col gap-2 bg-black">
-            <Button type="submit">Save and continue</Button>
-            <span className="text-center text-secondary text-sm font-inter">
-              Review your answers. They cannot be edited later.
-            </span>
-          </div>
-        }
-      >
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-4">
         <Banner title="Your info is encrypted until you share it." />
         <Section title="What are your qualifications?" active />
         <Section title="Education">
@@ -214,7 +214,9 @@ export default function CandidatePage({
           />
         </Section>
 
-        <Section title="What opportunities are you seeking?" active />
+        <div className="pt-4">
+          <Section title="What opportunities are you seeking?" active />
+        </div>
 
         <Section title="Interests">
           <div className="grid grid-cols-2 gap-2">
@@ -323,8 +325,8 @@ export default function CandidatePage({
         <Section title="Email">
           <Input {...register("email")} border="full" />
         </Section>
-      </FormStepLayout>
-    </AppContent>
+      </div>
+    </FormStepLayout>
   );
 }
 

src/components/jobs/JobsEntryPage.tsx

@@ -15,11 +15,29 @@ export default function JobsEntryPage({
   return (
     <AppContent className="h-full">
       <FormStepLayout
-        title="Private job networking"
+        title="Private job matching"
         subtitle={
-          <span className="block pb-4 text-white/50">
-            {`As a job searcher, enter your preferences and store them privately. As a recruiter, enter your requirements and send out a query with MPC to get private matches. Searchers have to mark “interested” in a job opportunity for the recruiter to learn anything.`}
-          </span>
+          <div className="flex flex-col gap-2">
+            <ul className="flex flex-col gap-4 list-disc ml-2 pb-4 ">
+              <li className="text-white/75 [&>strong]:font-bold text-sm">
+                <strong>Recruiters:</strong> Enter job requirements and
+                privately share them with folks you meet using MPC.
+              </li>
+              <li className="text-white/75 [&>strong]:font-bold text-sm">
+                <strong>Candidates:</strong> Enter your job preferences and
+                compare them privately with opportunities to discover matches.
+                <span className="italic">
+                  Recruiters never see a match without your approval.
+                </span>
+              </li>
+            </ul>
+            <span className="text-white/50 text-sm">
+              This is an experimental feature that Cursive is testing at
+              Frontiers. Your data is encrypted using{" "}
+              <span className="underline">phantom-zone</span>, a new and
+              unaudited Multi-Party FHE Rust VM.{" "}
+            </span>
+          </div>
         }
         className="pt-4 h-full"
         //onSubmit={handleSubmitWithPassword}

src/components/jobs/RecruiterMatchView.tsx

@@ -12,6 +12,7 @@ import { Banner } from "../Banner";
 import { ArtworkSnapshot } from "../artwork/ArtworkSnapshot";
 import { Accordion } from "../Accordion";
 import { CandidateJobMatch } from "@/pages/api/jobs/get_candidate_matches";
+import { Stats } from "../Stats";
 
 const Title = classed.span("text-white text-xs font-normal font-inter");
 const Description = classed.h5("text-white/50 font-inter font-normal text-sm");
@@ -78,8 +79,6 @@ export default function RecruiterMatchView({
   const hasOptedIn = true;
   const isBookmarked = false;
 
-  console.log(matches);
-
   return (
     <>
       <Modal
@@ -122,11 +121,45 @@ export default function RecruiterMatchView({
                 value="example@gmail.com"
               ></LinkCardBox>
             </Accordion>
-            <Accordion label="Dev stats">
+            <Accordion className="flex flex-col gap-2" label="Dev stats">
               <LinkCardBox
                 label="Github"
                 value="example@gmail.com"
               ></LinkCardBox>
+              <Stats
+                title="Foundry"
+                items={[
+                  {
+                    label: "1st commit",
+                    value: "2024",
+                  },
+                  {
+                    label: "Total",
+                    value: "22",
+                  },
+                  {
+                    label: "Rank",
+                    value: "1",
+                  },
+                ]}
+              />
+              <Stats
+                title="Rust"
+                items={[
+                  {
+                    label: "1st commit",
+                    value: "2024",
+                  },
+                  {
+                    label: "Total",
+                    value: "22",
+                  },
+                  {
+                    label: "Rank",
+                    value: "1",
+                  },
+                ]}
+              />
             </Accordion>
 
             <Accordion label="Qualifications">
@@ -155,7 +188,7 @@ export default function RecruiterMatchView({
       <Tabs
         items={[
           {
-            label: "Respondents",
+            label: <span className="px-2">Respondents</span>,
             children: (
               <div className="flex flex-col h-full">
                 {!hasOpportunities ? (