Open Advanced Grid Settings from the +# Badge also (#6545)

• making the badge that tells you how many advanced settings are set,
into an actual button, with a hover state, theme responsive color, that
actually opens the advanced grid settings popup
• fixing the broken colors in the dark theme of the advanced settings
popup


| Before  | After |
| ------------- | ------------- |
|
![before](https://github.com/user-attachments/assets/44aeed14-44ec-4eb8-a1b3-f9618b598b3f)|
![after](https://github.com/user-attachments/assets/e4c6d820-cfa1-486b-bcbc-76f6da3e082c)
|
| <img width="511" alt="Screenshot 2024-10-15 at 4 01 33 PM"
src="https://github.com/user-attachments/assets/5fde2b12-352e-4040-9426-7ca1aaef5b6e">
| <img width="509" alt="Screenshot 2024-10-15 at 4 02 04 PM"
src="https://github.com/user-attachments/assets/93939aba-1d80-4ff2-8e41-e801a5792fd6">
|
| <img width="268" alt="Screenshot 2024-10-15 at 4 03 03 PM"
src="https://github.com/user-attachments/assets/a1496027-81fc-456c-9936-5cdfdeba5b43">
|<img width="279" alt="Screenshot 2024-10-15 at 4 02 33 PM"
src="https://github.com/user-attachments/assets/4c5ad8df-0b64-4dbf-9ac4-76b2d65d8324">
|

editor/src/components/inspector/add-remove-layout-system-control.tsx

@@ -247,9 +247,10 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
         {when(
           numberOfGridPropsSet > 0 && !menuOpen && !popupOpen,
           <Button
+            onClick={openPopup}
+            highlight
             style={{
-              color: colorTheme.secondaryBlue.value,
-              background: colorTheme.bg3.value,
+              color: colorTheme.dynamicBlue.value,
               minWidth: 22,
             }}
           >

editor/src/components/inspector/controls/advanced-grid-modal.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { InspectorModal } from '../widgets/inspector-modal'
-import { FlexColumn, H1, SquareButton, UtopiaStyles } from '../../../uuiui'
+import { colorTheme, FlexColumn, H1, SquareButton, UtopiaStyles } from '../../../uuiui'
 import type { GridRowVariant } from '../widgets/ui-grid-row'
 import { UIGridRow } from '../widgets/ui-grid-row'
 import type { OptionChainOption } from './option-chain-control'
@@ -113,6 +113,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
       style={{
         ...UtopiaStyles.popup,
         minWidth: 230,
+        color: colorTheme.fg1.value,
       }}
     >
       <FlexColumn>