u

src/components/tiles/ArticleTile.jsx

@@ -2,6 +2,7 @@ import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
 import Typography from '@mui/material/Typography';
 import { Tile } from './Tile';
 import { formatPrice } from '../../utils/price';
+import { articleSku } from '../../pages/artikel/articleRoute';
 
 export class ArticleTile extends Tile {
   renderIcon() {
@@ -11,14 +12,17 @@ export class ArticleTile extends Tile {
   renderSecondary() {
     const { article } = this.props;
     if (!article) return null;
+    const sku = articleSku(article);
     return (
       <>
-        <Typography variant="caption" color="text.secondary" noWrap sx={{ maxWidth: '100%' }}>
-          {article.sku}
-        </Typography>
-        {article.price != null && (
+        {sku ? (
+          <Typography variant="caption" color="text.secondary" noWrap sx={{ maxWidth: '100%' }}>
+            {sku}
+          </Typography>
+        ) : null}
+        {article.net != null && (
           <Typography variant="caption" fontWeight={600}>
-            {formatPrice(article.price)}
+            {formatPrice(article.net)}
           </Typography>
         )}
       </>

src/components/tiles/Tile.jsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import Paper from '@mui/material/Paper';
+import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
 
 export const TILE_SIZE = 140;
@@ -55,8 +55,7 @@ export class Tile extends Component {
   render() {
     const { sx, disabled } = this.props;
     return (
-      <Paper
-        variant="outlined"
+      <ButtonBase
         component="button"
         type="button"
         disabled={disabled}
@@ -66,6 +65,8 @@ export class Tile extends Component {
           border: '1px solid',
           borderColor: 'divider',
           bgcolor: 'background.paper',
+          borderRadius: 1,
+          overflow: 'hidden',
           ...(disabled
             ? { opacity: 0.5, pointerEvents: 'none' }
             : {}),
@@ -75,7 +76,7 @@ export class Tile extends Component {
         {this.renderIcon()}
         {this.renderLabel()}
         {this.renderSecondary()}
-      </Paper>
+      </ButtonBase>
     );
   }
 }