More achievement updates

src/components/achievements/views/achievement-details/AchievementDetailsView.tsx

@@ -5,8 +5,6 @@ import { Base } from '../../../../common/Base';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Text } from '../../../../common/Text';
-import { NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
-import { NitroLayoutBase } from '../../../../layout/base';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
 import { AchievementUtilities } from '../../common/AchievementUtilities';
 import { GetAchievementLevel } from '../../common/GetAchievementLevel';
@@ -31,9 +29,9 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
         <Flex shrink className="bg-muted rounded p-2 text-black" gap={ 2 } overflow="hidden">
             <Column center>
                 <AchievementBadgeView className="nitro-achievements-badge-image" achievement={ achievement } scale={ 2 } />
-                <NitroLayoutBase className="fw-bold">
+                <Text fontWeight="bold">
                     { LocalizeText('achievements.details.level', [ 'level', 'limit' ], [ achievementLevel.toString(), achievement.levelCount.toString() ]) }
-                </NitroLayoutBase>
+                </Text>
             </Column>
             <Column fullWidth justifyContent="center" overflow="hidden">
                 <Column gap={ 1 }>
@@ -45,23 +43,23 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
                     </Text>
                 </Column>
                 { ((achievement.levelRewardPoints > 0) || (achievement.scoreLimit > 0)) &&
-                    <NitroLayoutFlexColumn gap={ 1 }>
+                    <Column gap={ 1 }>
                         { (achievement.levelRewardPoints > 0) &&
-                            <NitroLayoutFlex gap={ 1 }>
-                                <NitroLayoutBase className="text-truncate small">
+                            <Flex alignItems="center" gap={ 1 }>
+                                <Text truncate className="small">
                                     { LocalizeText('achievements.details.reward') }
-                                </NitroLayoutBase>
-                                <NitroLayoutFlex className="fw-bold align-items-center justify-content-center small" gap={ 1 }>
+                                </Text>
+                                <Flex center className="fw-bold small" gap={ 1 }>
                                     { achievement.levelRewardPoints }
                                     <CurrencyIcon type={ achievement.levelRewardPointType } />
-                                </NitroLayoutFlex>
-                            </NitroLayoutFlex> }
+                                </Flex>
+                            </Flex> }
                         { (achievement.scoreLimit > 0) &&
                             <Base className="progress" position="relative">
                                 <Flex fit center position="absolute" className="text-black"> { LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (achievement.currentPoints + achievement.scoreAtStartOfLevel).toString(), (achievement.scoreLimit + achievement.scoreAtStartOfLevel).toString() ]) }</Flex>
                                 <Base className="progress-bar" style={ { width: (scaledProgressPercent + '%') }} />
                             </Base> }
-                    </NitroLayoutFlexColumn> }
+                    </Column> }
             </Column>
         </Flex>
     )