Use normal btns in gear piece instead of icon btns for clarity

Author: apache1123

playwright.config.ts

@@ -78,4 +78,10 @@ export default defineConfig({
     timeout: 120 * 1000,
     reuseExistingServer: true,
   },
+
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.05,
+    },
+  },
 });

src/features/GearOCRModal.tsx

@@ -1,4 +1,3 @@
-import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
 import { Box, Typography } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import BigNumber from 'bignumber.js';
@@ -90,8 +89,8 @@ export const GearOCRModal = ({
 
   return (
     <ButtonModal
-      buttonText="Upload gear"
-      modalTitle="Upload gear by using screenshot"
+      buttonText="Import gear"
+      modalTitle="Import gear by using screenshot"
       modalContent={
         <>
           <Grid container>
@@ -158,9 +157,8 @@ export const GearOCRModal = ({
           </Grid>
         </>
       }
-      icon={<AddPhotoAlternateIcon />}
       iconButton={iconButton}
-      aria-label="upload-gear"
+      aria-label="import-gear"
       showConfirm
       showCancel
       isConfirmDisabled={!tempGearSnap}

src/features/GearPiece.tsx

@@ -5,16 +5,15 @@ import {
   AccordionSummary,
   Box,
   Paper,
+  Stack,
   Typography,
 } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import type { ReactNode } from 'react';
 
-import { GearStarsSelector } from '../components/GearStarsSelector/GearStarsSelector';
 import { GearTypeIcon } from '../components/GearTypeIcon/GearTypeIcon';
 import { GearTypeSelector } from '../components/GearTypeSelector/GearTypeSelector';
 import type { CoreElementalType } from '../constants/elemental-type';
-import { defaultNumOfRandomStats } from '../constants/gear';
 import { Gear } from '../models/gear';
 import type { GearType } from '../models/gear-type';
 import { getPossibleRandomStatTypes } from '../models/gear-type';
@@ -25,7 +24,7 @@ import { GearAttackStatsSummary } from './GearAttackStatsSummary';
 import { GearOCRModal } from './GearOCRModal';
 import { GearRollBreakdown } from './GearRollBreakdown';
 import { GearStars } from './GearStars';
-import { DisabledStatEditor, EmptyStatEditor, StatEditor } from './StatEditor';
+import { EmptyStatEditor, StatEditor } from './StatEditor';
 
 export interface GearPieceProps {
   gearSnap: Gear;
@@ -103,7 +102,6 @@ export const GearPiece = ({
               enforceGearType={
                 disableGearTypeChange ? gearSnap.type.id : undefined
               }
-              iconButton
             />
           )}
           {showSaveGearButton && showSaveGearButton.targetLoadout && (
@@ -164,47 +162,6 @@ export const GearPiece = ({
   );
 };
 
-export interface EmptyGearPieceProps {
-  onGearTypeSelect(gearType: GearType): void;
-  showGearOCRButton?: boolean;
-  onReplaceGear?(gear: Gear): void;
-  ['data-testid']?: string;
-}
-
-export const EmptyGearPiece = ({
-  onGearTypeSelect,
-  showGearOCRButton,
-  onReplaceGear,
-  'data-testid': dataTestId,
-}: EmptyGearPieceProps) => {
-  return (
-    <Layout
-      typeIcon={<GearTypeIcon gearName={undefined} size={80} />}
-      typeSelector={
-        <GearTypeSelector
-          selectedGearType={undefined}
-          onChange={onGearTypeSelect}
-        />
-      }
-      starsSelector={<GearStarsSelector stars={0} disabled />}
-      randomStats={[...Array(defaultNumOfRandomStats)].map((_, i) => (
-        <DisabledStatEditor key={i} />
-      ))}
-      additionalActions={
-        showGearOCRButton && (
-          <GearOCRModal
-            onFinalizeGear={(gear) => {
-              if (onReplaceGear) onReplaceGear(gear);
-            }}
-          />
-        )
-      }
-      summary={undefined}
-      data-testid={dataTestId}
-    />
-  );
-};
-
 function Layout({
   typeIcon,
   typeSelector,
@@ -224,18 +181,18 @@ function Layout({
 }) {
   return (
     <Paper sx={{ p: 2 }} square elevation={2} data-testid={dataTestId}>
-      <Grid container spacing={2} mb={2}>
+      <Grid container spacing={2}>
         <Grid maxWidth={90} display="flex" alignItems="center">
           {typeIcon}
         </Grid>
         <Grid xs display="flex" flexDirection="column" justifyContent="center">
           {typeSelector}
           <Box mt={1}>{starsSelector}</Box>
         </Grid>
-        <Grid display="flex" flexDirection="column">
-          {additionalActions}
-        </Grid>
       </Grid>
+      <Stack direction="row-reverse" spacing={1} mb={1}>
+        {additionalActions}
+      </Stack>
       <Box mb={3}>{randomStats}</Box>
       <Box>{summary}</Box>
     </Paper>

src/features/gear-comparer/SaveGearModal.tsx

@@ -1,5 +1,3 @@
-import SaveIcon from '@mui/icons-material/Save';
-
 import { ButtonModal } from '../../components/Modal/ButtonModal';
 import { Gear } from '../../models/gear';
 import type { Loadout } from '../../models/loadout';
@@ -24,8 +22,6 @@ export function SaveGearModal({ gear, targetLoadout }: SaveGearModalProps) {
           Gear.copy(gear, newGear);
           targetLoadout.replaceGear(newGear);
         }}
-        icon={<SaveIcon />}
-        iconButton
       />
     </>
   );

tests/gear-comparer.spec.ts

@@ -36,13 +36,13 @@ test('persists element specific user stat values', async ({ page }) => {
   await expect(page.getByLabel('Wanderer level')).toHaveValue(characterLevel);
 });
 
-test('upload gear, ocr fills in correct gear', async ({ page }) => {
+test('import gear, ocr fills in correct gear', async ({ page }) => {
   await page.goto('/gear-comparer');
   await dismissChangelog(page);
 
   await page
     .getByTestId('loadout-gear')
-    .getByLabel('upload-gear')
+    .getByLabel('import-gear')
     .first()
     .click();
   const fileChooserPromise = page.waitForEvent('filechooser');