From f5af063191833004d0aeea35f5f39f982667cafa Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Fri, 15 Feb 2019 13:36:32 -0800
Subject: [PATCH] Improve spinner colors on top of medium-brightness
 backgrounds

---
 stylesheets/_ios.scss        | 20 ++++++++++----------
 stylesheets/_modules.scss    | 12 ++++++------
 stylesheets/_theme_dark.scss | 12 ++++++------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index fae0cada3..57ca2e1a1 100644
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -133,29 +133,29 @@
   }
 
   .module-spinner__circle--incoming {
-    background-color: $color-gray-15;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--incoming {
     background-color: $color-gray-60;
   }
   .module-spinner__circle--small-incoming {
-    background-color: $color-gray-15;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--small-incoming {
     background-color: $color-gray-60;
   }
 
   .module-spinner__circle--outgoing {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--outgoing {
-    background-color: $color-gray-05;
+    background-color: $color-white;
   }
   .module-spinner__circle--small-outgoing {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--small-outgoing {
-    background-color: $color-gray-05;
+    background-color: $color-white;
   }
 
   &.dark-theme {
@@ -323,26 +323,26 @@
     }
 
     .module-spinner__circle--incoming {
-      background-color: $color-gray-45;
+      background-color: $color-white-04;
     }
     .module-spinner__arc--incoming {
       background-color: $color-gray-25;
     }
     .module-spinner__circle--small-incoming {
-      background-color: $color-gray-45;
+      background-color: $color-white-04;
     }
     .module-spinner__arc--small-incoming {
       background-color: $color-gray-25;
     }
 
     .module-spinner__circle--outgoing {
-      background-color: $color-gray-45;
+      background-color: $color-white-04;
     }
     .module-spinner__arc--outgoing {
       background-color: $color-gray-05;
     }
     .module-spinner__circle--small-outgoing {
-      background-color: $color-gray-45;
+      background-color: $color-white-04;
     }
     .module-spinner__arc--small-outgoing {
       background-color: $color-gray-05;
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 856f598a3..0f0a7f7de 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -2712,7 +2712,7 @@
   top: 0;
   left: 0;
 
-  @include color-svg('../images/spinner-track-56.svg', $color-gray-15);
+  @include color-svg('../images/spinner-track-56.svg', $color-white-04);
   z-index: 2;
   height: 56px;
   width: 56px;
@@ -2748,7 +2748,7 @@
 }
 
 .module-spinner__circle--small {
-  @include color-svg('../images/spinner-track-24.svg', $color-gray-15);
+  @include color-svg('../images/spinner-track-24.svg', $color-white-04);
   height: 24px;
   width: 24px;
 }
@@ -2759,16 +2759,16 @@
 }
 
 .module-spinner__circle--incoming {
-  background-color: $color-gray-75;
+  background-color: $color-white-04;
 }
 .module-spinner__arc--incoming {
-  background-color: $color-gray-15;
+  background-color: $color-white;
 }
 .module-spinner__circle--small-incoming {
-  background-color: $color-gray-75;
+  background-color: $color-white-04;
 }
 .module-spinner__arc--small-incoming {
-  background-color: $color-gray-15;
+  background-color: $color-white;
 }
 
 // Third-party module: react-contextmenu
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 204fc4023..f31721f1d 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -1412,39 +1412,39 @@ body.dark-theme {
   // Module: Spinner
 
   .module-spinner__circle {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc {
     background-color: $color-gray-05;
   }
   .module-spinner__circle--small {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--small {
     background-color: $color-gray-05;
   }
 
   .module-spinner__circle--incoming {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--incoming {
     background-color: $color-gray-05;
   }
   .module-spinner__circle--small-incoming {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--small-incoming {
     background-color: $color-gray-05;
   }
 
   .module-spinner__circle--outgoing {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--outgoing {
     background-color: $color-gray-05;
   }
   .module-spinner__circle--small-outgoing {
-    background-color: $color-gray-45;
+    background-color: $color-white-04;
   }
   .module-spinner__arc--small-outgoing {
     background-color: $color-gray-05;