diff --git a/app/assets/javascripts/components/NoAccountWarning.tsx b/app/assets/javascripts/components/NoAccountWarning.tsx
index 299de54b0..322cf5c9d 100644
--- a/app/assets/javascripts/components/NoAccountWarning.tsx
+++ b/app/assets/javascripts/components/NoAccountWarning.tsx
@@ -35,9 +35,9 @@ function NoAccountWarning({
         }}
         title="Ignore"
         label="Ignore"
-        className="border-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1"
+        className="border-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 color-neutral hover:color-info"
       >
-        <Close className="fill-neutral hover:fill-info" />
+        <Close className="fill-current" />
       </button>
     </div>
   );
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 06ff43e0b..735334c0f 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1,14 +1,15 @@
-/* Generic UI controls that have yet to be extracted in Stylekit  */
+/* Generic UI controls that have yet to be extracted into Stylekit  */
 
 .sn-btn {
-  @extend .text-sm;
+  @extend .border-0;
+  @extend .bg-main;
+  @extend .cursor-pointer;
   @extend .font-bold;
   @extend .py-2;
   @extend .px-3;
-  @extend .bg-main;
-  @extend .text-info-contrast;
-  @extend .border-0;
   @extend .rounded;
-  @extend .cursor-pointer;
+  @extend .text-info-contrast;
+  @extend .text-sm;
+
   @extend .hover\:brightness-130;
 }
diff --git a/app/assets/stylesheets/_ui.scss b/app/assets/stylesheets/_ui.scss
index a8558dd9e..76c23e573 100644
--- a/app/assets/stylesheets/_ui.scss
+++ b/app/assets/stylesheets/_ui.scss
@@ -153,6 +153,13 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   grid-column-end: 3;
 }
 
+.color-neutral {
+  color: var(--sn-stylekit-neutral-color)
+}
+.hover\:color-info:hover {
+  color: var(--sn-stylekit-info-color)
+}
+
 .hover\:brightness-130:hover {
   filter: brightness(130%);
 }
@@ -161,11 +168,8 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   cursor: pointer;
 }
 
-.fill-neutral {
-  fill: var(--sn-stylekit-neutral-color);
-}
-.hover\:fill-info:hover {
-  fill: var(--sn-stylekit-info-color)
+.fill-current {
+  fill: currentColor;
 }
 
 .font-semibold {