Edison/powerpoint-toolbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved styles definition in a common style file

Browse Source
This commit is contained in:
Heiko Joerg Schick
2025-03-08 19:45:12 +01:00
parent bbfca3a67f
commit 30b9b75972
4 changed files with 57 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/taskpane/components/MatchProperties.tsx
+3 -51
View File
@@ -1,63 +1,15 @@
import * as React from "react";
import {
Button,
makeStyles,
tokens
Button
} from "@fluentui/react-components";
import {
ColorRegular
} from "@fluentui/react-icons";
import { useStatusContext } from "./App";
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",
},
});
import { useCommonStyles } from "./commonStyles";
export const MatchProperties: React.FC = () => {
const styles = useStyles();
const styles = useCommonStyles();
const {
statusMessage, setStatusMessage,
statusType, setStatusType,
src/taskpane/components/MatchSizes.tsx
+2 -50
View File
@@ -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";
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",
},
});
import { useCommonStyles } from "./commonStyles";
export const MatchSizes: React.FC = () => {
const styles = useStyles();
const styles = useCommonStyles();
const {
statusMessage, setStatusMessage,
statusType, setStatusType,
src/taskpane/components/RoundImage.tsx
+3 -51
View File
@@ -1,63 +1,15 @@
import * as React from "react";
import {
Button,
makeStyles,
tokens
Button
} from "@fluentui/react-components";
import {
CircleRegular
} from "@fluentui/react-icons";
import { useStatusContext } from "./App";
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",
},
});
import { useCommonStyles } from "./commonStyles";
export const RoundImage: React.FC = () => {
const styles = useStyles();
const styles = useCommonStyles();
const {
statusMessage, setStatusMessage,
statusType, setStatusType,
src/taskpane/components/commonStyles.tsx
+49
View File
@@ -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",
},
});