Skip to content

Commit

Permalink
98 nit only 1 primary button per page 1 (#106)
Browse files Browse the repository at this point in the history 
* changed all buttons that needed to be outline as outline

* added back to home button which appears only on pages that are not the home
  • Loading branch information
@JurreBrandsenInfoSupport
JurreBrandsenInfoSupport committed Apr 26, 2024
1 parent 1a3ed2e commit a41c264
Show file tree
Hide file tree
Showing 10 changed files with 267 additions and 126 deletions.
24 changes: 23 additions & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ import { Login } from "~/components/login";
import { type Session } from "next-auth";
import { getServerAuthSession } from "~/server/auth";
import ButtonSkeleton from "~/components/loading/button-loader";
import { Button } from "~/components/ui/button";
import { ArrowLeftDarkModeFriendly } from "~/components/svg";
import Link from "next/link";
import { headers } from "next/headers";

const inter = Inter({
subsets: ["latin"],
Expand All @@ -27,6 +31,13 @@ export const metadata = {
icons: [{ rel: "icon", url: "/favicon.png" }],
};

function getNextUrl() {
const headersList = headers();
const nextUrl = headersList.get("next-url");

return nextUrl;
}

export default async function RootLayout({
children,
}: {
Expand All @@ -49,7 +60,18 @@ export default async function RootLayout({
>
<TRPCReactProvider>
<main className="min-h-screen items-center justify-center">
<div className="absolute right-4 top-4 z-50 flex space-x-4">
<div className="mx-auto flex flex-wrap items-center justify-between p-4">
{/* only show this back to home button if the getNextUrl is not '/' */}
{getNextUrl() !== "/" && (
<Link href="/" passHref>
<Button variant="outline">
<ArrowLeftDarkModeFriendly />
Back to home
</Button>
</Link>
)}

<div className="flex-grow"></div>
{session && (
<Suspense fallback={<ButtonSkeleton />}>
<LoginWrapper session={session} />
Expand Down
12 changes: 7 additions & 5 deletions src/components/additional-buttons-homepage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import type { Session } from "next-auth";
import { Login } from "./login";
import { Button } from "./ui/button";
import { ArrowRight } from "./svg";
import { ArrowRightDarkModeFriendly } from "./svg";
import { signIn } from "next-auth/react";

const Buttons = ({ session }: { session: Session | null }) => {
Expand All @@ -17,19 +17,21 @@ const Buttons = ({ session }: { session: Session | null }) => {
onClick={() =>
signIn("azure-ad", { callbackUrl: "/result/general" })
}
className="bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover"
variant="outline"
className="border-2 border-[#bed62f]"
>
Show anonymised results
<ArrowRight />
<ArrowRightDarkModeFriendly />
</Button>
<Button
onClick={() =>
signIn("azure-ad", { callbackUrl: "/find-the-expert/general" })
}
className=" bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover"
variant="outline"
className="border-2 border-[#bed62f]"
>
Find the Expert
<ArrowRight />
<ArrowRightDarkModeFriendly />
</Button>
</>
)}
Expand Down
8 changes: 4 additions & 4 deletions src/components/download-pdf.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { type AnswerOption, type PdfTransformedData } from "~/models/types";
import dynamic from "next/dynamic";
import { Button } from "~/components/ui/button";
import Link from "next/link";
import { ArrowLeft, ArrowRight } from "./svg";
import { ArrowLeftDarkModeFriendly, Download } from "./svg";
import { type Session } from "next-auth";

const PDFDownloadLink = dynamic(
Expand Down Expand Up @@ -239,8 +239,8 @@ const PdfDownloadButton = ({
<div>
<div className="mt-5 flex items-center justify-around gap-6">
<Link href="/" passHref>
<Button className="bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover">
<ArrowLeft />
<Button variant="outline" className="border-2 border-[#bed62f]">
<ArrowLeftDarkModeFriendly />
Go back to home
</Button>
</Link>
Expand All @@ -263,7 +263,7 @@ const PdfDownloadButton = ({
loading ? "Loading document..." : "Download results as PDF"
}
</PDFDownloadLink>
<ArrowRight />
<Download />
</Button>
)}
</div>
Expand Down
7 changes: 4 additions & 3 deletions src/components/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,15 @@ export function Login({
}

return (
<div className="flex items-center">
<>
<p>Logged in as {session.user?.name}</p>
<Button
className="ml-2 bg-slate-500"
className="ml-2"
variant={"outline"}
onClick={() => signOut({ callbackUrl: "/" })}
>
Sign out
</Button>
</div>
</>
);
}
10 changes: 5 additions & 5 deletions src/components/select-role.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { type Session } from "next-auth";
import { type Role } from "~/models/types";
import Link from "next/link";
import { Button } from "~/components/ui/button";
import { ArrowRight } from "./svg";
import { ArrowRight, ArrowRightDarkModeFriendly } from "./svg";
import { toast } from "./ui/use-toast";
import { ToastAction } from "./ui/toast";
// import OptIn from "./opt-in";
Expand Down Expand Up @@ -140,15 +140,15 @@ export default function SelectRoles({
</Button>
</div>
<Link href="/result/general">
<Button className=" bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover">
<Button variant="outline" className="border-2 border-[#bed62f]">
Show anonymised results
<ArrowRight />
<ArrowRightDarkModeFriendly />
</Button>
</Link>
<Link href="/find-the-expert/general">
<Button className=" bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover">
<Button variant="outline" className="border-2 border-[#bed62f]">
Find the Expert
<ArrowRight />
<ArrowRightDarkModeFriendly />
</Button>
</Link>
</div>
Expand Down
7 changes: 6 additions & 1 deletion src/components/survey-questionnaire.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,11 @@ export function SurveyQuestionnaire({
return (
<div>
<ProgressionBarComponent roles={selectedRolesForProgressBar} />
<h2 className="mb-4 mt-4 text-2xl font-bold">
{userSelectedRoles.find((role) => slugify(role.role) === currentRole)
?.role ?? ""}{" "}
questions
</h2>
<Form {...form}>
<form
onSubmit={form.handleSubmit(
Expand All @@ -217,7 +222,7 @@ export function SurveyQuestionnaire({
});
},
)}
className="grid gap-4 md:grid-cols-1 lg:grid-cols-1"
className="grid justify-items-end gap-4 md:grid-cols-1 lg:grid-cols-1"
>
<QuestionsComponent
session={session}
Expand Down
199 changes: 102 additions & 97 deletions src/components/survey-questions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,104 +51,109 @@ export function SurveyQuestions({
currentAnswers: SurveyResponse[];
}) {
return (
<Table divClassname="">
<TableHeader className="sticky top-0 z-10 h-10 w-full bg-slate-100 dark:bg-slate-900">
<TableRow>
<TableHead className="w-[400px]">Question</TableHead>
{answerOptions.map((option) => (
<TableHead className="text-center" key={option.id}>
<HoverCard>
<HoverCardTrigger asChild>
<div className="flex items-center">
<span style={{ flex: 1, textAlign: "center" }}>
{idToTextMap[option.option]}
</span>
<InfoCircledIcon className="ml-2 h-4 w-4" />
</div>
</HoverCardTrigger>
<HoverCardContent className="w-80">
<div className="flex justify-between space-x-4">
<div className="space-y-1">
<p className="text-sm font-normal">
{idToMoreInfo[option.option]}
</p>
<>
<Table className="overflow-hidden rounded-lg shadow-md ">
<TableHeader className="sticky top-0 z-10 h-10 w-full bg-slate-100 dark:bg-slate-900">
<TableRow>
<TableHead className="w-[400px]">Question</TableHead>
{answerOptions.map((option) => (
<TableHead className="text-center" key={option.id}>
<HoverCard>
<HoverCardTrigger asChild>
<div className="flex items-center">
<span style={{ flex: 1, textAlign: "center" }}>
{idToTextMap[option.option]}
</span>
<InfoCircledIcon className="ml-2 h-4 w-4" />
</div>
</div>
</HoverCardContent>
</HoverCard>
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{filteredQuestions?.map((question, questionIndex) => (
<FormField
control={form.control}
name={question.id}
key={`${question.id}`}
render={({ field }) => (
<TableRow
key={question.id}
id={question.id}
className={`${
form.formState.errors[question.id]
? "error !border-2 !border-dashed !border-red-500"
: ""
} ${
questionIndex % 2 === 0
? "bg-slate-50 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600"
: "bg-slate-100 hover:bg-slate-300 dark:bg-slate-900 dark:hover:bg-slate-700"
}`}
>
<TableCell className="pl-2">
{question.questionText}
<FormMessage />
</TableCell>
{answerOptions.map((option) => (
<TableCell key={option.id} className={`w-[300px] `}>
<label
className={`${
field.value === option.id ||
findAnswerId(currentAnswers, question.id) === option.id
? "rounded-lg border-2 border-custom-selected "
: ""
}flex h-[40px] cursor-pointer items-center justify-center`}
>
<FormItem>
<FormControl>
<RadioGroup
onValueChange={async (value) => {
field.onChange(value);
saveAnswer({
userId: session.user.id,
questionId: question.id,
answerId: value,
});
}}
value={field.value as string}
className="flex flex-col space-y-1"
>
<FormControl>
<RadioGroupItem
value={option.id}
checked={
field.value === option.id ||
findAnswerId(currentAnswers, question.id) ===
option.id
}
/>
</FormControl>
</RadioGroup>
</FormControl>
</FormItem>
</label>
</HoverCardTrigger>
<HoverCardContent className="w-80">
<div className="flex justify-between space-x-4">
<div className="space-y-1">
<p className="text-sm font-normal">
{idToMoreInfo[option.option]}
</p>
</div>
</div>
</HoverCardContent>
</HoverCard>
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{filteredQuestions?.map((question, questionIndex) => (
<FormField
control={form.control}
name={question.id}
key={`${question.id}`}
render={({ field }) => (
<TableRow
key={question.id}
id={question.id}
className={`${
form.formState.errors[question.id]
? "error !border-2 !border-dashed !border-red-500"
: ""
} ${
questionIndex % 2 === 0
? "bg-slate-50 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-600"
: "bg-slate-100 hover:bg-slate-300 dark:bg-slate-900 dark:hover:bg-slate-700"
}`}
>
<TableCell className="pl-2">
{question.questionText}
<FormMessage />
</TableCell>
))}
</TableRow>
)}
/>
))}
</TableBody>
</Table>
{answerOptions.map((option) => (
<TableCell key={option.id} className={`w-[300px] `}>
<label
className={`${
field.value === option.id ||
findAnswerId(currentAnswers, question.id) ===
option.id
? "rounded-lg border-2 border-custom-selected "
: ""
}flex h-[40px] cursor-pointer items-center justify-center`}
>
<FormItem>
<FormControl>
<RadioGroup
onValueChange={async (value) => {
field.onChange(value);
saveAnswer({
userId: session.user.id,
questionId: question.id,
answerId: value,
});
}}
value={field.value as string}
className="flex flex-col space-y-1"
>
<FormControl>
<RadioGroupItem
value={option.id}
checked={
field.value === option.id ||
findAnswerId(
currentAnswers,
question.id,
) === option.id
}
/>
</FormControl>
</RadioGroup>
</FormControl>
</FormItem>
</label>
</TableCell>
))}
</TableRow>
)}
/>
))}
</TableBody>
</Table>
</>
);
}
Loading

0 comments on commit a41c264

Please sign in to comment.