feat: Apply theme colours across app

theopensystemslab · Jan 12, 2024 · 51fc3f9 · 51fc3f9
1 parent e840e7d
commit 51fc3f9
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 14 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Content/Public.tsx b/editor.planx.uk/src/@planx/components/Content/Public.tsx
@@ -20,7 +20,7 @@ const Content = styled(Box, {
       theme.palette.text.primary,
     ])?.toHexString() || theme.palette.text.primary,
   "& a": {
-    color: getContrastTextColor(color || "#fff", theme.palette.primary.main),
+    color: getContrastTextColor(color || "#fff", theme.palette.link.main),
   },
   "& *:first-child": {
     marginTop: 0,

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx
@@ -115,6 +115,7 @@ export const FileTaggingModal = ({
           <Box>
             <Button
               variant="contained"
+              color="prompt"
               onClick={handleValidation}
               data-testid="modal-done-button"
             >
@@ -202,7 +203,7 @@ const SelectMultiple = (props: SelectMultipleProps) => {
         sx={{
           top: "16%",
           textDecoration: "underline",
-          color: (theme) => theme.palette.primary.main,
+          color: (theme) => theme.palette.link.main,
           "&[data-shrink=true]": {
             textDecoration: "none",
             color: (theme) => theme.palette.text.primary,
@@ -284,6 +285,7 @@ const SelectMultiple = (props: SelectMultipleProps) => {
             </Typography>
             <Button
               variant="contained"
+              color="prompt"
               onClick={handleClose}
               aria-label="Close list"
             >

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -66,7 +66,6 @@ export const InfoButton = styled(Button)(({ theme }) => ({
   minWidth: 0,
   marginLeft: theme.spacing(1.5),
   boxShadow: "none",
-  color: theme.palette.primary.main,
   minHeight: "44px",
 })) as typeof Button;
 

diff --git a/editor.planx.uk/src/@planx/components/Notice/Public.tsx b/editor.planx.uk/src/@planx/components/Notice/Public.tsx
@@ -29,10 +29,14 @@ const Container = styled(Box, {
     justifyContent: "space-between",
     padding: theme.spacing(2),
     backgroundColor: customColor,
-    color: mostReadable(customColor, [
-      "#fff",
-      theme.palette.text.primary,
-    ])?.toHexString(),
+    color:
+      mostReadable(customColor || "#fff", [
+        "#fff",
+        theme.palette.text.primary,
+      ])?.toHexString() || theme.palette.text.primary,
+    "& a": {
+      color: "inherit !important",
+    },
     "&:before": {
       content: "' '",
       position: "absolute",

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx
@@ -83,7 +83,7 @@ const Card: React.FC<Props> = ({
             {handleSubmit && (
               <Button
                 variant="contained"
-                color="primary"
+                color="prompt"
                 size="large"
                 type="submit"
                 disabled={!isValid}

diff --git a/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/Dropzone.tsx b/editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/Dropzone.tsx
@@ -22,7 +22,7 @@ interface RootProps extends ButtonBaseProps {
 }
 
 const FauxLink = styled(Box)(({ theme }) => ({
-  color: theme.palette.primary.main,
+  color: theme.palette.link.main,
   textDecoration: "underline",
   whiteSpace: "nowrap",
 }));

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -17,7 +17,7 @@ import { TeamTheme } from "@opensystemslab/planx-core/types";
 import { getContrastTextColor } from "styleUtils";
 
 const DEFAULT_PRIMARY_COLOR = "#0010A4";
-const DEFAULT_TONAL_OFFSET = 0.2;
+const DEFAULT_TONAL_OFFSET = 0.1;
 
 // Type styles
 export const FONT_WEIGHT_SEMI_BOLD = "600";
@@ -252,7 +252,7 @@ const getThemeOptions = ({ primaryColour, linkColour, actionColour}: TeamTheme):
           {
             props: { variant: "help" },
             style: {
-              color: palette.primary.main,
+              color: palette.link.main,
               boxShadow: "none",
               padding: "0.25em 0.1em",
               width: "auto",

diff --git a/editor.planx.uk/src/ui/public/NextStepsList.tsx b/editor.planx.uk/src/ui/public/NextStepsList.tsx
@@ -40,10 +40,11 @@ const innerStyle = (theme: Theme) => ({
   textDecoration: "none",
   borderBottom: `1px solid theme.palette.text.secondary`,
   "&:hover > .arrowButton": {
-    backgroundColor: theme.palette.primary.dark,
+    backgroundColor: theme.palette.prompt.dark,
   },
   "&:focus > .arrowButton": {
     backgroundColor: theme.palette.text.primary,
+    color: theme.palette.common.white,
   },
 });
 
@@ -67,8 +68,8 @@ const ArrowButton = styled("span")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.common.white,
+  backgroundColor: theme.palette.prompt.main,
+  color: theme.palette.prompt.contrastText,
   width: "50px",
   height: "50px",
   flexShrink: "0",