Explain colors in statistic-help-dialog

src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html

-<p>
-  statistic-help works!
-</p>
+<mat-chip-list class="mat-chip-list-stacked">
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+    <mat-chip class="positiveC">
+      Good
+    </mat-chip>
+    <h3> > 85 % </h3>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+    <mat-chip class="okayC">
+      Okay
+    </mat-chip>
+    <h3> > 50 % </h3>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+    <mat-chip class="negativeC">
+      Improvable
+    </mat-chip>
+    <h3> < 50 % </h3>
+  </div>
+</mat-chip-list>

src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss

+.positiveC {
+  background-color: #AED581;
+}
+
+.negativeC {
+  background-color: #FF8A65;
+}
+
+.okayC {
+  background-color: #FFD54F;
+}
+
+mat-chip {
+  width: 100px!important;
+  display: flex;
+  justify-content: center;
+}