From 3f7e3c0441487cfca47aeaefbfe568ccd30f7988 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Wed, 21 Jul 2021 01:41:26 -0700
Subject: [PATCH] Fix dark mode support for Changelog

Summary:
Fix changelog display in dark mode, as reported in https://github.com/facebook/flipper/issues/2379#issuecomment-851059786

Changelog: Fix dark mode support in changelog dialog.

Reviewed By: timur-valiev

Differential Revision: D29801181

fbshipit-source-id: ffbbd012c99dee897c4fd67653b4f6375294d668
---
 desktop/app/src/chrome/ChangelogSheet.tsx | 53 ++++++++---------------
 1 file changed, 18 insertions(+), 35 deletions(-)

diff --git a/desktop/app/src/chrome/ChangelogSheet.tsx b/desktop/app/src/chrome/ChangelogSheet.tsx
index 1418cba32..e69628273 100644
--- a/desktop/app/src/chrome/ChangelogSheet.tsx
+++ b/desktop/app/src/chrome/ChangelogSheet.tsx
@@ -7,12 +7,14 @@
  * @format
  */
 
-import {FlexColumn, styled, Text, FlexRow, Button, Markdown} from '../ui';
+import {Markdown} from '../ui';
 import {readFileSync} from 'fs';
 import React, {Component} from 'react';
 import path from 'path';
 import {reportUsage} from '../utils/metrics';
 import {getChangelogPath} from '../utils/pathUtils';
+import {Modal} from 'antd';
+import {theme} from 'flipper-plugin';
 
 const changelogKey = 'FlipperChangelogStatus';
 
@@ -30,24 +32,12 @@ let getChangelogFromDisk = (): string => {
   return changelogFromDisk;
 };
 
-const Container = styled(FlexColumn)({
-  padding: 20,
-  width: 600,
-});
-
-const Title = styled(Text)({
-  marginBottom: 18,
-  marginRight: 10,
-  fontWeight: 100,
-  fontSize: '40px',
-});
-
 const changelogSectionStyle = {
   padding: 10,
   maxHeight: '60vh',
   overflow: 'scroll',
   marginBottom: 10,
-  background: 'white',
+  background: theme.backgroundDefault,
   borderRadius: 4,
   width: '100%',
 };
@@ -76,27 +66,20 @@ export default class ChangelogSheet extends Component<Props, {}> {
 
   render() {
     return (
-      <Container>
-        <Title>Changelog</Title>
-        <FlexRow>
-          <Markdown
-            source={
-              this.props.recent
-                ? getRecentChangelog(
-                    window.localStorage,
-                    getChangelogFromDisk(),
-                  )
-                : getChangelogFromDisk()
-            }
-            style={changelogSectionStyle}
-          />
-        </FlexRow>
-        <FlexRow>
-          <Button type="primary" compact padded onClick={this.props.onHide}>
-            Close
-          </Button>
-        </FlexRow>
-      </Container>
+      <Modal
+        visible
+        title="Changelog"
+        onCancel={this.props.onHide}
+        footer={null}>
+        <Markdown
+          source={
+            this.props.recent
+              ? getRecentChangelog(window.localStorage, getChangelogFromDisk())
+              : getChangelogFromDisk()
+          }
+          style={changelogSectionStyle}
+        />
+      </Modal>
     );
   }
 }