Update event item

Koniverse · Oct 26, 2024 · 3cd1c1f · 3cd1c1f
1 parent 6d2ec35
commit 3cd1c1f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx
@@ -191,12 +191,21 @@ export const EventItem = styled(Component)<EventItemProps>(({ difficulty,
 
   return ({
     minHeight: 297,
-    backgroundImage: `url("${itemBackground}")`,
-    backgroundSize: '100% 285px',
-    backgroundPosition: 'left bottom',
-    backgroundRepeat: 'no-repeat',
+
     position: 'relative',
 
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      display: 'block',
+      inset: 0,
+      backgroundImage: `url("${itemBackground}")`,
+      backgroundSize: '100% 285px',
+      filter: 'drop-shadow(4px 6px 0px #000)',
+      backgroundPosition: 'left bottom',
+      backgroundRepeat: 'no-repeat'
+    },
+
     '.__item-name-block': {
       backgroundImage: 'url("/images/mythical/event-item-name.png")',
       backgroundSize: '100% 36px',
@@ -281,7 +290,7 @@ export const EventItem = styled(Component)<EventItemProps>(({ difficulty,
 
     '.__item-logo': {
       position: 'absolute',
-      right: -7,
+      right: -12,
       top: -11,
       width: 165,
       height: 'auto'
@@ -318,7 +327,7 @@ export const EventItem = styled(Component)<EventItemProps>(({ difficulty,
       fontSize: 16
     },
 
-    '.__item-bonus-info +.__item-stat-info': {
+    '.__item-bonus-info + .__item-stat-info': {
       marginTop: 6
     },
 
@@ -343,7 +352,7 @@ export const EventItem = styled(Component)<EventItemProps>(({ difficulty,
       height: 57,
       display: 'flex',
       paddingLeft: 19,
-      paddingRight: 14,
+      paddingRight: 10,
       justifyContent: 'space-between',
       gap: 8
     },

diff --git a/packages/webapp/public/images/mythical/event-item-easy-background.png b/packages/webapp/public/images/mythical/event-item-easy-background.png
diff --git a/packages/webapp/public/images/mythical/event-item-hard-background.png b/packages/webapp/public/images/mythical/event-item-hard-background.png
diff --git a/packages/webapp/public/images/mythical/event-item-medium-background.png b/packages/webapp/public/images/mythical/event-item-medium-background.png