update view item

src/renderer/src/App.tsx

@@ -156,12 +156,6 @@ function App(): React.JSX.Element {
                                 </Box>
                             ) : (
                                 newItems?.map((item: Product) => {
-                                    console.log({
-                                        hotItem,
-                                        item,
-                                        is_host: isHotItem(item)
-                                    })
-
                                     return (
                                         <CardItem
                                             key={item?.id}

src/renderer/src/assets/main.css

@@ -1,18 +1,18 @@
 @keyframes borderPulse {
     0% {
-        border-color: red;
+        border-color: #e03131;
     }
     50% {
         border-color: black;
     }
     100% {
-        border-color: red;
+        border-color: #e03131;
     }
 }
 
 .item-card {
     animation: borderPulse 1s infinite;
-    border: 4px solid red;
+    border: 4px solid #e03131;
     border-radius: 4px;
     transition: border-color 0.3s ease;
     padding: 10px;

src/renderer/src/components/CardItem.tsx

@@ -1,4 +1,4 @@
-import { Card, Grid, Title, Text, Badge, Button, Anchor } from '@mantine/core'
+import { Anchor, Box, Button, Card, Grid, Text, Title } from '@mantine/core'
 import { Product } from '@renderer/types/Product'
 import moment from 'moment'
 import TimeCounter from './TimeCounter'
@@ -10,13 +10,45 @@ interface CardItemProps {
 
 const CardItem: React.FC<CardItemProps> = ({ item, hotItem }) => {
     return (
-        <Card className="item-card" mb={4} p={8}>
+        <Card className="item-card" bg={'#f1f3f5'} mb={8} px={8} py={'xl'}>
             <Grid>
-                <Grid.Col span={2}>
-                    {hotItem ? (
-                        <Badge size="md" color="red" pos="absolute" radius={0}>
-                            Hot
-                        </Badge>
+                <Grid.Col
+                    span={2}
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}
+                >
+                    {true ? (
+                        <Box
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                right: 0,
+                                width: 80,
+                                height: 80,
+                                backgroundColor: '#e03131',
+                                clipPath: 'polygon(100% 0, 100% 100%, 0 0)',
+                                display: 'flex',
+                                justifyContent: 'end',
+                                alignItems: 'flex-start',
+                                paddingTop: 10
+                            }}
+                        >
+                            <Text
+                                c="white"
+                                fw={700}
+                                size="xs"
+                                style={{
+                                    transform: 'rotate(45deg)',
+                                    paddingTop: '10px',
+                                    paddingRight: '8px'
+                                }}
+                            >
+                                HOT
+                            </Text>
+                        </Box>
                     ) : (
                         ''
                     )}