fix(client): fix modal heading CSS for light theme (#40106)

client/src/components/layouts/global.css

@@ -436,7 +436,17 @@ pre {
 
 .panel-primary > .panel-heading {
   background-color: transparent;
-  border-color: var(--color-primary);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.solution-viewer,
+.solution-viewer pre {
+  margin-bottom: 0px;
+}
+
+.solution-viewer {
+  border-color: var(--primary-color);
 }
 
 .has-success .help-block,

client/src/components/settings/SolutionViewer.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { Panel } from '@freecodecamp/react-bootstrap';
 import Prism from 'prismjs';
 
-import './solution-viewer.css';
-
 const prismLang = {
   css: 'css',
   js: 'javascript',

client/src/components/settings/solution-viewer.css

@@ -1,8 +0,0 @@
-.solution-viewer,
-.solution-viewer pre {
-  margin-bottom: 0px;
-}
-
-.solution-viewer {
-  border-color: var(--color-primary);
-}