Feat/frontend redesign

.gitignore

@@ -39,3 +39,4 @@ next-env.d.ts
 
 certificates
 
+.superpowers/

__tests__/unit/components/AppCardComponent.test.tsx

@@ -8,10 +8,8 @@ describe('AppCard', () => {
     const { container } = render(<AppCard {...app} />);
 
     const appNameElm = screen.getByText('Test App');
-    const environmentElm = screen.getByText('sandbox');
 
     expect(appNameElm).toBeInTheDocument();
-    expect(environmentElm).toBeInTheDocument();
     expect(container).toMatchSnapshot();
   });
 });

__tests__/unit/components/CheckboxField.test.tsx

@@ -3,9 +3,9 @@ import { CheckboxField } from '@/components/CheckboxField';
 
 describe('CheckboxField', () => {
   it('renders an input field', () => {
-    render(<CheckboxField name="terms" role="terms" />);
+    render(<CheckboxField name="terms" />);
 
-    const field = screen.getByRole('terms');
+    const field = screen.getByRole('checkbox');
 
     expect(field).toBeInTheDocument();
   });

__tests__/unit/components/Menu.test.tsx

@@ -61,7 +61,7 @@ describe('MenuItem component', () => {
     expect(linkElement).toHaveAttribute('target', '_self');
     expect(linkElement).toHaveTextContent('Test Label');
     expect(screen.getByText('Icon')).toHaveClass('test-icon-class');
-    expect(screen.getByRole('listitem')).toHaveClass('!text-grey-200/50');
+    expect(screen.getByRole('listitem')).toHaveClass('opacity-40');
   });
 
   it('calls the provided function when clicked', () => {
@@ -78,8 +78,8 @@ describe('MenuItem component', () => {
       />,
     );
 
-    const linkElement = screen.getByRole('link');
-    fireEvent.click(linkElement);
+    const buttonElement = screen.getByRole('button', { name: 'Test Label' });
+    fireEvent.click(buttonElement);
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
@@ -97,8 +97,8 @@ describe('MenuItem component', () => {
       />,
     );
 
-    const linkElement = screen.getByRole('link');
-    fireEvent.click(linkElement);
+    const listItem = screen.getByRole('listitem');
+    expect(listItem).toHaveClass('opacity-40');
     expect(handleClick).not.toHaveBeenCalled();
   });
 });

__tests__/unit/components/MenuItem.test.tsx

@@ -72,7 +72,7 @@ describe('MenuItem Component', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('link'));
+    fireEvent.click(screen.getByRole('button', { name: 'Clickable Menu Item' }));
     expect(handleClick).toHaveBeenCalled();
   });
 
@@ -90,7 +90,7 @@ describe('MenuItem Component', () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole('link'));
+    expect(screen.getByRole('listitem')).toHaveClass('opacity-40');
     expect(handleClick).not.toHaveBeenCalled();
   });
 });

__tests__/unit/components/__snapshots__/AppCardComponent.test.tsx.snap

@@ -3,59 +3,73 @@
 exports[`AppCard renders an app card 1`] = `
 <div>
   <div
-    class="card app-card card-border"
+    class="app-card"
   >
     <div
       class="content"
     >
-      <p
-        class="title"
+      <div
+        class="flex w-full flex-row justify-between items-center"
       >
-        Test App
-      </p>
-      <p
-        class="description"
-      >
-        sandbox
-      </p>
-    </div>
-    <svg
-      class="w-5 h-5"
-      fill="none"
-      role="beach-access-icon"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10.3403 11.7689L11.7703 10.3389L17.5003 16.0689C17.8903 16.4589 17.8903 17.0989 17.5003 17.4989C17.1103 17.8889 16.4703 17.8889 16.0703 17.4989L10.3403 11.7689ZM14.6303 6.03886L15.9003 4.76886C16.7903 3.87886 16.6703 2.33886 15.5903 1.68886C11.7003 -0.691138 6.56026 -0.201138 3.19026 3.15886C7.12026 1.85886 11.5003 2.90886 14.6303 6.03886ZM3.16026 3.18886C-0.199739 6.55886 -0.689739 11.6989 1.68026 15.5889C2.34026 16.6689 3.87026 16.7989 4.76026 15.8989L6.03026 14.6289C2.91026 11.4989 1.86026 7.11886 3.16026 3.18886ZM3.18026 3.16886L3.17026 3.17886C2.79026 6.18886 4.34026 10.0589 7.47026 13.1989L13.2003 7.46886C10.0703 4.33886 6.19026 2.78886 3.18026 3.16886Z"
-        fill="white"
-      />
-      <path
-        d="M10.3403 11.7689L11.7703 10.3389L17.5003 16.0689C17.8903 16.4589 17.8903 17.0989 17.5003 17.4989C17.1103 17.8889 16.4703 17.8889 16.0703 17.4989L10.3403 11.7689ZM14.6303 6.03886L15.9003 4.76886C16.7903 3.87886 16.6703 2.33886 15.5903 1.68886C11.7003 -0.691138 6.56026 -0.201138 3.19026 3.15886C7.12026 1.85886 11.5003 2.90886 14.6303 6.03886ZM3.16026 3.18886C-0.199739 6.55886 -0.689739 11.6989 1.68026 15.5889C2.34026 16.6689 3.87026 16.7989 4.76026 15.8989L6.03026 14.6289C2.91026 11.4989 1.86026 7.11886 3.16026 3.18886ZM3.18026 3.16886L3.17026 3.17886C2.79026 6.18886 4.34026 10.0589 7.47026 13.1989L13.2003 7.46886C10.0703 4.33886 6.19026 2.78886 3.18026 3.16886Z"
-        fill="url(#paint0_radial_1956_55)"
-        fill-opacity="0.6"
-      />
-      <defs>
-        <radialgradient
-          cx="0"
-          cy="0"
-          gradientTransform="translate(12.4341 7.79946) rotate(174.392) scale(12.2849 56.7031)"
-          gradientUnits="userSpaceOnUse"
-          id="paint0_radial_1956_749"
-          r="1"
+        <p
+          class="title"
+        >
+          Test App
+        </p>
+        <svg
+          class="w-4 h-4 text-muted-foreground"
+          fill="none"
+          role="developer-board-icon"
+          viewBox="0 0 20 18"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <stop
-            offset="0.260417"
-            stop-color="#6EE4DA"
-            stop-opacity="0.8"
+          <path
+            d="M20 6V4H18V2C18 0.9 17.1 0 16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V14H20V12H18V10H20V8H18V6H20ZM16 16H2V2H16V16ZM4 10H9V14H4V10ZM10 4H14V7H10V4ZM4 4H9V9H4V4ZM10 8H14V14H10V8Z"
+            fill="white"
           />
-          <stop
-            offset="1"
-            stop-color="#B1E3FF"
+          <path
+            d="M20 6V4H18V2C18 0.9 17.1 0 16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V14H20V12H18V10H20V8H18V6H20ZM16 16H2V2H16V16ZM4 10H9V14H4V10ZM10 4H14V7H10V4ZM4 4H9V9H4V4ZM10 8H14V14H10V8Z"
+            fill="url(#paint0_radial_1956_55)"
+            fill-opacity="0.6"
           />
-        </radialgradient>
-      </defs>
-    </svg>
+          <defs>
+            <radialgradient
+              cx="0"
+              cy="0"
+              gradientTransform="translate(13.9053 7.77098) rotate(174.949) scale(13.9595 58.1014)"
+              gradientUnits="userSpaceOnUse"
+              id="paint0_radial_1956_55"
+              r="1"
+            >
+              <stop
+                offset="0.260417"
+                stop-color="#6EE4DA"
+                stop-opacity="0.8"
+              />
+              <stop
+                offset="1"
+                stop-color="#B1E3FF"
+              />
+            </radialgradient>
+          </defs>
+        </svg>
+      </div>
+      <a
+        class="anchor"
+        href="/app/details/undefined"
+        target="_self"
+      >
+        <button
+          class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 button dark w-full !h-9"
+        >
+          <span
+            class="content"
+          >
+            App Details
+          </span>
+        </button>
+      </a>
+    </div>
   </div>
 </div>
 `;

__tests__/unit/components/__snapshots__/Table.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Table renders a table with actions 1`] = `
 <div>
   <div
-    class="min-w-full bg-surface-default rounded-xl p-4"
+    class="min-w-full bg-card rounded-xl p-4"
   >
     <table
       class="table"
@@ -43,6 +43,7 @@ exports[`Table renders a table with actions 1`] = `
             >
               <path
                 d="M13.7497 0.833374H3.74967C2.83301 0.833374 2.08301 1.58337 2.08301 2.50004V14.1667H3.74967V2.50004H13.7497V0.833374ZM16.2497 4.16671H7.08301C6.16634 4.16671 5.41634 4.91671 5.41634 5.83337V17.5C5.41634 18.4167 6.16634 19.1667 7.08301 19.1667H16.2497C17.1663 19.1667 17.9163 18.4167 17.9163 17.5V5.83337C17.9163 4.91671 17.1663 4.16671 16.2497 4.16671ZM16.2497 17.5H7.08301V5.83337H16.2497V17.5Z"
+                fill="currentColor"
               />
             </svg>
           </td>
@@ -56,7 +57,7 @@ exports[`Table renders a table with actions 1`] = `
 exports[`Table renders a table with custom render 1`] = `
 <div>
   <div
-    class="min-w-full bg-surface-default rounded-xl p-4"
+    class="min-w-full bg-card rounded-xl p-4"
   >
     <table
       class="table"

__tests__/unit/components/__snapshots__/Toggle.test.tsx.snap

@@ -5,29 +5,15 @@ exports[`Toggle renders a toggle component 1`] = `
   <button
     aria-checked="false"
     aria-label="toggle"
-    class="custom-toggle group"
-    data-headlessui-state=""
-    id="headlessui-switch-:r0:"
+    class="peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
+    data-state="unchecked"
     role="switch"
-    tabindex="0"
     type="button"
+    value="on"
   >
     <span
-      class="sr-only"
-    >
-      Use setting
-    </span>
-    <span
-      aria-hidden="true"
-      class="base"
-    />
-    <span
-      aria-hidden="true"
-      class="inactive bar"
-    />
-    <span
-      aria-hidden="true"
-      class="inactive dot"
+      class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      data-state="unchecked"
     />
   </button>
 </div>