chore: review comments

frontend/src/components/domain-warning/domain-warning.tsx

@@ -24,9 +24,9 @@ export const DomainWarning = (props: Props) => {
   const redirectUri = searchParams.get("redirect_uri");
 
   return (
-    <Card role="alert" aria-live="assertive" className="min-w-xs sm:min-w-sm">
+    <Card role="alert" aria-live="assertive">
-      <CardHeader>
+      <CardHeader className="gap-1.5">
-        <CardTitle className="text-3xl">{t("domainWarningTitle")}</CardTitle>
+        <CardTitle className="text-xl">{t("domainWarningTitle")}</CardTitle>
         <CardDescription>
           <Trans
             t={t}
@@ -37,7 +37,7 @@ export const DomainWarning = (props: Props) => {
           />
         </CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch gap-2">
+      <CardFooter className="flex flex-col items-stretch gap-3">
         <Button onClick={onClick} variant="warning">
           {t("ignoreTitle")}
         </Button>

frontend/src/components/layout/layout.tsx

@@ -25,7 +25,7 @@ const BaseLayout = ({ children }: { children: React.ReactNode }) => {
         <ThemeToggle />
         <LanguageSelector />
       </div>
-      <div className="max-w-sm">{children}</div>
+      <div className="max-w-sm md:min-w-sm min-w-xs">{children}</div>
     </div>
   );
 };

frontend/src/pages/authorize-page.tsx

@@ -154,7 +154,7 @@ export const AuthorizePage = () => {
   return (
     <Card>
       <CardHeader className="mb-2">
-        <div className="flex flex-col gap-3 items-center justify-center">
+        <div className="flex flex-col gap-3 items-center justify-center text-center">
           <div className="bg-accent-foreground text-muted text-xl font-bold font-sans rounded-lg px-4 py-3">
             {getClientInfo.data?.name.slice(0, 1)}
           </div>
@@ -163,7 +163,7 @@ export const AuthorizePage = () => {
               app: getClientInfo.data?.name || "Unknown",
             })}
           </CardTitle>
-          <CardDescription className="text-sm max-w-sm text-center">
+          <CardDescription className="text-sm max-w-sm">
             {scopes.includes("openid")
               ? t("authorizeSubtitle")
               : t("authorizeSubtitleOAuth")}

frontend/src/pages/continue-page.tsx

@@ -94,7 +94,7 @@ export const ContinuePage = () => {
   if (showUntrustedWarning) {
     return (
       <Card role="alert" aria-live="assertive">
-        <CardHeader>
+        <CardHeader className="gap-1.5">
           <CardTitle className="text-xl">
             {t("continueUntrustedRedirectTitle")}
           </CardTitle>
@@ -133,8 +133,8 @@ export const ContinuePage = () => {
   if (showInsecureWarning) {
     return (
       <Card role="alert" aria-live="assertive">
-        <CardHeader>
+        <CardHeader className="gap-1.5">
-          <CardTitle className="text-3xl">
+          <CardTitle className="text-xl">
             {t("continueInsecureRedirectTitle")}
           </CardTitle>
           <CardDescription>
@@ -168,7 +168,7 @@ export const ContinuePage = () => {
   }
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">
           {t("continueRedirectingTitle")}
@@ -176,8 +176,8 @@ export const ContinuePage = () => {
         <CardDescription>{t("continueRedirectingSubtitle")}</CardDescription>
       </CardHeader>
       {showRedirectButton && (
-        <CardFooter className="flex flex-col items-stretch">
+        <CardFooter>
-          <Button onClick={handleRedirect}>
+          <Button className="w-full" onClick={handleRedirect}>
             {t("continueRedirectManually")}
           </Button>
         </CardFooter>

frontend/src/pages/error-page.tsx

@@ -14,7 +14,7 @@ export const ErrorPage = () => {
   const error = searchParams.get("error") ?? "";
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("errorTitle")}</CardTitle>
         <CardDescription className="flex flex-col gap-3">

frontend/src/pages/forgot-password-page.tsx

@@ -2,16 +2,20 @@ import {
   Card,
   CardContent,
   CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { useAppContext } from "@/context/app-context";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
+import { useNavigate } from "react-router";
 
 export const ForgotPasswordPage = () => {
   const { forgotPasswordMessage } = useAppContext();
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   return (
     <Card>
@@ -27,6 +31,17 @@ export const ForgotPasswordPage = () => {
           </Markdown>
         </CardDescription>
       </CardContent>
+      <CardFooter>
+        <Button
+          className="w-full"
+          variant="outline"
+          onClick={() => {
+            navigate("/login");
+          }}
+        >
+          {t("notFoundButton")}
+        </Button>
+      </CardFooter>
     </Card>
   );
 };

frontend/src/pages/login-page.tsx

@@ -220,7 +220,7 @@ export const LoginPage = () => {
     );
   }
   return (
-    <Card className="md:min-w-sm">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-center text-xl">{title}</CardTitle>
         {providers.length > 0 && (
@@ -264,14 +264,16 @@ export const LoginPage = () => {
         )}
       </CardContent>
       <CardFooter>
-        <Button
+        {userAuthConfigured && (
-          className="w-full"
+          <Button
-          type="submit"
+            className="w-full"
-          form={formId}
+            type="submit"
-          loading={loginIsPending || oauthIsPending}
+            form={formId}
-        >
+            loading={loginIsPending || oauthIsPending}
-          {t("loginSubmit")}
+          >
-        </Button>
+            {t("loginSubmit")}
+          </Button>
+        )}
       </CardFooter>
     </Card>
   );

frontend/src/pages/logout-page.tsx

@@ -52,7 +52,7 @@ export const LogoutPage = () => {
   }
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("logoutTitle")}</CardTitle>
         <CardDescription>
@@ -84,8 +84,10 @@ export const LogoutPage = () => {
           )}
         </CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
         <Button
+          className="w-full"
+          variant="outline"
           loading={logoutMutation.isPending}
           onClick={() => logoutMutation.mutate()}
         >

frontend/src/pages/not-found-page.tsx

@@ -21,13 +21,18 @@ export const NotFoundPage = () => {
   };
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("notFoundTitle")}</CardTitle>
         <CardDescription>{t("notFoundSubtitle")}</CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
-        <Button onClick={handleRedirect} loading={loading}>
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleRedirect}
+          loading={loading}
+        >
           {t("notFoundButton")}
         </Button>
       </CardFooter>

frontend/src/pages/totp-page.tsx

@@ -83,8 +83,13 @@ export const TotpPage = () => {
           onSubmit={(values) => totpMutation.mutate(values)}
         />
       </CardContent>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
-        <Button form={formId} type="submit" loading={totpMutation.isPending}>
+        <Button
+          className="w-full"
+          form={formId}
+          type="submit"
+          loading={totpMutation.isPending}
+        >
           {t("continueTitle")}
         </Button>
       </CardFooter>

frontend/src/pages/unauthorized-page.tsx

@@ -47,7 +47,7 @@ export const UnauthorizedPage = () => {
   }
 
   return (
-    <Card className="min-w-xs">
+    <Card>
       <CardHeader className="gap-1.5">
         <CardTitle className="text-xl">{t("unauthorizedTitle")}</CardTitle>
         <CardDescription>
@@ -65,8 +65,13 @@ export const UnauthorizedPage = () => {
           />
         </CardDescription>
       </CardHeader>
-      <CardFooter className="flex flex-col items-stretch">
+      <CardFooter>
-        <Button onClick={handleRedirect} loading={loading}>
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={handleRedirect}
+          loading={loading}
+        >
           {t("unauthorizedButton")}
         </Button>
       </CardFooter>