chore: Create flag migration

frontend/package.json

@@ -155,6 +155,7 @@
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
     "@types/dompurify": "^3.0.2",
+    "@types/rc-switch": "^1.9.5",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^2.0.3",

frontend/web/components/SegmentOverrides.js

@@ -302,8 +302,7 @@ const SegmentOverrideInner = class Override extends React.Component {
         {!!multivariateOptions?.length && (
           <div className='px-3'>
             <VariationOptions
-              preventRemove
-              readOnlyValue
+              readOnly
               disabled={readOnly}
               controlValue={controlValue}
               controlPercentage={controlPercent}

frontend/web/components/Switch.tsx

@@ -0,0 +1,68 @@
+import React, { FC } from 'react'
+import RCSwitch, { Props as RCSwitchProps } from 'rc-switch'
+import Icon from './Icon'
+
+export type SwitchProps = RCSwitchProps & {
+  checked?: boolean
+  darkMode?: boolean
+  offMarkup?: React.ReactNode
+  onMarkup?: React.ReactNode
+  onChange?: (checked: boolean) => void
+}
+
+const Switch: FC<SwitchProps> = ({
+  checked,
+  darkMode,
+  offMarkup,
+  onChange,
+  onMarkup,
+  ...rest
+}) => {
+  if (E2E) {
+    return (
+      <div style={{ display: 'inline-block', height: '28px' }}>
+        <button
+          role='switch'
+          type='button'
+          style={{
+            color: 'black',
+            pointerEvents: 'all',
+            position: 'relative',
+          }}
+          className={checked ? 'switch-checked' : 'switch-unchecked'}
+          {...rest}
+          onClick={() => {
+            onChange?.(!checked)
+          }}
+        >
+          {checked ? offMarkup || 'On' : onMarkup || 'Off'}
+        </button>
+      </div>
+    )
+  }
+
+  if (darkMode) {
+    return (
+      <button
+        role='switch'
+        type='button'
+        className={`rc-switch flex-row justify-content-center gap-3 ${
+          checked ? 'rc-switch-checked' : 'rc-switch-unchecked'
+        }`}
+        {...rest}
+        onClick={() => {
+          onChange?.(!checked)
+        }}
+      >
+        <Icon name='sun' fill={checked ? '#656D7B' : '#1A2634'} />
+        <Icon name='moon' fill={checked ? '#FFFFFF' : '#9DA4AE'} />
+      </button>
+    )
+  }
+
+  return <RCSwitch checked={checked} onChange={onChange} {...rest} />
+}
+
+Switch.displayName = 'Switch'
+
+export default Switch

frontend/web/components/base/forms/Button.tsx

@@ -23,6 +23,7 @@ export const sizeClassNames = {
   large: 'btn-lg',
   small: 'btn-sm',
   xSmall: 'btn-xsm',
+  xxSmall: 'btn-xxsm',
 }
 
 export type ButtonType = ButtonHTMLAttributes<HTMLButtonElement> & {