From b62861e0e50ef706f5641f0909a2f27ae3d84972 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Tue, 27 Feb 2024 21:10:55 -0500
Subject: [PATCH] use blue instead of orange for enketo surveys

Since Enketo's themes use SCSS it isn't that hard to override the orange color. This makes it a bit more cohesive with the rest of the app.
---
 www/css/{style.css => style.scss} | 6 ++++++
 www/index.js                      | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)
 rename www/css/{style.css => style.scss} (61%)

diff --git a/www/css/style.css b/www/css/style.scss
similarity index 61%
rename from www/css/style.css
rename to www/css/style.scss
index 7d7707fdc..e2172a632 100644
--- a/www/css/style.css
+++ b/www/css/style.scss
@@ -1,3 +1,6 @@
+/* This file is in Sassy CSS (SCSS) because Enketo uses SCSS and we want to extend on their styles.
+  Webpack will just compile this to plain CSS anyway */
+
 @import 'leaflet/dist/leaflet.css';
 
 html {
@@ -7,6 +10,9 @@ html {
 /* Scoped styles for Enketo */
 /* if we don't contain them here, they will leak into the rest of the app */
 .enketo-plugin {
+  // Enketo's default theme uses orange; we can override with our own blue
+  $primary: #0080b9; // matches 'primary' in appTheme.ts
+  $brand-primary-color: darken($primary, 5%); // make it a bit darker for legibility in Enketo UI
   @import 'enketo-core/src/sass/formhub/formhub.scss';
   flex: 1;
   .question.non-select {
diff --git a/www/index.js b/www/index.js
index f81e710fc..cd4757f3f 100644
--- a/www/index.js
+++ b/www/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider as PaperProvider } from 'react-native-paper';
 
-import './css/style.css';
+import './css/style.scss';
 import 'chartjs-adapter-luxon';
 
 import initializedI18next from './js/i18nextInit';