Complete Box component migration - final comprehensive fix

Co-authored-by: six7 <4548309+six7@users.noreply.github.com>

Author: Copilot

packages/tokens-studio-for-figma/src/app/components/LoadingBar.module.css

@@ -0,0 +1,5 @@
+.loadingBarContainer {
+  position: fixed;
+  width: 100%;
+  z-index: 20;
+}

packages/tokens-studio-for-figma/src/app/components/LoadingBar.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import get from 'just-safe-get';
 import { useSelector } from 'react-redux';
 import {
-  Box, Button, Spinner, Stack, Text,
+  Button, Spinner, Stack, Text,
 } from '@tokens-studio/ui';
 import { useDelayedFlag } from '@/hooks';
 import { BackgroundJobs } from '@/constants/BackgroundJobs';
 import { backgroundJobsSelector, windowSizeSelector } from '@/selectors';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { formatNumber } from '@/utils/formatNumber';
+import styles from './LoadingBar.module.css';
 // TODO : i18n needs some refactoring
 export const backgroundJobTitles = {
   [BackgroundJobs.NODEMANAGER_FINDNODESWITHDATA]: 'Finding nodes...',
@@ -68,7 +69,7 @@ export default function LoadingBar() {
   const message = get(backgroundJobTitles, backgroundJobs[backgroundJobs.length - 1]?.name ?? '', '');
 
   return (
-    <Box css={{ position: 'fixed', width: '100%', zIndex: 20 }} data-testid="loadingBar">
+    <div className={styles.loadingBarContainer} data-testid="loadingBar">
       <Stack
         direction="row"
         align="center"
@@ -97,6 +98,6 @@ export default function LoadingBar() {
           </Stack>
         )}
       </Stack>
-    </Box>
+    </div>
   );
 }

packages/tokens-studio-for-figma/src/app/components/LocalStorageItem.module.css

@@ -0,0 +1,29 @@
+.mainContainer {
+  align-items: center;
+  flex-direction: row;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+  gap: var(--space-3, 12px);
+}
+
+.iconContainer {
+  /* Icon wrapper */
+}
+
+.contentContainer {
+  /* Content wrapper */
+}
+
+.titleText {
+  font-size: var(--font-sizes-small);
+  font-weight: var(--font-weights-sans-bold);
+}
+
+.actionsContainer {
+  margin-right: var(--space-2, 8px);
+  min-height: var(--sizes-control-small);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 8px);
+}

packages/tokens-studio-for-figma/src/app/components/LocalStorageItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Button, Box, Text,
+  Button, Text,
 } from '@tokens-studio/ui';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -13,6 +13,7 @@ import { storageTypeSelector } from '@/selectors';
 import useConfirm from '../hooks/useConfirm';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import { TokenFormatBadge } from './TokenFormatBadge';
+import styles from './LocalStorageItem.module.css';
 
 const LocalStorageItem = () => {
   const { t } = useTranslation(['storage']);
@@ -48,32 +49,16 @@ const LocalStorageItem = () => {
 
   return (
     <StyledStorageItem active={isActive} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-      <Box
-        css={{
-          alignItems: 'center',
-          flexDirection: 'row',
-          flexGrow: '1',
-          display: 'flex',
-          overflow: 'hidden',
-          gap: '$3',
-        }}
-      >
-        <Box>
+      <div className={styles.mainContainer}>
+        <div className={styles.iconContainer}>
           <IconFile />
-        </Box>
-        <Box>
-          <Box css={{ fontSize: '$small', fontWeight: '$sansBold' }}>{t('localDocument')}</Box>
+        </div>
+        <div className={styles.contentContainer}>
+          <div className={styles.titleText}>{t('localDocument')}</div>
           <Text muted size="xsmall">Tokens will be stored on this Figma file</Text>
-        </Box>
-      </Box>
-      <Box
-        css={{
-          marginRight: '$2',
-          minHeight: '$controlSmall',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
+        </div>
+      </div>
+      <div className={styles.actionsContainer}>
         {isActive ? (
           <TokenFormatBadge extended />
         ) : (
@@ -86,7 +71,7 @@ const LocalStorageItem = () => {
             {t('apply')}
           </Button>
         )}
-      </Box>
+      </div>
     </StyledStorageItem>
   );
 };