Update tier icons to correct size and color (#9727)

* update tier icons to correct size and color

* make tier text bold

website/client/assets/svg/tier-1.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.53 11"><defs></defs><title>Tier 1</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-1"><polygon id="path-1" class="cls-1" points="4.76 0 9.53 2.75 9.53 8.25 4.76 11 0 8.25 0 2.75 4.76 0"/><path class="cls-2" d="M5.5,0.58L1.24,3V8L5.5,10.42,9.76,8V3Z" transform="translate(-0.74)"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11" viewBox="0 0 11 11">
+    <defs>
+        <path id="a" d="M282.5 1423l4.763 2.75v5.5L282.5 1434l-4.763-2.75v-5.5z"/>
+    </defs>
+    <g fill="#FFB6B8" fill-rule="evenodd" transform="translate(-277 -1423)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".16" d="M282.5 1423.577l-4.263 2.462v4.922l4.263 2.462 4.263-2.462v-4.922l-4.263-2.462z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-2.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.53 11"><defs></defs><title>Tier 2</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-2"><polygon id="path-1" class="cls-1" points="4.76 0 9.53 2.75 9.53 8.25 4.76 11 0 8.25 0 2.75 4.76 0"/><path class="cls-2" d="M5.5,0.58L1.24,3V8L5.5,10.42,9.76,8V3Z" transform="translate(-0.74)"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11" viewBox="0 0 11 11">
+    <defs>
+        <path id="a" d="M282.5 1479l4.763 2.75v5.5L282.5 1490l-4.763-2.75v-5.5z"/>
+    </defs>
+    <g fill="#C92B2B" fill-rule="evenodd" transform="translate(-277 -1479)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".16" d="M282.5 1479.577l-4.263 2.462v4.922l4.263 2.462 4.263-2.462v-4.922l-4.263-2.462z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-3.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs></defs><title>Tier 3</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-3"><polygon id="path-1" class="cls-1" points="5 0 10 10 0 10 5 0"/><path class="cls-2" d="M5,1.12L0.81,9.5H9.19Z"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
+    <defs>
+        <path id="a" d="M275 1535l5 10h-10z"/>
+    </defs>
+    <g fill="#FF6165" fill-rule="evenodd" transform="translate(-270 -1535)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".12" d="M275 1536.118l-4.191 8.382h8.382l-4.191-8.382z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-4.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs></defs><title>Tier 4</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-4"><polygon id="path-1" class="cls-1" points="5 0 10 10 0 10 5 0"/><path class="cls-2" d="M5,1.12L0.81,9.5H9.19Z"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
+    <defs>
+        <path id="a" d="M275 1591l5 10h-10z"/>
+    </defs>
+    <g fill="#FF944C" fill-rule="evenodd" transform="translate(-270 -1591)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".12" d="M275 1592.118l-4.191 8.382h8.382l-4.191-8.382z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-5.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><defs></defs><title>Tier 5</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-5"><rect id="path-1" class="cls-1" width="8" height="8"/><rect class="cls-2" x="0.5" y="0.5" width="7" height="7"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 8 8">
+    <defs>
+        <path id="a" d="M290 1649h8v8h-8z"/>
+    </defs>
+    <g fill="#FFBE5D" fill-rule="evenodd" transform="translate(-290 -1649)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".12" d="M290.5 1649.5h7v7h-7z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-6.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><defs></defs><title>Tier 6</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-6"><rect id="path-1" class="cls-1" width="8" height="8"/><rect class="cls-2" x="0.5" y="0.5" width="7" height="7"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 8 8">
+    <defs>
+        <path id="a" d="M290 1705h8v8h-8z"/>
+    </defs>
+    <g fill="#3FDAA2" fill-rule="evenodd" transform="translate(-290 -1705)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".12" d="M290.5 1705.5h7v7h-7z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-7.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.31 11.31"><defs></defs><title>Tier 7</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Tier-7"><rect id="path-1" class="cls-1" x="1.66" y="1.66" width="8" height="8" transform="translate(-2.34 5.66) rotate(-45)"/><rect class="cls-2" x="2.16" y="2.16" width="7" height="7" transform="translate(-2.34 5.66) rotate(-45)"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 -1 12 12">
+    <defs>
+        <path id="a" d="M290.657 1760.657h8v8h-8z"/>
+    </defs>
+    <g fill="#5EDDE9" fill-rule="evenodd" transform="rotate(45 2273.458 536.303)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".12" d="M291.157 1761.157h7v7h-7z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-mod.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.36 11.76"><defs></defs><title>Moderator</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Moderator"><polygon id="path-1" class="cls-1" points="6.18 9.88 2.36 11.76 2.97 7.54 0 4.49 4.2 3.77 6.18 0 8.17 3.77 12.36 4.49 9.4 7.54 10 11.76 6.18 9.88"/><path class="cls-2" d="M9.69,10.89L9.18,7.37l2.48-2.55-3.5-.61L6.5,1.07,4.84,4.22l-3.5.61L3.82,7.37,3.31,10.89,6.5,9.32Z" transform="translate(-0.32)"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="13" viewBox="0 -1 12 12">
+    <defs>
+        <path id="a" d="M305.5 1823.88l-3.82 1.879.605-4.215-2.967-3.053 4.195-.725L305.5 1814l1.987 3.766 4.195.725-2.967 3.053.606 4.215z"/>
+    </defs>
+    <g fill="#2995CD" fill-rule="evenodd" transform="translate(-299 -1814)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".12" d="M308.69 1824.892l-.505-3.52 2.478-2.55-3.504-.606-1.659-3.145-1.66 3.145-3.503.607 2.478 2.55-.506 3.519 3.191-1.57 3.19 1.57z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-npc.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 11"><defs></defs><title>NPC</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="NPC"><polygon id="path-1" class="cls-1" points="0 0 8 0 8 11 4 7 0 11 0 0"/><path class="cls-2" d="M0.5,0.5V9.79L4,6.29l3.5,3.5V0.5h-7Z"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="11" viewBox="0 0 8 11">
+    <defs>
+        <path id="a" d="M248 1927h8v11l-4-4-4 4z"/>
+    </defs>
+    <g fill="#77F4C7" fill-rule="evenodd" transform="translate(-248 -1927)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".64" d="M248.5 1927.5v9.293l3.5-3.5 3.5 3.5v-9.293h-7z"/>
+    </g>
+</svg>

website/client/assets/svg/tier-staff.svg

@@ -1 +1,9 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><defs></defs><title>Staff</title><g id="Tavern"><g id="Tavern_New-User---Desktop-HD" data-name="Tavern/New-User---Desktop-HD"><g id="Group-2"><g id="Staff"><polygon id="path-1" class="cls-1" points="0 0 3 3 5 0 7 3 10 0 10 8 0 8 0 0"/><path class="cls-2" d="M0.5,1.21V7.5h9V1.21L6.92,3.78,5,0.9,3.08,3.78Z" transform="translate(0 0)"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="8" viewBox="0 0 10 8">
+    <defs>
+        <path id="a" d="M275 1873l3 3 2-3 2 3 3-3v8h-10z"/>
+    </defs>
+    <g fill="#9A62FF" fill-rule="evenodd" transform="translate(-275 -1873)">
+        <use xlink:href="#a"/>
+        <path stroke="#34313A" stroke-opacity=".12" d="M275.5 1874.207v6.293h9v-6.293l-2.578 2.578L280 1873.9l-1.922 2.884-2.578-2.578z"/>
+    </g>
+</svg>

website/client/components/groups/tavern.vue

@@ -111,31 +111,31 @@
             ul.tier-list
               li.tier1(v-once)
                | {{ $t('tier1') }}
-               .svg-icon(v-html="icons.tier1")
+               .svg-icon.tier1-icon(v-html="icons.tier1")
               li.tier2(v-once)
                 | {{ $t('tier2') }}
-                .svg-icon(v-html="icons.tier2")
+                .svg-icon.tier2-icon(v-html="icons.tier2")
               li.tier3(v-once)
                 | {{ $t('tier3') }}
-                .svg-icon(v-html="icons.tier3")
+                .svg-icon.tier3-icon(v-html="icons.tier3")
               li.tier4(v-once)
                 | {{ $t('tier4') }}
-                .svg-icon(v-html="icons.tier4")
+                .svg-icon.tier4-icon(v-html="icons.tier4")
               li.tier5(v-once)
                 | {{ $t('tier5') }}
-                .svg-icon(v-html="icons.tier5")
+                .svg-icon.tier5-icon(v-html="icons.tier5")
               li.tier6(v-once)
                 | {{ $t('tier6') }}
-                .svg-icon(v-html="icons.tier6")
+                .svg-icon.tier6-icon(v-html="icons.tier6")
               li.tier7(v-once)
                 | {{ $t('tier7') }}
-                .svg-icon(v-html="icons.tier7")
+                .svg-icon.tier7-icon(v-html="icons.tier7")
               li.moderator(v-once)
                 | {{ $t('tierModerator') }}
-                .svg-icon(v-html="icons.tierMod")
+                .svg-icon.mod-icon(v-html="icons.tierMod")
               li.staff(v-once)
                 | {{ $t('tierStaff') }}
-                .svg-icon(v-html="icons.tierStaff")
+                .svg-icon.staff-icon(v-html="icons.tierStaff")
               li.npc(v-once)
                 | {{ $t('tierNPC') }}
                 .svg-icon.npc-icon(v-html="icons.tierNPC")
@@ -243,20 +243,37 @@
     margin-top: 1em;
   }
 
+  .svg-icon {
+    width: 10px;
+    display: inline-block;
+    margin-left: .5em;
+  }
+
+  .tier1-icon, .tier2-icon {
+    width: 11px;
+  }
+
+  .tier5-icon, .tier6-icon {
+    width: 8px;
+  }
+
+  .tier7-icon {
+    width: 12px;
+  }
+
+  .mod-icon {
+    width: 13px;
+  }
+
   .npc-icon {
-    fill: #77f4c7;
+    width: 8px;
-    stroke: #005737;
   }
 
   .staff {
     margin-bottom: 1em;
 
     .staff-icon  {
-      fill: #9a62ff;
+      width: 11px;
-    }
-
-    .mod-icon {
-      fill: #277eab;
     }
 
     .title {
@@ -266,12 +283,6 @@
     }
   }
 
-  .svg-icon {
-    width: 10px;
-    display: inline-block;
-    margin-left: .5em;
-  }
-
   .tier-list {
     list-style-type: none;
     padding: 0;
@@ -284,6 +295,7 @@
       text-align: center;
       padding: 1em;
       margin-bottom: 1em;
+      font-weight: bold;
     }
 
     .tier1 {