Issue4709 : Track and Subtrack enhancements : Details page

__tests__/__snapshots__/index.js.snap

@@ -15,6 +15,8 @@ Object {
   "GhostButton": [Function],
   "Modal": [Function],
   "PrimaryButton": [Function],
+  "QATrackEventTag": [Function],
+  "QATrackTag": [Function],
   "SecondaryButton": [Function],
   "Tag": [Function],
 }

src/shared/components/tags/event/qa.scss

@@ -0,0 +1,21 @@
+/**
+ * Event tag, colored with colors of qa track (purple).
+ */
+
+@import "../default";
+
+.button {
+  color: $tc-purple;
+  background-color: $tc-purple-10;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: $tc-purple;
+    background-color: $tc-purple-10;
+  }
+
+  &:visited {
+    color: $tc-purple;
+  }
+}

src/shared/components/tags/index.jsx

@@ -6,10 +6,12 @@ import defaultTag from './default.scss';
 import dataScienceTrackTag from './primary/data-science.scss';
 import designTrackTag from './primary/design.scss';
 import developmentTrackTag from './primary/development.scss';
+import qaTrackTag from './primary/qa.scss';
 
 import dataScienceTrackEventTag from './event/data-science.scss';
 import designTrackEventTag from './event/design.scss';
 import developmentTrackEventTag from './event/development.scss';
+import qaTrackEventTag from './event/qa.scss';
 
 export const Tag = themr('Tag', defaultTag)(GenericButton);
 
@@ -21,3 +23,6 @@ export const DesignTrackEventTag = themr('DesignTrackEventTag', designTrackEvent
 
 export const DevelopmentTrackTag = themr('DevelopmentTrackTag', developmentTrackTag)(GenericButton);
 export const DevelopmentTrackEventTag = themr('DevelopmentTrackEventTag', developmentTrackEventTag)(GenericButton);
+
+export const QATrackTag = themr('QATrackTag', qaTrackTag)(GenericButton);
+export const QATrackEventTag = themr('QATrackEventTag', qaTrackEventTag)(GenericButton);

src/shared/components/tags/primary/qa.scss

@@ -0,0 +1,21 @@
+/**
+ * Primary tag, colored with colors of qa track (purple).
+ */
+
+@import "../default";
+
+.button {
+  background-color: $tc-purple-120;
+  color: $tc-white;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: $tc-white;
+    background-color: $tc-purple-120;
+  }
+
+  &:visited {
+    color: $tc-white;
+  }
+}

src/styles/_mixins/variables.scss

@@ -81,10 +81,12 @@ $tc-green-30: #cef0af;
 $tc-green-10: #effae4;
 
 /* Purples. */
+$tc-purple-120: #8231a9;
 $tc-purple-110: #753488;
 $tc-purple-100: #914da5;
 $tc-purple-70: #b57ad8;
 $tc-purple-30: #e2c6f3;
+$tc-purple-20: #e6cff1;
 $tc-purple-10: #f8f2fb;
 
 /* TC Metal colors - Badges.