Use moderator icon with no background

4 years ago · 99f19395e6
2 changed files with 301 additions and 1 deletions
--- a/webroot/img/moderator-nobackground.svg
+++ b/webroot/img/moderator-nobackground.svg
@ -0,0 +1,300 @@
				@@ -0,0 +1,300 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   sodipodi:docname="Moderator.svg"
+   inkscape:version="1.1.1 (c3084ef, 2021-09-22)"
+   id="svg1314"
+   version="1.1"
+   viewBox="0 0 132.29166 132.29167"
+   height="500"
+   width="500"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1308">
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect2100"
+       effect="fillet_chamfer" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect2018"
+       is_visible="true"
+       lpeversion="1"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       unit="px"
+       method="auto"
+       mode="F"
+       radius="22"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <linearGradient
+       x1="39.48497"
+       y1="0.047389723"
+       x2="39.48497"
+       y2="44.901764"
+       id="linearGradient2278"
+       gradientTransform="scale(0.78982873,1.2660973)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#2087e2"
+         stop-opacity="1"
+         id="stop2026" />
+      <stop
+         offset="1"
+         stop-color="#b63fff"
+         stop-opacity="1"
+         id="stop2028" />
+    </linearGradient>
+    <inkscape:path-effect
+       hide_knots="false"
+       only_selected="false"
+       apply_with_radius="true"
+       apply_no_radius="true"
+       use_knot_distance="true"
+       flexible="false"
+       chamfer_steps="1"
+       radius="22"
+       mode="F"
+       method="auto"
+       unit="px"
+       satellites_param="F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1 @ F,0,0,1,0,5.8208333,0,1"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect1458"
+       effect="fillet_chamfer" />
+    <linearGradient
+       y2="71.171745"
+       x2="132.77428"
+       y1="71.171745"
+       x1="37.088039"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1584"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       inkscape:collect="always" />
+    <linearGradient
+       x1="0.83099705"
+       y1="26.975092"
+       x2="0.83099705"
+       y2="42.979877"
+       id="linearGradient1915"
+       gradientTransform="scale(0.85532098,1.1691517)"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         offset="0"
+         stop-color="#FFFFFF"
+         stop-opacity="0.5"
+         id="stop2071" />
+      <stop
+         offset="1"
+         stop-color="#FFFFFF"
+         stop-opacity="0.2"
+         id="stop2073" />
+    </linearGradient>
+    <rect
+       id="rect1590"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect1281"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       id="linearGradient1584-5"
+       gradientUnits="userSpaceOnUse"
+       x1="37.088039"
+       y1="71.171745"
+       x2="132.77428"
+       y2="71.171745" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect1590-2" />
+    <rect
+       x="44.191872"
+       y="26.752991"
+       width="136.01654"
+       height="155.13683"
+       id="rect2032" />
+    <linearGradient
+       y2="49.976803"
+       x2="308.71417"
+       y1="49.976803"
+       x1="276.92184"
+       gradientTransform="translate(155.92963)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1586"
+       xlink:href="#linearGradient2278"
+       inkscape:collect="always" />
+    <linearGradient
+       y2="71.171745"
+       x2="132.77428"
+       y1="71.171745"
+       x1="37.088039"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient1584-5-0"
+       xlink:href="#RESERVED_FOR_INKSCAPE_DUPLICATE_DEF_000000000"
+       inkscape:collect="always" />
+    <rect
+       id="rect1590-2-9"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+    <rect
+       id="rect2130"
+       height="155.13683"
+       width="136.01654"
+       y="26.752991"
+       x="44.191872" />
+  </defs>
+  <!-- <sodipodi:namedview
+     inkscape:window-maximized="0"
+     inkscape:window-y="23"
+     inkscape:window-x="1280"
+     inkscape:window-height="1035"
+     inkscape:window-width="1920"
+     inkscape:guide-bbox="true"
+     showguides="false"
+     units="px"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer5"
+     inkscape:document-units="mm"
+     inkscape:cy="275.39496"
+     inkscape:cx="289.69027"
+     inkscape:zoom="1.1892011"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     inkscape:pagecheckerboard="0">
+    <sodipodi:guide
+       id="guide2200"
+       orientation="1,0"
+       position="44.558367,13.027415" />
+    <sodipodi:guide
+       id="guide2202"
+       orientation="1,0"
+       position="88.02151,12.912128" />
+  </sodipodi:namedview> -->
+  <!-- <metadata
+     id="metadata1311">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata> -->
+  <!-- <g
+     style="display:inline"
+     inkscape:label="Background"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <path
+       d="m 438.6723,34.080635 h 20.15068 a 5.8208333,5.8208333 45 0 1 5.82083,5.820833 v 20.150671 a 5.8208333,5.8208333 135 0 1 -5.82083,5.820833 H 438.6723 a 5.8208333,5.8208333 45 0 1 -5.82083,-5.820833 V 39.901468 a 5.8208333,5.8208333 135 0 1 5.82083,-5.820833 z"
+       transform="matrix(4.161118,0,0,4.1611169,-1801.146,-141.81351)"
+       inkscape:path-effect="#path-effect2100"
+       style="display:inline;fill:url(#linearGradient1586);fill-opacity:1;stroke:none;stroke-width:0.207662;stroke-opacity:1"
+       id="path1456"
+       width="31.792337"
+       height="31.792337"
+       x="432.85147"
+       y="34.080635"
+       sodipodi:type="rect" />
+  </g> -->
+  <g
+     style="display:inline"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Icon">
+    <!-- <g
+       style="display:inline"
+       inkscape:label="Shadow"
+       id="layer6"
+       inkscape:groupmode="layer">
+      <path
+         transform="matrix(4.161118,0,0,4.1611169,-1801.146,-141.81351)"
+         sodipodi:nodetypes="cccsscc"
+         d="m 461.95662,41.182335 c -1.66521,11.401742 -7.22749,25.141864 -18.65902,19.147316 l 6.20739,5.54333 h 9.31778 c 3.21477,0 5.82083,-2.606077 5.82083,-5.820833 V 43.901195 Z"
+         style="display:inline;fill:#1d1535;fill-opacity:0.334677;stroke:none;stroke-width:0.207662;stroke-opacity:1"
+         id="path1460" />
+    </g> -->
+    
+    <g
+       style="display:inline"
+       inkscape:label="Outline-fill"
+       id="layer3"
+       inkscape:groupmode="layer">
+      <path
+         transform="matrix(4.161118,0,0,4.1611169,-1801.146,-141.81351)"
+         style="display:inline;stroke:none;fill:url(#linearGradient1586);fill-opacity:1"
+         d="m 435.99505,42.07222 c 6.79702,0.447172 12.75258,-4.805738 12.75258,-4.805738 0,0 5.95556,5.25291 12.75258,4.805738 -0.58133,12.744387 -7.49513,20.585687 -12.75258,20.62813 -5.1879,0.04188 -12.17125,-7.883743 -12.75258,-20.62813 z"
+         id="path1464"
+         sodipodi:nodetypes="cccsc"
+      />
+    </g>
+    <g
+       style="display:inline"
+       inkscape:label="Reflection"
+       id="layer5"
+       inkscape:groupmode="layer">
+      <path
+         transform="matrix(4.161118,0,0,4.1611169,-1801.146,-141.81351)"
+         sodipodi:nodetypes="cszc"
+         id="path1462"
+         d="m 448.89883,37.266483 c 0,0 -1.71315,13.938348 -0.15119,23.866856 1.57746,10.027015 -19.60255,-17.878401 -11.92465,-19.034107 7.67789,-1.155706 12.07584,-4.832749 12.07584,-4.832749 z"
+         style="display:inline;fill:#e2e8f0;fill-opacity:0.306452;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    </g>
+    <g
+       style="display:inline"
+       inkscape:label="Outline"
+       id="layer6"
+       inkscape:groupmode="layer">
+      <path
+         transform="matrix(4.161118,0,0,4.1611169,-1801.146,-141.81351)"
+         style="display:inline;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill:none"
+         d="m 435.99505,42.07222 c 6.79702,0.447172 12.75258,-4.805738 12.75258,-4.805738 0,0 5.95556,5.25291 12.75258,4.805738 -0.58133,12.744387 -7.49513,20.585687 -12.75258,20.62813 -5.1879,0.04188 -12.17125,-7.883743 -12.75258,-20.62813 z"
+         id="path1464"
+         sodipodi:nodetypes="cccsc"
+      />
+    </g>
+  </g>
+</svg>
--- a/webroot/js/components/chat/username.js
+++ b/webroot/js/components/chat/username.js
@ -93,7 +93,7 @@ export default class UsernameForm extends Component {
				@@ -93,7 +93,7 @@ export default class UsernameForm extends Component {
    };

    const moderatorFlag = html`
-      <img src="/img/moderator.svg" class="moderator-flag rounded-lg" />
+      <img src="/img/moderator-nobackground.svg" class="moderator-flag" />
    `;

    return html`