update ui

src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx

@@ -1,12 +1,10 @@
 import Roact from "@rbxts/roact"
-import Padding from "ReplicatedStorage/ui/components/padding"
 import Acrylic from "ReplicatedStorage/ui/components/acrylic"
-import ToggleButton from "ReplicatedStorage/ui/components/toggleButton"
 import { ContextActionService, HttpService } from "@rbxts/services"
 import { Spring } from "@rbxts/flipper"
 import { useGroupMotor } from "@rbxts/roact-hooked-plus"
 import { useEffect } from "@rbxts/roact-hooked"
-import { useRootProducer } from "ReplicatedStorage/ui/store/hooks/useUiProducer"
+import Item from "./item"
 
 interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
     shown: boolean
@@ -19,8 +17,6 @@ const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 }), new Spring(0, { frequ
 const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(1, { frequency: 6 })]
 
 function config(props: ConfigProps): Roact.Element {
-    const { disableAcrylic, enableAcrylic } = useRootProducer()
-
     let { shown } = props
 
     const spreadableProps = { ...props } as Partial<ConfigProps>
@@ -88,14 +84,11 @@ function config(props: ConfigProps): Roact.Element {
                     Thickness={1}
                     Color={configBorderColor}
                 />
-                <Padding
-                    padding={new UDim(0, 5)}
-                />
-                <ToggleButton
-                    Text="Toggle acrylic UI"
-                    active={true}
-                    disableCallback={disableAcrylic}
-                    enableCallback={enableAcrylic}
+                <Item
+                    size={new UDim2(1,0,.1,0)}
+                    position={new UDim2(0,0,0,0)}
+                    text="acrylic"
+                    action="acrylicBlur"
                 />
             </frame>
         </frame>