fix(ui): UI improvements - buttons, form validations, and chart alignment (#9299)

ui/components/auth/oss/sign-in-form.tsx

@@ -156,7 +156,6 @@ export const SignInForm = ({
             type="email"
             label="Email"
             placeholder="Enter your email"
-            showFormMessage
           />
           {!isSamlMode && (
             <CustomInput control={form.control} name="password" password />

ui/components/auth/oss/sign-up-form.tsx

@@ -155,7 +155,6 @@ export const SignUpForm = ({
             type="email"
             label="Email"
             placeholder="Enter your email"
-            showFormMessage
           />
           <CustomInput control={form.control} name="password" password />
           <PasswordRequirementsMessage password={passwordValue || ""} />

ui/components/compliance/compliance-charts/top-failed-sections-card.tsx

@@ -31,7 +31,7 @@ export function TopFailedSectionsCard({
         <CardTitle>Top Failed Sections</CardTitle>
       </CardHeader>
       <CardContent className="flex flex-1 items-center justify-start">
-        <HorizontalBarChart data={barData} labelWidth="w-60" />
+        <HorizontalBarChart data={barData} />
       </CardContent>
     </Card>
   );

ui/components/compliance/compliance-download-button.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { Button } from "@heroui/button";
 import { DownloadIcon } from "lucide-react";
 import { useState } from "react";
 
+import { Button } from "@/components/shadcn/button/button";
 import { toast } from "@/components/ui";
 import {
   COMPLIANCE_REPORT_BUTTON_LABELS,
@@ -37,18 +37,15 @@ export const ComplianceDownloadButton = ({
 
   return (
     <Button
-      color="success"
-      variant="solid"
-      startContent={
-        <DownloadIcon
-          className={isDownloading ? "animate-download-icon" : ""}
-          size={16}
-        />
-      }
-      onPress={handleDownload}
-      isLoading={isDownloading}
+      variant="default"
       size="sm"
+      onClick={handleDownload}
+      disabled={isDownloading}
     >
+      <DownloadIcon
+        className={isDownloading ? "animate-download-icon" : ""}
+        size={16}
+      />
       {label || defaultLabel}
     </Button>
   );

ui/components/graphs/horizontal-bar-chart.tsx

@@ -11,14 +11,12 @@ interface HorizontalBarChartProps {
   data: BarDataPoint[];
   height?: number;
   title?: string;
-  labelWidth?: string;
   onBarClick?: (dataPoint: BarDataPoint, index: number) => void;
 }
 
 export function HorizontalBarChart({
   data,
   title,
-  labelWidth = "w-20",
   onBarClick,
 }: HorizontalBarChartProps) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
@@ -64,7 +62,7 @@ export function HorizontalBarChart({
           return (
             <div
               key={item.name}
-              className="flex items-center gap-10"
+              className="flex items-center gap-6"
               style={{ cursor: isClickable ? "pointer" : "default" }}
               role={isClickable ? "button" : undefined}
               tabIndex={isClickable ? 0 : undefined}
@@ -89,7 +87,7 @@ export function HorizontalBarChart({
               }}
             >
               {/* Label */}
-              <div className={`w-20 md:${labelWidth} shrink-0`}>
+              <div className="w-20 shrink-0">
                 <span
                   className="text-text-neutral-secondary block truncate text-sm font-medium"
                   style={{

ui/components/icons/providers-badge/m365-provider-badge.tsx

@@ -31,7 +31,7 @@ export const M365ProviderBadge: FC<IconSvgProps> = ({
     >
       <g>
         <rect width="256" height="256" rx="60" fill="#f4f2ed" />
-        <g transform="scale(3.5) translate(2 2)">
+        <g transform="scale(3.1) translate(2 2)">
           <g clipPath={`url(#${clipId0})`}>
             <g clipPath={`url(#${clipId1})`}>
               <path

ui/components/ui/custom/custom-input.tsx

@@ -2,10 +2,10 @@
 
 import { Input } from "@heroui/input";
 import { Icon } from "@iconify/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { Control, FieldPath, FieldValues } from "react-hook-form";
 
-import { FormControl, FormField, FormMessage } from "@/components/ui/form";
+import { FormControl, FormField } from "@/components/ui/form";
 
 interface CustomInputProps<T extends FieldValues> {
   control: Control<T>;
@@ -22,7 +22,6 @@ interface CustomInputProps<T extends FieldValues> {
   isReadOnly?: boolean;
   isRequired?: boolean;
   isDisabled?: boolean;
-  showFormMessage?: boolean;
 }
 
 export const CustomInput = <T extends FieldValues>({
@@ -40,7 +39,6 @@ export const CustomInput = <T extends FieldValues>({
   isReadOnly = false,
   isRequired = true,
   isDisabled = false,
-  showFormMessage = true,
 }: CustomInputProps<T>) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
@@ -92,7 +90,7 @@ export const CustomInput = <T extends FieldValues>({
     <FormField
       control={control}
       name={name}
-      render={({ field }) => (
+      render={({ field, fieldState }) => (
         <>
           <FormControl>
             <Input
@@ -113,13 +111,12 @@ export const CustomInput = <T extends FieldValues>({
               endContent={endContent}
               isDisabled={isDisabled}
               isReadOnly={isReadOnly}
+              isInvalid={!!fieldState.error}
+              errorMessage={fieldState.error?.message}
               {...field}
               value={field.value ?? ""}
             />
           </FormControl>
-          {showFormMessage && (
-            <FormMessage className="text-text-error max-w-full text-xs" />
-          )}
         </>
       )}
     />

ui/components/ui/custom/custom-table-link.tsx

@@ -13,9 +13,9 @@ interface TableLinkProps {
 export const TableLink = ({ href, label, isDisabled }: TableLinkProps) => {
   if (isDisabled) {
     return (
-      <Button variant="link" size="sm" disabled className="text-xs">
+      <span className="text-text-neutral-tertiary inline-flex h-9 cursor-not-allowed items-center justify-center px-3 text-xs font-medium opacity-60">
         {label}
-      </Button>
+      </span>
     );
   }