Rename 'Tag' to 'Flag' - which is more accurate

js/components/Flag.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function Tag({ item, short = false }) {
+export default function Flag({ item, short = false }) {
   if (item.flag !== 'default') {
     let name = item.flag.toUpperCase();
     if (short === true) {
@@ -9,7 +9,7 @@ export default function Tag({ item, short = false }) {
         changed: 'C',
       }[item.flag];
     }
-    return <span className={`tag tag--${item.flag}`}>{name}</span>;
+    return <span className={`flag flag--${item.flag}`}>{name}</span>;
   }
   return null;
 }

js/components/Item.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import Link from './Link';
-import Tag from './Tag';
+import Flag from './Flag';
 
 export default function Item({
   item,
@@ -20,7 +20,7 @@ export default function Item({
     >
       <div className="item__title">
         {item.title}
-        <Tag item={item} />
+        <Flag item={item} />
       </div>
       {item.info && <div className="item__info">{item.info}</div>}
     </Link>

js/components/PageOverview.js

@@ -7,7 +7,7 @@ import Link from './Link';
 import Search from './Search';
 import Fadeable from './Fadeable';
 import SetTitle from './SetTitle';
-import Tag from './Tag';
+import Flag from './Flag';
 import { groupByFirstLetter } from '../../common/model';
 import { translate } from '../../common/config';
 
@@ -140,7 +140,7 @@ class PageOverview extends React.Component {
                           <div className="split__left">
                             <div className="item__title">
                               {item.title}
-                              <Tag item={item} />
+                              <Flag item={item} />
                             </div>
                           </div>
                           <div className="split__right">

js/components/QuadrantSection.js

@@ -3,7 +3,7 @@ import { translate, rings } from '../../common/config';
 import Badge from './Badge';
 import Link from './Link';
 import ItemList from './ItemList';
-import Tag from './Tag';
+import Flag from './Flag';
 
 const renderList = (ringName, quadrantName, groups, big) => {
   const itemsInRing = groups[quadrantName][ringName];
@@ -27,7 +27,7 @@ const renderList = (ringName, quadrantName, groups, big) => {
         <span key={item.name} className="ring-list__item">
           <Link className="link" pageName={`${item.quadrant}/${item.name}`}>
             {item.title}
-            <Tag item={item} short />
+            <Flag item={item} short />
           </Link>
         </span>
       ))}

styles/components/flag.css

@@ -1,4 +1,4 @@
-.tag {
+.flag {
   font-size: 9px;
   display: inline-block;
   padding: 3px 8px;