Moved styles definition in a common style file

src/taskpane/components/MatchProperties.tsx

@@ -1,63 +1,15 @@
 import * as React from "react";
 import { 
-  Button, 
+  Button
-  makeStyles, 
-  tokens
 } from "@fluentui/react-components";
 import { 
   ColorRegular
 } from "@fluentui/react-icons";
 import { useStatusContext } from "./App";
-
+import { useCommonStyles } from "./commonStyles";
-const useStyles = makeStyles({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-  },
-  buttonGroup: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "8px",
-    marginBottom: "2px",
-  },
-  actionButton: {
-    justifyContent: "flex-start",
-    transitionProperty: "all",
-    transitionDuration: "200ms",
-    transitionTimingFunction: "cubic-bezier(0.33, 0, 0.67, 1)",
-  },
-  statusContainer: {
-    marginTop: "4px",
-    padding: "8px 12px",
-    fontSize: "13px",
-    borderRadius: "6px",
-    backgroundColor: "#f3f2f1", // Light gray background
-    transition: "all 0.3s ease",
-  },
-  successStatus: {
-    backgroundColor: "#DFF6DD", // Light green background
-    color: "#107C10", // Green text
-  },
-  warningStatus: {
-    backgroundColor: "#FFF4CE", // Light yellow background
-    color: "#797673", // Dark gray text
-  },
-  errorStatus: {
-    backgroundColor: "#FDE7E9", // Light red background
-    color: "#A80000", // Red text
-  },
-  statusIcon: {
-    marginRight: "8px",
-  },
-  statusText: {
-    display: "flex",
-    alignItems: "center",
-  },
-});
 
 export const MatchProperties: React.FC = () => {
-  const styles = useStyles();
+  const styles = useCommonStyles();
   const { 
     statusMessage, setStatusMessage,
     statusType, setStatusType,

src/taskpane/components/MatchSizes.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { 
   Button, 
-  makeStyles, 
   Text, 
   Tooltip, 
   InfoLabel, 
-  tokens,
   Card
 } from "@fluentui/react-components";
 import { 
@@ -14,56 +12,10 @@ import {
   ArrowSortUpRegular
 } from "@fluentui/react-icons";
 import { useStatusContext } from "./App";
-
+import { useCommonStyles } from "./commonStyles";
-const useStyles = makeStyles({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-  },
-  buttonGroup: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "8px",
-    marginBottom: "2px",
-  },
-  actionButton: {
-    justifyContent: "flex-start",
-    transitionProperty: "all",
-    transitionDuration: "200ms",
-    transitionTimingFunction: "cubic-bezier(0.33, 0, 0.67, 1)",
-  },
-  statusContainer: {
-    marginTop: "4px",
-    padding: "8px 12px",
-    fontSize: "13px",
-    borderRadius: "6px",
-    backgroundColor: "#f3f2f1", // Light gray background
-    transition: "all 0.3s ease",
-  },
-  successStatus: {
-    backgroundColor: "#DFF6DD", // Light green background
-    color: "#107C10", // Green text
-  },
-  warningStatus: {
-    backgroundColor: "#FFF4CE", // Light yellow background
-    color: "#797673", // Dark gray text
-  },
-  errorStatus: {
-    backgroundColor: "#FDE7E9", // Light red background
-    color: "#A80000", // Red text
-  },
-  statusIcon: {
-    marginRight: "8px",
-  },
-  statusText: {
-    display: "flex",
-    alignItems: "center",
-  },
-});
 
 export const MatchSizes: React.FC = () => {
-  const styles = useStyles();
+  const styles = useCommonStyles();
   const { 
     statusMessage, setStatusMessage,
     statusType, setStatusType,

src/taskpane/components/RoundImage.tsx

@@ -1,63 +1,15 @@
 import * as React from "react";
 import { 
-  Button, 
+  Button
-  makeStyles, 
-  tokens
 } from "@fluentui/react-components";
 import { 
   CircleRegular
 } from "@fluentui/react-icons";
 import { useStatusContext } from "./App";
-
+import { useCommonStyles } from "./commonStyles";
-const useStyles = makeStyles({
-  container: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-  },
-  buttonGroup: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "8px",
-    marginBottom: "2px",
-  },
-  actionButton: {
-    justifyContent: "flex-start",
-    transitionProperty: "all",
-    transitionDuration: "200ms",
-    transitionTimingFunction: "cubic-bezier(0.33, 0, 0.67, 1)",
-  },
-  statusContainer: {
-    marginTop: "4px",
-    padding: "8px 12px",
-    fontSize: "13px",
-    borderRadius: "6px",
-    backgroundColor: "#f3f2f1", // Light gray background
-    transition: "all 0.3s ease",
-  },
-  successStatus: {
-    backgroundColor: "#DFF6DD", // Light green background
-    color: "#107C10", // Green text
-  },
-  warningStatus: {
-    backgroundColor: "#FFF4CE", // Light yellow background
-    color: "#797673", // Dark gray text
-  },
-  errorStatus: {
-    backgroundColor: "#FDE7E9", // Light red background
-    color: "#A80000", // Red text
-  },
-  statusIcon: {
-    marginRight: "8px",
-  },
-  statusText: {
-    display: "flex",
-    alignItems: "center",
-  },
-});
 
 export const RoundImage: React.FC = () => {
-  const styles = useStyles();
+  const styles = useCommonStyles();
   const { 
     statusMessage, setStatusMessage,
     statusType, setStatusType,

src/taskpane/components/commonStyles.tsx

@@ -0,0 +1,49 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+// Common styles used across multiple components
+export const useCommonStyles = makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+  },
+  buttonGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    marginBottom: "2px",
+  },
+  actionButton: {
+    justifyContent: "flex-start",
+    transitionProperty: "all",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "cubic-bezier(0.33, 0, 0.67, 1)",
+  },
+  statusContainer: {
+    marginTop: "4px",
+    padding: "8px 12px",
+    fontSize: "13px",
+    borderRadius: "6px",
+    backgroundColor: "#f3f2f1", // Light gray background
+    transition: "all 0.3s ease",
+  },
+  successStatus: {
+    backgroundColor: "#DFF6DD", // Light green background
+    color: "#107C10", // Green text
+  },
+  warningStatus: {
+    backgroundColor: "#FFF4CE", // Light yellow background
+    color: "#797673", // Dark gray text
+  },
+  errorStatus: {
+    backgroundColor: "#FDE7E9", // Light red background
+    color: "#A80000", // Red text
+  },
+  statusIcon: {
+    marginRight: "8px",
+  },
+  statusText: {
+    display: "flex",
+    alignItems: "center",
+  },
+});