Achievements updates

src/views/achievements/AchievementsView.scss

@@ -1,24 +1,28 @@
 .nitro-achievements {
     width: 650px;
-
+    
-    .content-area {
-        min-height: 376px;
-        height: 376px;
-    }
-
     .score {
         border-color: $grid-border-color !important;
         background-color: $grid-bg-color;
     }
 
     .category {
+        border-color: $grid-border-color !important;
+        background-color: $grid-bg-color;
+        cursor: pointer;
+
+        &.active {
+            border-color: $grid-active-border-color !important;
+            background-color: $grid-active-bg-color;
+        }
+
         .category-score {
             margin-top: 43.5px;
         }
     }
 
     .achievements {
-        height: 230px;
+        height: 152px;
         overflow-y: auto;
         overflow-x: hidden;
 
@@ -44,4 +48,15 @@
             }
         }
     }
+
+    .achievement-image {
+        height: 80px;
+        width: 80px;
+
+        .badge-image {
+            width: 80px;
+            height: 80px;
+            background-size: contain;
+        }
+    }
 }

src/views/achievements/AchievementsView.tsx

@@ -40,7 +40,7 @@ export const AchievementsView: FC<AchievementsViewProps> = props =>
         <AchievementsContextProvider value={ { achievementsState, dispatchAchievementsState } }>
             <AchievementsMessageHandler />
             { isVisible &&
-                <NitroCardView uniqueKey="achievements" className="nitro-achievements">
+                <NitroCardView uniqueKey="achievements" className="nitro-achievements" simple={ true }>
                     <NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView>
                         <div className="row">

src/views/achievements/views/category-list-item/AchievementCategoryListItemView.tsx

@@ -1,6 +1,6 @@
+import classNames from 'classnames';
 import { FC, useCallback, useMemo } from 'react';
 import { GetConfiguration } from '../../../../api';
-import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { useAchievementsContext } from '../../context/AchievementsContext';
 import { AchievementsActions } from '../../reducers/AchievementsReducer';
 import { AchievementCategoryListItemViewProps } from './AchievementCategoryListItemView.types';
@@ -58,8 +58,11 @@ export const AchievementCategoryListItemView: FC<AchievementCategoryListItemView
     }, [ dispatchAchievementsState ]);
 
     return (
-        <NitroCardGridItemView className="d-flex flex-column justify-content-center align-items-center category border border-2 rounded p-2" itemActive={ isActive } itemImage={ getCategoryImage } onClick={ event => selectCategory(category.name) }>
+        <div className="col mb-3">
-            <div className="position-absolute category-score small">{ getCategoryProgress }</div>
+            <div className={ 'd-flex flex-column justify-content-center align-items-center category border border-2 rounded p-2' + classNames({ ' active': isActive }) } onClick={ () => selectCategory(category.name) }>
-        </NitroCardGridItemView>
+                <img src={ getCategoryImage } alt="" />
+                <div className="position-absolute category-score small">{ getCategoryProgress }</div>
+            </div>
+        </div>
     );
 }

src/views/achievements/views/category-list/AchievementsListView.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
 import { useAchievementsContext } from '../../context/AchievementsContext';
 import { AchievementCategoryListItemView } from '../category-list-item/AchievementCategoryListItemView';
 
@@ -9,11 +8,11 @@ export const AchievementsListView: FC<{}> = props =>
     const { categories = null, selectedCategoryName = null } = achievementsState;
     
     return (
-        <NitroCardGridView columns={ 3 }>
+        <div className="row row-cols-3">
             { categories && categories.map((category, index) =>
                 {
-                    return <AchievementCategoryListItemView key={ index } category={ category } />;
+                    return <AchievementCategoryListItemView key={ index } category={ category } isActive={ selectedCategoryName === category.name } />;
                 }) }
-        </NitroCardGridView>
+        </div>
     );
 };

src/views/achievements/views/category/AchievementCategoryView.tsx

@@ -1,7 +1,7 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useMemo } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { useAchievementsContext } from '../../context/AchievementsContext';
 import { AchievementsActions } from '../../reducers/AchievementsReducer';
@@ -34,7 +34,7 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
         return badgeId;
     }, []);
 
-    const getSelectedAchievement = useCallback(() =>
+    const selectedAchievement = useMemo(() =>
     {
         if(!getSelectedCategory()) return null;
         
@@ -54,13 +54,17 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
 
     return (
         <div className="d-flex flex-column h-100">
-            <div className="bg-primary rounded p-2 d-flex align-items-center mb-3">
+            <div className="bg-primary rounded p-2 d-flex align-items-center mb-2">
                 <h5 className="m-0 me-2 w-100">{ LocalizeText('quests.' + selectedCategoryName + '.name') }</h5>
                 <div>IMAGE</div>
             </div>
-            <div className="bg-muted rounded p-2 mb-3 d-flex">
+            <div className="bg-secondary rounded p-2 mb-3 d-flex gap-2 align-items-center">
+                <div className="achievement-image">
+                    <BadgeImageView badgeCode={ getAchievementImage(selectedAchievement) } />
+                </div>
                 <div>
-                    <BadgeImageView badgeCode={ getAchievementImage(getSelectedAchievement()) } />
+                    <div>{ LocalizeBadgeName(selectedAchievement.badgeId) }</div>
+                    <div>{ LocalizeBadgeDescription(selectedAchievement.badgeId) }</div>
                 </div>
             </div>
             <div className="achievements">