improve ui

src/ReplicatedStorage/ui/store/producer/config.ts

@@ -5,12 +5,17 @@ export interface ConfigState {
 }
 
 const initialState: ConfigState = {
-    acrylicBlur: false
+    acrylicBlur: true
 }
 
 export const configProducer = createProducer(initialState, {
-    toggleAcrylic: (state) => ({
+    enableAcrylic: (state) => ({
         ...state,
-        acrylicBlur: !state.acrylicBlur
+        acrylicBlur: true
+    }),
+
+    disableAcrylic: (state) => ({
+        ...state,
+        acrylicBlur: false
     })
 })

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

@@ -1,6 +1,7 @@
 import Roact from "@rbxts/roact"
 import Padding from "ReplicatedStorage/ui/components/padding"
 import Acrylic from "ReplicatedStorage/ui/components/acrylic"
+import ToggleButton from "./toggleButton"
 import { ContextActionService, HttpService } from "@rbxts/services"
 import { Spring } from "@rbxts/flipper"
 import { useGroupMotor } from "@rbxts/roact-hooked-plus"
@@ -14,19 +15,22 @@ interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
-const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 })]
+const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 }), new Spring(0, { frequency: 6 })]
-const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 })]
+const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(1, { frequency: 6 })]
 
 function config(props: ConfigProps): Roact.Element {
-    const { toggleAcrylic } = useRootProducer()
+    const { disableAcrylic, enableAcrylic } = useRootProducer()
 
     let { shown } = props
 
     const spreadableProps = { ...props } as Partial<ConfigProps>
     delete spreadableProps.shown
 
-    const [slotPosYMap, setPosYGoal] = useGroupMotor([1.5, 6])
+    const [configPosYAndBorderColor, setConfigGoal] = useGroupMotor([1.5, 6])
-    const slotPosY = slotPosYMap.map((t) => t[0])
+    const configPosY = configPosYAndBorderColor.map((t) => t[0])
+    const configBorderColor = configPosYAndBorderColor.map((t) => t[1]).map((val) => {
+        return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
+    })
 
     useEffect(() => {
         const guid = HttpService.GenerateGUID(false)
@@ -36,9 +40,9 @@ function config(props: ConfigProps): Roact.Element {
                 if (Enum.UserInputState.Begin === userInputState) {
                     shown = !shown
                     if (shown) {
-                        setPosYGoal(CONFIG_ACTIVE)
+                        setConfigGoal(CONFIG_ACTIVE)
                     } else {
-                        setPosYGoal(CONFIG_DEFAULT)
+                        setConfigGoal(CONFIG_DEFAULT)
                     }
                 }
             },
@@ -52,7 +56,7 @@ function config(props: ConfigProps): Roact.Element {
             {...spreadableProps}
             AnchorPoint={new Vector2(.5, .5)}
             Position={
-                slotPosY.map((posY) => {
+                configPosY.map((posY) => {
                     return new UDim2(.5, 0, posY, 0)
                 })
             }
@@ -68,7 +72,7 @@ function config(props: ConfigProps): Roact.Element {
                 AnchorPoint={new Vector2(0, 0)}
                 Position={new UDim2(0, 0, 0, 0)}
                 Size={new UDim2(1, 0, 1, 0)}
-                BackgroundTransparency={.7}
+                BackgroundTransparency={.3}
                 BackgroundColor3={Color3.fromHex("#1e1e2e")}
             >
                 <uilistlayout
@@ -80,31 +84,19 @@ function config(props: ConfigProps): Roact.Element {
                 <uicorner
                     CornerRadius={new UDim(0, 5)}
                 />
+                <uistroke
+                    Thickness={1}
+                    Color={configBorderColor}
+                />
                 <Padding
                     padding={new UDim(0, 5)}
                 />
-                <textbutton
+                <ToggleButton
-                    Size={new UDim2(1, 0, .1, 0)}
+                    Text="Toggle acrylic UI"
-                    Font={Enum.Font.Gotham}
+                    active={false}
-                    TextXAlignment={Enum.TextXAlignment.Left}
+                    disableCallback={disableAcrylic}
-                    BackgroundTransparency={.5}
+                    enableCallback={enableAcrylic}
-                    BackgroundColor3={Color3.fromHex("#11111b")}
+                />
-                    AutoButtonColor={false}
-                    TextColor3={Color3.fromHex("#cdd6f4")}
-                    TextScaled
-                    Text={"Toggle acrylic UI"}
-                    Event={{
-                        Activated: (): void => {toggleAcrylic()}
-                    }}
-                >
-                    <Padding
-                        paddingY={new UDim(.3, 0)}
-                        paddingX={new UDim(0, 5)}
-                    />
-                    <uicorner
-                        CornerRadius={new UDim(0, 5)}
-                    />
-                </textbutton>
             </frame>
         </frame>
     )

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

@@ -0,0 +1,73 @@
+import Roact from "@rbxts/roact"
+import Padding from "ReplicatedStorage/ui/components/padding"
+import { Spring } from "@rbxts/flipper"
+import { useGroupMotor } from "@rbxts/roact-hooked-plus"
+
+interface toggleButtonProps extends Roact.JsxInstanceProperties<TextButton> {
+    active: boolean
+    enableCallback: () => void
+    disableCallback: () => void
+
+	Event?: Roact.JsxInstanceEvents<TextButton>
+	Change?: Roact.JsxInstanceChangeEvents<TextButton>
+}
+
+const BUTTON_DEFAULT = [new Spring(0, { frequency: 6 })]
+const BUTTON_ACTIVE = [new Spring(1, { frequency: 6 })]
+
+function toggleButton(props: toggleButtonProps): Roact.Element {
+    let { active } = props
+    const { enableCallback, disableCallback, Text } = props
+
+    const spreadableProps = { ...props } as Partial<toggleButtonProps>
+    delete spreadableProps.active
+    delete spreadableProps.enableCallback
+    delete spreadableProps.disableCallback
+
+    const [buttonBorderColorMap, setButtonGoal] = useGroupMotor([0])
+    const buttonBorderColor = buttonBorderColorMap.map((t) => t[0]).map((val) => {
+        return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
+    })
+
+    return (
+        <textbutton
+            {...spreadableProps}
+            Size={new UDim2(1, 0, .1, 0)}
+            Font={Enum.Font.Gotham}
+            TextXAlignment={Enum.TextXAlignment.Left}
+            BackgroundTransparency={.3}
+            BackgroundColor3={Color3.fromHex("#313244")}
+            AutoButtonColor={false}
+            TextColor3={Color3.fromHex("#cdd6f4")}
+            TextScaled
+            Text={Text as string}
+            Event={{
+                Activated: (): void => {
+                    active = !active
+                    if (active) {
+                        setButtonGoal(BUTTON_ACTIVE)
+                        enableCallback()
+                    } else {
+                        setButtonGoal(BUTTON_DEFAULT)
+                        disableCallback()
+                    }
+                }
+            }}
+        >
+            <Padding
+                paddingY={new UDim(.3, 0)}
+                paddingX={new UDim(0, 5)}
+            />
+            <uicorner
+                CornerRadius={new UDim(0, 5)}
+            />
+            <uistroke
+                Thickness={1}
+                Color={buttonBorderColor}
+                ApplyStrokeMode={Enum.ApplyStrokeMode.Border}
+            />
+        </textbutton>
+    )
+}
+
+export default toggleButton

src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx

@@ -16,8 +16,8 @@ interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
-const SLOT_DEFAULT = [new Spring(.7, { frequency: 6 }), new Spring(6, { frequency: 6 })]
+const SLOT_DEFAULT = [new Spring(0, { frequency: 6 }), new Spring(6, { frequency: 6 })]
-const SLOT_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(5, { frequency: 6 })]
+const SLOT_ACTIVE = [new Spring(1, { frequency: 6 }), new Spring(5, { frequency: 6 })]
 
 function slot(props: SlotProps): Roact.Element {
     const { index, keycode, tool } = props
@@ -27,9 +27,11 @@ function slot(props: SlotProps): Roact.Element {
     delete spreadableProps.keycode
     delete spreadableProps.tool
 
-    const [slotBgTransparencyAndSlotRatio, setSlotGoal] = useGroupMotor([.7, 6])
+    const [slotBorderColorAndSlotRatio, setSlotGoal] = useGroupMotor([0, 6])
-    const slotBgTransparency = slotBgTransparencyAndSlotRatio.map((t) => t[0])
+    const slotBorderColor = slotBorderColorAndSlotRatio.map((t) => t[0]).map((val) => {
-    const slotRatio = slotBgTransparencyAndSlotRatio.map((t) => t[1])
+        return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
+    })
+    const slotRatio = slotBorderColorAndSlotRatio.map((t) => t[1])
 
     const { clientState } = useWorldContext()
 
@@ -63,7 +65,7 @@ function slot(props: SlotProps): Roact.Element {
     return (
         <frame
             BackgroundColor3={Color3.fromHex("#1e1e2e")}
-            BackgroundTransparency={slotBgTransparency}
+            BackgroundTransparency={.3}
             Size={new UDim2(1, 0, 1, 0)}
         >
             <Acrylic
@@ -76,6 +78,10 @@ function slot(props: SlotProps): Roact.Element {
             <uicorner
                 CornerRadius={new UDim(0, 5)}
             />
+            <uistroke
+                Thickness={1}
+                Color={slotBorderColor}
+            />
             <frame BackgroundTransparency={1} Size={new UDim2(1, 0, 1, 0)}>
                 <Padding
                     paddingY={new UDim(.3, 0)}