Bump tailwindcss related packages and updated config. Fixed Storybook! (#624)

* Updated Story book to the latest one

* Updated tailwindcss related packages and config

* Fixed Storybook

* Added missed colors

* Fixed CSS for the error dialog

frontend/src/components/SelectMenu.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import SelectMenu, { SelectMenuItem } from "./SelectMenu";
 
 const meta = {

frontend/src/components/common/DropDown.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react-vite";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import DropDown from "./DropDown";
 import { BsSlack, BsGithub } from "react-icons/bs";
 

frontend/src/components/common/Page/Page.stories.tsx

@@ -1,24 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { within, userEvent } from "@storybook/testing-library";
-import { Page } from "./Page";
-
-const meta = {
-  title: "Example/Page",
-  component: Page,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof Page>;
-
-export default meta;
-
-export const LoggedOut = {};
-
-export const LoggedIn: StoryObj<typeof Page> = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole("button", { name: /Log in/i });
-    await userEvent.click(loginButton);
-  },
-};

frontend/src/components/modal/ErrorModal.stories.tsx

@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Meta } from "@storybook/react-vite";
 import ErrorModal from "./ErrorModal";
 

frontend/src/components/modal/ErrorModal.tsx

@@ -50,9 +50,7 @@ export default function ErrorModal({
 
   return (
     <Modal
-      containerClassNames={
-        "border-2 border-error-border-color bg-error-background w-2/3"
-      }
+      containerClassNames={"error-dialog w-2/3"}
       title={ErrorTitle}
       isOpen={isOpen}
       onClose={onClose}

frontend/src/components/modal/GlobalErrorModal.tsx

@@ -34,9 +34,7 @@ export default function GlobalErrorModal({
 
   return (
     <Modal
-      containerClassNames={
-        "border-2 border-error-border-color bg-error-background w-3/5 "
-      }
+      containerClassNames={"error-dialog w-3/5"}
       title={ErrorTitle}
       isOpen={isOpen}
       onClose={onClose}

frontend/src/components/modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { StoryObj, StoryFn, Meta } from "@storybook/react-vite";
 import Modal, { ModalAction, ModalButtonStyle } from "./Modal";
 

frontend/src/components/revision/RevisionResource.tsx

@@ -104,7 +104,7 @@ const ResourceRow = ({
         <td className="font-bold text-sm w-56">{name}</td>
         <td>{reason ? <Badge type={badgeType}>{reason}</Badge> : null}</td>
         <td className="rounded text-gray-100">
-          <div className="flex flex-col space-y-1 justify-start items-start ">
+          <div className="flex flex-col space-y-1 flex-start">
             {message && (
               <div className="text-gray-500 font-thin">{message}</div>
             )}