message: artifact-xp styling and progress bar
diff: +import { percent } from 'app/shell/filters';
  import { DestinyCharacterProgressionComponent } from 'bungie-api-ts/destiny2';
  import React from 'react';
  -
  +import xpIcon from '../../images/xpIcon.svg';
  +import styles from './ArtifactXP.m.scss';
  const formatter = new Intl.NumberFormat();
  export function ArtifactXP(characterProgress: DestinyCharacterProgressionComponent | undefined) {
  @@ -8,9 +10,26 @@ export function ArtifactXP(characterProgress: DestinyCharacterProgressionCompone
  characterProgress?.progressions[1793560787] ??
  ({} as { progressToNextLevel: undefined; nextLevelAt: undefined; level: undefined });
  const { progressToNextLevel, nextLevelAt, level } = artifactProgress;
  - return progressToNextLevel && nextLevelAt && level !== undefined ? (
  +
  + if (!progressToNextLevel || !nextLevelAt || level === undefined) {
  + return;
  + }
  + const progressBarStyle = {
  + width: percent(progressToNextLevel / nextLevelAt),
  + };
  + return (
  <>
  - <b>{level + 1}:</b> {formatter.format(progressToNextLevel)} / {formatter.format(nextLevelAt)}
  + <div style={{ display: 'flex' }}>
  + <div className="objective-progress">
  + {<div className="objective-progress-bar" style={progressBarStyle} />}
  + <div className="objective-description">
  + <img src={xpIcon} className={styles.xpIcon} /> {level + 1}
  + </div>
  + <div className="objective-text">
  + {formatter.format(progressToNextLevel)} / {formatter.format(nextLevelAt)}
  + </div>
  + </div>
  + </div>
  </>
  - ) : undefined;
  + );
  }
  