fix(client): add padding to the user token section (#55101)

client/src/components/settings/user-token.tsx

@@ -27,14 +27,11 @@ class UserToken extends Component<UserTokenProps> {
     const { t } = this.props;
 
     return (
-      <div
-        data-playwright-test-label='user-token'
-        className='user-token text-center'
-      >
-        <FullWidthRow>
-          <Panel variant='info'>
-            <Panel.Heading>{t('user-token.title')}</Panel.Heading>
-            <Spacer size='medium' />
+      <FullWidthRow>
+        <Panel variant='info' className='text-center'>
+          <Panel.Heading>{t('user-token.title')}</Panel.Heading>
+          <Spacer size='medium' />
+          <Panel.Body>
             <p>{t('user-token.delete-p1')}</p>
             <FullWidthRow>
               <Spacer size='small' />
@@ -49,9 +46,9 @@ class UserToken extends Component<UserTokenProps> {
               </Button>
               <Spacer size='medium' />
             </FullWidthRow>
-          </Panel>
-        </FullWidthRow>
-      </div>
+          </Panel.Body>
+        </Panel>
+      </FullWidthRow>
     );
   }
 }

e2e/user-token.spec.ts

@@ -13,7 +13,9 @@ test.afterAll(() => {
 test.describe('Initially', () => {
   test('should not render', async ({ page }) => {
     await page.goto('/settings');
-    await expect(page.getByTestId('user-token')).not.toBeVisible();
+    await expect(
+      page.getByText('User Token', { exact: true })
+    ).not.toBeVisible();
   });
 });
 
@@ -25,11 +27,20 @@ test.describe('After creating token', () => {
     await page.getByRole('button', { name: 'Start the course' }).click();
 
     await page.goto('/settings');
-    await expect(page.getByTestId('user-token')).toBeVisible();
+    // Set `exact` to `true` to only match the panel heading
+    await expect(page.getByText('User Token', { exact: true })).toBeVisible();
+    await expect(
+      page.getByText(
+        'Your user token is used to save your progress on curriculum sections that use a virtual machine. If you suspect it has been compromised, you can delete it without losing any progress. A new one will be created automatically the next time you open a project.'
+      )
+    ).toBeVisible();
     await page.getByRole('button', { name: 'Delete my user token' }).click();
-    await expect(page.getByTestId('flash-message')).toContainText(
+
+    await expect(page.getByRole('alert')).toContainText(
       /Your user token has been deleted./
     );
-    await expect(page.getByTestId('user-token')).not.toBeVisible();
+    await expect(
+      page.getByText('User Token', { exact: true })
+    ).not.toBeVisible();
   });
 });