fix: improve contrast in Games Block for better low-vision accessibility (#88)

Author: pganesh-apphelix

src/editors/containers/EditorContainer/index.tsx

@@ -56,6 +56,7 @@ interface Props extends EditorComponent {
   onSave?: Function | null;
   saveButtonLabel?: string | null;
   saveButtonAriaLabel?: string | null;
+  className?: string;
 }
 
 const EditorContainer: React.FC<Props> = ({
@@ -68,6 +69,7 @@ const EditorContainer: React.FC<Props> = ({
   onSave: customOnSave = null,
   saveButtonLabel = null,
   saveButtonAriaLabel = null,
+  className = '',
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -171,7 +173,7 @@ const EditorContainer: React.FC<Props> = ({
           />
         </div>
       </ModalDialog.Header>
-      <ModalDialog.Body className="pb-0">
+      <ModalDialog.Body className={className ? `pb-0 ${className}` : 'pb-0'}>
         <div ref={errorAlertRef}>
           <ErrorAlert
             isError={uploadFailed}

src/editors/containers/GameEditor/index.jsx

@@ -763,6 +763,7 @@ export const GameEditor = ({
       onClose={onClose}
       isDirty={() => isDirty}
       validateEntry={validateAllCards}
+      className="game-editor"
     >
       <div className="editor-body h-75 overflow-auto">
         {Object.keys(validationErrors).length > 0 && isAlertVisible && (

src/editors/containers/GameEditor/index.scss

@@ -9,7 +9,6 @@
   padding: 8px 0;
   align-items: flex-start;
   width: 100%;
-  background: var(--extras-white, #FFFFFF);
 }
 
 .terms {
@@ -301,3 +300,7 @@ width: 100%;
 .shuffle-toggle-button:focus::before {
 	display: none;
 }
+
+.game-editor {
+  background-color: var(--pgn-color-light-300);
+}