Update UI for leaderboard screen and component EventItem

Koniverse · Oct 29, 2024 · 85e2b91 · 85e2b91
1 parent 5c0749b
commit 85e2b91
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
@@ -75,8 +75,6 @@ const Component = ({ className }: Props): React.ReactElement => {
   const { setContainerClass } = useContext(HomeContext);
   const [gameEvents, setGameEvents] = useState<GameEvent[]>(apiSDK.gameEventList);
 
-  console.log('gameEvents', gameEvents);
-
   const [eventItems, setEventItems] = useState<EventItemType[]>([]);
 
   const { t } = useTranslation();

diff --git a/packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx b/packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx
@@ -19,11 +19,11 @@ const Component = ({ className }: Props): React.ReactElement => {
   return (
     <div className={className}>
       <MainScreenHeader
-        className={'__main-screen-header'}
+        className={'main-screen-header'}
         title={t('Weekly leaderboard')}
       />
 
-      <div className='__time-remaining-wrapper'>
+      <div className='time-remaining-wrapper'>
         <TimeRemaining datetime={'12day 10hrs'} />
       </div>
 
@@ -60,6 +60,7 @@ const Component = ({ className }: Props): React.ReactElement => {
 
       <CallToAction
         buttonLabel={'Play now'}
+        className={'call-to-action'}
         subtitle={'Download NFL Rivals App'}
         title={'Want to take your profile to the next level?'}
       />
@@ -70,6 +71,7 @@ const Component = ({ className }: Props): React.ReactElement => {
           className={'game-account-item'}
           name={'Brad_MaddenMaster'}
           point={7712000}
+          prefix={'100'}
         />
 
         <GameAccountItem
@@ -95,13 +97,14 @@ const Component = ({ className }: Props): React.ReactElement => {
 
 const Leaderboard = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
-    '.__main-screen-header': {
+    '.main-screen-header': {
       maxWidth: 250
     },
 
-    '.__time-remaining-wrapper': {
+    '.time-remaining-wrapper': {
       paddingLeft: 16,
-      paddingRight: 16
+      paddingRight: 16,
+      marginBottom: 20
     },
 
     '.top-account-item-wrapper': {
@@ -125,6 +128,10 @@ const Leaderboard = styled(Component)<ThemeProps>(({ theme: { extendToken, token
       paddingBottom: token.size
     },
 
+    '.call-to-action': {
+      marginBottom: 12
+    },
+
     '.game-account-item + .game-account-item': {
       marginTop: 4
     }

diff --git a/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx
@@ -246,7 +246,8 @@ export const EventItem = styled(Component)<Props>(({ difficulty,
       minWidth: 181,
       paddingLeft: 25,
       paddingRight: 12,
-      paddingTop: 4
+      paddingTop: 4,
+      zIndex: 3
     },
 
     '.__item-name-text': {

diff --git a/packages/extension-koni-ui/src/components/Mythical/Leaderboard/GameAccountItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Leaderboard/GameAccountItem.tsx
@@ -74,7 +74,7 @@ const GameAccountItem = styled(Component)<Props>(({ theme: { extendToken, token
       '&:before': {
         content: '""',
         display: 'block',
-        backgroundImage: 'linear-gradient(75deg, rgba(54, 53, 53, 1) 25.94%, rgba(25, 25, 25, 1) 63.11%)',
+        backgroundImage: 'linear-gradient(75deg, rgba(54, 53, 53, 0.32) 25.94%, rgba(25, 25, 25, 0.32) 63.11%)',
         maskImage: 'url(/images/mythical/game-account-item-background.png)',
         maskSize: '100% 100%',
         maskPosition: 'top left',
@@ -149,7 +149,7 @@ const GameAccountItem = styled(Component)<Props>(({ theme: { extendToken, token
 
     '&.-is-mine': {
       '.__background-layer:before': {
-        backgroundImage: 'linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.2) 100%), linear-gradient(75deg, rgba(54, 53, 53, 1) 25.94%, rgba(25, 25, 25, 1) 63.11%)'
+        backgroundImage: 'linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.2) 100%), linear-gradient(75deg, rgba(54, 53, 53, 0.32) 25.94%, rgba(25, 25, 25, 0.32) 63.11%)'
       },
 
       '.__point': {