More button color fixes after switching to css properties

css/converse.css

@@ -9316,10 +9316,13 @@ readers do not read off random characters that represent icons */
   --chat-head-text-color: white;
   --highlight-color: #DCF9F6;
   --primary-color: #578EA9;
-  --secondary-color: #E7A151;
-  --warning-color: #D24E2B;
-  --primary-color-dark: #345566;
-  --secondary-color-dark: #D2842B;
+  --primary-color-dark:  #397491;
+  --secondary-color: #818479;
+  --secondary-color-dark: #585B51;
+  --warning-color: #E7A151;
+  --warning-color-dark: #D2842B;
+  --danger-color: #D24E2B;
+  --danger-color-dark: #A93415;
   --light-background-color: #FCFDFD;
   --error-color: #A53214;
   --info-color: #1E9652;
@@ -9804,26 +9807,49 @@ body.reset {
   #conversejs .nav-pills .show > .nav-link {
     background-color: var(--primary-color); }
   #conversejs .list-group-item.active {
-    background-color: var(--primary-color); }
+    background-color: var(--primary-color);
+    border-color: var(--primary-color-dark); }
   #conversejs .btn-primary, #conversejs .button-primary, #conversejs .badge-primary {
     color: white;
     background-color: var(--primary-color);
     border-color: transparent; }
     #conversejs .btn-primary:hover, #conversejs .button-primary:hover, #conversejs .badge-primary:hover {
-      background-color: var(--secondary-color-dark);
+      background-color: var(--primary-color-dark);
       border-color: transparent; }
+    #conversejs .btn-primary.active, #conversejs .button-primary.active, #conversejs .badge-primary.active {
+      background-color: var(--primary-color-dark) !important;
+      border-color: transparent !important; }
   #conversejs .btn-info, #conversejs .badge-info {
     color: white;
-    background-color: var(--link-color); }
+    background-color: var(--primary-color);
+    border-color: var(--primary-color); }
+    #conversejs .btn-info:hover, #conversejs .badge-info:hover {
+      background-color: var(--primary-color-dark);
+      border-color: var(--primary-color-dark); }
+  #conversejs .button-cancel,
   #conversejs .btn-secondary, #conversejs .badge-secondary {
     color: white;
-    background-color: var(--secondary-color); }
-  #conversejs .button-cancel {
-    color: white;
-    background-color: var(--text-color); }
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color); }
+    #conversejs .button-cancel:hover,
+    #conversejs .btn-secondary:hover, #conversejs .badge-secondary:hover {
+      background-color: var(--secondary-color-dark);
+      border-color: var(--secondary-color-dark); }
   #conversejs .btn-warning {
     color: white;
-    background-color: var(--warning-color); }
+    background-color: var(--warning-color);
+    border-color: var(--warning-color); }
+    #conversejs .btn-warning:hover {
+      color: white;
+      background-color: var(--warning-color-dark);
+      border-color: var(--warning-color-dark); }
+  #conversejs .btn-danger {
+    color: white;
+    background-color: var(--danger-color);
+    border-color: var(--danger-color) !important; }
+    #conversejs .btn-danger:hover {
+      background-color: var(--danger-color-dark);
+      border-color: var(--danger-color-dark); }
   #conversejs .chat-textarea-chatbox-selected {
     border: 1px solid #578308;
     margin: 0; }

dist/converse.js

@@ -101295,7 +101295,7 @@ __e( o.__('Message archiving') ) +
 __e( o.__('Messages are archived on the server') ) +
 '</em></li>\n                        ';
  } ;
-__p += '\n                        </ul>\n                        </div>\n                    </p>\n                </div>\n            </div>\n            <div class="modal-footer">\n                <button type="button" class="btn btn-secondary" data-dismiss="modal">' +
+__p += '\n                        </ul>\n                        </div>\n                    </p>\n                </div>\n            </div>\n            <div class="modal-footer">\n                <button type="button" class="btn btn-warning" data-dismiss="modal">' +
 __e(o.__('Close')) +
 '</button>\n            </div>\n        </div>\n    </div>\n</div>\n';
 return __p
@@ -103790,17 +103790,17 @@ __p += '\n                        ';
  } ;
 __p += '\n                    </ul>\n                ';
  } ;
-__p += '\n            </div>\n            <div class="modal-footer">\n                ';
+__p += '\n            </div>\n            <div class="modal-footer">\n                <button type="button" class="btn btn-warning" data-dismiss="modal">' +
+__e(o.__('Close')) +
+'</button>\n                <button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>' +
+__e(o.__('Refresh')) +
+'</button>\n                ';
  if (o.allow_contact_removal && o.is_roster_contact) { ;
 __p += '\n                    <button type="button" class="btn btn-danger remove-contact"><i class="far fa-trash-alt"> </i>' +
 __e(o.__('Remove as contact')) +
 '</button>\n                ';
  } ;
-__p += '\n                <button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>' +
-__e(o.__('Refresh')) +
-'</button>\n                <button type="button" class="btn btn-secondary" data-dismiss="modal">' +
-__e(o.__('Close')) +
-'</button>\n            </div>\n        </div>\n    </div>\n</div>\n';
+__p += '\n            </div>\n        </div>\n    </div>\n</div>\n';
 return __p
 };
 

sass/_core.scss

@@ -460,6 +460,7 @@ body.reset {
 
     .list-group-item.active {
         background-color: var(--primary-color);
+        border-color: var(--primary-color-dark);
     }
 
     .btn-primary, .button-primary, .badge-primary {
@@ -467,25 +468,55 @@ body.reset {
         background-color: var(--primary-color);
         border-color: transparent;
         &:hover {
-            background-color: var(--secondary-color-dark);
+            background-color: var(--primary-color-dark);
             border-color: transparent;
         }
+        &.active {
+            background-color: var(--primary-color-dark) !important;
+            border-color: transparent !important;
+        }
     }
+
     .btn-info, .badge-info {
         color: white;
-        background-color: var(--link-color);
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
+        &:hover {
+            background-color: var(--primary-color-dark);
+            border-color: var(--primary-color-dark);
+        }
     }
+
+    .button-cancel,
     .btn-secondary, .badge-secondary {
         color: white;
         background-color: var(--secondary-color);
+        border-color: var(--secondary-color);
+        &:hover {
+            background-color: var(--secondary-color-dark);
+            border-color: var(--secondary-color-dark);
+        }
     }
-    .button-cancel {
-        color: white;
-        background-color: var(--text-color);
-    }
+
     .btn-warning {
         color: white;
         background-color: var(--warning-color);
+        border-color: var(--warning-color);
+        &:hover {
+            color: white;
+            background-color: var(--warning-color-dark);
+            border-color: var(--warning-color-dark)
+        }
+    }
+
+    .btn-danger {
+        color: white;
+        background-color: var(--danger-color);
+        border-color: var(--danger-color) !important;
+        &:hover {
+            background-color: var(--danger-color-dark);
+            border-color: var(--danger-color-dark);
+        }
     }
 
     .chat-textarea-chatbox-selected {

sass/_variables.scss

@@ -47,12 +47,17 @@ $font-path: "webfonts/icomoon/fonts/" !default;
 
     --highlight-color: #DCF9F6;
 
-    --primary-color: #578EA9; // light-blue
-    --secondary-color: #E7A151; // orange
-    --warning-color: #D24E2B; // dark-red
+    --primary-color: #578EA9; // blue
+    --primary-color-dark:  #397491;
 
-    --primary-color-dark: #345566; // dark blue
-    --secondary-color-dark: #D2842B; // dark orange
+    --secondary-color: #818479; // gray
+    --secondary-color-dark: #585B51;
+
+    --warning-color: #E7A151; // orange
+    --warning-color-dark: #D2842B;
+
+    --danger-color: #D24E2B; // dark-red
+    --danger-color-dark: #A93415; // darker red
 
     --light-background-color: #FCFDFD;
 

src/templates/chatroom_details_modal.html

@@ -63,7 +63,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.__('Close')}}}</button>
+                <button type="button" class="btn btn-warning" data-dismiss="modal">{{{o.__('Close')}}}</button>
             </div>
         </div>
     </div>

src/templates/user_details_modal.html

@@ -60,11 +60,11 @@
                 {[ } ]}
             </div>
             <div class="modal-footer">
+                <button type="button" class="btn btn-warning" data-dismiss="modal">{{{o.__('Close')}}}</button>
+                <button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>{{{o.__('Refresh')}}}</button>
                 {[ if (o.allow_contact_removal && o.is_roster_contact) { ]}
                     <button type="button" class="btn btn-danger remove-contact"><i class="far fa-trash-alt"> </i>{{{o.__('Remove as contact')}}}</button>
                 {[ } ]}
-                <button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>{{{o.__('Refresh')}}}</button>
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.__('Close')}}}</button>
             </div>
         </div>
     </div>