From f8d2bbe200ae1f603abd93d2714c7529370d324e Mon Sep 17 00:00:00 2001
From: Hannah <lilypickle@hotmail.fr>
Date: Wed, 22 Apr 2020 15:16:51 +0200
Subject: [PATCH] Group manager color changes light and dark mode

Light mode and dark mode color change to group block when checked in selection mode, and to the group icon (changed to orange) number of members made orange.
Dark mode selection mode orange color made darker
Dark mode group name changes to black when checked, changes via jquery (BlackFont class added)
---
 admin/themes/clear/theme.css                 | 10 +++----
 admin/themes/default/template/group_list.tpl | 12 ++++++---
 admin/themes/roma/theme.css                  | 28 +++++++++++++-------
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index 94bdd3dcc..626018d1a 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -500,13 +500,13 @@ input:focus + .slider {
   background-color:#ffd7ad!important;
 }
 
-.GreyBackground{
-  background-color:#e7e7e7!important;
-  color:#a0a0a0!important;
+.OrangeIcon{
+  background-color:#f98100!important;
+  color:#ffe4c7!important;
 }
 
-.GreyFont{
-  color:#a0a0a0!important;
+.OrangeFont{
+  color:#ff7700!important;
 }
 
 /*Selection mode content*/
diff --git a/admin/themes/default/template/group_list.tpl b/admin/themes/default/template/group_list.tpl
index d985f2569..ede527b3a 100644
--- a/admin/themes/default/template/group_list.tpl
+++ b/admin/themes/default/template/group_list.tpl
@@ -132,11 +132,12 @@ $(function () {
                 $(".Group-checkbox").css('display','none');
                 $(".Group-checkbox-container input").prop("checked", false);
                 $('#group-1 li').removeClass("OrangeBackground"); 
-                $('.groups .icon-users-1:first-child').removeClass("GreyBackground"); 
+                $('.groups .icon-users-1:first-child').removeClass("OrangeIcon"); 
                 $(".GroupManagerButtons").removeClass("DisableInSelectionMode");
                 $("#group_name").attr('contenteditable', true);
                 $(".icon-pencil").removeClass("DisableInSelectionMode");
                 $("label").css("cursor","pointer")
+                $('.groups label').removeClass("BlackFont")
             }
         });
     });
@@ -149,11 +150,14 @@ Change background color of group block if checked in selection mode
 $(".Group-checkbox-container input[type='checkbox']").change(function(){
 if($(this).is(":checked")){
     $('#group-1 li').addClass("OrangeBackground"); 
-    $('.groups .icon-users-1:first-child').addClass("GreyBackground");
-    $('.groups .group_number_users').addClass("GreyFont");
+    $('.groups .icon-users-1:first-child').addClass("OrangeIcon");
+    $('.groups .group_number_users').addClass("OrangeFont");
+    $('.groups label').addClass("BlackFont")
 }else{
     $('#group-1 li').removeClass("OrangeBackground"); 
-    $('.groups .icon-users-1:first-child').removeClass("GreyBackground"); 
+    $('.groups .icon-users-1:first-child').removeClass("OrangeIcon"); 
+    $('.groups .group_number_users').removeClass("OrangeFont");
+     $('.groups label').removeClass("BlackFont")
 } });
 
 /*-------
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index abc413859..eedcbf4dc 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -496,7 +496,7 @@ label>p.group_select {
 }
 
 input:checked + .slider {
-  background-color: #FFC27F;
+  background-color: #ff8c27;
 }
 
 input:focus + .slider {
@@ -509,16 +509,20 @@ input:focus + .slider {
 }
 
 .OrangeBackground{
-  background-color:#ffa744!important;
+  background-color:#f9852c!important;
 }
 
-.GreyBackground{
-  background-color:#e7e7e7!important;
-  color:#a0a0a0!important;
+.OrangeIcon{
+  background-color:#ae5d1e !important;
+  color:#faa96b!important;
 }
 
-.GreyFont{
-  color:#3c3c3c!important;
+.OrangeFont{
+  color:#fddaba!important;
+}
+
+.BlackFont{
+  color:black!important;
 }
 
 /*Selection mode content*/
@@ -576,17 +580,21 @@ input:focus + .slider {
 /*Group checkbox*/
 
 .groups .group-checkmark {
-  border:2px solid #ff7700;
+  border:2px solid #c76a23;
 }
 
 .groups .Group-checkbox-container:hover input ~ .group-checkmark {
-  background-color: #ff7700;
+  background-color: #c76a23;
 }
 
 .groups .Group-checkbox-container input:checked ~ .group-checkmark {
-  background-color: #ff7700;
+  background-color: #c76a23;
 }
 
+.groups .Group-checkbox-container .group-checkmark:after {
+  border: solid #ebebeb;
+  border-width: 0 3px 3px 0;
+}
 
 /*Group manager buttons*/