From b949bf149d64b49785c5ab62e2f778a412bbc988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20T=C3=B3rz?= <tomasz.torz@l2beat.com>
Date: Thu, 3 Oct 2024 14:32:25 +0200
Subject: [PATCH] design update

---
 .../components/PerformUserActionsPanel.tsx    | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/packages/frontend/src/view/pages/user/components/PerformUserActionsPanel.tsx b/packages/frontend/src/view/pages/user/components/PerformUserActionsPanel.tsx
index f6911ec45..803b155c4 100644
--- a/packages/frontend/src/view/pages/user/components/PerformUserActionsPanel.tsx
+++ b/packages/frontend/src/view/pages/user/components/PerformUserActionsPanel.tsx
@@ -3,6 +3,7 @@ import { StarkKey } from '@explorer/types'
 import React from 'react'
 
 import { Button } from '../../../components/Button'
+import { Card } from '../../../components/Card'
 
 interface PerformUserActionsPanelProps {
   starkKey: StarkKey
@@ -20,40 +21,40 @@ export function PerformUserActionsPanel(props: PerformUserActionsPanelProps) {
   ) {
     return null
   }
-  return (
+  return !props.performUserActions ? (
+    <section>
+      <Card>
+        <p className="mb-2 font-bold">
+          Do you want to enable actions for this user?
+        </p>
+        <div className="flex gap-4 max-md:flex-col">
+          <p className="flex-1 text-sm font-semibold leading-[1.15]">
+            You are not connected to this user's wallet. You can enable Escape
+            Hatch operations and pay their gas cost, but all withdrawals will go
+            to this user's address, not yours.
+          </p>
+          <Button
+            as="a"
+            href="?performUserActions=true"
+            variant="outlined"
+            className="w-full md:w-48"
+          >
+            Enable
+          </Button>
+        </div>
+      </Card>
+    </section>
+  ) : (
     <section>
       <div className="-mx-4 flex flex-col gap-3 rounded-lg bg-yellow-300 bg-opacity-20 px-6 py-5 text-lg font-semibold sm:mx-0">
-        {!props.performUserActions ? (
-          <>
-            <p className="font-bold text-yellow-300">
-              Do you want to perform actions for this user?
-            </p>
-            <p className="mb-1.5 flex-1 text-sm font-semibold">
-              You are not connected to this user's wallet. You can enable Escape
-              Hatch operations and pay their gas cost, but all withdrawals will
-              go to this user's address, not yours.
-            </p>
-            <Button
-              as="a"
-              href="?performUserActions=true"
-              className="w-full bg-yellow-300 leading-tight text-black hover:!bg-[#fdf17c]"
-              size="lg"
-            >
-              Perform
-            </Button>
-          </>
-        ) : (
-          <>
-            <p className="font-bold text-yellow-300">
-              You can perform actions for this user
-            </p>
-            <p className="mb-1.5 text-sm font-semibold">
-              You are not connected to this user's wallet. You can still perform
-              Escape Hatch operations for this user (and pay their gas costs)
-              but all withdrawals will go to this user's address, not yours.
-            </p>
-          </>
-        )}
+        <p className="font-bold text-yellow-300">
+          You have enabled performing actions for this user
+        </p>
+        <p className="mb-1.5 text-sm font-semibold">
+          You are not connected to this user's wallet. You can still perform
+          Escape Hatch operations for this user (and pay their gas costs) but
+          all withdrawals will go to this user's address, not yours.
+        </p>
       </div>
     </section>
   )