Fix the content loader.

Author: markrickert

src/components/common/Diff/DiffLoading.js

@@ -3,47 +3,55 @@ import styled from '@emotion/styled'
 import { motion } from 'framer-motion'
 import ContentLoader from 'react-content-loader'
 import { getTransitionDuration } from '../../../utils'
+import { useTheme } from '@emotion/react'
 
-const TitleLoader = () => (
-  <ContentLoader
-    speed={1}
-    backgroundColor="#eee"
-    foregroundColor="#e6e6e6"
-    viewBox="0 0 400 100"
-  >
-    <rect width="250" height="6" rx="1.5" />
-  </ContentLoader>
-)
+const TitleLoader = () => {
+  const theme = useTheme()
 
-const DiffLoader = () => (
-  <ContentLoader
-    speed={1}
-    backgroundColor="#eee"
-    foregroundColor="#e6e6e6"
-    viewBox="0 0 400 100"
-  >
-    <rect x="0" y="10" width="47%" height="6" rx="1.5" />
-    <rect x="200" y="10" width="41%" height="6" rx="1.5" />
-    <rect x="0" y="18" width="43%" height="6" rx="1.5" />
-    <rect x="200" y="34" width="40%" height="6" rx="1.5" />
-    <rect x="200" y="42" width="45%" height="6" rx="1.5" />
-    <rect x="0" y="42" width="40%" height="6" rx="1.5" />
-    <rect x="0" y="50" width="44%" height="6" rx="1.5" />
-  </ContentLoader>
-)
+  return (
+    <ContentLoader
+      speed={1}
+      backgroundColor={theme.rowOdd}
+      foregroundColor={theme.rowEven}
+      viewBox="0 0 400 100"
+    >
+      <rect width="250" height="6" rx="1.5" />
+    </ContentLoader>
+  )
+}
+
+const DiffLoader = () => {
+  const theme = useTheme()
+
+  return (
+    <ContentLoader
+      speed={1}
+      backgroundColor={theme.rowOdd}
+      foregroundColor={theme.rowEven}
+      viewBox="0 0 400 100"
+    >
+      <rect x="0" y="10" width="47%" height="6" rx="1.5" />
+      <rect x="200" y="10" width="41%" height="6" rx="1.5" />
+      <rect x="0" y="18" width="43%" height="6" rx="1.5" />
+      <rect x="200" y="34" width="40%" height="6" rx="1.5" />
+      <rect x="200" y="42" width="45%" height="6" rx="1.5" />
+      <rect x="0" y="42" width="40%" height="6" rx="1.5" />
+      <rect x="0" y="50" width="44%" height="6" rx="1.5" />
+    </ContentLoader>
+  )
+}
 
 const Container = styled(motion.div)`
   margin-top: 16px;
   border: 1px solid ${({ theme }) => theme.border};
   border-radius: 3px;
 `
 
-const Header = styled.div({
-  color: '#24292e',
-  backgroundColor: '#fafbfc',
-  padding: '10px',
-  height: '40px',
-})
+const Header = styled.div`
+  background-color: ${({ theme }) => theme.background};
+  padding: 10px;
+  height: 40px;
+`
 
 const DiffLoading = () => (
   <Container

src/components/common/DiffViewer.js

@@ -28,7 +28,7 @@ const TopContainer = styled.div`
 
 const Link = styled.a`
   padding: 4px 15px;
-  color: #1677ff;
+  color: ${({ theme }) => theme.link};
 `
 
 const getDiffKey = ({ oldRevision, newRevision }) =>

src/theme/index.js

@@ -1,5 +1,5 @@
 export const lightTheme = {
-  background: '#ffffff',
+  background: '#FFFFFF',
 
   text: '#363537',
   textHover: 'rgba(27, 31, 35, 0.6)',
@@ -11,9 +11,6 @@ export const lightTheme = {
   yellowBackground: '#fffbe6',
 
   diff: {
-    decoration: '#dbedff',
-
-    // Color object from https://github.com/otakustay/react-diff-view/blob/master/site/components/DiffView/diff.global.less
     textColor: '#000',
     selectionBackground: '#b3d7ff',
     gutterInsertBackground: '#cdffd8',
@@ -31,9 +28,9 @@ export const lightTheme = {
     decorationContent: '#999',
   },
 
-  // Alternating Row Colors for Binary Download component
-  rowEven: '#fafbfc',
-  rowOdd: '#ffffff',
+  // Alternating Row Colors for Binary Download component and Content Loader animation
+  rowEven: '#EEEEEE',
+  rowOdd: '#FFFFFF',
 
   // The completed files counter
   popover: {
@@ -46,18 +43,16 @@ export const darkTheme = {
   background: '#363537',
 
   text: '#FAFAFA',
-  textHover: '#999',
+  textHover: '#999999',
   link: '#045dc1',
   linkHover: '#40a9ff',
 
-  border: '#888',
+  border: '#555555',
   greenBorder: '#bef5cb',
   yellowBorder: '#c69026',
   yellowBackground: '#37332A',
 
   diff: {
-    decoration: '#dbedff',
-
     // Color object from https://github.com/otakustay/react-diff-view/blob/master/site/components/DiffView/diff.global.less
     textColor: '#fafafa',
     selectionBackground: '#5a5f80',
@@ -76,10 +71,11 @@ export const darkTheme = {
     decorationContent: '#ababab',
   },
 
-  // Alternating Row Colors for Binary Download component
+  // Alternating Row Colors for Binary Download component and Content Loader animation
   rowEven: '#363537',
   rowOdd: '#222223',
 
+  // The completed files counter
   popover: {
     text: '#7dadda',
     background: '#0E5699',