fix: restyle account security/delete sections and add mobile navbar gap (#676)

* fix: full-bleed account security/delete sections with white copy and a delete acknowledgement gate

* fix: add a top gap below the navbar on account section screens (mobile)

* fix: use present tense in the delete acknowledgement copy

Author: LautaroPetaccio

src/components/account/DeleteAccount/DeleteAccountSection/DeleteAccountSection.spec.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from 'react'
+import type { ChangeEventHandler, ReactNode } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { DeleteAccountSection } from './DeleteAccountSection'
 
 type ChildrenProps = { children?: ReactNode; 'data-role'?: string }
 type ButtonProps = ChildrenProps & { onClick?: () => void; disabled?: boolean }
+type ControlProps = { control?: ReactNode; label?: ReactNode }
+type CheckboxProps = { checked?: boolean; onChange?: ChangeEventHandler<HTMLInputElement>; 'data-role'?: string }
 
 jest.mock('@mui/icons-material/AccountCircleRounded', () => ({ __esModule: true, default: () => <span /> }))
 jest.mock('@mui/icons-material/CardGiftcardRounded', () => ({ __esModule: true, default: () => <span /> }))
@@ -37,6 +39,16 @@ jest.mock('./DeleteAccountSection.styled', () => ({
       {children}
     </button>
   ),
+  AcknowledgeControl: ({ control, label }: ControlProps) => (
+    <label>
+      {control}
+      {label}
+    </label>
+  ),
+  AcknowledgeCheckbox: ({ checked, onChange, 'data-role': dataRole }: CheckboxProps) => (
+    <input type="checkbox" checked={checked} onChange={onChange} data-role={dataRole} />
+  ),
+  AcknowledgeLabel: ({ children }: ChildrenProps) => <span>{children}</span>,
   DeleteButton: ({ children, onClick, disabled, 'data-role': dataRole }: ButtonProps) => (
     <button type="button" data-role={dataRole} onClick={onClick} disabled={disabled}>
       {children}
@@ -89,12 +101,37 @@ describe('DeleteAccountSection', () => {
     expect(screen.getByText('account.delete.asset_warning_title')).toBeInTheDocument()
   })
 
-  it('should open the confirm modal when the delete button is clicked', () => {
+  it('should render the acknowledgement checkbox above the delete button', () => {
     renderSection(ADDRESS)
 
-    fireEvent.click(screen.getByRole('button', { name: 'account.delete.delete_button' }))
+    expect(screen.getByRole('checkbox', { name: 'account.delete.acknowledge' })).toBeInTheDocument()
+  })
+
+  describe('when the acknowledgement checkbox is unchecked', () => {
+    it('should keep the delete button disabled', () => {
+      renderSection(ADDRESS)
+
+      expect(screen.getByRole('button', { name: 'account.delete.delete_button' })).toBeDisabled()
+    })
+  })
+
+  describe('when the acknowledgement checkbox is checked', () => {
+    it('should enable the delete button', () => {
+      renderSection(ADDRESS)
+
+      fireEvent.click(screen.getByRole('checkbox', { name: 'account.delete.acknowledge' }))
+
+      expect(screen.getByRole('button', { name: 'account.delete.delete_button' })).toBeEnabled()
+    })
 
-    expect(onOpenConfirmModal).toHaveBeenCalledTimes(1)
+    it('should open the confirm modal when the delete button is clicked', () => {
+      renderSection(ADDRESS)
+
+      fireEvent.click(screen.getByRole('checkbox', { name: 'account.delete.acknowledge' }))
+      fireEvent.click(screen.getByRole('button', { name: 'account.delete.delete_button' }))
+
+      expect(onOpenConfirmModal).toHaveBeenCalledTimes(1)
+    })
   })
 
   it('should navigate to wallets when a non-Magic account clicks the export key link', () => {

src/components/account/DeleteAccount/DeleteAccountSection/DeleteAccountSection.styled.spec.tsx

@@ -0,0 +1,61 @@
+jest.mock('decentraland-ui2', () => {
+  const actual = jest.requireActual('../../../../__test-utils__/styledMock')
+  return { ...actual, Typography: actual.Box, Button: actual.Box, Checkbox: actual.Box, FormControlLabel: actual.Box }
+})
+
+import { render } from '@testing-library/react'
+import {
+  AcknowledgeCheckbox,
+  AcknowledgeControl,
+  AcknowledgeLabel,
+  AssetWarningBox,
+  AssetWarningDescription,
+  AssetWarningTextWrapper,
+  AssetWarningTitle,
+  BannerTextWrapper,
+  ConsequenceIcon,
+  ConsequenceItem,
+  ConsequenceText,
+  ConsequenceTitle,
+  ConsequencesList,
+  Container,
+  DangerBanner,
+  DangerBannerDescription,
+  DangerBannerTitle,
+  DeleteButton,
+  ExportKeyDescription,
+  ExportKeyLink,
+  WarningCard,
+  WarningDescription
+} from './DeleteAccountSection.styled'
+
+describe('DeleteAccountSection styled components', () => {
+  it('renders every styled component', () => {
+    render(
+      <>
+        <Container />
+        <DangerBanner />
+        <BannerTextWrapper />
+        <DangerBannerTitle />
+        <DangerBannerDescription />
+        <WarningCard />
+        <WarningDescription />
+        <ConsequencesList />
+        <ConsequenceItem />
+        <ConsequenceIcon />
+        <ConsequenceText />
+        <ConsequenceTitle />
+        <AssetWarningBox />
+        <AssetWarningTextWrapper />
+        <AssetWarningTitle />
+        <AssetWarningDescription />
+        <ExportKeyDescription />
+        <ExportKeyLink />
+        <AcknowledgeControl control={<span />} label="acknowledge" />
+        <AcknowledgeCheckbox />
+        <AcknowledgeLabel />
+        <DeleteButton />
+      </>
+    )
+  })
+})

src/components/account/DeleteAccount/DeleteAccountSection/DeleteAccountSection.styled.ts

@@ -1,16 +1,24 @@
-import { Box, Button, Typography, styled } from 'decentraland-ui2'
+import { Box, Button, Checkbox, FormControlLabel, Typography, styled } from 'decentraland-ui2'
 
 // Figma 797:78245 — Delete Account section. Colours mirror the DCL design
-// tokens used across the Account area: destructive DCL Red (#FF2D55), warning amber (#FFA500),
-// text #FCFCFC, muted #A09BA8. The warning card sits on the translucent panel (rgba(0,0,0,0.2)).
-// Hardcoded hexes follow the sibling Account styled files.
-
-const Container = styled(Box)({
+// tokens used across the Account area: destructive DCL Red (#FF2D55) and warning amber (#FFA500) stay
+// as semantic accents; all body copy is white (#FCFCFC), never muted. Hardcoded hexes follow the
+// sibling Account styled files.
+
+// The section is wrapped in the same translucent rounded panel that surrounds the Security section
+// (mirrors SecuritySection's Container), and stretches the full width of the account content column
+// (no maxWidth) so it matches the other account sections.
+const Container = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  gap: 16,
-  maxWidth: 660
-})
+  gap: theme.spacing(2),
+  padding: theme.spacing(2),
+  borderRadius: theme.spacing(2),
+  background: 'rgba(0, 0, 0, 0.2)',
+  [theme.breakpoints.up('md')]: {
+    padding: theme.spacing(3)
+  }
+}))
 
 const DangerBanner = styled(Box)({
   display: 'flex',
@@ -36,16 +44,14 @@ const DangerBannerTitle = styled(Typography)({
 })
 
 const DangerBannerDescription = styled(Typography)({
-  color: '#A09BA8',
+  color: '#FCFCFC',
   fontSize: 13,
   lineHeight: '20px'
 })
 
-const WarningCard = styled(Box)({
-  padding: 24,
-  borderRadius: 8,
-  backgroundColor: 'rgba(0, 0, 0, 0.2)'
-})
+// The section's outer Container is now the single translucent panel (matching the Security section),
+// so this no longer draws its own background — it only groups the "lost forever" copy + list.
+const WarningCard = styled(Box)({})
 
 const WarningDescription = styled(Typography)({
   color: '#FCFCFC',
@@ -65,7 +71,7 @@ const ConsequenceItem = styled('li')({
   display: 'flex',
   gap: 10,
   marginBottom: 12,
-  color: '#CFCDD4',
+  color: '#FCFCFC',
   fontSize: 14,
   lineHeight: '22px',
   alignItems: 'flex-start',
@@ -87,7 +93,7 @@ const ConsequenceIcon = styled('span')({
 })
 
 const ConsequenceText = styled('span')({
-  color: '#CFCDD4'
+  color: '#FCFCFC'
 })
 
 const ConsequenceTitle = styled('span')({
@@ -119,49 +125,76 @@ const AssetWarningTitle = styled(Typography)({
 })
 
 const AssetWarningDescription = styled(Typography)({
-  color: '#A09BA8',
+  color: '#FCFCFC',
   fontSize: 13,
   lineHeight: '20px'
 })
 
 const ExportKeyDescription = styled(Typography)({
-  color: '#A09BA8',
+  color: '#FCFCFC',
   fontSize: 13,
   lineHeight: '20px',
   marginTop: 4
 })
 
+// Rendered with variant="outlined" color="inherit" so it picks up the theme's NEUTRAL outlined
+// styling — a white (text.primary) label + subtle border that stays white on hover. The default
+// (primary) outlined variant turns the label red on hover via a high-specificity theme rule that a
+// styled() override can't beat, so we switch the colour scheme instead of fighting it. Only layout
+// (spacing + left alignment) is customised here; the rest comes from the theme.
 const ExportKeyLink = styled(Button)({
-  color: '#FFA500',
-  fontSize: 13,
-  fontWeight: 600,
-  marginTop: 4,
+  marginTop: 8,
+  alignSelf: 'flex-start'
+})
+
+// Confirmation gate above the delete button: the user must tick it to enable deletion.
+const AcknowledgeControl = styled(FormControlLabel)({
+  alignItems: 'flex-start',
+  margin: 0,
+  marginTop: 8,
+  gap: 8
+})
+
+const AcknowledgeCheckbox = styled(Checkbox)({
   padding: 0,
-  minWidth: 'auto',
-  textTransform: 'none',
-  justifyContent: 'flex-start',
-  alignSelf: 'flex-start',
-  ['&:hover']: {
-    textDecoration: 'underline',
-    backgroundColor: 'transparent'
+  color: 'rgba(252, 252, 252, 0.6)',
+  ['&.Mui-checked']: {
+    color: '#FF2D55'
   }
 })
 
-const DeleteButton = styled(Button)({
+const AcknowledgeLabel = styled(Typography)({
+  color: '#FCFCFC',
+  fontSize: 13,
+  lineHeight: '20px',
+  // The row is top-aligned (AcknowledgeControl uses alignItems: flex-start) so multi-line copy flows
+  // correctly beneath the first line. Nudge the label down 2px so the first line's optical centre
+  // lines up with the 24px checkbox instead of sitting slightly above it — (24 - 20) / 2.
+  marginTop: 2
+})
+
+// Figma 797:78245 — left-aligned destructive action. On mobile it stretches the full width of the
+// section (alignSelf: stretch); from md up it shrinks to its natural width, still left-aligned.
+const DeleteButton = styled(Button)(({ theme }) => ({
   marginTop: 8,
-  // Figma 797:78245 — the destructive action sits at the bottom-right of the section.
-  alignSelf: 'flex-end',
+  alignSelf: 'stretch',
   backgroundColor: '#FF2D55',
+  [theme.breakpoints.up('md')]: {
+    alignSelf: 'flex-start'
+  },
   ['&:hover']: {
     backgroundColor: '#E0264B'
   },
   ['&.Mui-disabled']: {
     backgroundColor: 'rgba(255, 45, 85, 0.4)',
     color: 'rgba(252, 252, 252, 0.6)'
   }
-})
+}))
 
 export {
+  AcknowledgeCheckbox,
+  AcknowledgeControl,
+  AcknowledgeLabel,
   AssetWarningBox,
   AssetWarningDescription,
   AssetWarningTextWrapper,

src/components/account/DeleteAccount/DeleteAccountSection/DeleteAccountSection.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 // eslint-disable-next-line @typescript-eslint/naming-convention
 import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded'
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -17,6 +18,9 @@ import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
 import { useFormatMessage } from '../../../../hooks/adapters/useFormatMessage'
 import { DeleteAccountSectionProps } from './DeleteAccountSection.types'
 import {
+  AcknowledgeCheckbox,
+  AcknowledgeControl,
+  AcknowledgeLabel,
   AssetWarningBox,
   AssetWarningDescription,
   AssetWarningTextWrapper,
@@ -57,6 +61,9 @@ const CONSEQUENCES = [
 const DeleteAccountSection = (props: DeleteAccountSectionProps) => {
   const { address, isMagic, onOpenConfirmModal, onGoToWallets, onGoToSecurity } = props
   const t = useFormatMessage()
+  // Deletion is gated on an explicit acknowledgement that the private key is backed up and the action
+  // is irreversible — the delete button stays disabled until this is ticked.
+  const [hasAcknowledged, setHasAcknowledged] = useState(false)
 
   return (
     <Container data-role="delete-account-section">
@@ -95,7 +102,8 @@ const DeleteAccountSection = (props: DeleteAccountSectionProps) => {
             {t(isMagic ? 'account.delete.export_key_description_magic' : 'account.delete.export_key_description')}
           </ExportKeyDescription>
           <ExportKeyLink
-            variant="text"
+            variant="outlined"
+            color="inherit"
             onClick={isMagic ? onGoToSecurity : onGoToWallets}
             data-role={isMagic ? 'delete-account-go-to-security' : 'delete-account-go-to-wallets'}
           >
@@ -104,7 +112,23 @@ const DeleteAccountSection = (props: DeleteAccountSectionProps) => {
         </AssetWarningTextWrapper>
       </AssetWarningBox>
 
-      <DeleteButton variant="contained" disabled={!address} onClick={onOpenConfirmModal} data-role="delete-account-open-confirm">
+      <AcknowledgeControl
+        control={
+          <AcknowledgeCheckbox
+            checked={hasAcknowledged}
+            onChange={event => setHasAcknowledged(event.target.checked)}
+            data-role="delete-account-acknowledge"
+          />
+        }
+        label={<AcknowledgeLabel>{t('account.delete.acknowledge')}</AcknowledgeLabel>}
+      />
+
+      <DeleteButton
+        variant="contained"
+        disabled={!address || !hasAcknowledged}
+        onClick={onOpenConfirmModal}
+        data-role="delete-account-open-confirm"
+      >
         {t('account.delete.delete_button')}
       </DeleteButton>
     </Container>