Fix yellow backgrounds for darkmode

Author: markrickert

src/components/common/Diff/DiffSection.js

@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react'
+import { Typography } from 'antd'
 import styled from '@emotion/styled'
 import semver from 'semver'
 import Diff from './Diff'
@@ -7,7 +8,7 @@ export const testIDs = {
   diffSection: 'diffSection',
 }
 
-const Title = styled.h1`
+const Title = styled(Typography.Title)`
   margin-top: 0.5em;
 `
 
@@ -46,7 +47,9 @@ const DiffSection = ({
   return (
     <div data-testid={testIDs.diffSection}>
       {title && completedDiffs.length > 0 && (
-        <Title ref={doneTitleRef}>{title}</Title>
+        <Title ref={doneTitleRef} level={2}>
+          {title}
+        </Title>
       )}
 
       {diff.map((diffFile) => {

src/components/common/UsefulContentSection.js

@@ -18,13 +18,13 @@ import { PACKAGE_NAMES } from '../../constants'
 const Container = styled.div`
   position: relative;
   margin-top: 16px;
-  color: rgba(0, 0, 0, 0.65);
   overflow: hidden;
 `
 
 const InnerContainer = styled.div`
-  color: rgba(0, 0, 0, 0.65);
-  background-color: #fffbe6;
+  color: ${({ theme }) =>
+    theme.text + 'D9'}; // the D9 adds some transparency to the text color
+  background-color: ${({ theme }) => theme.yellowBackground};
   border-width: 1px;
   border-left-width: 7px;
   border-color: ${({ theme }) => theme.yellowBorder};
@@ -112,16 +112,12 @@ const HideContentButton = styled(
   border-width: 0px;
   width: 20px;
   height: 20px;
-  color: rgba(0, 0, 0, 0.45);
-  &:hover,
-  &:focus {
-    color: #24292e;
-  }
+  color: ${({ theme }) => theme.text + '73'}; // 45% opacity
 `
 
 const Separator = styled.hr`
   margin: 15px 0;
-  background-color: #e1e4e8;
+  background-color: ${({ theme }) => theme.border};
   height: 0.25em;
   border: 0;
 `

src/theme/index.js

@@ -7,6 +7,7 @@ export const lightTheme = {
   border: '#e8e8e8',
   greenBorder: '#bef5cb',
   yellowBorder: '#ffe58f',
+  yellowBackground: '#fffbe6',
 
   diff: {
     decoration: '#dbedff',
@@ -40,7 +41,8 @@ export const darkTheme = {
   textHover: '#999',
   border: '#888',
   greenBorder: '#bef5cb',
-  yellowBorder: '#ffe58f',
+  yellowBorder: '#c69026',
+  yellowBackground: '#37332A',
 
   diff: {
     decoration: '#dbedff',