Update Plugin Settings, GameActivityToggle & TypingTweaks for new ui (#3326)

src/components/Switch.tsx

@@ -27,7 +27,7 @@ interface SwitchProps {
     disabled?: boolean;
 }
 
-const SWITCH_ON = "var(--green-360)";
+const SWITCH_ON = "var(--brand-500)";
 const SWITCH_OFF = "var(--primary-400)";
 const SwitchClasses = findByPropsLazy("slider", "input", "container");
 

src/plugins/consoleShortcuts/index.ts

@@ -153,7 +153,16 @@ function makeShortcuts() {
         openModal: { getter: () => ModalAPI.openModal },
         openModalLazy: { getter: () => ModalAPI.openModalLazy },
 
-        Stores: Webpack.fluxStores
+        Stores: Webpack.fluxStores,
+
+        // e.g. "2024-05_desktop_visual_refresh", 0
+        setExperiment: (id: string, bucket: number) => {
+            Common.FluxDispatcher.dispatch({
+                type: "EXPERIMENT_OVERRIDE_BUCKET",
+                experimentId: id,
+                experimentBucket: bucket,
+            });
+        },
     };
 }
 

src/plugins/gameActivityToggle/index.tsx

@@ -69,6 +69,7 @@ function GameActivityToggleButton() {
             icon={makeIcon(showCurrentGame)}
             role="switch"
             aria-checked={!showCurrentGame}
+            redGlow={!showCurrentGame}
             onClick={() => ShowCurrentGame.updateSetting(old => !old)}
         />
     );

src/plugins/gameActivityToggle/style.css

@@ -1,3 +1,3 @@
-[class*="panels"] [class*="avatarWrapper"] {
+[class^="panels"] [class^="avatarWrapper"] {
     min-width: 88px;
 }

src/plugins/typingTweaks/index.tsx

@@ -25,6 +25,8 @@ import { Avatar, GuildMemberStore, React, RelationshipStore } from "@webpack/com
 import { User } from "discord-types/general";
 import { PropsWithChildren } from "react";
 
+import managedStyle from "./style.css?managed";
+
 const settings = definePluginSettings({
     showAvatars: {
         type: OptionType.BOOLEAN,
@@ -60,24 +62,19 @@ interface Props {
 const TypingUser = ErrorBoundary.wrap(function ({ user, guildId }: Props) {
     return (
         <strong
+            className="vc-typing-user"
             role="button"
             onClick={() => {
                 openUserProfile(user.id);
             }}
             style={{
-                display: "grid",
-                gridAutoFlow: "column",
-                gap: "4px",
                 color: settings.store.showRoleColors ? GuildMemberStore.getMember(guildId, user.id)?.colorString : undefined,
-                cursor: "pointer"
             }}
         >
             {settings.store.showAvatars && (
-                <div style={{ marginTop: "4px" }}>
+                <Avatar
-                    <Avatar
+                    size="SIZE_16"
-                        size="SIZE_16"
+                    src={user.getAvatarURL(guildId, 128)} />
-                        src={user.getAvatarURL(guildId, 128)} />
-                </div>
             )}
             {GuildMemberStore.getNick(guildId!, user.id)
                 || (!guildId && RelationshipStore.getNickname(user.id))
@@ -94,6 +91,8 @@ export default definePlugin({
     authors: [Devs.zt],
     settings,
 
+    managedStyle,
+
     patches: [
         {
             find: "#{intl::THREE_USERS_TYPING}",
@@ -101,7 +100,7 @@ export default definePlugin({
                 {
                     // Style the indicator and add function call to modify the children before rendering
                     match: /(?<=children:\[(\i)\.length>0.{0,200}?"aria-atomic":!0,children:)\i(?<=guildId:(\i).+?)/,
-                    replace: "$self.renderTypingUsers({ users: $1, guildId: $2, children: $& }),style:$self.TYPING_TEXT_STYLE"
+                    replace: "$self.renderTypingUsers({ users: $1, guildId: $2, children: $& })"
                 },
                 {
                     // Changes the indicator to keep the user object when creating the list of typing users
@@ -118,12 +117,6 @@ export default definePlugin({
         }
     ],
 
-    TYPING_TEXT_STYLE: {
-        display: "grid",
-        gridAutoFlow: "column",
-        gridGap: "0.25em"
-    },
-
     buildSeveralUsers,
 
     renderTypingUsers: ErrorBoundary.wrap(({ guildId, users, children }: PropsWithChildren<{ guildId: string, users: User[]; }>) => {

src/plugins/typingTweaks/style.css

@@ -0,0 +1,5 @@
+.vc-typing-user [class^="wrapper"] {
+    display: inline-block;
+    margin-right: 0.25em;
+    vertical-align: -4px;
+}