fix: update feature flag modal design & add headers (#4370)

* initial

* progress

* sike no progress

* design updates

* fix header

* remove colon

* add flag

src/components/FeatureFlagModal/FeatureFlagModal.tsx

-import { FeatureFlag, useUpdateFlag } from 'featureFlags'
+import { FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { TokenSafetyVariant, useTokenSafetyFlag } from 'featureFlags/flags/tokenSafety'
-import { ReactNode } from 'react'
+import { useAtomValue } from 'jotai/utils'
+import { ReactNode, useState } from 'react'
 import { X } from 'react-feather'
 import { useModalIsOpen, useToggleFeatureFlags } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
@@ -50,10 +51,64 @@ const CloseButton = styled.button`
 
 const Header = styled(Row)`
   font-weight: 600;
-  font-size: 20px;
+  font-size: 16px;
   border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
   margin-bottom: 8px;
 `
+const FlagName = styled.span`
+  font-size: 16px;
+  line-height: 20px;
+  padding-left: 8px;
+  color: ${({ theme }) => theme.textPrimary};
+`
+const FlagGroupName = styled.span`
+  font-size: 20px;
+  line-height: 24px;
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: 600;
+`
+const FlagDescription = styled.span`
+  font-size: 12px;
+  line-height: 16px;
+  color: ${({ theme }) => theme.textSecondary};
+  display: flex;
+  align-items: center;
+`
+const FlagVariantSelection = styled.select`
+  border-radius: 12px;
+  padding: 8px;
+  background: ${({ theme }) => theme.backgroundInteractive};
+  font-weight: 600;
+  font-size: 16px;
+  border: none;
+  color: ${({ theme }) => theme.textPrimary};
+  cursor: pointer;
+
+  :hover {
+    background: ${({ theme }) => theme.backgroundOutline};
+  }
+`
+
+const FlagInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 8px;
+`
+
+const SaveButton = styled.button`
+  border-radius: 12px;
+  padding: 8px;
+  background: ${({ theme }) => theme.backgroundInteractive};
+  font-weight: 600;
+  font-size: 16px;
+  border: none;
+  color: ${({ theme }) => theme.textPrimary};
+  cursor: pointer;
+
+  :hover {
+    background: ${({ theme }) => theme.backgroundOutline};
+  }
+`
 
 function Variant({ option }: { option: string }) {
   return <option value={option}>{option}</option>
@@ -71,21 +126,27 @@ function FeatureFlagOption({
   label: string
 }) {
   const updateFlag = useUpdateFlag()
+  const [count, setCount] = useState(0)
+  const featureFlags = useAtomValue(featureFlagSettings)
+
   return (
     <Row key={featureFlag}>
-      {featureFlag}: {label}
-      <select
+      <FlagInfo>
+        <FlagName>{featureFlag}</FlagName>
+        <FlagDescription>{label}</FlagDescription>
+      </FlagInfo>
+      <FlagVariantSelection
         id={featureFlag}
-        value={value}
         onChange={(e) => {
           updateFlag(featureFlag, e.target.value)
-          window.location.reload()
+          setCount(count + 1)
         }}
+        value={featureFlags[featureFlag]}
       >
         {variants.map((variant) => (
           <Variant key={variant} option={variant} />
         ))}
-      </select>
+      </FlagVariantSelection>
     </Row>
   )
 }
@@ -102,13 +163,14 @@ export default function FeatureFlagModal() {
           <X size={24} />
         </CloseButton>
       </Header>
-
+      <FlagGroupName>Phase 1</FlagGroupName>
       <FeatureFlagOption
         variants={Object.values(Phase1Variant)}
         value={usePhase1Flag()}
         featureFlag={FeatureFlag.phase1}
         label="All Phase 1 changes (nft features)."
       />
+      <FlagGroupName>Phase 0</FlagGroupName>
       <FeatureFlagOption
         variants={Object.values(RedesignVariant)}
         value={useRedesignFlag()}
@@ -133,6 +195,7 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.tokenSafety}
         label="Token Safety"
       />
+      <SaveButton onClick={() => window.location.reload()}>Save Settings</SaveButton>
     </Modal>
   )
 }

src/components/Menu/index.tsx

@@ -14,6 +14,7 @@ import {
   ChevronLeft,
   Coffee,
   FileText,
+  Flag,
   Globe,
   HelpCircle,
   Info,
@@ -291,6 +292,11 @@ export default function Menu() {
                       </div>
                       <FileText opacity={0.6} size={16} />
                     </ToggleMenuItem>
+                    {(isDevelopmentEnv() || isStagingEnv()) && (
+                      <ToggleMenuItem onClick={openFeatureFlagsModal}>
+                        Feature Flags <Flag opacity={0.6} size={16} />
+                      </ToggleMenuItem>
+                    )}
                     {showUNIClaimOption && (
                       <UNIbutton
                         onClick={openClaimModal}
@@ -302,9 +308,6 @@ export default function Menu() {
                         <Trans>Claim UNI</Trans>
                       </UNIbutton>
                     )}
-                    {(isDevelopmentEnv() || isStagingEnv()) && (
-                      <ToggleMenuItem onClick={openFeatureFlagsModal}>Feature Flags</ToggleMenuItem>
-                    )}
                   </MenuFlyout>
                 )
             }