fix(ui updates per cms): Dashboard and Forms styling

src/services/ui/src/components/Cards/SectionCard.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+import { cn } from "@/lib";
+
+interface SectionCardProps {
+  children: ReactNode;
+  className?: string;
+  title: string;
+}
+export const SectionCard: FC<SectionCardProps> = ({
+  title,
+  children,
+  className,
+}: SectionCardProps) => {
+  return (
+    <div className={cn("border-2 border-slate-300 w-5/6 p-4", className)}>
+      <section>
+        <h1 className="font-bold text-2xl">{title}</h1>
+        <div className="border-t-2 border-slate-300 w-full mt-2 mb-4" />
+        <div className="gap-8 flex flex-col">{children}</div>
+      </section>
+    </div>
+  );
+};

src/services/ui/src/components/Cards/index.ts

@@ -1 +1,2 @@
 export * from "./CardWithTopBorder";
+export * from "./SectionCard";

src/services/ui/src/components/ExportButton/index.tsx

@@ -63,26 +63,24 @@ export const ExportButton = <TData extends Record<string, any>>({
   };
 
   return (
-    <>
-      <Button
-        variant="ghost"
-        onClick={async () => {
-          handleExport(await generateExport());
-        }}
-        disabled={loading}
-        className="hover:bg-transparent h-full flex gap-2"
-      >
-        {loading && (
-          <motion.div
-            animate={{ rotate: "360deg" }}
-            transition={{ repeat: Infinity, duration: 0.5 }}
-          >
-            <Loader className="w-4 h-4" />
-          </motion.div>
-        )}
-        {!loading && <Download className="w-4 h-4" />}
-        <span className="prose-sm">Export</span>
-      </Button>
-    </>
+    <Button
+      variant="outline"
+      onClick={async () => {
+        handleExport(await generateExport());
+      }}
+      disabled={loading}
+      className="hover:bg-transparent self-center h-10 flex gap-2"
+    >
+      {loading && (
+        <motion.div
+          animate={{ rotate: "360deg" }}
+          transition={{ repeat: Infinity, duration: 0.5 }}
+        >
+          <Loader className="w-4 h-4" />
+        </motion.div>
+      )}
+      {!loading && <Download className="w-4 h-4" />}
+      <span className="prose-sm">Export</span>
+    </Button>
   );
 };

src/services/ui/src/components/Opensearch/Filtering/FilterDrawer.tsx

@@ -30,11 +30,14 @@ export const OsFilterDrawer = () => {
   const handleFilterReset = () => resetFilters(params.onSet);
   return (
     <Sheet open={hook.drawerOpen} onOpenChange={hook.setDrawerState}>
-      <SheetTrigger>
-        <div className="flex flex-row gap-2 items-center border-slate-100 px-4">
+      <SheetTrigger asChild>
+        <Button
+          variant="outline"
+          className="hover:bg-transparent self-center h-10 flex gap-2"
+        >
           <FilterIcon className="w-4 h-4" />
-          <p className="prose-sm">Filters</p>
-        </div>
+          <span className="prose-sm">Filters</span>
+        </Button>
       </SheetTrigger>
       <SheetContent className="bg-white overflow-scroll">
         <SheetHeader>

src/services/ui/src/components/Opensearch/Filtering/index.tsx

@@ -19,95 +19,102 @@ export const OsFiltering: FC<{
   const filters = DEFAULT_FILTERS[params.state.tab]?.filters ?? [];
 
   return (
-    <div className="flex flex-row gap-2 border-[1px] border-slate-200">
-      <SearchForm
-        isSearching={context.isLoading}
-        handleSearch={(search) =>
-          params.onSet((s) => ({
-            ...s,
-            pagination: { ...s.pagination, number: 0 },
-            search,
-          }))
-        }
-        disabled={!!props.disabled}
-      />
-      <ExportButton
-        data={() => getAllSearchData([...params.state.filters, ...filters])}
-        headers={[
-          {
-            name: (() => {
-              if (params.state.tab === "spas") {
-                return "SPA ID";
-              } else if (params.state.tab === "waivers") {
-                return "Waiver Number";
-              }
-              return "";
-            })(),
-            transform: (data) => data.id,
-          },
-          {
-            name: "State",
-            transform: (data) => data.state ?? BLANK_VALUE,
-          },
-          {
-            name: "Type",
-            transform: (data) => data.planType ?? BLANK_VALUE,
-          },
-          {
-            name: "Action Type",
-            transform: (data) => {
-              if (data.actionType === undefined) {
-                return BLANK_VALUE;
-              }
+    <div>
+      <p className="mb-1 text-sm text-slate-400">
+        {"Search by Package ID, CPOC Name, or Submitter Name"}
+      </p>
+      <div className="flex flex-row content-between gap-2 mb-4">
+        <SearchForm
+          isSearching={context.isLoading}
+          handleSearch={(search) =>
+            params.onSet((s) => ({
+              ...s,
+              pagination: { ...s.pagination, number: 0 },
+              search,
+            }))
+          }
+          disabled={!!props.disabled}
+        />
+        <div className="flex flex-row gap-2">
+          <ExportButton
+            data={() => getAllSearchData([...params.state.filters, ...filters])}
+            headers={[
+              {
+                name: (() => {
+                  if (params.state.tab === "spas") {
+                    return "SPA ID";
+                  } else if (params.state.tab === "waivers") {
+                    return "Waiver Number";
+                  }
+                  return "";
+                })(),
+                transform: (data) => data.id,
+              },
+              {
+                name: "State",
+                transform: (data) => data.state ?? BLANK_VALUE,
+              },
+              {
+                name: "Type",
+                transform: (data) => data.planType ?? BLANK_VALUE,
+              },
+              {
+                name: "Action Type",
+                transform: (data) => {
+                  if (data.actionType === undefined) {
+                    return BLANK_VALUE;
+                  }
 
-              return (
-                LABELS[data.actionType as keyof typeof LABELS] ||
-                data.actionType
-              );
-            },
-          },
-          {
-            name: "Status",
-            transform(data) {
-              if (user?.data?.isCms && !user?.data?.user) {
-                if (data.cmsStatus) {
-                  return data.cmsStatus;
-                }
-                return BLANK_VALUE;
-              } else {
-                if (data.stateStatus) {
-                  return data.stateStatus;
-                }
-                return BLANK_VALUE;
-              }
-            },
-          },
-          {
-            name: "Initial Submission",
-            transform: (data) =>
-              data?.submissionDate
-                ? format(new Date(data.submissionDate), "MM/dd/yyyy")
-                : BLANK_VALUE,
-          },
-          {
-            name: "Formal RAI Response",
-            transform: (data) => {
-              return data.raiReceivedDate
-                ? format(new Date(data.raiReceivedDate), "MM/dd/yyyy")
-                : BLANK_VALUE;
-            },
-          },
-          {
-            name: "CPOC Name",
-            transform: (data) => data.leadAnalystName ?? BLANK_VALUE,
-          },
-          {
-            name: "Submitted By",
-            transform: (data) => data.submitterName ?? BLANK_VALUE,
-          },
-        ]}
-      />
-      <OsFilterDrawer />
+                  return (
+                    LABELS[data.actionType as keyof typeof LABELS] ||
+                    data.actionType
+                  );
+                },
+              },
+              {
+                name: "Status",
+                transform(data) {
+                  if (user?.data?.isCms && !user?.data?.user) {
+                    if (data.cmsStatus) {
+                      return data.cmsStatus;
+                    }
+                    return BLANK_VALUE;
+                  } else {
+                    if (data.stateStatus) {
+                      return data.stateStatus;
+                    }
+                    return BLANK_VALUE;
+                  }
+                },
+              },
+              {
+                name: "Initial Submission",
+                transform: (data) =>
+                  data?.submissionDate
+                    ? format(new Date(data.submissionDate), "MM/dd/yyyy")
+                    : BLANK_VALUE,
+              },
+              {
+                name: "Formal RAI Response",
+                transform: (data) => {
+                  return data.raiReceivedDate
+                    ? format(new Date(data.raiReceivedDate), "MM/dd/yyyy")
+                    : BLANK_VALUE;
+                },
+              },
+              {
+                name: "CPOC Name",
+                transform: (data) => data.leadAnalystName ?? BLANK_VALUE,
+              },
+              {
+                name: "Submitted By",
+                transform: (data) => data.submitterName ?? BLANK_VALUE,
+              },
+            ]}
+          />
+          <OsFilterDrawer />
+        </div>
+      </div>
     </div>
   );
 };

src/services/ui/src/components/SearchForm/index.tsx

@@ -46,15 +46,15 @@ export const SearchForm: FC<{
         </svg>
         <input
           type="text"
-          placeholder="Search by Package ID, CPOC Name, or Submitter Name"
-          className="w-full py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
+          className="w-[30rem] py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
+          maxLength={28}
           value={searchText}
           onChange={handleInputChange}
           disabled={disabled}
         />
         {isSearching && (
           <motion.div
-            className="absolute inset-y-0 w-6 h-6 my-auto right-9 origin-center flex items-center justify-center"
+            className="absolute inset-y-0 w-6 h-6 my-auto right-[9rem] origin-center flex items-center justify-center"
             animate={{ rotate: "360deg" }}
             transition={{ repeat: Infinity, duration: 0.5 }}
           >
@@ -63,7 +63,7 @@ export const SearchForm: FC<{
         )}
         {!!searchText && (
           <XIcon
-            className="absolute cursor-pointer top-0 bottom-0 w-6 h-6 my-auto right-3"
+            className="absolute cursor-pointer top-0 bottom-0 w-6 h-6 my-auto right-[7.5rem]"
             onClick={() => {
               setSearchText("");
               handleSearch("");