Upgrade tailwind 4 in heimdall

web/package.json

@@ -16,7 +16,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@patterninc/react-ui": "^4.18.4",
+    "@patterninc/react-ui": "^5.0.0",
     "@tanstack/react-query": "^5.66.11",
     "@tanstack/react-query-devtools": "^5.66.11",
     "js-yaml": "^4.1.0",
@@ -28,10 +28,10 @@
     "react-dom": "19.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "recharts": "^2.15.1",
-    "sass": "^1.85.1",
     "sql-formatter": "^15.5.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20",
     "@types/react": "19.1.6",
@@ -43,7 +43,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "postcss": "^8",
     "prettier": "^3.5.2",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5"
   },
   "overrides": {

web/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 }
 

web/src/app/globals.css

@@ -1,27 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/theme.css';
+@import 'tailwindcss/utilities.css';
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
+
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: 'Wix Madefor Display, sans-serif';
+@utility text-balance {
+  text-wrap: balance;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --background: #ffffff;
+    --foreground: #171717;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+    }
+  }
+
+  body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: 'Wix Madefor Display, sans-serif';
   }
 }

web/src/app/layout.tsx

@@ -1,5 +1,7 @@
 import ClientLayout from '@/common/ClientLayout/ClientLayout'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import './globals.css'
+import '../../node_modules/@patterninc/react-ui/dist/pattern-themed-tailwind.css'
 
 export const metadata = {
   title: 'Heimdall',

web/src/common/AutoRefreshSelect/AutoRefreshSelect.tsx

@@ -3,7 +3,7 @@
 import { Select } from '@patterninc/react-ui'
 import { useContext, useState } from 'react'
 import { AutoRefreshContext } from '../AutoRefreshProvider/context'
-import styles from './auto-fresh-select.module.scss'
+
 
 export type RefreshInterval = {
   label: string
@@ -27,9 +27,9 @@ export const AutoRefreshSelect = () => {
   )
 
   return (
-    <div className={styles.autoFreshSelectContainer}>
+    <div className='flex flex-row gap-2 items-center'>
       <span>Auto Refresh:</span>
-      <div className={styles.autoRefreshSelect}>
+      <div className='w-[104px]'>{/* Fixed width ensures the popover menu inherits the same width, preventing options from being cut off or extending beyond the window when selecting longer options like "OFF" */}
         <Select
           options={refreshOptions}
           optionKeyName={'label'}

web/src/components/ErrorPage/ErrorPage.tsx

@@ -4,14 +4,13 @@ import React from 'react'
 import { ErrorPage, APP_LOGOS } from '@patterninc/react-ui'
 import Link from 'next/link'
 import Image from 'next/image'
-import styles from './_error-page.module.scss'
 
 const NotFoundPage = () => {
   return (
-    <div className={styles.errorPageContainer}>
+    <div className='h-screen flex justify-center items-center'>
       <ErrorPage
         logo={
-          <div className='flex flex-direction-column align-items-center justify-content-center'>
+          <div className='flex flex-col items-center justify-center'>
             <Image
               src={APP_LOGOS.HEIMDALL.isolated}
               alt='Heimdall'

web/src/components/Header/Header.tsx

@@ -5,15 +5,14 @@ import { Breadcrumbs } from '@patterninc/react-ui'
 
 import { useRouter } from 'next/navigation'
 import { BreadcrumbContext } from '@/common/BreadCrumbsProvider/context'
-import styles from './_header.module.scss'
 import { AutoRefreshSelect } from '@/common/AutoRefreshSelect/AutoRefreshSelect'
 
 const Header = () => {
   const { breadcrumbs, breadcrumbCallout } = useContext(BreadcrumbContext)
   const router = useRouter()
 
   return (
-    <div className={`header ${styles.headerContainer}`}>
+    <div className="header sticky top-0 bg-white z-[99]">
       <Breadcrumbs
         breadcrumbs={breadcrumbs}
         callout={(breadcrumb) => {

web/src/components/NavigationBar/LeftNavBar.tsx

@@ -5,7 +5,7 @@ import { APP_LOGOS, LeftNavLinkObj, LeftNav, Icon } from '@patterninc/react-ui'
 import Link from 'next/link'
 import { BreadcrumbContext } from '@/common/BreadCrumbsProvider/context'
 import { getVersion } from '@/common/Services'
-import styles from './_left-nav.module.scss'
+
 
 type LeftNavBarProps = {
   user: string | null
@@ -68,7 +68,7 @@ const LeftNavBar = ({ user }: LeftNavBarProps) => {
       footer={({ sidebarExpanded }) =>
         sidebarExpanded ? (
           <>
-            <div className={styles.sidebarFooter}>
+            <div className='flex items-center text-[10px] text-purple pl-4 h-5'>
               <>
                 &copy; {new Date().getFullYear()}, v{version}-pattern. Built
                 with &nbsp;

web/src/modules/Clusters/ClustersDetails/ClusterInformationPane.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react'
 import { ClusterType } from '../Helper'
-import styles from './_clustersDetails.module.scss'
 import { InformationPane, ListLoading } from '@patterninc/react-ui'
 import { formatDateWithTimeZone, myTimezone } from '@/common/Services'
 
@@ -42,7 +41,7 @@ const ClusterInformationPane = ({
     },
   ]
   return (
-    <div className={styles.informationPaneContainer}>
+    <div className='min-w-[300px]'>
       <InformationPane
         header={{
           labelAndData: {

web/src/modules/Clusters/ClustersDetails/ClustersDetails.tsx

@@ -4,7 +4,6 @@ import { getCluster } from '@/app/api/clusters/clusters'
 import { BreadcrumbContext } from '@/common/BreadCrumbsProvider/context'
 import { useQuery } from '@tanstack/react-query'
 import { useContext, useEffect } from 'react'
-import styles from './_clustersDetails.module.scss'
 import ClusterInformationPane from './ClusterInformationPane'
 import ClustersDetailsHeader from './ClustersDetailsHeader'
 
@@ -26,7 +25,7 @@ const ClustersDetails = ({ id }: ClusterDetailsProps): React.JSX.Element => {
   })
 
   return (
-    <div className={styles.clustersDetailsContainer}>
+    <div className='flex flex-col md:flex-row gap-4 pt-4 min-w-[300px] md:min-w-[300px]'>
       <ClusterInformationPane clusterData={data} isLoading={isLoading} />
       <ClustersDetailsHeader clusterData={data} isLoading={isLoading} />
     </div>

web/src/modules/Clusters/ClustersDetails/ClustersDetailsHeader.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react'
 import { ClusterDataTypeProps } from './ClusterInformationPane'
 
-import styles from './_clustersDetails.module.scss'
 import { ListLoading, PageHeader, SectionHeader } from '@patterninc/react-ui'
 import ApiResponseButton from '@/components/ApiResponseButton/ApiResponseButton'
 
@@ -12,7 +11,7 @@ const ClustersDetailsHeader = ({
   const data = useMemo(() => clusterData?.[0], [clusterData])
 
   return (
-    <div className={styles.clustersDetailsHeader}>
+    <div className='w-full'>
       <PageHeader
         rightSectionChildren={
           <ApiResponseButton
@@ -24,7 +23,7 @@ const ClustersDetailsHeader = ({
             <ListLoading />
           ) : (
             <div
-              className={`${styles.bottomSectionContainer} bgc-white pat-border-t bdrc-medium-purple`}
+              className='rounded overflow-auto bgc-white pat-border-t bdrc-medium-purple'
             >
               <div className='flex flex-direction-column pat-gap-4 pat-p-4'>
                 {data?.context?.properties ? (

web/src/modules/Commands/CommandDetails/CommandDetails.tsx

@@ -2,7 +2,6 @@
 
 import { BreadcrumbContext } from '@/common/BreadCrumbsProvider/context'
 import { useContext, useEffect } from 'react'
-import styles from './_commandDetails.module.scss'
 import CommandInformationPane from './CommandInformationPane'
 import { useQuery } from '@tanstack/react-query'
 import { getCommandDetails } from '@/app/api/commands/commands'
@@ -29,7 +28,7 @@ export const CommandDetails = ({
   })
 
   return (
-    <div className={styles.commandDetailsContainer}>
+    <div className='flex flex-col md:flex-row pat-gap-4 pat-pt-4 min-w-[300px] md:min-w-[300px]'>
       <CommandInformationPane
         commandData={data ? data : []}
         isLoading={isLoading}

web/src/modules/Commands/CommandDetails/CommandDetailsHeader.tsx

@@ -7,7 +7,7 @@ import {
   SectionHeader,
 } from '@patterninc/react-ui'
 import { CommandDetailsProps } from './CommandInformationPane'
-import styles from './_commandDetails.module.scss'
+
 import React, { useMemo } from 'react'
 import ApiResponseButton from '@/components/ApiResponseButton/ApiResponseButton'
 
@@ -18,7 +18,7 @@ const CommandDetailsHeader = ({
   const data = useMemo(() => commandData[0], [commandData])
 
   return (
-    <div className={`${styles.commandDetailsHeader}`}>
+    <div className='w-full'>
       <PageHeader
         rightSectionChildren={
           <ApiResponseButton
@@ -30,7 +30,7 @@ const CommandDetailsHeader = ({
             <ListLoading />
           ) : (
             <div
-              className={`${styles.bottomSectionContainer} bgc-white pat-border-t bdrc-medium-purple`}
+              className='rounded overflow-auto bgc-white pat-border-t bdrc-medium-purple'
             >
               <div className='flex flex-direction-column pat-gap-4 pat-p-4'>
                 {data?.context?.properties ? (

web/src/modules/Commands/CommandDetails/CommandInformationPane.tsx

@@ -2,7 +2,7 @@
 
 import { InformationPane, ListLoading } from '@patterninc/react-ui'
 import { CommandType } from '../Helper'
-import styles from './_commandDetails.module.scss'
+
 
 import { formatDateWithTimeZone, myTimezone } from '@/common/Services'
 import { useMemo } from 'react'
@@ -49,7 +49,7 @@ const CommandInformationPane = ({
     },
   ]
   return (
-    <div className={styles.informationPaneContainer}>
+    <div className='min-w-[300px]'>
       <InformationPane
         header={{
           labelAndData: {