Rewrite styles to scss and use i respective components

src/components/Flag/Flag.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import './flag.scss';
+interface ItemFlag {
+  flag: 'default' | 'new' | 'changed';
+}
+
+export default function Flag({ item, short = false }: { item: ItemFlag; short?: boolean }) {
+  const ucFirst = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+  if (item.flag !== 'default') {
+    let name = item.flag.toUpperCase();
+    let title = ucFirst(item.flag);
+    if (short === true) {
+      name = title[0];
+    }
+    return (
+      <span className={`flag flag--${item.flag}`} title={title}>
+        {name}
+      </span>
+    );
+  }
+
+  return null;
+}

src/components/Flag/flag.scss

@@ -0,0 +1,18 @@
+.flag {
+  font-size: 9px;
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 10px;
+  position: relative;
+  vertical-align: top;
+  margin-top: -2px;
+  left: 5px;
+
+  &--new {
+    background: var(--color-red);
+  }
+
+  &--changed {
+    background: var(--color-blue);
+  }
+}