diff --git a/frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss b/frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss
index 2fe4696212..79a6e26815 100644
--- a/frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss
+++ b/frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss
@@ -33,13 +33,16 @@
border: 1px solid var(--bg-slate-400);
background: var(--bg-ink-300);
border-radius: 2px;
- color: var(--bg-vanilla-400);
font-size: 12px;
- line-height: 10px; /* 83.333% */
+ line-height: 10px;
letter-spacing: 0.12px;
width: 113px;
height: 32px;
cursor: pointer;
+ &,
+ &:hover {
+ color: var(--bg-vanilla-400);
+ }
}
}
diff --git a/frontend/src/container/CloudIntegrationPage/Header/Header.tsx b/frontend/src/container/CloudIntegrationPage/Header/Header.tsx
index d37ba5742a..429a2a60ce 100644
--- a/frontend/src/container/CloudIntegrationPage/Header/Header.tsx
+++ b/frontend/src/container/CloudIntegrationPage/Header/Header.tsx
@@ -33,10 +33,15 @@ function Header(): JSX.Element {
/>
);
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
index 65396a90f4..f1dfde62a6 100644
--- a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
@@ -58,6 +58,23 @@ function AccountSettingsModal({
});
};
+ const handleRegionDeselect = useCallback(
+ (item: string): void => {
+ if (selectedRegions.includes(item)) {
+ setSelectedRegions(selectedRegions.filter((region) => region !== item));
+ if (includeAllRegions) {
+ setIncludeAllRegions(false);
+ }
+ }
+ },
+ [
+ selectedRegions,
+ includeAllRegions,
+ setSelectedRegions,
+ setIncludeAllRegions,
+ ],
+ );
+
const renderRegionSelector = useCallback(() => {
if (isRegionSelectOpen) {
return (
@@ -93,17 +110,19 @@ function AccountSettingsModal({
maxTagCount={3}
value={getRegionPreviewText(selectedRegions)}
open={false}
+ onDeselect={handleRegionDeselect}
/>
>
);
}, [
isRegionSelectOpen,
- selectedRegions,
includeAllRegions,
handleIncludeAllRegionsChange,
- setIsRegionSelectOpen,
+ selectedRegions,
+ handleRegionDeselect,
setSelectedRegions,
setIncludeAllRegions,
+ setIsRegionSelectOpen,
]);
const renderAccountDetails = useCallback(