add new sort icons for new/best/controversial

ui/component/claimListHeader/view.jsx

@@ -221,6 +221,7 @@ function ClaimListHeader(props: Props) {
                   })}
                   disabled={orderBy}
                   icon={toCapitalCase(type)}
+                  iconSize={toCapitalCase(type) === ICONS.NEW ? 20 : undefined}
                   label={__(toCapitalCase(type))}
                 />
               ))}

ui/component/commentsList/view.jsx

@@ -161,7 +161,8 @@ function CommentList(props: Props) {
               <Button
                 button="alt"
                 label={__('Best')}
-                icon={ICONS.FIRE}
+                icon={ICONS.BEST}
+                iconSize={18}
                 onClick={() => setSort(SORT_COMMENTS_BEST)}
                 className={classnames(`button-toggle`, {
                   'button-toggle--active': sort === SORT_COMMENTS_BEST,
@@ -171,6 +172,7 @@ function CommentList(props: Props) {
                 button="alt"
                 label={__('Controversial')}
                 icon={ICONS.CONTROVERSIAL}
+                iconSize={18}
                 onClick={() => setSort(SORT_COMMENTS_CONTROVERSIAL)}
                 className={classnames(`button-toggle`, {
                   'button-toggle--active': sort === SORT_COMMENTS_CONTROVERSIAL,
@@ -180,6 +182,7 @@ function CommentList(props: Props) {
                 button="alt"
                 label={__('New')}
                 icon={ICONS.NEW}
+                iconSize={18}
                 onClick={() => setSort(SORT_COMMENTS_NEW)}
                 className={classnames(`button-toggle`, {
                   'button-toggle--active': sort === SORT_COMMENTS_NEW,

ui/component/common/icon-custom.jsx

@@ -448,13 +448,6 @@ export const icons = {
       <line x1="6" y1="20" x2="6" y2="16" />
     </g>
   ),
-  [ICONS.NEW]: buildIcon(
-    <g>
-      <circle cx="12" cy="12" r="7" />
-      <polyline points="12 9 12 12 13.5 13.5" />
-      <path d="M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83" />{' '}
-    </g>
-  ),
   [ICONS.INVITE]: buildIcon(
     <g>
       <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
@@ -869,29 +862,6 @@ export const icons = {
       strokeMiterlimit="10"
     />
   ),
-  [ICONS.CONTROVERSIAL]: (props: CustomProps) => (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="-6 0 26 24"
-      width={props.size || '18'}
-      height={props.size || '18'}
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <g>
-        <path d="M14.2222222,19 C14.2222222,21.209 12.3407677,23 10.020202,23 L6.86868687,23 C4.54812121,23 2.66666667,21.209 2.66666667,19 L2.66666667,11 L14.2222222,11 L14.2222222,14 L14.2222222,19 L14.2222222,19 Z" />
-        <path d="M10.0740741,1.5 C10.0740741,0.672 9.344,0 8.44444444,0 C7.54488889,0 6.81481481,0.672 6.81481481,1.5 C6.81481481,5.933 3.55555556,4.521 3.55555556,8 L13.3333333,8 C13.3333333,4.521 10.0740741,5.932 10.0740741,1.5 L10.0740741,1.5 Z" />
-        <path d="M0,9.5 C0,10.328 0.7168,11 1.6,11 L14.4,11 C15.2832,11 16,10.328 16,9.5 C16,8.672 15.2832,8 14.4,8 L1.6,8 C0.7168,8 0,8.672 0,9.5 L0,9.5 Z" />
-        <line x1="10.6666667" y1="14" x2="14.2222222" y2="14" id="Stroke-6292" strokeLinecap="round" />
-        <line x1="10.6666667" y1="17" x2="14.2222222" y2="17" id="Stroke-6293" strokeLinecap="round" />
-        <line x1="10.6666667" y1="20" x2="12.4444444" y2="20" id="Stroke-6294" strokeLinecap="round" />
-      </g>
-    </svg>
-  ),
   [ICONS.PIN]: (props: CustomProps) => (
     <svg
       {...props}
@@ -910,4 +880,70 @@ export const icons = {
       <path d="M6,3.33333333 C7.47333333,3.33333333 8.66666667,4.528 8.66666667,6" />
     </svg>
   ),
+  [ICONS.CONTROVERSIAL]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-6 0 26 24"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M11.52,11.55s1-1.64,4.28-2.27A4.19,4.19,0,0,0,18,2.13l0,0a4.19,4.19,0,0,0-7.15,2.17C10.13,7.55,8.5,8.53,8.5,8.53" />
+      <path d="M14.74,15.33,4.62,5.21a1.64,1.64,0,0,0-2.32,0h0a1.64,1.64,0,0,0,0,2.32L12.42,17.65a1.64,1.64,0,0,0,2.32,0h0A1.64,1.64,0,0,0,14.74,15.33Z" />
+      <line x1="6.75" y1="11.98" x2="7.97" y2="13.2" />
+      <line x1="10.24" y1="15.46" x2="7.97" y2="13.2" />
+      <line x1="6.75" y1="11.98" x2="4.49" y2="9.71" />
+      <path d="M10.24,15.46A4.81,4.81,0,1,1,4.49,9.71L6.75,12A2.71,2.71,0,1,0,8,13.2Z" />
+      <path d="M17.1,4.58a1.4,1.4,0,0,1-.28,1.77" />
+    </svg>
+  ),
+  [ICONS.NEW]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-6 0 24 24"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="6.65" cy="14.71" r="0.34" transform="translate(-0.5 0.24) rotate(-1.96)" />
+      <circle cx="4.28" cy="16.8" r="0.43" transform="translate(-0.57 0.16) rotate(-1.96)" />
+      <circle cx="3.5" cy="13.91" r="0.43" transform="translate(-0.47 0.13) rotate(-1.96)" />
+      <path d="M14.12,2.43c.39-.35,1-.75,1.37-1.1" />
+      <path d="M.83,15.17c.07,2.12,1.83,4.27,3.95,4.08,3.39-.31,6.09-4.7,6.09-4.7s-2.35,1.75-2.41.25a3.59,3.59,0,0,1,1.31-3,14.73,14.73,0,0,0,2.47-3.76c.11-.24-4.49,3.11-5.23,3.52-1.17.66-1.73-.85-1-1.68.48-.51,6.38-6,6.38-6L3.2,11S.76,13,.83,15.17Z" />
+      <path d="M7.51,4.57l-.18-.51a1.54,1.54,0,0,0-1.15-1L5.64,3l.51-.18a1.54,1.54,0,0,0,1-1.15l.1-.53.18.51a1.54,1.54,0,0,0,1.15,1l.53.1-.51.18A1.54,1.54,0,0,0,7.61,4Z" />
+      <path d="M15.48,17.56l-.15-.4a1.21,1.21,0,0,0-.91-.78L14,16.3l.4-.15a1.21,1.21,0,0,0,.78-.91l.08-.42.15.4a1.21,1.21,0,0,0,.91.78l.42.08-.4.15a1.21,1.21,0,0,0-.78.91Z" />
+      <path d="M3.08,8.07,3,7.77a.87.87,0,0,0-.66-.56L2,7.15,2.31,7a.87.87,0,0,0,.56-.66l.06-.3.1.29a.87.87,0,0,0,.66.56L4,7l-.29.1a.87.87,0,0,0-.56.66Z" />
+      <line x1="17.73" y1="6.78" x2="12.48" y2="12.52" />
+      <line x1="14.55" y1="6.03" x2="19.13" y2="1.86" />
+    </svg>
+  ),
+  [ICONS.BEST]: (props: CustomProps) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-6 0 24 24"
+      width={props.size || '18'}
+      height={props.size || '18'}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polygon points="10.05 3 11.5 5.94 14.75 6.42 12.4 8.71 12.96 11.95 10.05 10.42 7.14 11.95 7.7 8.71 5.34 6.42 8.6 5.94 10.05 3" />
+      <circle cx="10" cy="7.66" r="7" />
+      <polyline points="8.6 15.08 6.43 19.33 5.18 17.17 2.63 17.39 4.87 13" />
+      <polyline points="14.94 12.98 17.37 17.09 14.88 16.99 13.7 19.26 11.19 15.03" />
+    </svg>
+  ),
 };

ui/constants/icons.js

@@ -125,3 +125,4 @@ export const SLIME_ACTIVE = 'SlimeActive';
 export const FIRE = 'Fire';
 export const SLIME = 'Slime';
 export const PIN = 'Pin';
+export const BEST = 'Best';