From f1b83a96fdb89ab3dc718a5753645b8786ca9491 Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Mon, 24 Jan 2022 05:41:26 -0800
Subject: [PATCH] do not add `GrayedOutOverlay` if there is no children (#3329)

Summary:
Do not add `GrayedOutOverlay` to the `ToggledSection` component if there is no children.

Current approach was causing UI issue in the Settings Modal in dark mode.

## Changelog

* do not add `GrayedOutOverlay` to the `ToggledSection` if there is no children

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

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

## Preview (before & after)

<img width="390" alt="Screenshot 2022-01-23 at 15 32 29" align="left" src="https://user-images.githubusercontent.com/719641/150683689-d70f2af9-d835-4139-a8bb-a638aca9b8d3.png">
<img width="390" alt="Screenshot 2022-01-23 at 15 32 12" src="https://user-images.githubusercontent.com/719641/150683692-86da3fba-5740-426e-96c7-6838632f42f0.png">

Reviewed By: aigoncharov

Differential Revision: D33738627

Pulled By: lblasa

fbshipit-source-id: 12b028e3c7986a4fa196bac6f32a9efc19f1883d
---
 .../flipper-ui-core/src/chrome/settings/ToggledSection.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/desktop/flipper-ui-core/src/chrome/settings/ToggledSection.tsx b/desktop/flipper-ui-core/src/chrome/settings/ToggledSection.tsx
index a9864bf81..0fb6da411 100644
--- a/desktop/flipper-ui-core/src/chrome/settings/ToggledSection.tsx
+++ b/desktop/flipper-ui-core/src/chrome/settings/ToggledSection.tsx
@@ -45,7 +45,9 @@ export default function ToggledSection(props: {
       </FlexRow>
       <IndentedSection>
         {props.children}
-        {props.toggled || props.frozen ? null : <GrayedOutOverlay />}
+        {props.toggled || props.frozen
+          ? null
+          : props.children && <GrayedOutOverlay />}
       </IndentedSection>
     </FlexColumn>
   );