Refactor status tag

package.json

@@ -10,6 +10,7 @@
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
     "base64-inline-loader": "^2.0.1",
+    "classnames": "^2.3.1",
     "copy-webpack-plugin": "^10.0.0",
     "css-loader": "^6.5.1",
     "eslint": "^7.32.0",

src/control/components/StatusTag.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+
 import { AcceptanceCriteriaState } from '../../common/common';
 export interface StatusTagProps {
   state: AcceptanceCriteriaState;
@@ -6,6 +8,8 @@ export interface StatusTagProps {
 const StatusTag = ({ state }: StatusTagProps): React.ReactElement => {
   const getTagColor = () => {
     switch (state) {
+      case AcceptanceCriteriaState.Unset:
+        return '#9b34eb';
       case AcceptanceCriteriaState.Pending:
         return 'orange';
       case AcceptanceCriteriaState.Approved:
@@ -16,8 +20,8 @@ const StatusTag = ({ state }: StatusTagProps): React.ReactElement => {
   };
 
   return (
-    <span className="status-tag">
-      <div className="status-tag-indicator" style={{ backgroundColor: getTagColor() }}></div>
+    <span className={classNames('status-tag', [`status-tag-${state}`])}>
+      <div className="status-tag-indicator"></div>
       {state}
     </span>
   );

src/control/index.scss

@@ -2,6 +2,14 @@
 @import '../styles/mixins.scss';
 @include extension-container('control-container');
 
+@mixin status-tag-variant($name, $color) {
+  &-#{$name} {
+    .status-tag-indicator {
+      background-color: $color;
+    }
+  }
+}
+
 .add-criteria-button {
   .ms-Icon {
     color: rgba(var(--palette-accent2-dark, 16, 124, 16), 1);
@@ -18,6 +26,13 @@
     width: 8px;
     border-radius: 4px;
   }
+  @include status-tag-variant('unset', #9b34eb);
+  @include status-tag-variant('pending', orange);
+  @include status-tag-variant('approved', green);
+  @include status-tag-variant('rejected', red);
+}
+.flex-self-center {
+  align-self: center;
 }
 
 .acceptance-critera-title-cell {