From d00288fd7146917f8b560b79907cfd4445d8929f Mon Sep 17 00:00:00 2001
From: rebuilt <memoryman51@hotmail.com>
Date: Mon, 22 May 2023 12:29:26 -0700
Subject: [PATCH] Move color definitions out of response rate presenter and
 into _colors.scss

---
 app/assets/stylesheets/partials/_colors.scss       | 5 +++++
 app/presenters/response_rate_presenter.rb          | 6 +-----
 app/views/overview/_response_rate_graphic.html.erb | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/partials/_colors.scss b/app/assets/stylesheets/partials/_colors.scss
index 54dde4f1..02567c0f 100644
--- a/app/assets/stylesheets/partials/_colors.scss
+++ b/app/assets/stylesheets/partials/_colors.scss
@@ -25,6 +25,11 @@ $growth: $gold;
 $approval: $purple;
 $ideal: $purple;
 
+:root {
+  --color-purple: #{$purple};
+  --color-gold: #{$gold};
+}
+
 .color-red {
   color: $red;
 }
diff --git a/app/presenters/response_rate_presenter.rb b/app/presenters/response_rate_presenter.rb
index 80193519..14e1c5fb 100644
--- a/app/presenters/response_rate_presenter.rb
+++ b/app/presenters/response_rate_presenter.rb
@@ -20,11 +20,7 @@ class ResponseRatePresenter
   end
 
   def color
-    # Problem: the color (either $gold or $purple) is determined by the scss variable, but the
-    # percentage is decided by the presenter. Therefore the class style must be generated
-    # within this file and not the scss file.
-    # TODO: Fix this.
-    percentage > 75 ? '#49416D' : '#FFC857'
+    percentage > 75 ? 'purple' : 'gold'
   end
 
   def hover_message
diff --git a/app/views/overview/_response_rate_graphic.html.erb b/app/views/overview/_response_rate_graphic.html.erb
index 34798ec8..7b357a20 100644
--- a/app/views/overview/_response_rate_graphic.html.erb
+++ b/app/views/overview/_response_rate_graphic.html.erb
@@ -26,7 +26,7 @@
   position: absolute;
   border-radius: 50%;
   inset: 0;
-  background: conic-gradient(<%= response_rate_presenter.color %> calc(<%= response_rate_presenter.percentage %>*1%),#0000 0);
+  background: conic-gradient(var(--color-<%= response_rate_presenter.color %>) calc(<%= response_rate_presenter.percentage %>*1%),#0000 0);
 }
 </style>