Improve icon buttons

remote_frontend/src/hooks/providers/ThemeProvider.tsx

@@ -20,7 +20,7 @@ type ThemeContext = { theme: Theme; set: (theme: Theme) => void };
 const ThemeContextK = React.createContext<ThemeContext | null>(null);
 
 export function ThemeProvider(p: React.PropsWithChildren): React.ReactElement {
-  const [theme, setTheme] = React.useState<Theme>("highcontrast");
+  const [theme, setTheme] = React.useState<Theme>("teamsdark");
 
   let fluentTheme = teamsHighContrastTheme;
   switch (theme) {

remote_frontend/src/widgets/GroupVMAction.tsx

@@ -2,7 +2,8 @@ import { Button, Spinner, Toolbar, Tooltip } from "@fluentui/react-components";
 import {
   ArrowResetRegular,
   PauseRegular,
-  PlayRegular,
+  PlayCircleRegular,
+  PlayFilled,
   PowerRegular,
   StopRegular,
 } from "@fluentui/react-icons";
@@ -23,7 +24,7 @@ export function GroupVMAction(p: {
     <Toolbar>
       <GroupVMButton
         enabled={p.group.can_start}
-        icon={<PlayRegular />}
+        icon={<PlayFilled />}
         tooltip="Start"
         group={p.group}
         vm={p.vm}
@@ -32,17 +33,6 @@ export function GroupVMAction(p: {
         needConfirm={false}
         action={GroupApi.StartVM}
       />
-      <GroupVMButton
-        enabled={p.group.can_resume}
-        icon={<PlayRegular />}
-        tooltip="Resume"
-        group={p.group}
-        vm={p.vm}
-        allowedStates={["Paused", "PowerManagementSuspended"]}
-        currState={p.state}
-        needConfirm={false}
-        action={GroupApi.ResumeVM}
-      />
       <GroupVMButton
         enabled={p.group.can_suspend}
         icon={<PauseRegular />}
@@ -54,6 +44,17 @@ export function GroupVMAction(p: {
         needConfirm={true}
         action={GroupApi.SuspendVM}
       />
+      <GroupVMButton
+        enabled={p.group.can_resume}
+        icon={<PlayCircleRegular />}
+        tooltip="Resume"
+        group={p.group}
+        vm={p.vm}
+        allowedStates={["Paused", "PowerManagementSuspended"]}
+        currState={p.state}
+        needConfirm={false}
+        action={GroupApi.ResumeVM}
+      />
       <GroupVMButton
         enabled={p.group.can_shutdown}
         icon={<PowerRegular />}

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -25,8 +25,8 @@ import { Rights } from "../api/ServerApi";
 import { VMApi, VMInfo, VMInfoAndCaps, VMState } from "../api/VMApi";
 import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 import { useToast } from "../hooks/providers/ToastProvider";
-import { VMLiveScreenshot } from "./VMLiveScreenshot";
 import { SectionContainer } from "./SectionContainer";
+import { VMLiveScreenshot } from "./VMLiveScreenshot";
 
 const useStyles = makeStyles({
   body1Stronger: typographyStyles.body1Stronger,