chore(frontend): update to tailwind 4.0 with dashboard container file…

… sync closes #1771 Tailwind 4.0 has a dependency that depends on OS specific binaries. See [issue](tailwindlabs/tailwindcss#15806). Since we were pointing dashboard container volume to local directory, this causes issues since dev machine local OS won't match with container OS and the OS specific binary can't be found. Therefore, to update to tailwind 4.0, this commit: - Removes local volumes from dashboard container - Sync contents of frontend/dashboard to /app directory in dashboard container - Updates tailwind classes, packages etc as required - Updates tests
measure-sh · Mar 10, 2025 · 3925bcb · 3925bcb
1 parent deec73b
commit 3925bcb
Show file tree

Hide file tree

Showing 40 changed files with 2,829 additions and 2,790 deletions.
diff --git a/frontend/dashboard/__tests__/components/__snapshots__/accordion_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/accordion_test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Accordion renders correctly in collapsed state 1`] = `
           <button
             aria-controls="accordion-text-ID"
             aria-expanded="false"
-            class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+            class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
           >
             <span>
               TITLE
@@ -67,7 +67,7 @@ exports[`Accordion renders correctly in collapsed state 1`] = `
         <button
           aria-controls="accordion-text-ID"
           aria-expanded="false"
-          class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+          class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
         >
           <span>
             TITLE
@@ -179,7 +179,7 @@ exports[`Accordion renders correctly in opened state 1`] = `
           <button
             aria-controls="accordion-text-ID"
             aria-expanded="true"
-            class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+            class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
           >
             <span>
               TITLE
@@ -191,14 +191,14 @@ exports[`Accordion renders correctly in opened state 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
-                class="ttransform origin-center transition duration-200 ease-out !rotate-180"
+                class="ttransform origin-center transition duration-200 ease-out rotate-180!"
                 height="2"
                 rx="1"
                 width="16"
                 y="7"
               />
               <rect
-                class="transform origin-center rotate-90 transition duration-200 ease-out !rotate-180"
+                class="transform origin-center rotate-90 transition duration-200 ease-out rotate-180!"
                 height="2"
                 rx="1"
                 width="16"
@@ -234,7 +234,7 @@ exports[`Accordion renders correctly in opened state 1`] = `
         <button
           aria-controls="accordion-text-ID"
           aria-expanded="true"
-          class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+          class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
         >
           <span>
             TITLE
@@ -246,14 +246,14 @@ exports[`Accordion renders correctly in opened state 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <rect
-              class="ttransform origin-center transition duration-200 ease-out !rotate-180"
+              class="ttransform origin-center transition duration-200 ease-out rotate-180!"
               height="2"
               rx="1"
               width="16"
               y="7"
             />
             <rect
-              class="transform origin-center rotate-90 transition duration-200 ease-out !rotate-180"
+              class="transform origin-center rotate-90 transition duration-200 ease-out rotate-180!"
               height="2"
               rx="1"
               width="16"
@@ -346,7 +346,7 @@ exports[`Accordion renders correctly once it's openened and closed again 1`] = `
           <button
             aria-controls="accordion-text-ID"
             aria-expanded="true"
-            class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+            class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
           >
             <span>
               TITLE
@@ -358,14 +358,14 @@ exports[`Accordion renders correctly once it's openened and closed again 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <rect
-                class="ttransform origin-center transition duration-200 ease-out !rotate-180"
+                class="ttransform origin-center transition duration-200 ease-out rotate-180!"
                 height="2"
                 rx="1"
                 width="16"
                 y="7"
               />
               <rect
-                class="transform origin-center rotate-90 transition duration-200 ease-out !rotate-180"
+                class="transform origin-center rotate-90 transition duration-200 ease-out rotate-180!"
                 height="2"
                 rx="1"
                 width="16"
@@ -401,7 +401,7 @@ exports[`Accordion renders correctly once it's openened and closed again 1`] = `
         <button
           aria-controls="accordion-text-ID"
           aria-expanded="true"
-          class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+          class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
         >
           <span>
             TITLE
@@ -413,14 +413,14 @@ exports[`Accordion renders correctly once it's openened and closed again 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <rect
-              class="ttransform origin-center transition duration-200 ease-out !rotate-180"
+              class="ttransform origin-center transition duration-200 ease-out rotate-180!"
               height="2"
               rx="1"
               width="16"
               y="7"
             />
             <rect
-              class="transform origin-center rotate-90 transition duration-200 ease-out !rotate-180"
+              class="transform origin-center rotate-90 transition duration-200 ease-out rotate-180!"
               height="2"
               rx="1"
               width="16"
@@ -513,7 +513,7 @@ exports[`Accordion renders correctly once it's openened and closed again 2`] = `
           <button
             aria-controls="accordion-text-ID"
             aria-expanded="false"
-            class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+            class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
           >
             <span>
               TITLE
@@ -568,7 +568,7 @@ exports[`Accordion renders correctly once it's openened and closed again 2`] = `
         <button
           aria-controls="accordion-text-ID"
           aria-expanded="false"
-          class="flex items-center justify-between w-full text-left py-2 outline-none focus-visible:outline-yellow-300"
+          class="flex items-center justify-between w-full text-left py-2 outline-hidden focus-visible:outline-yellow-300"
         >
           <span>
             TITLE

diff --git a/frontend/dashboard/__tests__/components/__snapshots__/alert_dialog_modal_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/alert_dialog_modal_test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
               class="py-2"
             />
             <button
-              class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+              class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
               type="button"
             >
               SOME AFFIRMATIVE TEXT
@@ -46,7 +46,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
             class="py-2"
           />
           <button
-            class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+            class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
             type="button"
           >
             SOME AFFIRMATIVE TEXT
@@ -129,7 +129,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
               class="py-2"
             />
             <button
-              class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+              class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
               type="button"
             >
               SOME AFFIRMATIVE TEXT
@@ -155,7 +155,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
             class="py-2"
           />
           <button
-            class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+            class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
             type="button"
           >
             SOME AFFIRMATIVE TEXT

diff --git a/...tend/dashboard/__tests__/components/__snapshots__/danger_confirmation_modal_test.tsx.snap b/...tend/dashboard/__tests__/components/__snapshots__/danger_confirmation_modal_test.tsx.snap
@@ -23,7 +23,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
               class="flex flex-row"
             >
               <button
-                class="outline-none bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
+                class="outline-hidden bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
                 type="button"
               >
                 SOME AFFIRMATIVE TEXT
@@ -32,7 +32,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
                 class="px-1"
               />
               <button
-                class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+                class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
                 type="button"
               >
                 SOME CANCEL TEXT
@@ -62,7 +62,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
             class="flex flex-row"
           >
             <button
-              class="outline-none bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
+              class="outline-hidden bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
               type="button"
             >
               SOME AFFIRMATIVE TEXT
@@ -71,7 +71,7 @@ exports[`Alert Dialog Modal renders correctly in closed state 1`] = `
               class="px-1"
             />
             <button
-              class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+              class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
               type="button"
             >
               SOME CANCEL TEXT
@@ -158,7 +158,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
               class="flex flex-row"
             >
               <button
-                class="outline-none bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
+                class="outline-hidden bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
                 type="button"
               >
                 SOME AFFIRMATIVE TEXT
@@ -167,7 +167,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
                 class="px-1"
               />
               <button
-                class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+                class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
                 type="button"
               >
                 SOME CANCEL TEXT
@@ -197,7 +197,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
             class="flex flex-row"
           >
             <button
-              class="outline-none bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
+              class="outline-hidden bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 active:bg-red-800 font-display text-white rounded-md border border-black transition-colors duration-100 py-2 px-4"
               type="button"
             >
               SOME AFFIRMATIVE TEXT
@@ -206,7 +206,7 @@ exports[`Alert Dialog Modal renders correctly in opened state 1`] = `
               class="px-1"
             />
             <button
-              class="outline-none hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
+              class="outline-hidden hover:bg-yellow-200 focus-visible:bg-yellow-200 active:bg-yellow-300 font-display border border-black rounded-md transition-colors duration-100 py-2 px-4"
               type="button"
             >
               SOME CANCEL TEXT

diff --git a/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap b/frontend/dashboard/__tests__/components/__snapshots__/filter_pill_test.tsx.snap
@@ -9,7 +9,7 @@ exports[`FilterPill renders correctly 1`] = `
         class="group relative select-none"
       >
         <p
-          class="px-2 py-1 max-w-72 whitespace-nowrap text-ellipsis overflow-hidden text-white bg-neutral-950 font-display text-sm border border-black rounded-full outline-none transition ease-in-out transition-colors duration-100"
+          class="px-2 py-1 max-w-72 whitespace-nowrap text-ellipsis overflow-hidden text-white bg-neutral-950 font-display text-sm border border-black rounded-full outline-hidden transition ease-in-out transition-colors duration-100"
         >
           TITLE
         </p>
@@ -26,7 +26,7 @@ exports[`FilterPill renders correctly 1`] = `
       class="group relative select-none"
     >
       <p
-        class="px-2 py-1 max-w-72 whitespace-nowrap text-ellipsis overflow-hidden text-white bg-neutral-950 font-display text-sm border border-black rounded-full outline-none transition ease-in-out transition-colors duration-100"
+        class="px-2 py-1 max-w-72 whitespace-nowrap text-ellipsis overflow-hidden text-white bg-neutral-950 font-display text-sm border border-black rounded-full outline-hidden transition ease-in-out transition-colors duration-100"
       >
         TITLE
       </p>