Change content warning icon

src/assets/feather/alert-triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

src/assets/tabler/alert-triangle.svg

@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" stroke="none"/><path d="m12.012 9.6967v2.3019m0 4.6037v0.01151" stroke-width="2.3019"/><path d="m3.9557 21.206h16.113a2.3019 2.3019 0 0 0 2.1177-3.1651l-8.1716-14.099a2.3019 2.3019 0 0 0-4.0283 0l-8.1716 14.099a2.3019 2.3019 0 0 0 2.0141 3.1651" stroke-width="2.3019"/></svg>

src/components/PostEditor.vue

@@ -91,11 +91,11 @@
         <button
           type="button"
           class="icon"
-          :class="{ highlighted: isSensitive }"
+          :class="{ warning: isSensitive }"
-          title="Toggle content warning"
+          :title="isSensitive ? 'Remove content warning' : 'Add content warning'"
           @click="isSensitive = !isSensitive"
         >
-          <img src="@/assets/tabler/alert-triangle.svg">
+          <img src="@/assets/feather/alert-triangle.svg">
         </button>
         <div class="toolbar-space"></div>
         <button
@@ -470,6 +470,14 @@ $line-height: 1.5;
     --loader-width: 2px;
   }
 
+  .icon.warning {
+    color: $warning-color;
+
+    img {
+      filter: $warning-colorizer;
+    }
+  }
+
   .character-counter {
     font-weight: bold;
   }

src/styles/_theme.scss

@@ -15,6 +15,8 @@ $link-color: #484747;
 $link-colorizer: invert(27%) sepia(2%) saturate(0%) hue-rotate(58deg) brightness(96%) contrast(94%);
 $link-hover-color: #000000;
 $link-hover-colorizer: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);
+$warning-color: #C87000;
+$warning-colorizer: invert(51%) sepia(61%) saturate(3100%) hue-rotate(12deg) brightness(88%) contrast(103%);
 $error-color: #FF4D4D;
 $greentext-color: #789922;