Fix Settings window hotkeys alignment and colors (#2961)

Summary:
This PR fixes a few color issues (mainly on dark mode) and the alignment of the `React Native keyboard shortcuts` hotkeys.

I also took the liberty of changing the color of a few other icons.

### Light mode

|Before|After|
|---|---|
|![image](https://user-images.githubusercontent.com/6207220/136688801-d317b9b3-8393-4443-bd39-87a4d330da10.png)|![image](https://user-images.githubusercontent.com/6207220/136688833-43e1ec2f-7c1f-4995-ba9e-afedfd3ccb26.png)|

### Dark mode

|Before|After|
|---|---|
|![image](https://user-images.githubusercontent.com/6207220/136688811-2b5f5dbc-3dc8-41c2-955a-c1af8a5637c4.png)|![image](https://user-images.githubusercontent.com/6207220/136688839-188bdc2a-d589-4c84-a1db-aa8c93ca9d61.png)|

## Changelog

Fix `Settings` window hotkeys alignment and colors.

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

Test Plan:
1. Run the app;
1. Press `⌘` + `,`;
2. Profit.

Reviewed By: mweststrate

Differential Revision: D31546032

Pulled By: passy

fbshipit-source-id: 5f7c73826cf6a367afb1ad758d1fd0451aaeb6cf

desktop/app/src/chrome/settings/KeyboardShortcutInput.tsx

@@ -39,42 +39,43 @@ const Container = styled(FlexRow)({
   paddingTop: 5,
   paddingLeft: 10,
   paddingRight: 10,
-  width: 343,
 });
 
 const Label = styled(Text)({
+  flex: 1,
   alignSelf: 'center',
-  width: 140,
 });
 
 const ShortcutKeysContainer = styled(FlexRow)<{invalid: boolean}>(
   {
-    backgroundColor: colors.white,
-    borderWidth: 1,
-    borderStyle: 'solid',
+    flex: 1,
+    backgroundColor: theme.backgroundDefault,
+    border: '1px solid',
     borderRadius: 4,
     display: 'flex',
     height: 28,
-    flexGrow: 1,
     padding: 2,
   },
-  (props) => ({borderColor: props.invalid ? colors.red : colors.light15}),
+  (props) => ({
+    borderColor: props.invalid ? theme.errorColor : theme.dividerColor,
+  }),
 );
 
 const ShortcutKeyContainer = styled.div({
-  border: `1px solid ${colors.light20}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: `1px solid ${theme.dividerColor}`,
   backgroundColor: theme.backgroundWash,
   padding: 3,
   margin: '0 1px',
   borderRadius: 3,
   width: 23,
   textAlign: 'center',
-  boxShadow: `inset 0 -1px 0 ${colors.light20}`,
 });
 
 const ShortcutKey = styled.span({
-  color: colors.dark70,
-  verticalAlign: 'middle',
+  color: theme.textColorPrimary,
 });
 
 const HiddenInput = styled.input({
@@ -137,7 +138,7 @@ const KeyboardShortcutInput = (props: {
     if (typeof props.onChange === 'function') {
       props.onChange(accelerator.join('+'));
     }
-  }, [isShortcutValid]);
+  }, [isShortcutValid, pressedKeys, props]);
 
   const inputRef = useRef<HTMLInputElement>(null);
   let typingTimeout: NodeJS.Timeout;
@@ -228,22 +229,32 @@ const KeyboardShortcutInput = (props: {
         />
       </ShortcutKeysContainer>
 
-      <FlexColumn onClick={() => handleUpdatePressedKeys(initialPressedKeys)}>
-        <CenteredGlyph name="undo" variant="outline" />
-      </FlexColumn>
+      <FlexRow>
+        <FlexColumn onClick={() => handleUpdatePressedKeys(initialPressedKeys)}>
+          <CenteredGlyph
+            color={theme.primaryColor}
+            name="undo"
+            variant="outline"
+          />
+        </FlexColumn>
 
-      <FlexColumn
-        onClick={() =>
-          handleUpdatePressedKeys({
-            metaKey: false,
-            altKey: false,
-            ctrlKey: false,
-            shiftKey: false,
-            character: '',
-          })
-        }>
-        <CenteredGlyph name="cross" variant="outline" />
-      </FlexColumn>
+        <FlexColumn
+          onClick={() =>
+            handleUpdatePressedKeys({
+              metaKey: false,
+              altKey: false,
+              ctrlKey: false,
+              shiftKey: false,
+              character: '',
+            })
+          }>
+          <CenteredGlyph
+            color={theme.errorColor}
+            name="cross"
+            variant="outline"
+          />
+        </FlexColumn>
+      </FlexRow>
     </Container>
   );
 };

desktop/app/src/chrome/settings/configFields.tsx

@@ -23,6 +23,7 @@ import {promises as fs} from 'fs';
 // eslint-disable-next-line flipper/no-electron-remote-imports
 import {remote} from 'electron';
 import path from 'path';
+import {theme} from 'flipper-plugin';
 
 export const ConfigFieldContainer = styled(FlexRow)({
   paddingLeft: 10,
@@ -116,7 +117,11 @@ export function FilePathConfigField(props: {
               }
             })
         }>
-        <CenteredGlyph name="dots-3-circle" variant="outline" />
+        <CenteredGlyph
+          color={theme.primaryColor}
+          name="dots-3-circle"
+          variant="outline"
+        />
       </FlexColumn>
       {props.resetValue && (
         <FlexColumn
@@ -125,7 +130,11 @@ export function FilePathConfigField(props: {
             setValue(props.resetValue!);
             props.onChange(props.resetValue!);
           }}>
-          <CenteredGlyph name="undo" variant="outline" />
+          <CenteredGlyph
+            color={theme.primaryColor}
+            name="undo"
+            variant="outline"
+          />
         </FlexColumn>
       )}
       {isValid ? null : (