Delete

package.json

@@ -16,6 +16,7 @@
     "@popperjs/core": "^2.11.8",
     "@preline/dropdown": "^2.4.1",
     "@reduxjs/toolkit": "^2.2.7",
+    "@storybook/react": "^8.3.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-query-devtools": "^5.51.23",
@@ -49,8 +50,7 @@
     "@storybook/core-events": "^8.2.8",
     "@storybook/manager-api": "^8.2.8",
     "@storybook/preview-api": "^8.2.8",
-    "@storybook/react": "^8.2.8",
-    "@storybook/react-vite": "^8.2.8",
+    "@storybook/react-vite": "^8.3.2",
     "@storybook/test": "^8.2.8",
     "@storybook/theming": "^8.2.8",
     "@tanstack/eslint-plugin-query": "^5.51.15",

src/admin/modalities/ModalitiesRoot.tsx

@@ -84,7 +84,7 @@ const ModalitiesRoot: React.FC = () => {
         title={"Manage Modalities"}
       />
       <CardBody color={Colors.almond} className="space-x-4">
-        <div className="flex flex-col items-center w-full mt-6 mb-8">
+        <div className="items-center w-full mt-6 mb-8 f">
           <div className="">
             <ModalitiesTable
               aetData={aets}
@@ -97,7 +97,9 @@ const ModalitiesRoot: React.FC = () => {
       <CardFooter color={Colors.light} className="flex justify-center">
         {!showNewAetCard && (
           <Button color={Colors.success} onClick={handleNewAetClick}>
-            <MoreIcon className="mr-3 " size={24} /> New modality
+            <MoreIcon className="mr-3 "
+              size={24} />
+            New modality
           </Button>
         )}
 

src/admin/modalities/NewModalityCard.tsx

@@ -83,60 +83,61 @@ const NewModalityCard: React.FC<NewModalityCardProps> = ({
 
   return (
     <FormCard
-      className="bg-light-gray"
-      title="Create New Modality"
-      onClose={onClose}
-      onSubmit={handleSubmit}
-    >
-      <div className="grid grid-cols-2 gap-4 p-4">
-        <Input
-          label="Name"
-          bordered = {false}
-          value={name}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
-          aria-label="Modality Name"
+    className="w-full bg-light-gray"
+    title="Create New Modality"
+    onClose={onClose}
+    onSubmit={handleSubmit}
+  >
+    <div className="grid w-full grid-cols-2 gap-4 p-4"> 
+      <Input
+        label="Name"
+        bordered={false}
+        value={name}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+        aria-label="Modality Name"
+      />
+      <Input
+        label="AET"
+        bordered
+        value={aet}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setAet(e.target.value)}
+        aria-label="AET"
+      />
+      <Input
+        label="Host"
+        bordered
+        value={host}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => setHost(e.target.value)}
+        aria-label="Host"
+      />
+      <Input
+        label="Port"
+        bordered
+        type="number"
+        value={port.toString()}
+        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+          setPort(e.target.value === "" ? "" : Number(e.target.value))
+        }
+        aria-label="Port"
+      />
+      <div className="col-span-2">
+        <SelectInput
+          options={options}
+          value={manufacturer?.value ?? null}
+          onChange={handleSelectChange}
+          placeholder="Select Manufacturer"
+          aria-label="Manufacturer"
         />
-        <Input
-          label="AET"
-          bordered
-          value={aet}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => setAet(e.target.value)}
-          aria-label="AET"
-        />
-        <Input
-          label="Host"
-          bordered
-          value={host}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => setHost(e.target.value)}
-          aria-label="Host"
-        />
-        <Input
-          label="Port"
-          bordered
-          type="number"
-          value={port.toString()}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            setPort(e.target.value === "" ? "" : Number(e.target.value))
-          }
-          aria-label="Port"
-        />
-        <div className="col-span-2">
-          <SelectInput
-            options={options}
-            value={manufacturer?.value ?? null}
-            onChange={handleSelectChange}
-            placeholder="Select Manufacturer"
-            aria-label="Manufacturer"
-          />
-        </div>
       </div>
-      <div className="flex justify-center">
-      <Button type="submit" color={Colors.success} aria-label="Submit New Modality">
-          <CheckIcon size="20px" />
-        </Button>
-      </div>
-
-    </FormCard>
+    </div>
+    <div className="flex justify-center">
+      <Button type="submit" 
+      color={Colors.success} aria-label="Submit New Modality">
+
+        <CheckIcon size="20px" />
+      </Button>
+    </div>
+  </FormCard>
   );
 };
 

src/admin/peers/NewPeerCard.tsx

@@ -24,50 +24,51 @@ const NewPeerCard: React.FC<NewPeerCardProps> = ({ onClose, onCreatePeer }) => {
 
     return (
         <FormCard
-            className="bg-light-gray"
-            title="Create New Peer"
-            onClose={onClose}
-            onSubmit={handleSubmit}
-        >
-            <div className="grid grid-cols-2 gap-4 p-4">
-                <Input
-                    label="Name"
-                    bordered
-                    value={name}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
-                    aria-label="Peer Name"
-                    required
-                />
-                <Input
-                    label="Url"
-                    bordered
-                    value={url}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
-                    aria-label="Url"
-                    required
-                />
-                <Input
-                    label="Username"
-                    bordered
-                    value={username}
-                    autoComplete="off"
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
-                />
-                <Input
-                    label="Password"
-                    type="password"
-                    bordered
-                    value={password}
-                    autoComplete="off"
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
-                />
-            </div>
-            <div className='flex justify-center'>
+        className="w-full bg-light-gray"
+        title="Create New Peer"
+        onClose={onClose}
+        onSubmit={handleSubmit}
+    >
+        <div className="grid w-full grid-cols-2 gap-4 p-4">
+            <Input
+                label="Name"
+                bordered
+                value={name}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+                aria-label="Peer Name"
+                required
+            />
+            <Input
+                label="Url"
+                bordered
+                value={url}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
+                aria-label="Url"
+                required
+            />
+            <Input
+                label="Username"
+                bordered
+                value={username}
+                autoComplete="off"
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setUsername(e.target.value)}
+            />
+            <Input
+                label="Password"
+                type="password"
+                bordered
+                value={password}
+                autoComplete="off"
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+            />
+        </div>
+        <div className="flex justify-center">
             <Button type="submit" color={Colors.success} aria-label="Submit New Peer">
-                    <CheckIcon size="20px" />
-                </Button>
-            </div>
-        </FormCard>
+                <CheckIcon size="20px" />
+            </Button>
+        </div>
+    </FormCard>
+
     );
 };
 

src/admin/queues/QueuesRoot.tsx

@@ -20,8 +20,8 @@ const QueuesRoot = () => {
   if (isLoadingOptions) return <Spinner />;
 
   return (
-    <Card className="bg-light">
-      <Tabs className="rounded-t bg-light-gray">
+    <Card >
+      <Tabs className="rounded- bg-light-gray">
         <Tab
           title="Retrieve"
           active={path.endsWith("retrieve")}

src/admin/queues/Retrieve.tsx

@@ -95,9 +95,9 @@ const Retrieve = ({ data }: RetrieveProps) => {
     <form
       onSubmit={handleSubmit}
       data-gaelo-flow="retrieve-container-queues"
-      className="flex flex-col items-center w-full mb-6 rounded-br-xl rounded-bl-xl"
+      className="w-full rounded-br-xl rounded-bl-xl"
     >
-      <Card bordered className="w-11/12 mt-8">
+      <Card bordered className="mt-8 ">
         <CardHeader title="Retrieve Schedule Time : " color={Colors.success} />
         <CardBody color={Colors.light} roundedBottomLeft roundedBottomRight>
           <div className="flex items-center justify-around gap-12 mt-1">

src/admin/users/UsersRoot.tsx

@@ -19,7 +19,7 @@ const UsersRoot = () => {
     const isOauth2Path = path.endsWith("oauth2");
 
     return (
-        <Card className="bg-white shadow-md rounded-xl" data-gaelo-flow="users-root">
+        <Card className="p-0 bg-white shadow-md rounded-xl" data-gaelo-flow="users-root">
             <Tabs className="bg-light-gray rounded-t-xl">
                 <Tab
                     title="Users"
@@ -37,19 +37,14 @@ const UsersRoot = () => {
                     onClick={() => handleTabClick("oauth2")}
                 />
             </Tabs>
-            <CardBody
-                color={Colors.almond}
-                roundedTopLeft={false}
-                roundedTopRight={false}
-                roundedBottomLeft={false}
-                roundedBottomRight={false}
-            >
+            <CardBody noPadding color={Colors.almond} roundedTopLeft={false} roundedTopRight={false} roundedBottomLeft={false} roundedBottomRight={false}>
                 <Routes>
                     <Route path="/users" element={<Users />} />
                     <Route path="/roles" element={<Roles />} />
                     <Route path="/oauth2" element={<Oauth2 />} />
                 </Routes>
             </CardBody>
+
         </Card>
     );
 };