tweak Doctor modal footer UI, replace deprecated UI components (#3331)

Summary:
This PR fixes the unaligned checkbox in the Doctor modal (I have based the solution of the Settings modal code) and also replaces deprecated components `FlexRow` and `FlexColumn` in Settings modal.

## Changelog

* fix checkbox placement in the Doctor modal footer

Pull Request resolved: https://github.com/facebook/flipper/pull/3331

Test Plan:
The change has been testes by running the desktop Flipper app locally from source.

## Preview (before & after)

<img width="596" alt="Screenshot 2022-01-23 at 16 01 48" src="https://user-images.githubusercontent.com/719641/150685091-ce494847-eea6-4263-900a-2b5541d3d897.png">
<img width="596" alt="Screenshot 2022-01-23 at 16 01 44" src="https://user-images.githubusercontent.com/719641/150685096-29723d14-6cfc-42aa-9564-431a61b1061d.png">

Reviewed By: aigoncharov

Differential Revision: D33738683

Pulled By: lblasa

fbshipit-source-id: 900657d6cb095d6d32dd412205e714a46e64a564

desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx

@@ -17,7 +17,7 @@ import {
   QuestionCircleFilled,
   LoadingOutlined,
 } from '@ant-design/icons';
-import {Layout} from '../ui';
+import {Layout, styled} from '../ui';
 import {theme} from 'flipper-plugin';
 import {
   startHealthchecks,
@@ -161,6 +161,11 @@ function HealthCheckList(props: {report: FlipperDoctor.HealthcheckReport}) {
   );
 }
 
+const FooterContainer = styled(Layout.Horizontal)({
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
 function SetupDoctorFooter(props: {
   onClose: () => void;
   onRerunDoctor: () => Promise<void>;
@@ -172,14 +177,15 @@ function SetupDoctorFooter(props: {
   return (
     <Layout.Right>
       {props.showAcknowledgeCheckbox ? (
-        <Checkbox
-          checked={props.acknowledgeCheck}
-          onChange={(e) => props.onAcknowledgeCheck(e.target.checked)}
-          style={{display: 'flex', alignItems: 'center'}}>
-          <Text style={{fontSize: theme.fontSize.small}}>
-            Do not show warning about these problems at startup
-          </Text>
-        </Checkbox>
+        <FooterContainer>
+          <Checkbox
+            checked={props.acknowledgeCheck}
+            onChange={(e) => props.onAcknowledgeCheck(e.target.checked)}>
+            <Text style={{fontSize: theme.fontSize.small}}>
+              Do not show warning about these problems at startup
+            </Text>
+          </Checkbox>
+        </FooterContainer>
       ) : (
         <Layout.Container />
       )}

desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, {cloneElement} from 'react';
-import {styled, FlexRow, FlexColumn} from '../ui';
+import {styled} from '../ui';
 import {Modal, Button, Image, Checkbox, Space, Typography, Tooltip} from 'antd';
 import {
   RocketOutlined,
@@ -29,7 +29,7 @@ import {getFlipperLib} from 'flipper-plugin';
 import {ReleaseChannel} from 'flipper-common';
 import {showChangelog} from '../chrome/ChangelogSheet';
 
-const RowContainer = styled(FlexRow)({
+const RowContainer = styled(Layout.Horizontal)({
   alignItems: 'flex-start',
   padding: `${theme.space.small}px`,
   cursor: 'pointer',
@@ -53,19 +53,19 @@ function Row(props: {
           {cloneElement(props.icon, {
             style: {fontSize: 36, color: theme.primaryColor},
           })}
-          <FlexColumn>
+          <Layout.Container>
             <Title level={3} style={{color: theme.primaryColor}}>
               {props.title}
             </Title>
             <Text type="secondary">{props.subtitle}</Text>
-          </FlexColumn>
+          </Layout.Container>
         </Space>
       </RowContainer>
     </Tracked>
   );
 }
 
-const FooterContainer = styled(FlexRow)({
+const FooterContainer = styled(Layout.Horizontal)({
   justifyContent: 'space-between',
   alignItems: 'center',
 });