fix: modal split chart info and login FAQ

Author: rebecamurillo

src/components/react/KpiCards/ModalSplitChart.tsx

@@ -46,10 +46,11 @@ export default function ModalSplitChart({ data }: Props) {
     },
   };
 
-  const getChartDataAndOptions = (dataset: Dataset) => {
-    const labels = dataset.data.map((d) => d.label);
-    const values = normalizePercentages(dataset.data);
-    const backgroundColor = dataset.data.map((d) => d.color);
+  const getChartDataAndOptions = (dataset: ModalSplitChartDataset) => {
+    const sortedData = [...dataset.data].sort((a, b) => b.value - a.value);
+    const labels = sortedData.map((d) => d.label);
+    const values = normalizePercentages(sortedData);
+    const backgroundColor = sortedData.map((d) => d.color);
 
     const chartData = {
       labels,
@@ -74,26 +75,23 @@ export default function ModalSplitChart({ data }: Props) {
             <Doughnut data={chartData} options={options} />
           </div>
           <div className="w-1/2 flex flex-col h-60 gap-0">
-            {[...dataset.data]
-              .map((item, i) => ({ ...item, percent: values[i] }))
-              .sort((a, b) => b.percent - a.percent)
-              .map((item, i) => (
-                <li
-                  key={item.label}
-                  className="flex items-center gap-1 justify-between text-sm"
-                >
-                  <span
-                    className="inline-block rounded-[3px] flex-shrink-0 w-3 h-3"
-                    style={{
-                      background: item.color ?? "#ccc",
-                    }}
-                  />
-                  <small className="flex-1">{item.label}</small>
-                  <strong className="lg:min-w-[48px] text-right">
-                    {values[i]}%
-                  </strong>
-                </li>
-              ))}
+            {sortedData.map(({ label, value, color }, i) => (
+              <li
+                key={label}
+                className="flex items-center gap-1 justify-between text-sm"
+              >
+                <span
+                  className="inline-block rounded-[3px] flex-shrink-0 w-3 h-3"
+                  style={{
+                    background: color ?? "#ccc",
+                  }}
+                />
+                <small className="flex-1">{label}</small>
+                <strong className="lg:min-w-[48px] text-right">
+                  {values[i]}%
+                </strong>
+              </li>
+            ))}
           </div>
         </div>
       </div>

src/components/react/form/LoginForm.tsx

@@ -77,17 +77,7 @@ export default function LoginForm() {
           disabled={isLoading}
         />
 
-        <RButton
-          type="button"
-          variant="secondary"
-          text="Cancel"
-          disabled={isLoading}
-          onClick={() => {
-            setEmail("");
-            setPassword("");
-            setError("");
-          }}
-        />
+        <RButton variant="secondary" text="Go back" href={getUrl("/")} />
       </div>
 
       <div className="text-center mt-6">

src/components/react/ui/InfoAlert.tsx

@@ -7,6 +7,7 @@ import {
 } from "@heroicons/react/20/solid";
 import { RButton } from "./RButton";
 export type AlertVariant =
+  | "question"
   | "success"
   | "warning"
   | "danger"
@@ -28,12 +29,19 @@ export type InfoAlertProps = {
   actionHref?: string;
   onAction?: () => void;
   className?: string;
+  hideIcon?: boolean;
 };
 
 const variantClasses: Record<
   AlertVariant,
   { bg: string; border: string; text: string; buttonBg: string }
 > = {
+  question: {
+    bg: "bg-info/50",
+    border: "border-sky-200",
+    text: "text-primary",
+    buttonBg: "border-primary hover:border-primary/90 text-primary",
+  },
   success: {
     bg: "bg-success/50",
     border: "border-green-200",
@@ -67,12 +75,12 @@ const variantClasses: Record<
 };
 
 const heroIconsVariants = {
-  info: <InformationCircleIcon className="h-10 w-10" />,
-  question: <QuestionMarkCircleIcon className="h-10 w-10" />,
-  success: <CheckCircleIcon className="h-10 w-10" />,
-  warning: <ExclamationTriangleIcon className="h-10 w-10" />,
-  danger: <ExclamationTriangleIcon className="h-10 w-10" />,
-  neutral: <InformationCircleIcon className="h-10 w-10" />,
+  info: <InformationCircleIcon className="h-8 w-8" />,
+  question: <QuestionMarkCircleIcon className="h-8 w-8" />,
+  success: <CheckCircleIcon className="h-8 w-8" />,
+  warning: <ExclamationTriangleIcon className="h-8 w-8" />,
+  danger: <ExclamationTriangleIcon className="h-8 w-8" />,
+  neutral: <InformationCircleIcon className="h-8 w-8" />,
 };
 
 export function InfoAlert({
@@ -84,6 +92,7 @@ export function InfoAlert({
   actionHref,
   onAction,
   className = "",
+  hideIcon = false,
 }: InfoAlertProps) {
   const v = variantClasses[variant];
 
@@ -94,10 +103,14 @@ export function InfoAlert({
       aria-live="polite"
     >
       <div className="flex items-start gap-2">
-        <div className={`${v.text}`}>{heroIconsVariants[icon ?? variant]}</div>
+        {!hideIcon && (
+          <div className={`${v.text}`}>
+            {heroIconsVariants[icon ?? variant]}
+          </div>
+        )}
 
         <div className="flex-1 gap-0">
-          {title && <h5 className={`${v.text}`}>{title}</h5>}
+          {title && <h6 className={`${v.text}`}>{title}</h6>}
           <p className={`${v.text}`}>{children}</p>
         </div>
 

src/pages/lab-admin/login.astro

@@ -1,16 +1,64 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import LoginForm from "../../components/react/form/LoginForm";
+import { InfoAlert } from "../../components/react";
 ---
 
 <Layout role="visitor">
   <div class="px-6 py-12">
-    <section class="max-w-3xl mx-auto">
-      <h2>Sign in to your account</h2>
-      <p class="text-warning italic mb-6">
-        Access your lab management dashboard with your credentials.
+    <section class="max-w-3xl mx-auto gap-2 flex flex-col">
+      <h2>Sign in as Living Lab editor</h2>
+      <p class="text-primary italic mb-6">
+        Access your living lab management dashboard with your credentials.
       </p>
       <LoginForm client:load />
+
+      <div class="gap-4 flex flex-col mt-8">
+        <h4>Need help ?</h4>
+        <InfoAlert
+          variant="question"
+          title="Are you a SUM Living Lab ?"
+          actionHref="/lab-admin/signup"
+          actionText="Sign up"
+          hideIcon
+          client:load
+        >
+          <small>
+            If this is your first time accessing the platform, create a new
+            account and select your Living Lab from the list.
+          </small>
+        </InfoAlert>
+
+        <InfoAlert
+          variant="question"
+          title="Are you a SUM project partner ?"
+          hideIcon
+          client:load
+        >
+          <small>
+            For administrator access, please contact the administrator at
+            <a class="underline" href="mailto:odp@sum-project.eu"
+              >odp@sum-project.eu</a
+            > to request special access to the platform.
+          </small>
+        </InfoAlert>
+
+        <InfoAlert
+          variant="question"
+          title="Do you want to create a new Living Lab?"
+          hideIcon
+          client:load
+        >
+          <small>
+            Thank you for your interest in contributing to the SUM project! The
+            feature is currently under construction. Please reach out to the
+            platform administrator at <a
+              class="underline"
+              href="mailto:odp@sum-project.eu">odp@sum-project.eu</a
+            > for more information.
+          </small>
+        </InfoAlert>
+      </div>
     </section>
   </div>
-</Layout>
+</Layout>