From bb8596f89e1f83b5c31f0293bcba9dd241f84fa9 Mon Sep 17 00:00:00 2001
From: McKayla Lankau <lankaukk@yahoo.com>
Date: Tue, 15 Oct 2024 16:12:36 -0400
Subject: [PATCH] Open Advanced Grid Settings from the +# Badge also (#6545)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• 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">
|
---
 .../inspector/add-remove-layout-system-control.tsx           | 5 +++--
 .../components/inspector/controls/advanced-grid-modal.tsx    | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/inspector/add-remove-layout-system-control.tsx b/editor/src/components/inspector/add-remove-layout-system-control.tsx
index 6d8d5499bb3a..3da4b06c2f8f 100644
--- a/editor/src/components/inspector/add-remove-layout-system-control.tsx
+++ b/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,
             }}
           >
diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
index 444949fa60d4..99f947ba5718 100644
--- a/editor/src/components/inspector/controls/advanced-grid-modal.tsx
+++ b/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>