feat: traits on the champion avatars + minor restyling

src/assets/styles/_theme.scss

@@ -1,7 +1,7 @@
 @use 'sass:color';
 
 $colorsByTier: (
-  1: #9e9e9e,
+  1: #455a64,
   2: #4caf50,
   3: #2196f3,
   4: #9c27b0,

src/components/dumb/ChampionAvatar/ChampionAvatar.module.scss

@@ -23,6 +23,16 @@
 .championSplash {
   width: 100%;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  overflow: hidden;
+  gap: 5%;
+  padding: 2%;
+}
+
+.traitTitle {
+  height: 25%;
 }
 
 .footer {

src/components/dumb/ChampionAvatar/ChampionAvatar.tsx

@@ -7,6 +7,7 @@ import { DndItemChampion, DndItemType } from '@src/state';
 import { ReactComponent as IconCoin } from '@src/assets/icons/common/coin.svg';
 
 import { ChampionSplash } from '../ChampionSplash';
+import { TraitTitle } from '../TraitTitle';
 
 import styles from './ChampionAvatar.module.scss';
 
@@ -18,7 +19,7 @@ export type ChampionAvatarProps = {
 };
 
 const ChampionAvatarBase: React.FC<ChampionAvatarProps> = (props) => {
-  const { tier } = CHAMPIONS_MAP[props.name];
+  const { classTraits, originTraits, tier } = CHAMPIONS_MAP[props.name];
 
   const [{ isDragging }, dragRef] = useDrag<
     DndItemChampion,
@@ -53,7 +54,15 @@ const ChampionAvatarBase: React.FC<ChampionAvatarProps> = (props) => {
       ref={dragRef}
       onClick={handleClick}
     >
-      <ChampionSplash className={styles.championSplash} name={props.name} />
+      <ChampionSplash className={styles.championSplash} name={props.name}>
+        {originTraits.map((trait) => (
+          <TraitTitle className={styles.traitTitle} key={trait} trait={trait} />
+        ))}
+        {classTraits.map((trait) => (
+          <TraitTitle className={styles.traitTitle} key={trait} trait={trait} />
+        ))}
+      </ChampionSplash>
+
       <div className={styles.footer}>
         <div className={styles.name}>{props.name}</div>
         <div className={styles.cost}>

src/components/dumb/ChampionSplash/ChampionSplash.tsx

@@ -19,7 +19,7 @@ const ChampionSplashBase: React.FC<ChampionSplashProps> = (props) => {
         backgroundImage: `url("https://cdn.lolchess.gg/images/lol/champion-splash-modified/${championUrlName}.jpg")`,
       }}
       {...restProps}
-    ></div>
+    />
   );
 };
 

src/components/dumb/TraitHex/TraitHex.module.scss

@@ -16,9 +16,16 @@
 }
 
 .childrenWrapper {
+  width: 100%;
+  height: 100%;
   position: relative;
-  padding: 6px;
+  padding: 15%;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  & > * {
+    width: 100%;
+    height: 100%;
+  }
 }

src/components/dumb/TraitHex/TraitHex.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { ReactComponent as Default } from '@src/assets/icons/hexes/default.svg';
 import { ReactComponent as Disabled } from '@src/assets/icons/hexes/disabled.svg';
 import { ReactComponent as Bronze } from '@src/assets/icons/hexes/bronze.svg';
 import { ReactComponent as Silver } from '@src/assets/icons/hexes/silver.svg';
@@ -10,6 +11,7 @@ import { ReactComponent as Chromatic } from '@src/assets/icons/hexes/chromatic.s
 import styles from './TraitHex.module.scss';
 
 export enum TraitHexType {
+  Default = 'Default',
   Disabled = 'Disabled',
   Bronze = 'Bronze',
   Silver = 'Silver',
@@ -18,6 +20,7 @@ export enum TraitHexType {
 }
 
 const HEX_ICON = {
+  [TraitHexType.Default]: Default,
   [TraitHexType.Disabled]: Disabled,
   [TraitHexType.Bronze]: Bronze,
   [TraitHexType.Silver]: Silver,
@@ -28,11 +31,11 @@ const HEX_ICON = {
 export type TraitHexProps = {
   className?: string;
   children?: React.ReactNode;
-  hexType: TraitHexType;
+  hexType?: TraitHexType;
 };
 
 const TraitHexBase: React.FC<TraitHexProps> = (props) => {
-  const Icon = HEX_ICON[props.hexType];
+  const Icon = HEX_ICON[props.hexType || TraitHexType.Default];
   return (
     <div className={clsx(styles.rootTraitHex, props.className)}>
       <div className={styles.iconWrapper}>

src/components/dumb/TraitStats/TraitStats.module.scss

@@ -17,6 +17,10 @@
   }
 }
 
+.traitHex {
+  max-width: 20%;
+}
+
 .traitIcon {
   .activated & {
     color: #000;
@@ -35,6 +39,7 @@
 }
 
 .activationsWrapper {
+  flex: 1;
 }
 
 .traitName {

src/components/dumb/TraitStats/TraitStats.tsx

@@ -26,11 +26,12 @@ const TraitStatsBase: React.FC<TraitStatsProps> = (props) => {
         props.className,
       )}
     >
-      <TraitHex hexType={hexType}>
+      <TraitHex className={styles.traitHex} hexType={hexType}>
         <TraitIcon className={styles.traitIcon} trait={props.trait} />
       </TraitHex>
 
       <div className={styles.amount}>{props.champions.length}</div>
+
       <div className={styles.activationsWrapper}>
         <div className={styles.traitName}>{props.trait}</div>
         {activated ? (

src/components/dumb/TraitTitle/TraitTitle.module.scss

@@ -0,0 +1,14 @@
+@use 'src/assets/styles/theme';
+
+.rootTraitTitle {
+  display: flex;
+  align-items: center;
+  gap: 3%;
+  color: theme.$colorTextMain;
+  text-shadow: 0.1em 0.1em 0.2em #000, 0.1em -0.1em 0.2em #000,
+    -0.1em 0.1em 0.2em #000, -0.1em -0.1em 0.2em #000;
+}
+
+.traitHex {
+  height: 100%;
+}

src/components/dumb/TraitTitle/TraitTitle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { TraitIcon } from '@src/components/dumb/TraitIcon';
+import { TraitHex } from '@src/components/dumb/TraitHex';
+
+import styles from './TraitTitle.module.scss';
+
+export type TraitTitleProps = {
+  className?: string;
+  trait: string;
+};
+
+const TraitTitleBase: React.FC<TraitTitleProps> = (props) => {
+  return (
+    <div className={clsx(styles.rootTraitTitle, props.className)}>
+      <TraitHex className={styles.traitHex}>
+        <TraitIcon trait={props.trait} />
+      </TraitHex>
+
+      <span className={styles.traitName}>{props.trait}</span>
+    </div>
+  );
+};
+
+export const TraitTitle = React.memo(TraitTitleBase);

src/components/dumb/TraitTitle/index.ts

@@ -0,0 +1 @@
+export * from './TraitTitle';

src/components/smart/Shop/Shop.module.scss

@@ -4,17 +4,15 @@
   left: 13%;
   height: 20%;
   width: 65%;
-  display: flex;
-  flex-direction: column;
 }
 
 .topBar {
-  flex: 1;
+  height: 25%;
   display: flex;
 }
 
 .bottomBar {
-  flex: 3;
+  height: 75%;
   display: flex;
 }