From f36deef8d45d6346f89d23853c0f7ab114437d98 Mon Sep 17 00:00:00 2001 From: "Mr. Singleton" Date: Sun, 3 Dec 2023 08:20:40 -0500 Subject: [PATCH] organization of Colors and util functions --- .../CustomizedThemeProvider.tsx | 92 +------------------ src/theme/common/ColorPalette.ts | 92 +++++++++++++++++-- src/utils/textProcessingUtils.ts | 13 +++ 3 files changed, 99 insertions(+), 98 deletions(-) create mode 100644 src/utils/textProcessingUtils.ts diff --git a/src/components/customized-theme-provider/CustomizedThemeProvider.tsx b/src/components/customized-theme-provider/CustomizedThemeProvider.tsx index 73aa5de6..f3cf2909 100644 --- a/src/components/customized-theme-provider/CustomizedThemeProvider.tsx +++ b/src/components/customized-theme-provider/CustomizedThemeProvider.tsx @@ -2,107 +2,19 @@ import React, {FunctionComponent, PropsWithChildren, useContext, useMemo,} from import CustomizedThemeContext from './CustomizedThemeContext'; import {CssBaseline} from "@mui/material"; import {createTheme, ThemeProvider} from "@mui/material/styles"; -import {COLORS} from "../../theme/common/ColorPalette"; +import {COLORS, convertToHexCode} from "../../theme/common/ColorPalette"; import {grey} from "@mui/material/colors"; import {SanityMuiFontFace, SanityMuiTheme} from "../../common/sanityIo/Types"; import PageContext from "../page-context/PageContext"; import TheWebsiteTheme from "../../theme/Theme"; import cmsClient from "../block-content-ui/cmsClient"; +import capitalizeArray from "../../utils/textProcessingUtils"; type IProps = { pageTheme?: SanityMuiTheme }; -const capitalizeArray = (theString: string[]) => { - const place = theString.map((aString) => { - - const lower = aString.toLowerCase() - const upper = aString.toUpperCase() - - return `"${upper[0] + lower.slice(1)}"` - }) - - // console.log("the capitalized array",place) - return place -} - -export const convertToHexCode = (value?: string) => { - let defaultBg = COLORS.WHITESMOKE; - switch (value) { - case 'WHITESMOKE': - defaultBg = COLORS.WHITESMOKE - break; - case 'DARKBLUE': - defaultBg = COLORS.DARKBLUE - break; - case 'TRANSPARENT_DARKBLUE': - defaultBg = COLORS.TRANSPARENT_DARKBLUE - break; - case 'BLUE': - defaultBg = COLORS.BLUE - break; - case 'GRAY': - defaultBg = COLORS.GRAY - break; - case 'LIGHT_GRAY': - defaultBg = COLORS.LIGHT_GRAY - break; - case 'TRANSPARENTWHITE': - defaultBg = COLORS.TRANSPARENTWHITE - break; - case 'TRANSPARENTERWHITE': - defaultBg = COLORS.TRANSPARENTERWHITE - break; - case 'LIGHTBLUE': - defaultBg = COLORS.LIGHTBLUE - break; - case 'ALMOSTPURPLE': - defaultBg = COLORS.ALMOSTPURPLE - break; - case 'LIGHTGRAY': - defaultBg = COLORS.LIGHTGRAY - break; - case 'TRANPARENTLIGHTGRAY': - defaultBg = COLORS.TRANSPARENTLIGHTGRAY - break; - case 'MEDIUMGRAY': - defaultBg = COLORS.MEDIUMGRAY - break; - case 'DARKGRAY': - defaultBg = COLORS.DARKGRAY - break; - case 'TRANPARENTDARKGRAY': - defaultBg = COLORS.TRANSPARENTDARKGRAY - break; - case 'AQUA': - defaultBg = COLORS.AQUA - break; - case 'RED': - defaultBg = COLORS.RED - break; - case 'ALMOSTWHITE': - defaultBg = COLORS.ALMOSTWHITE - break; - case 'DARKERGRAY': - defaultBg = COLORS.DARKERGRAY - break; - // case 'DARKERGRAY': - // defaultBg = COLORS.DARKERGRAY - // break; - case 'LIGHTER_GRAY': - defaultBg = COLORS.LIGHTER_GRAY - break; - case 'DARK_GRAY': - defaultBg = COLORS.DARK_GRAY - break; - default: - defaultBg = COLORS.WHITESMOKE - } - - return defaultBg -} - const CustomizedThemeProvider: FunctionComponent = ( props: PropsWithChildren, ) => { diff --git a/src/theme/common/ColorPalette.ts b/src/theme/common/ColorPalette.ts index 0c3370f9..562cafe7 100644 --- a/src/theme/common/ColorPalette.ts +++ b/src/theme/common/ColorPalette.ts @@ -1,19 +1,19 @@ export enum COLORS { - DARKBLUE = 'rgba(0,0,53,1)', TRANSPARENT_DARKBLUE = 'rgba(0,0,53,.85)', - BLUE = 'rgba(16, 43, 136, 1)', - // DARK_GRAY = '#A8A9AC', - GRAY = 'rgba(207, 207, 207, 1)', - LIGHT_GRAY = '#949495', TRANSPARENTWHITE = 'rgba(255,255,255,0.75)', TRANSPARENTERWHITE = 'rgba(255,255,255,0.55)', + TRANSPARENTLIGHTGRAY = "rgba(244,243,245,0.87)", + TRANSPARENTDARKGRAY = "rgba(67,66,74,0.78)", + DARKBLUE = '#000035', + BLUE = '#102B88', + // DARK_GRAY = '#A8A9AC', + GRAY = '#CFCFCF', + LIGHT_GRAY = '#949495', LIGHTBLUE = '#2CC4D7', ALMOSTPURPLE = "#331BAD", LIGHTGRAY = "#F4F3F5", - TRANSPARENTLIGHTGRAY = "rgba(244,243,245,0.87)", MEDIUMGRAY = "#BCB9B0", DARKGRAY = "#43424A", - TRANSPARENTDARKGRAY = "rgba(67,66,74,0.78)", AQUA = "#12b3be", WHITESMOKE = '#f6f6f6', RED = "#d20027", @@ -22,6 +22,82 @@ export enum COLORS { DARK_GRAY = '#A8A9AC', LIGHTER_GRAY = '#E3E3E3', PINK = '#FFA9E7', - DARKORANGE = 'rgb(70,38,0)', + DARKORANGE = '#462600', LIGHT_GRAY2 = '#E3E3E3', +} + +export const convertToHexCode = (value?: string) => { + let defaultBg = COLORS.WHITESMOKE; + switch (value) { + case 'WHITESMOKE': + defaultBg = COLORS.WHITESMOKE + break; + case 'DARKBLUE': + defaultBg = COLORS.DARKBLUE + break; + case 'TRANSPARENT_DARKBLUE': + defaultBg = COLORS.TRANSPARENT_DARKBLUE + break; + case 'BLUE': + defaultBg = COLORS.BLUE + break; + case 'GRAY': + defaultBg = COLORS.GRAY + break; + case 'LIGHT_GRAY': + defaultBg = COLORS.LIGHT_GRAY + break; + case 'TRANSPARENTWHITE': + defaultBg = COLORS.TRANSPARENTWHITE + break; + case 'TRANSPARENTERWHITE': + defaultBg = COLORS.TRANSPARENTERWHITE + break; + case 'LIGHTBLUE': + defaultBg = COLORS.LIGHTBLUE + break; + case 'ALMOSTPURPLE': + defaultBg = COLORS.ALMOSTPURPLE + break; + case 'LIGHTGRAY': + defaultBg = COLORS.LIGHTGRAY + break; + case 'TRANPARENTLIGHTGRAY': + defaultBg = COLORS.TRANSPARENTLIGHTGRAY + break; + case 'MEDIUMGRAY': + defaultBg = COLORS.MEDIUMGRAY + break; + case 'DARKGRAY': + defaultBg = COLORS.DARKGRAY + break; + case 'TRANPARENTDARKGRAY': + defaultBg = COLORS.TRANSPARENTDARKGRAY + break; + case 'AQUA': + defaultBg = COLORS.AQUA + break; + case 'RED': + defaultBg = COLORS.RED + break; + case 'ALMOSTWHITE': + defaultBg = COLORS.ALMOSTWHITE + break; + case 'DARKERGRAY': + defaultBg = COLORS.DARKERGRAY + break; + // case 'DARKERGRAY': + // defaultBg = COLORS.DARKERGRAY + // break; + case 'LIGHTER_GRAY': + defaultBg = COLORS.LIGHTER_GRAY + break; + case 'DARK_GRAY': + defaultBg = COLORS.DARK_GRAY + break; + default: + defaultBg = COLORS.WHITESMOKE + } + + return defaultBg } \ No newline at end of file diff --git a/src/utils/textProcessingUtils.ts b/src/utils/textProcessingUtils.ts new file mode 100644 index 00000000..df04202e --- /dev/null +++ b/src/utils/textProcessingUtils.ts @@ -0,0 +1,13 @@ +const capitalizeArray = (theString: string[]) => { + const place = theString.map((aString) => { + + const lower = aString.toLowerCase() + const upper = aString.toUpperCase() + + return `"${upper[0] + lower.slice(1)}"` + }) + + // console.log("the capitalized array",place) + return place +} +export default capitalizeArray \ No newline at end of file