diff --git a/config/README-EN.md b/config/README-EN.md index 5109f326a..512ce8e94 100644 --- a/config/README-EN.md +++ b/config/README-EN.md @@ -66,28 +66,28 @@ If defined in `localConfig`, they will be rendered on the site; otherwise, the c { theme: { colors:{ - bluePrimary: "", - blueSecondary: "", - blueTertiary: "", - blueQuartiary: "", - grayPrimary: "", - graySecondary: "", - grayTertiary: "", - lightGray: "", - lightGraySecondary: "", - lightBluePrimary: "", - lightBlueMain: "", - lightBlueSecondary: "", - white: "", - blackPrimary: "", + primary: "", + secondary: "", + tertiary: "", + quartiary: "", + lightPrimary: "", + lightSecondary: "", + lightTertiary: "", + black: "", blackSecondary: "", blackTertiary: "", - lightYellow: "", - logoWhite: "", - redText: "", + neutral: "", + neutralSecondary: "", + neutralTertiary: "", + lightNeutral: "", + lightNeutralSecondary: "", + white: "", warning: "", + shadow: "", + logo: "", + error: "", active: "", - inactive: "" + inactive: "", } } } diff --git a/config/README-PT.md b/config/README-PT.md index 2d7e10e31..aaf400033 100644 --- a/config/README-PT.md +++ b/config/README-PT.md @@ -66,28 +66,28 @@ Caso sejam definidas no `localConfig` , elas serão renderizadas no site; caso c { theme: { colors:{ - bluePrimary: "", - blueSecondary: "", - blueTertiary: "", - blueQuartiary: "", - grayPrimary: "", - graySecondary: "", - grayTertiary: "", - lightGray: "", - lightGraySecondary: "", - lightBluePrimary: "", - lightBlueMain: "", - lightBlueSecondary: "", - white: "", - blackPrimary: "", + primary: "", + secondary: "", + tertiary: "", + quartiary: "", + lightPrimary: "", + lightSecondary: "", + lightTertiary: "", + black: "", blackSecondary: "", blackTertiary: "", - lightYellow: "", - logoWhite: "", - redText: "", + neutral: "", + neutralSecondary: "", + neutralTertiary: "", + lightNeutral: "", + lightNeutralSecondary: "", + white: "", warning: "", + shadow: "", + logo: "", + error: "", active: "", - inactive: "" + inactive: "", } } } diff --git a/config/localConfig.schema.ts b/config/localConfig.schema.ts index 73bfa3378..0cf68d033 100644 --- a/config/localConfig.schema.ts +++ b/config/localConfig.schema.ts @@ -7,26 +7,26 @@ const hexPattern = z const LocalConfigSchema = z.object({ theme: z.object({ colors: z.object({ - bluePrimary: hexPattern, - white: hexPattern, - blackPrimary: hexPattern, - logoWhite: hexPattern, - blackTertiary: hexPattern, - blueSecondary: hexPattern, - blueTertiary: hexPattern, - blueQuartiary: hexPattern, - grayPrimary: hexPattern, - graySecondary: hexPattern, - grayTertiary: hexPattern, - lightGray: hexPattern, - lightGraySecondary: hexPattern, - lightBluePrimary: hexPattern, - lightBlueMain: hexPattern, - lightBlueSecondary: hexPattern, + primary: hexPattern, + secondary: hexPattern, + tertiary: hexPattern, + quartiary: hexPattern, + lightPrimary: hexPattern, + lightSecondary: hexPattern, + lightTertiary: hexPattern, + black: hexPattern, blackSecondary: hexPattern, - lightYellow: hexPattern, - redText: hexPattern, + blackTertiary: hexPattern, + neutral: hexPattern, + neutralSecondary: hexPattern, + neutralTertiary: hexPattern, + lightNeutral: hexPattern, + lightNeutralSecondary: hexPattern, + white: hexPattern, warning: hexPattern, + shadow: hexPattern, + logo: hexPattern, + error: hexPattern, active: hexPattern, inactive: hexPattern, }), diff --git a/server/summarization/summarization-crawler.service.ts b/server/summarization/summarization-crawler.service.ts index 4f6dd530b..e71f0f077 100644 --- a/server/summarization/summarization-crawler.service.ts +++ b/server/summarization/summarization-crawler.service.ts @@ -86,7 +86,7 @@ export class SummarizationCrawlerService { font-weight: bold; } a { - color: ${colors.bluePrimary}; + color: ${colors.primary}; } .not-fact { color: #006060; diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx index 933910adf..e7bcf160d 100644 --- a/src/components/About/About.tsx +++ b/src/components/About/About.tsx @@ -15,7 +15,7 @@ const About = () => { return ( { > { placement="topRight" defaultOpen color={colors.white} - overlayInnerStyle={{ color: colors.blackPrimary }} + overlayInnerStyle={{ color: colors.black }} > { background: colors.white, color: nameSpaceProp === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, - boxShadow: `0px 8px 24px ${colors.colorShadow}`, + ? colors.primary + : colors.secondary, + boxShadow: `0px 8px 24px ${colors.shadow}`, display: "grid", placeContent: "center", width: size, diff --git a/src/components/AletheiaAvatar.tsx b/src/components/AletheiaAvatar.tsx index 26349f615..2e39abab1 100644 --- a/src/components/AletheiaAvatar.tsx +++ b/src/components/AletheiaAvatar.tsx @@ -18,7 +18,7 @@ const AletheiaAvatar = ({ size, src, alt }: AletheiaAvatarProps) => { style={{ width: size + borderGap, height: size + borderGap, - border: `${borderWidth}px solid ${colors.blueQuartiary}`, + border: `${borderWidth}px solid ${colors.quartiary}`, display: "grid", placeContent: "center", borderRadius: "50%", diff --git a/src/components/AletheiaInput.tsx b/src/components/AletheiaInput.tsx index 2164b28ac..678a90a18 100644 --- a/src/components/AletheiaInput.tsx +++ b/src/components/AletheiaInput.tsx @@ -2,8 +2,8 @@ import styled from "styled-components"; import colors from "../styles/colors"; const AletheiaInput = styled.input` - background: ${(props) => (props.white ? colors.white : colors.lightGray)}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + background: ${(props) => (props.white ? colors.white : colors.lightNeutral)}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; border: none; height: 40px; @@ -16,7 +16,7 @@ const AletheiaInput = styled.input` :focus { border: none; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; } :active { diff --git a/src/components/AletheiaMenu.tsx b/src/components/AletheiaMenu.tsx index 072d302b0..4512899d1 100644 --- a/src/components/AletheiaMenu.tsx +++ b/src/components/AletheiaMenu.tsx @@ -35,8 +35,8 @@ const AletheiaMenu = () => { mode="inline" theme="light" style={{ - backgroundColor: colors.lightGray, - color: colors.blackPrimary, + backgroundColor: colors.lightNeutral, + color: colors.black, fontSize: "16px", padding: "0px 24px", }} diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx index dfb638001..9b07e94fb 100644 --- a/src/components/BackButton.tsx +++ b/src/components/BackButton.tsx @@ -14,7 +14,7 @@ function BackButton({ style, callback }: { style?: CSSProperties; callback?: () JSX.Element = ( ) => { const [nameSpace] = useAtom(currentNameSpace); - const [backgroundColor, setBackgroundColor] = useState(colors.bluePrimary); + const [backgroundColor, setBackgroundColor] = useState(colors.primary); useLayoutEffect(() => { setBackgroundColor( nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary ); }, [nameSpace]); @@ -57,8 +57,8 @@ const AletheiaButton: (props: IAletheiaButtonProps) => JSX.Element = ( case ButtonType.gray: buttonStyle = { ...buttonStyle, - background: colors.lightGray, - borderColor: colors.lightGray, + background: colors.lightNeutral, + borderColor: colors.lightNeutral, color: backgroundColor, }; break; @@ -81,8 +81,8 @@ const AletheiaButton: (props: IAletheiaButtonProps) => JSX.Element = ( case ButtonType.lightBlue: buttonStyle = { ...buttonStyle, - background: colors.lightBlueMain, - borderColor: colors.lightBlueMain, + background: colors.lightPrimary, + borderColor: colors.lightPrimary, color: colors.white, }; break; diff --git a/src/components/CardBase.tsx b/src/components/CardBase.tsx index d64fc9f80..0cd1b5864 100644 --- a/src/components/CardBase.tsx +++ b/src/components/CardBase.tsx @@ -5,9 +5,9 @@ const CardBase = ({ children, style = {} }) => { return ( {personality.name} diff --git a/src/components/Claim/ClaimSentence.tsx b/src/components/Claim/ClaimSentence.tsx index 04e3dd58c..7f4338c6a 100644 --- a/src/components/Claim/ClaimSentence.tsx +++ b/src/components/Claim/ClaimSentence.tsx @@ -7,12 +7,12 @@ import { useDispatch } from "react-redux"; import SentencePopover from "./SentencePopover"; const Sentence = styled.a` - color: ${colors.bluePrimary}; + color: ${colors.primary}; font-size: 18px; line-height: 27px; :hover { - color: ${colors.bluePrimary}; + color: ${colors.primary}; text-decoration: underline; } `; diff --git a/src/components/Claim/ClaimSummary.tsx b/src/components/Claim/ClaimSummary.tsx index b7b4c9a07..bb8d125e4 100644 --- a/src/components/Claim/ClaimSummary.tsx +++ b/src/components/Claim/ClaimSummary.tsx @@ -4,7 +4,7 @@ import colors from "../../styles/colors"; const ClaimSummary = styled(Row)` position: relative; - background: ${colors.lightGraySecondary}; + background: ${colors.lightNeutralSecondary}; display:flex; padding: 12px 0px 0px 16px; margin: 1em auto; @@ -18,7 +18,7 @@ const ClaimSummary = styled(Row)` border-top: none; border-right: 12px solid transparent; border-left: 12px solid transparent; - border-bottom: 12px solid ${colors.lightGraySecondary}; + border-bottom: 12px solid ${colors.lightNeutralSecondary}; } &.claim-review { diff --git a/src/components/Claim/ClaimSummaryContent.tsx b/src/components/Claim/ClaimSummaryContent.tsx index e197f23a8..482d50ab1 100644 --- a/src/components/Claim/ClaimSummaryContent.tsx +++ b/src/components/Claim/ClaimSummaryContent.tsx @@ -65,7 +65,7 @@ const ClaimSummaryContent = ({

{disclaimer} diff --git a/src/components/Claim/SentencePopover.tsx b/src/components/Claim/SentencePopover.tsx index 0c819390e..4ed2cccce 100644 --- a/src/components/Claim/SentencePopover.tsx +++ b/src/components/Claim/SentencePopover.tsx @@ -10,7 +10,7 @@ const SentencePopover = () => { const content = ( { return ( - + ); }; diff --git a/src/components/ClaimReview/ClaimReviewDrawer.tsx b/src/components/ClaimReview/ClaimReviewDrawer.tsx index 0c40fc364..651897ff9 100644 --- a/src/components/ClaimReview/ClaimReviewDrawer.tsx +++ b/src/components/ClaimReview/ClaimReviewDrawer.tsx @@ -116,13 +116,13 @@ const ClaimReviewDrawer = () => { diff --git a/src/components/ClaimReview/ClaimReviewForm.tsx b/src/components/ClaimReview/ClaimReviewForm.tsx index 9b82d5152..e6a19fc8c 100644 --- a/src/components/ClaimReview/ClaimReviewForm.tsx +++ b/src/components/ClaimReview/ClaimReviewForm.tsx @@ -74,7 +74,7 @@ const ClaimReviewForm = ({ return ( diff --git a/src/components/ClaimReview/ClaimReviewHeader.tsx b/src/components/ClaimReview/ClaimReviewHeader.tsx index 751cb0221..2dcd058cc 100644 --- a/src/components/ClaimReview/ClaimReviewHeader.tsx +++ b/src/components/ClaimReview/ClaimReviewHeader.tsx @@ -51,7 +51,7 @@ const ClaimReviewHeader = ({ isPublished && reviewTaskType !== ReviewTaskTypeEnum.VerificationRequest ? "none" - : colors.lightGray, + : colors.lightNeutral, }} > diff --git a/src/components/ClaimReview/ReviewContent.style.tsx b/src/components/ClaimReview/ReviewContent.style.tsx index 3c653563f..b3c7acc01 100644 --- a/src/components/ClaimReview/ReviewContent.style.tsx +++ b/src/components/ClaimReview/ReviewContent.style.tsx @@ -16,13 +16,13 @@ const ReviewContentStyled = styled.div` } a { - color: ${colors.bluePrimary}; + color: ${colors.primary}; font-weight: 700; margin-left: 10px; } a:hover { - color: ${colors.bluePrimary}; + color: ${colors.primary}; } `; diff --git a/src/components/ClassificationText.tsx b/src/components/ClassificationText.tsx index ca1a96c43..4d565224c 100644 --- a/src/components/ClassificationText.tsx +++ b/src/components/ClassificationText.tsx @@ -12,7 +12,7 @@ const ClassificationText = (props: { return ( { return ( { onKeyDown={(e) => handleKeyDown(e)} /> {error && ( - + {error} )} diff --git a/src/components/Collaborative/Components/Editor.style.tsx b/src/components/Collaborative/Components/Editor.style.tsx index 3113b2d54..c5ab80fb8 100644 --- a/src/components/Collaborative/Components/Editor.style.tsx +++ b/src/components/Collaborative/Components/Editor.style.tsx @@ -9,7 +9,7 @@ const EditorStyle = styled.div` .toolbar { display: flex; gap: 16px; - background-color: ${colors.lightGray}; + background-color: ${colors.lightNeutral}; margin-top: 0; justify-content: flex-end; flex-direction: column; @@ -25,28 +25,28 @@ const EditorStyle = styled.div` width: 50px; gap: 8px; background-color: transparent; - color: ${colors.bluePrimary}; + color: ${colors.primary}; } .toolbar-item:hover { border: none; - border-color: ${colors.bluePrimary}; - color: ${colors.bluePrimary}; + border-color: ${colors.primary}; + color: ${colors.primary}; outline: none; } .toolbar-item:hover::after { content: ""; - border: 1px solid ${colors.bluePrimary}; + border: 1px solid ${colors.primary}; width: 4px; height: 40px; } .toolbar-item[disabled], .toolbar-item[disabled]:hover { - background: ${colors.lightGray}; - border-color: ${colors.lightGray}; - color: ${colors.colorShadow}; + background: ${colors.lightNeutral}; + border-color: ${colors.lightNeutral}; + color: ${colors.shadow}; } .toolbar-item[disabled]:hover::after { @@ -60,7 +60,7 @@ const EditorStyle = styled.div` @media (max-width: 758px) { order: 0; width: 100%; - border: 1px solid ${colors.graySecondary}; + border: 1px solid ${colors.neutralSecondary}; border-radius: 4px; .toolbar { diff --git a/src/components/Collaborative/Components/LinkToolBar/Dialog/InsertSourceForm.tsx b/src/components/Collaborative/Components/LinkToolBar/Dialog/InsertSourceForm.tsx index feb82b813..bfde6c3a3 100644 --- a/src/components/Collaborative/Components/LinkToolBar/Dialog/InsertSourceForm.tsx +++ b/src/components/Collaborative/Components/LinkToolBar/Dialog/InsertSourceForm.tsx @@ -64,7 +64,7 @@ const InsertSourceForm = ({ )} {error && ( - + {error} )} diff --git a/src/components/Collaborative/Components/LinkToolBar/Dialog/SourceDialog.tsx b/src/components/Collaborative/Components/LinkToolBar/Dialog/SourceDialog.tsx index 2a4794aab..b65b4452f 100644 --- a/src/components/Collaborative/Components/LinkToolBar/Dialog/SourceDialog.tsx +++ b/src/components/Collaborative/Components/LinkToolBar/Dialog/SourceDialog.tsx @@ -33,10 +33,10 @@ const SourceDialog = ({ return (

diff --git a/src/components/Collaborative/Components/Source/EditorSouceList.style.tsx b/src/components/Collaborative/Components/Source/EditorSouceList.style.tsx index 2110fc759..cd4b6aebb 100644 --- a/src/components/Collaborative/Components/Source/EditorSouceList.style.tsx +++ b/src/components/Collaborative/Components/Source/EditorSouceList.style.tsx @@ -16,7 +16,7 @@ export const EditorSourcesListStyle = styled.div` padding: 16px 32px; margin: 0 16px 16px 0; background: ${colors.white}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 8px; } diff --git a/src/components/Collaborative/Components/Source/EditorSourceListItem.tsx b/src/components/Collaborative/Components/Source/EditorSourceListItem.tsx index 29e4dd22d..9efd38603 100644 --- a/src/components/Collaborative/Components/Source/EditorSourceListItem.tsx +++ b/src/components/Collaborative/Components/Source/EditorSourceListItem.tsx @@ -56,8 +56,8 @@ const EditorSourceListItem = ({ node, sup, source }: EditorSouceListProps) => { style={{ color: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }} /> } diff --git a/src/components/Collaborative/Form/CardStyle.tsx b/src/components/Collaborative/Form/CardStyle.tsx index 02cf0983d..f23faf839 100644 --- a/src/components/Collaborative/Form/CardStyle.tsx +++ b/src/components/Collaborative/Form/CardStyle.tsx @@ -18,7 +18,7 @@ const CardStyle = styled(Row)` .card-content { background: ${colors.white}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; border: none; width: 100%; diff --git a/src/components/Collaborative/VisualEditor.style.tsx b/src/components/Collaborative/VisualEditor.style.tsx index 7bb992b78..2f2a816d1 100644 --- a/src/components/Collaborative/VisualEditor.style.tsx +++ b/src/components/Collaborative/VisualEditor.style.tsx @@ -3,7 +3,7 @@ import colors from "../../styles/colors"; import styled from "styled-components"; const VisualEditorStyled = styled(AllStyledComponent)` - background-color: ${colors.lightGray}; + background-color: ${colors.lightNeutral}; border-radius: 4px; border: none; width: 100%; diff --git a/src/components/Copilot/CopilotConversationCard.style.tsx b/src/components/Copilot/CopilotConversationCard.style.tsx index 5ff9b85a9..327cb772b 100644 --- a/src/components/Copilot/CopilotConversationCard.style.tsx +++ b/src/components/Copilot/CopilotConversationCard.style.tsx @@ -20,7 +20,7 @@ const CopilotConversationCardStyle = styled(Row)` background-color: ${colors.white}; marginleft: 40px; wordbreak: break-word; - color: ${colors.bluePrimary}; + color: ${colors.primary}; &:after { border: 1px solid red; width: 10px; @@ -38,7 +38,7 @@ const CopilotConversationCardStyle = styled(Row)` } .conversation-card-content.error { - color: ${colors.redText}; + color: ${colors.error}; } `; diff --git a/src/components/Copilot/CopilotConversationCard.tsx b/src/components/Copilot/CopilotConversationCard.tsx index c891ab25b..b45305fa5 100644 --- a/src/components/Copilot/CopilotConversationCard.tsx +++ b/src/components/Copilot/CopilotConversationCard.tsx @@ -20,7 +20,7 @@ const CopilotConversationCard = ({ message }) => { style={{ borderRadius: 16 }} /> ) : ( - + {SenderEnum.User.slice(0, 1).toUpperCase()} )} diff --git a/src/components/Copilot/CopilotConversationLoading.style.tsx b/src/components/Copilot/CopilotConversationLoading.style.tsx index 4ecefed26..f54cafa09 100644 --- a/src/components/Copilot/CopilotConversationLoading.style.tsx +++ b/src/components/Copilot/CopilotConversationLoading.style.tsx @@ -7,7 +7,7 @@ const CopilotConversationLoadingStyle = styled.span` .loading { font-size: 16px; - color: ${colors.bluePrimary}; + color: ${colors.primary}; display: flex; } diff --git a/src/components/Copilot/CopilotConversationSuggestion.style.tsx b/src/components/Copilot/CopilotConversationSuggestion.style.tsx index f9d452376..5bcaa5ca9 100644 --- a/src/components/Copilot/CopilotConversationSuggestion.style.tsx +++ b/src/components/Copilot/CopilotConversationSuggestion.style.tsx @@ -18,11 +18,11 @@ const CopilotConversationSuggestionStyled = styled.div` padding: 16px 8px; cursor: pointer; border: none; - border-top: 1px solid ${colors.grayTertiary}; + border-top: 1px solid ${colors.neutralTertiary}; background: ${colors.white}; border-radius: 0 0 10px 10px; text-align: center; - color: ${colors.lightBlueMain}; + color: ${colors.lightPrimary}; font-weight: bold; font-size: 14px; } diff --git a/src/components/Copilot/CopilotDrawer.style.tsx b/src/components/Copilot/CopilotDrawer.style.tsx index 9b84cc001..cfad95b56 100644 --- a/src/components/Copilot/CopilotDrawer.style.tsx +++ b/src/components/Copilot/CopilotDrawer.style.tsx @@ -14,7 +14,7 @@ const CopilotDrawerStyled = styled(Drawer)` width: ${(props) => props.width}; height: ${(props) => props.height}; padding: 32px 16px 16px 16px; - background: ${colors.lightGraySecondary}; + background: ${colors.lightNeutralSecondary}; } .footer { diff --git a/src/components/Copilot/CopilotToolbar.tsx b/src/components/Copilot/CopilotToolbar.tsx index 30463168d..d62b09f61 100644 --- a/src/components/Copilot/CopilotToolbar.tsx +++ b/src/components/Copilot/CopilotToolbar.tsx @@ -17,13 +17,13 @@ const CopilotToolbarStyled = styled.div` .toolbar-item:active, .toolbar-item:focus { background-color: transparent; - color: ${colors.bluePrimary}; + color: ${colors.primary}; } .toolbar-item:hover { border: none; - border-color: ${colors.bluePrimary}; - color: ${colors.bluePrimary}; + border-color: ${colors.primary}; + color: ${colors.primary}; outline: none; } `; diff --git a/src/components/Dashboard/DashboardView.style.tsx b/src/components/Dashboard/DashboardView.style.tsx index 089e1b97a..59f7db245 100644 --- a/src/components/Dashboard/DashboardView.style.tsx +++ b/src/components/Dashboard/DashboardView.style.tsx @@ -7,7 +7,7 @@ const DashboardViewStyle = styled(Row)` .dashboard-item { padding: 20px; - border: 1px solid ${colors.lightGray}; + border: 1px solid ${colors.lightNeutral}; box-shadow: 1px 4px 10px 3px rgba(0, 0, 0, 0.1); border-radius: 32px; max-height: 550px; diff --git a/src/components/Debate/DebateGrid.tsx b/src/components/Debate/DebateGrid.tsx index 8925d8c5a..fa5d0ae05 100644 --- a/src/components/Debate/DebateGrid.tsx +++ b/src/components/Debate/DebateGrid.tsx @@ -35,7 +35,7 @@ const DebateGrid = ({ debates }) => { style={{ width: "100%", padding: "10px", - backgroundColor: colors.lightGray, + backgroundColor: colors.lightNeutral, }} >
{ lineHeight: "32px", margin: "0 0 16px 0", fontWeight: 400, - color: colors.grayPrimary, + color: colors.neutral, }} > {debateClaim.title} ( diff --git a/src/components/Debate/DebateHeader.tsx b/src/components/Debate/DebateHeader.tsx index 7a64fd6f3..1c68411e1 100644 --- a/src/components/Debate/DebateHeader.tsx +++ b/src/components/Debate/DebateHeader.tsx @@ -51,15 +51,15 @@ const DebateHeader = ({ claim, title, personalities, userRole }) => { justify="center" style={{ paddingTop: "32px", - backgroundColor: colors.lightGray, + backgroundColor: colors.lightNeutral, }} >
{ width: "clamp(120px, 76vw, 290px)", display: "grid", borderRadius: "8px", - backgroundColor: colors.lightBlueMain, + backgroundColor: colors.lightPrimary, alignContent: "center", }} > diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index c2e69d341..df3eb193c 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -115,7 +115,7 @@ const Editor = ({ claim, sitekey }: IEditorProps) => { style={{ display: "flex", justifyContent: "space-evenly", - backgroundColor: colors.grayPrimary, + backgroundColor: colors.neutral, padding: "10px", }} > diff --git a/src/components/Editor/EditorClaimCard/EditorClaimCard.tsx b/src/components/Editor/EditorClaimCard/EditorClaimCard.tsx index 8e8182900..732b6ef79 100644 --- a/src/components/Editor/EditorClaimCard/EditorClaimCard.tsx +++ b/src/components/Editor/EditorClaimCard/EditorClaimCard.tsx @@ -20,7 +20,7 @@ const EditorClaimCardContent = ({ children }) => { return (
{ url={url} bgColor={ nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary } target="_blank" rel="noreferrer" diff --git a/src/components/Footer/AletheiaSocialMediaIcons.tsx b/src/components/Footer/AletheiaSocialMediaIcons.tsx index ecfc237d8..3d9d5a03e 100644 --- a/src/components/Footer/AletheiaSocialMediaIcons.tsx +++ b/src/components/Footer/AletheiaSocialMediaIcons.tsx @@ -14,8 +14,8 @@ const AletheiaSocialMediaIcons = () => { url="https://www.instagram.com/aletheiafact" bgColor={ nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary } target="_blank" rel="noreferrer" @@ -25,8 +25,8 @@ const AletheiaSocialMediaIcons = () => { url="https://www.facebook.com/AletheiaFactorg-107521791638412" bgColor={ nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary } target="_blank" rel="noreferrer" @@ -36,8 +36,8 @@ const AletheiaSocialMediaIcons = () => { url="https://www.linkedin.com/company/aletheiafact-org" bgColor={ nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary } target="_blank" rel="noreferrer" @@ -47,8 +47,8 @@ const AletheiaSocialMediaIcons = () => { url="https://github.com/AletheiaFact/aletheia" bgColor={ nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary } target="_blank" rel="noreferrer" diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index e51e02ec7..e3f8cf275 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -16,13 +16,13 @@ const Footer = () => { const { t } = useTranslation(); const { vw } = useAppSelector((state) => state); const [nameSpace] = useAtom(currentNameSpace); - const [backgroundColor, setBackgroundColor] = useState(colors.bluePrimary); + const [backgroundColor, setBackgroundColor] = useState(colors.primary); useLayoutEffect(() => { setBackgroundColor( nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary ); }, [nameSpace]); diff --git a/src/components/Form/ClaimReviewSelect.tsx b/src/components/Form/ClaimReviewSelect.tsx index 06e61fadc..eab0e8b0d 100644 --- a/src/components/Form/ClaimReviewSelect.tsx +++ b/src/components/Form/ClaimReviewSelect.tsx @@ -11,7 +11,7 @@ const { Option } = Select; export const SelectInput = styled(Select)` background: ${colors.white}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; border: none; height: 40px; @@ -36,7 +36,7 @@ export const SelectInput = styled(Select)` :focus { border: none; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; } :active { diff --git a/src/components/Form/DatePickerInput.tsx b/src/components/Form/DatePickerInput.tsx index c62682218..3a4f33616 100644 --- a/src/components/Form/DatePickerInput.tsx +++ b/src/components/Form/DatePickerInput.tsx @@ -3,8 +3,8 @@ import colors from "../../styles/colors"; import styled from "styled-components"; const DatePickerInput = styled(DatePicker)` - background: ${(props) => (props.white ? colors.white : colors.lightGray)}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + background: ${(props) => (props.white ? colors.white : colors.lightNeutral)}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; border: none; height: 40px; @@ -16,7 +16,7 @@ const DatePickerInput = styled(DatePicker)` :focus { border: none; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; } :active { diff --git a/src/components/Form/InputSearch.tsx b/src/components/Form/InputSearch.tsx index 1d50f020c..29e0df964 100644 --- a/src/components/Form/InputSearch.tsx +++ b/src/components/Form/InputSearch.tsx @@ -8,16 +8,16 @@ const InputSearchStyled = styled(Input.Search)` display: none; } span.ant-input-affix-wrapper { - background: ${({ backgroundColor = colors.lightGray }) => + background: ${({ backgroundColor = colors.lightNeutral }) => backgroundColor}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; &:focus-within { - border-color: ${colors.grayTertiary}; + border-color: ${colors.neutralTertiary}; } } input.ant-input { - background: ${({ backgroundColor = colors.lightGray }) => + background: ${({ backgroundColor = colors.lightNeutral }) => backgroundColor}; color: ${colors.blackSecondary}; &::placeholder { diff --git a/src/components/Form/SelectOptions.tsx b/src/components/Form/SelectOptions.tsx index 4f58a19f0..d1164510c 100644 --- a/src/components/Form/SelectOptions.tsx +++ b/src/components/Form/SelectOptions.tsx @@ -15,7 +15,7 @@ const StyledSelect = styled(Select)` } .ant-select-selection-placeholder { - color: ${colors.graySecondary}; + color: ${colors.neutralSecondary}; } `; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 33a077818..bd1902b17 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -9,13 +9,13 @@ import { NameSpaceEnum } from "../../types/Namespace"; const AletheiaHeader = () => { const [nameSpace] = useAtom(currentNameSpace); const [headerBackgroundColor, setHeaderBackgroundColor] = useState( - colors.bluePrimary + colors.primary ); useLayoutEffect(() => { setHeaderBackgroundColor( nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary + ? colors.primary + : colors.secondary ); }, [nameSpace]); diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx index 732891107..64abe2f4b 100644 --- a/src/components/Header/Logo.tsx +++ b/src/components/Header/Logo.tsx @@ -9,7 +9,7 @@ import ConfigLogo from "./ConfigLogo"; import LogoAletheia from "./LogoAletheia"; const Logo = ({ - color = colors.logoWhite, + color = colors.logo, height = "42px", width = "80px", lineHeight = "24px", diff --git a/src/components/Header/SelectLanguage.tsx b/src/components/Header/SelectLanguage.tsx index 723526abb..8a3a732f9 100644 --- a/src/components/Header/SelectLanguage.tsx +++ b/src/components/Header/SelectLanguage.tsx @@ -26,8 +26,8 @@ const SelectInput = styled(Select)` const SwitchInputStyle = styled(Switch)` background-color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; `; const SelectLanguage = (props: { defaultLanguage; dataCy }) => { diff --git a/src/components/Header/UserMenu.style.tsx b/src/components/Header/UserMenu.style.tsx index cc88c4858..a75c9cc5f 100644 --- a/src/components/Header/UserMenu.style.tsx +++ b/src/components/Header/UserMenu.style.tsx @@ -13,7 +13,7 @@ const UserMenuStyle = styled(Menu)` } .menu-header-avatar { - background: ${colors.blueQuartiary}; + background: ${colors.quartiary}; margin: 0px; } @@ -32,8 +32,8 @@ const UserMenuStyle = styled(Menu)` background: transparent; color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; } .select-menu-item { diff --git a/src/components/Header/UserMenu.tsx b/src/components/Header/UserMenu.tsx index 4b631059b..aa81f372c 100644 --- a/src/components/Header/UserMenu.tsx +++ b/src/components/Header/UserMenu.tsx @@ -25,7 +25,7 @@ const menuSlotProps = { elevation: 0, sx: { overflow: "visible", - filter: `drop-shadow(0px 2px 8px ${colors.colorShadow})`, + filter: `drop-shadow(0px 2px 8px ${colors.shadow})`, mt: 1.5, "& .MuiAvatar-root": { width: 32, diff --git a/src/components/Header/UserMenuHeader.tsx b/src/components/Header/UserMenuHeader.tsx index d5aff258a..90ae5a4d5 100644 --- a/src/components/Header/UserMenuHeader.tsx +++ b/src/components/Header/UserMenuHeader.tsx @@ -39,7 +39,7 @@ const UserMenuHeader = ({ isLoading, user }) => { marginTop: 4, }} > - + {nameSpaceName.replace("-", " ")} { fontSize: 16, color: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }; return ( diff --git a/src/components/Home/CTARegistration.tsx b/src/components/Home/CTARegistration.tsx index c1b970de0..11c7dbf04 100644 --- a/src/components/Home/CTARegistration.tsx +++ b/src/components/Home/CTARegistration.tsx @@ -16,8 +16,8 @@ function CTARegistration() { style={{ backgroundColor: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, textAlign: "center", maxWidth: "100%", display: "grid", diff --git a/src/components/Home/Stats.tsx b/src/components/Home/Stats.tsx index d6a46e92b..c81197c00 100644 --- a/src/components/Home/Stats.tsx +++ b/src/components/Home/Stats.tsx @@ -17,7 +17,7 @@ export const Stats = ({ info, title, style = {} }) => { >

(props.white ? colors.white : colors.lightGray)}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + background: ${(props) => (props.white ? colors.white : colors.lightNeutral)}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; border: none; height: 40px; input { - background: ${colors.lightGray}; + background: ${colors.lightNeutral}; } ::placeholder { @@ -19,7 +19,7 @@ const InputPassword = styled(Input.Password)` :focus { border: none; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; } :active { diff --git a/src/components/Kanban/KanbanCol.tsx b/src/components/Kanban/KanbanCol.tsx index f7526ca5f..4beaf3c99 100644 --- a/src/components/Kanban/KanbanCol.tsx +++ b/src/components/Kanban/KanbanCol.tsx @@ -13,7 +13,7 @@ import styled from "styled-components"; const StyledColumn = styled.div` padding: 0 10px; width: 400px; - background-color: ${colors.lightGraySecondary}; + background-color: ${colors.lightNeutralSecondary}; border-radius: 4px; .ant-list-item { diff --git a/src/components/Kanban/UserTag.tsx b/src/components/Kanban/UserTag.tsx index 757cda45d..f86d3fd7e 100644 --- a/src/components/Kanban/UserTag.tsx +++ b/src/components/Kanban/UserTag.tsx @@ -19,7 +19,7 @@ const UserTag = ({ user }) => { { return ( - + {required && "* "} {children} diff --git a/src/components/LargeDrawer.tsx b/src/components/LargeDrawer.tsx index a8918a17b..07cf9b510 100644 --- a/src/components/LargeDrawer.tsx +++ b/src/components/LargeDrawer.tsx @@ -7,7 +7,7 @@ const LargeDrawer = ({ children, open, onClose, - backgroundColor = colors.lightGray, + backgroundColor = colors.lightNeutral, }) => { const { vw } = useAppSelector((state) => state); return ( diff --git a/src/components/List/BaseList.tsx b/src/components/List/BaseList.tsx index 9e65f98fc..ce88b21b0 100644 --- a/src/components/List/BaseList.tsx +++ b/src/components/List/BaseList.tsx @@ -42,8 +42,8 @@ const BaseList = ({ fontSize: 48, color: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }} /> ); @@ -133,8 +133,8 @@ const BaseList = ({ fontSize: "24px", lineHeight: "32px", color: bluePrimary - ? colors.bluePrimary - : colors.blackPrimary, + ? colors.primary + : colors.black, marginBottom: 0, }} > diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index 59e87b773..7938126d6 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -26,16 +26,16 @@ const Loading = ({ style = {} }) => { fontSize: 48, color: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }} />

diff --git a/src/components/Login/ForgotPasswordLink.tsx b/src/components/Login/ForgotPasswordLink.tsx index a520c5110..356733b4b 100644 --- a/src/components/Login/ForgotPasswordLink.tsx +++ b/src/components/Login/ForgotPasswordLink.tsx @@ -9,7 +9,7 @@ const ForgotPasswordLink = ({ t }) => { href={href} style={{ fontSize: 14, - color: colors.blackPrimary, + color: colors.black, fontWeight: "bold", textDecoration: "underline", width: "180px", diff --git a/src/components/Metrics/ReviewProgress.tsx b/src/components/Metrics/ReviewProgress.tsx index 51d7665ea..9a029bbce 100644 --- a/src/components/Metrics/ReviewProgress.tsx +++ b/src/components/Metrics/ReviewProgress.tsx @@ -13,12 +13,12 @@ const ReviewProgress = ({ reviews, statsProps }) => { strokeWidth: statsProps.strokeWidth || 18, width: statsProps.width || 80, strokeLinecap: statsProps.type === "circle" ? "square" : "round", - trailColor: colors.grayTertiary, + trailColor: colors.neutralTertiary, }; return { ...defaultStyle, - strokeColor: StatsReviewColors[reviewId] || colors.blackPrimary, + strokeColor: StatsReviewColors[reviewId] || colors.black, }; }; @@ -41,7 +41,7 @@ const ReviewProgress = ({ reviews, statsProps }) => { > - props.theme === "dark" ? colors.blackPrimary : colors.lightGray}; - box-shadow: 0px 0px 15px ${colors.colorShadow}; + props.theme === "dark" ? colors.black : colors.lightNeutral}; + box-shadow: 0px 0px 15px ${colors.shadow}; padding: 26px 26px; max-width: 90vw; } @@ -31,7 +31,7 @@ const AletheiaModal = styled(Modal)` .ant-modal-title { color: ${(props) => - props.theme === "dark" ? colors.white : colors.blackPrimary}; + props.theme === "dark" ? colors.white : colors.black}; font-weight: 700; font-size: 14px; text-align: center; @@ -44,7 +44,7 @@ const AletheiaModal = styled(Modal)` width: 14px; height: 14px; color: ${(props) => - props.theme === "dark" ? colors.white : colors.bluePrimary}; + props.theme === "dark" ? colors.white : colors.primary}; margin-right: 20px; } @@ -70,8 +70,8 @@ const ModalCancelButton = styled(Button)` width: 120px; color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; text-align: "center"; font-weight: 700; font-size: 14; diff --git a/src/components/Notification/NotificationCard.style.tsx b/src/components/Notification/NotificationCard.style.tsx index 0bdc0a9c2..bf6daaeb7 100644 --- a/src/components/Notification/NotificationCard.style.tsx +++ b/src/components/Notification/NotificationCard.style.tsx @@ -4,9 +4,9 @@ import { NameSpaceEnum } from "../../types/Namespace"; const NotificationCardStyle = styled.div` background-color: ${({ isSeen }) => - !isSeen ? colors.lightGray : colors.white}; + !isSeen ? colors.lightNeutral : colors.white}; padding: ${(props) => (!props.isSeen ? "16px 16px 16px 6px" : "16px")}; - border: 1px solid ${colors.lightGraySecondary}; + border: 1px solid ${colors.lightNeutralSecondary}; cursor: pointer; display: flex; justify-content: space-between; @@ -32,8 +32,8 @@ const NotificationCardStyle = styled.div` .notification-avatar-icon { color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; margin: 0px; width: 32px; height: 32px; @@ -47,7 +47,7 @@ const NotificationCardStyle = styled.div` } .notification-time { - color: ${colors.graySecondary}; + color: ${colors.neutralSecondary}; width: 100%; max-width: 40px; font-size: 14px; diff --git a/src/components/Notification/NotificationCard.tsx b/src/components/Notification/NotificationCard.tsx index e937ba89d..db21834a0 100644 --- a/src/components/Notification/NotificationCard.tsx +++ b/src/components/Notification/NotificationCard.tsx @@ -31,7 +31,7 @@ const NotificationCard = ({ notification, handleNotificationClick }) => { } spinning={isLoading} - style={{ fontSize: 48, color: colors.bluePrimary, display: "flex" }} + style={{ fontSize: 48, color: colors.primary, display: "flex" }} >

diff --git a/src/components/PartialReviewWarning.tsx b/src/components/PartialReviewWarning.tsx index 1b481109a..048c26928 100644 --- a/src/components/PartialReviewWarning.tsx +++ b/src/components/PartialReviewWarning.tsx @@ -9,7 +9,7 @@ const PartialReviewWarning = () => { return ( * - + {t("claimReview:partialReviewWarning")} diff --git a/src/components/Personality/PersonalityCard.tsx b/src/components/Personality/PersonalityCard.tsx index 64e4b98f0..dcc0d25b8 100644 --- a/src/components/Personality/PersonalityCard.tsx +++ b/src/components/Personality/PersonalityCard.tsx @@ -103,9 +103,9 @@ const PersonalityCard = ({ if (!header) { cardStyle = { background: colors.white, - border: `1px solid ${colors.lightGraySecondary}`, + border: `1px solid ${colors.lightNeutralSecondary}`, boxSizing: "border-box", - boxShadow: `0px 3px 3px ${colors.colorShadow}`, + boxShadow: `0px 3px 3px ${colors.shadow}`, borderRadius: "10px", marginBottom: "10px", }; @@ -156,16 +156,16 @@ const PersonalityCard = ({ {((hoistAvatar && (!vw?.sm || !vw?.xs)) || !hoistAvatar) && ( - - )} - + + )} + {summarized && ( { fontWeight: "bold", fontSize: "12px", lineHeight: "16px", - color: colors.bluePrimary, + color: colors.primary, textDecoration: "underline", }} target="_blank" @@ -106,7 +106,7 @@ export const PersonalityInfo = (props: PersonalityInfo) => { { return ( { namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; width: 25px; height: 25px; } @@ -23,8 +23,8 @@ const RadioInput = styled(Radio)` .ant-radio-checked .ant-radio-inner:after { background-color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; position: relative; top: 3px; left: 3px; @@ -33,7 +33,7 @@ const RadioInput = styled(Radio)` } span .ant-radio-inner { - box-shadow: 0px 0px 6px ${colors.colorShadow}; + box-shadow: 0px 0px 6px ${colors.shadow}; width: 25px; height: 25px; } diff --git a/src/components/Search/AdvancedSearch.tsx b/src/components/Search/AdvancedSearch.tsx index 55e30206c..18291ba8f 100644 --- a/src/components/Search/AdvancedSearch.tsx +++ b/src/components/Search/AdvancedSearch.tsx @@ -17,7 +17,7 @@ const AdvancedSearch = ({ onSearch, options, defaultValue, handleFilter }) => { renderInput={(params) => ( onSearch(event.target.value)} diff --git a/src/components/Search/SearchCard.tsx b/src/components/Search/SearchCard.tsx index 302bddeff..fc189d823 100644 --- a/src/components/Search/SearchCard.tsx +++ b/src/components/Search/SearchCard.tsx @@ -48,7 +48,7 @@ const SearchCard = ({ diff --git a/src/components/Search/SearchOverlay.tsx b/src/components/Search/SearchOverlay.tsx index 6e18e96b7..352cf3713 100644 --- a/src/components/Search/SearchOverlay.tsx +++ b/src/components/Search/SearchOverlay.tsx @@ -49,8 +49,8 @@ const OverlayCol = styled(Col)` .overlay { background-color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; position: fixed; z-index: 3; width: 100vw; diff --git a/src/components/SectionTitle.tsx b/src/components/SectionTitle.tsx index b6b956099..5a7a72a14 100644 --- a/src/components/SectionTitle.tsx +++ b/src/components/SectionTitle.tsx @@ -13,7 +13,7 @@ const SectionTitle = (props) => { lineHeight: "32px", margin: "0 0 16px 0", fontWeight: 400, - color: colors.grayPrimary, + color: colors.neutral, }} > {props.children} diff --git a/src/components/SentenceReport/Banner.style.tsx b/src/components/SentenceReport/Banner.style.tsx index e220c1e34..fb8fbc307 100644 --- a/src/components/SentenceReport/Banner.style.tsx +++ b/src/components/SentenceReport/Banner.style.tsx @@ -5,7 +5,7 @@ import colors from "../../styles/colors"; const BannerStyle = styled(Row)` justify-content: center; padding: 18px; - background-color: ${colors.blackPrimary}; + background-color: ${colors.black}; .text { color: ${colors.white}; diff --git a/src/components/SentenceReport/SentenceReportComments.tsx b/src/components/SentenceReport/SentenceReportComments.tsx index 4e7e8a7a3..c736c55dc 100644 --- a/src/components/SentenceReport/SentenceReportComments.tsx +++ b/src/components/SentenceReport/SentenceReportComments.tsx @@ -26,7 +26,7 @@ const SentenceReportComments = ({ context }) => { diff --git a/src/components/SentenceReport/SentenceReportSummary.tsx b/src/components/SentenceReport/SentenceReportSummary.tsx index b7d18a975..a3db5bdaa 100644 --- a/src/components/SentenceReport/SentenceReportSummary.tsx +++ b/src/components/SentenceReport/SentenceReportSummary.tsx @@ -40,7 +40,7 @@ const SentenceReportSummary = styled(Row)` } a { - color: ${colors.bluePrimary}; + color: ${colors.primary}; font-weight: 700; margin-left: 10px; } diff --git a/src/components/SentenceReport/SentenceReportView.tsx b/src/components/SentenceReport/SentenceReportView.tsx index f7eafb41b..c3d8b1e76 100644 --- a/src/components/SentenceReport/SentenceReportView.tsx +++ b/src/components/SentenceReport/SentenceReportView.tsx @@ -61,7 +61,7 @@ const SentenceReportView = ({ diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index d94f2d544..8bda057ea 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -28,7 +28,7 @@ const Sidebar = () => { placement="left" bodyStyle={{ padding: 0 }} drawerStyle={{ - backgroundColor: colors.lightGray, + backgroundColor: colors.lightNeutral, }} closable={false} > @@ -39,7 +39,7 @@ const Sidebar = () => { }} > diff --git a/src/components/SocialMediaShare.tsx b/src/components/SocialMediaShare.tsx index ed581d592..7f72f15c5 100644 --- a/src/components/SocialMediaShare.tsx +++ b/src/components/SocialMediaShare.tsx @@ -46,7 +46,7 @@ const SocialMediaShare = ({ quote = null, href = "", claim = null }) => { { bgStyle={{ fill: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }} /> @@ -130,8 +130,8 @@ const SocialMediaShare = ({ quote = null, href = "", claim = null }) => { bgStyle={{ fill: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }} /> @@ -153,8 +153,8 @@ const SocialMediaShare = ({ quote = null, href = "", claim = null }) => { bgStyle={{ fill: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }} /> @@ -176,8 +176,8 @@ const SocialMediaShare = ({ quote = null, href = "", claim = null }) => { bgStyle={{ fill: nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary, + ? colors.primary + : colors.secondary, }} /> diff --git a/src/components/Source/CreateSource/CreateSourceView.tsx b/src/components/Source/CreateSource/CreateSourceView.tsx index 91000dfdf..ab26c915a 100644 --- a/src/components/Source/CreateSource/CreateSourceView.tsx +++ b/src/components/Source/CreateSource/CreateSourceView.tsx @@ -5,7 +5,7 @@ import DynamicSourceForm from "./DynamicSourceForm"; const CreateSourceView = () => { return ( - + diff --git a/src/components/Source/SourceListItem.style.tsx b/src/components/Source/SourceListItem.style.tsx index 63538602d..46389b0ae 100644 --- a/src/components/Source/SourceListItem.style.tsx +++ b/src/components/Source/SourceListItem.style.tsx @@ -11,7 +11,7 @@ const SourceListItemStyled = styled(Col)` .title { font-size: 18px; font-weight: 600; - color: ${colors.bluePrimary}; + color: ${colors.primary}; margin: 0; } diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx index 76bdc80d5..5cdb26ebd 100644 --- a/src/components/TextArea.tsx +++ b/src/components/TextArea.tsx @@ -3,8 +3,8 @@ import { Input } from "antd"; import colors from "../styles/colors"; const TextArea = styled(Input.TextArea)` - background: ${(props) => (props.white ? colors.white : colors.lightGray)}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + background: ${(props) => (props.white ? colors.white : colors.lightNeutral)}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; border: none; height: 40px; @@ -16,7 +16,7 @@ const TextArea = styled(Input.TextArea)` :focus { border: none; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; } :active { diff --git a/src/components/TextAreaAutoSize.tsx b/src/components/TextAreaAutoSize.tsx index 7a7ee292a..bc727557f 100644 --- a/src/components/TextAreaAutoSize.tsx +++ b/src/components/TextAreaAutoSize.tsx @@ -3,8 +3,8 @@ import colors from "../styles/colors"; import { TextareaAutosize } from "@mui/material"; const AletheiaTextAreaAutoSize = styled(TextareaAutosize)` - background: ${(props) => (props.white ? colors.white : colors.lightGray)}; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + background: ${(props) => (props.white ? colors.white : colors.lightNeutral)}; + box-shadow: 0px 2px 2px ${colors.shadow}; border-radius: 4px; border: none; height: 40px; @@ -17,7 +17,7 @@ const AletheiaTextAreaAutoSize = styled(TextareaAutosize)` :focus { border: none; - box-shadow: 0px 2px 2px ${colors.colorShadow}; + box-shadow: 0px 2px 2px ${colors.shadow}; } :active { diff --git a/src/components/ToggleSection.tsx b/src/components/ToggleSection.tsx index ebc706707..2ef3597c0 100644 --- a/src/components/ToggleSection.tsx +++ b/src/components/ToggleSection.tsx @@ -10,39 +10,39 @@ const RadioGroup = styled(Radio.Group)` &.ant-radio-button-wrapper-checked { background: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; border-color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; color: ${colors.white}; &:not([class*=" ant-radio-button-wrapper-disabled"]) { &.ant-radio-button-wrapper:first-child { border-right-color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; } } &:not(.ant-radio-button-wrapper-disabled)::before { background: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; } } } `; const RadioButton = styled(Radio.Button)` - background: ${colors.grayTertiary}; + background: ${colors.neutralTertiary}; color: ${({ nameSpace }) => nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; `; interface ToggleSectionProps { diff --git a/src/components/Toolbar/AdminToolBar.style.tsx b/src/components/Toolbar/AdminToolBar.style.tsx index dd8d6fbc1..883030ebe 100644 --- a/src/components/Toolbar/AdminToolBar.style.tsx +++ b/src/components/Toolbar/AdminToolBar.style.tsx @@ -11,13 +11,13 @@ const AdminToolBarStyle = styled(AppBar)` padding: 4px 12px; padding: 0; min-height: 33px; - border-bottom: 1px solid ${colors.lightGraySecondary}; + border-bottom: 1px solid ${colors.lightNeutralSecondary}; gap: 16px; } .toolbar-item { width: 26px; - border-bottom: 1px solid ${colors.bluePrimary}; + border-bottom: 1px solid ${colors.primary}; display: flex; align-items: center; justify-content: center; @@ -31,8 +31,8 @@ const AdminToolBarStyle = styled(AppBar)` font-size: 16; color: ${({ namespace }) => namespace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary}; + ? colors.primary + : colors.secondary}; } `; diff --git a/src/components/Toolbar/ReviewTaskAdminToolBar.tsx b/src/components/Toolbar/ReviewTaskAdminToolBar.tsx index e69e4302c..e1ad94878 100644 --- a/src/components/Toolbar/ReviewTaskAdminToolBar.tsx +++ b/src/components/Toolbar/ReviewTaskAdminToolBar.tsx @@ -23,12 +23,12 @@ const ReviewTaskAdminToolBar = () => { }; return ( - +
diff --git a/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx b/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx index 5af14f16d..f1c494808 100644 --- a/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx +++ b/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx @@ -5,7 +5,7 @@ import DynamicVerificationRequestForm from "./DynamicVerificationRequestForm"; const CreateVerificationRequestView = () => { return ( - + diff --git a/src/components/VerificationRequest/ManageVerificationRequestGroup.tsx b/src/components/VerificationRequest/ManageVerificationRequestGroup.tsx index 37b67021a..a40428079 100644 --- a/src/components/VerificationRequest/ManageVerificationRequestGroup.tsx +++ b/src/components/VerificationRequest/ManageVerificationRequestGroup.tsx @@ -21,7 +21,7 @@ const ManageVerificationRequestGroup = ({ tabIndex={0} onKeyDown={onKeyDown} style={{ - color: colors.lightBlueMain, + color: colors.lightPrimary, textDecoration: "underline", cursor: "pointer", textAlign: "center", diff --git a/src/components/VerificationRequest/VerificationRequestCard.tsx b/src/components/VerificationRequest/VerificationRequestCard.tsx index 16a5d95d3..c4e689be3 100644 --- a/src/components/VerificationRequest/VerificationRequestCard.tsx +++ b/src/components/VerificationRequest/VerificationRequestCard.tsx @@ -77,7 +77,7 @@ const VerificationRequestCard = ({ tags.push( @@ -97,7 +97,7 @@ const VerificationRequestCard = ({ if (verificationRequest.date) { tags.push( @@ -110,7 +110,7 @@ const VerificationRequestCard = ({ if (verificationRequest.heardFrom) { tags.push( @@ -126,7 +126,7 @@ const VerificationRequestCard = ({ if (verificationRequest.source) { tags.push( @@ -147,7 +147,7 @@ const VerificationRequestCard = ({ diff --git a/src/components/VerificationRequest/VerificationRequestList.tsx b/src/components/VerificationRequest/VerificationRequestList.tsx index 6f1a14311..31b3a56f0 100644 --- a/src/components/VerificationRequest/VerificationRequestList.tsx +++ b/src/components/VerificationRequest/VerificationRequestList.tsx @@ -307,16 +307,16 @@ const VerificationRequestList = () => { loading={loading} sx={{ "& .MuiDataGrid-columnHeader": { - backgroundColor: colors.lightGraySecondary, - color: colors.bluePrimary, + backgroundColor: colors.lightNeutralSecondary, + color: colors.primary, fontWeight: "bold", - borderBottom: `2px solid ${colors.blueSecondary}`, + borderBottom: `2px solid ${colors.secondary}`, }, "& .MuiIconButton-root": { color: filtersUsed.length > 0 || - topicFilterUsed.length > 0 - ? colors.bluePrimary + topicFilterUsed.length > 0 + ? colors.primary : "default", }, }} diff --git a/src/components/VerificationRequest/VerificationRequestRecommedations.style.tsx b/src/components/VerificationRequest/VerificationRequestRecommedations.style.tsx index db6fd3628..fd53a1c17 100644 --- a/src/components/VerificationRequest/VerificationRequestRecommedations.style.tsx +++ b/src/components/VerificationRequest/VerificationRequestRecommedations.style.tsx @@ -11,7 +11,7 @@ const VerificationRequestResultListStyled = styled.section` ::-webkit-scrollbar { height: 4px; width: 4px; - background: ${colors.grayTertiary}; + background: ${colors.neutralTertiary}; } ::-webkit-scrollbar-thumb { @@ -22,13 +22,13 @@ const VerificationRequestResultListStyled = styled.section` ::-moz-scrollbar { height: 4px; width: 4px; - background: ${colors.grayTertiary}; + background: ${colors.neutralTertiary}; } ::-mz-scrollbar { height: 4px; width: 4px; - background: ${colors.grayTertiary}; + background: ${colors.neutralTertiary}; } `; diff --git a/src/components/VideoCTACard.tsx b/src/components/VideoCTACard.tsx index 4da9efbd7..2658b3e95 100644 --- a/src/components/VideoCTACard.tsx +++ b/src/components/VideoCTACard.tsx @@ -10,7 +10,7 @@ const VideoCTACard = () => { width: "clamp(120px, 76vw, 290px)", display: "grid", borderRadius: "8px", - backgroundColor: colors.graySecondary, + backgroundColor: colors.neutralSecondary, alignContent: "center", }} > diff --git a/src/components/adminArea/Drawer/UserEditRoles.tsx b/src/components/adminArea/Drawer/UserEditRoles.tsx index c1f18e7a6..a14aeb76d 100644 --- a/src/components/adminArea/Drawer/UserEditRoles.tsx +++ b/src/components/adminArea/Drawer/UserEditRoles.tsx @@ -26,8 +26,8 @@ const UserEditRoles = ({ currentUser, role, setUserRole, shouldEdit }) => { const getComponentColor = () => nameSpace === NameSpaceEnum.Main - ? colors.bluePrimary - : colors.blueSecondary; + ? colors.primary + : colors.secondary; const handleChangeRole = (value: Roles, key) => { setUserRole((role) => { @@ -86,10 +86,10 @@ const UserEditRoles = ({ currentUser, role, setUserRole, shouldEdit }) => { disabled={!shouldEdit} key={role} value={role} - control={} label={t(`admin:role-${role}`)} /> diff --git a/src/components/badges/BadgesFormDrawer.tsx b/src/components/badges/BadgesFormDrawer.tsx index e09f09a81..6583b685f 100644 --- a/src/components/badges/BadgesFormDrawer.tsx +++ b/src/components/badges/BadgesFormDrawer.tsx @@ -176,7 +176,7 @@ const BadgesFormDrawer = () => { { { background: "none", border: "none", fontSize: 16, - color: colors.bluePrimary, + color: colors.primary, }} > {tags.length ? : } diff --git a/src/components/topics/TagsList.tsx b/src/components/topics/TagsList.tsx index f1d3507a4..2a28105d6 100644 --- a/src/components/topics/TagsList.tsx +++ b/src/components/topics/TagsList.tsx @@ -30,7 +30,7 @@ const TagsList = ({ tags, editable = false, handleClose }: TagsListProps) => { tags.map((tag) => ( handleClose(tag?.value || tag)} style={{ diff --git a/src/components/topics/TopicInputErrorMessages.tsx b/src/components/topics/TopicInputErrorMessages.tsx index 6370215bd..3d4834027 100644 --- a/src/components/topics/TopicInputErrorMessages.tsx +++ b/src/components/topics/TopicInputErrorMessages.tsx @@ -5,7 +5,7 @@ const TopicInputErrorMessages = ({ errors }) => { const { topics } = errors; return ( - + {topics && topics?.message} ); diff --git a/src/constants/highlightColors.ts b/src/constants/highlightColors.ts index 7c1c14114..650e2d6c1 100644 --- a/src/constants/highlightColors.ts +++ b/src/constants/highlightColors.ts @@ -10,6 +10,6 @@ const highlightColors = { unsustainable: "#EDB5C8", exaggerated: "#EEDCB0", unverifiable: "#F4C8BA", - "in-progress": colors.lightGraySecondary, + "in-progress": colors.lightNeutralSecondary, }; export default highlightColors; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index cd35cbcd2..9d1d66fd9 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -92,10 +92,10 @@ function MyApp({ Component, pageProps }) { location="bottom" buttonText={t("cookieConsent:button")} cookieName="termsAgreementCookie" - style={{ background: colors.grayPrimary }} + style={{ background: colors.neutral }} buttonStyle={{ background: colors.white, - color: colors.bluePrimary, + color: colors.primary, fontSize: "13px", borderWidth: "2px", borderRadius: "30px", diff --git a/src/pages/supportive-materials.tsx b/src/pages/supportive-materials.tsx index e9b1d0fd2..59677637a 100644 --- a/src/pages/supportive-materials.tsx +++ b/src/pages/supportive-materials.tsx @@ -100,7 +100,7 @@ const SupportiveMaterialsPage: NextPage<{ data: string }> = () => { position: "relative", width: "100%", height: "140px", - backgroundColor: colors.bluePrimary, + backgroundColor: colors.primary, }} >