inverted colors for prod

uselagoon · Oct 10, 2024 · ad1a097 · ad1a097
1 parent 9694eb1
commit ad1a097
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 174 deletions.
diff --git a/dist/components/Card/Card.d.ts b/dist/components/Card/Card.d.ts
@@ -9,6 +9,7 @@ type DefaultProps = {
     styles?: React.CSSProperties;
     cardClassName?: string;
     navigateTo?: () => void;
+    isProd?: boolean;
 };
 type ProjectCard = {
     type: 'project';

diff --git a/dist/components/Card/styles.d.ts b/dist/components/Card/styles.d.ts
@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export declare const LoadingCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("antd").CardProps & import("react").RefAttributes<HTMLDivElement>, never>> & Omit<import("antd/es/card").CardInterface, keyof import("react").Component<any, {}, any>>;
-export declare const StyledCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("antd").CardProps & import("react").RefAttributes<HTMLDivElement>, never>> & Omit<import("antd/es/card").CardInterface, keyof import("react").Component<any, {}, any>>;
+export declare const StyledCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("antd").CardProps & import("react").RefAttributes<HTMLDivElement>, {
+    $isMain?: boolean | undefined;
+}>> & Omit<import("antd/es/card").CardInterface, keyof import("react").Component<any, {}, any>>;
 export declare const StyledNewCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("antd").CardProps & import("react").RefAttributes<HTMLDivElement>, never>> & Omit<import("antd/es/card").CardInterface, keyof import("react").Component<any, {}, any>>;
 export declare const PinSection: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const StyledEnvPartial: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.js b/dist/index.js
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -24,6 +24,7 @@ type DefaultProps = {
 	styles?: React.CSSProperties;
 	cardClassName?: string;
 	navigateTo?: () => void;
+	isProd?: boolean;
 };
 
 // TODO: proper env type
@@ -64,7 +65,7 @@ const InternalCard: React.ForwardRefRenderFunction<HTMLDivElement, InternalCardP
 
 	if (cardType === 'loaderOnly') return <LoadingCard loading={true} />;
 
-	const { type, loading, title, cardClassName, styles, status = 'low', navigateTo, ...rest } = props;
+	const { type, loading, title, cardClassName, styles, status = 'low', navigateTo,isProd, ...rest } = props;
 
 	const getStatusIcon = (status: DefaultProps['status']) => {
 		switch (status) {
@@ -104,11 +105,6 @@ const InternalCard: React.ForwardRefRenderFunction<HTMLDivElement, InternalCardP
 	const extraIcons = [
 		<LinkOutlined key="link" />,
 		getStatusIcon(status),
-		// isPinned ? (
-		//   <PushpinFilled key="pushpinfilled" onClick={handlePin} />
-		// ) : (
-		//   <PushpinOutlined key="pushpin" onClick={handlePin} />
-		// ),
 	];
 
 	const computedCardType = (
@@ -145,6 +141,7 @@ const InternalCard: React.ForwardRefRenderFunction<HTMLDivElement, InternalCardP
 
 	return (
 		<StyledCard
+			$isMain={isProd}
 			onClick={handleCardClick}
 			onMouseDown={handleMouseDown}
 			onMouseUp={handleMouseUp}

diff --git a/src/components/Card/styles.tsx b/src/components/Card/styles.tsx
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import colors from '../../_util/colors';
 
 const sharedCardStyles = css`
-	max-width: 23.75rem;
+	width: 23.75rem;
 	height: 15.25rem;
 	background-color: ${(props) => props.theme.UI.backgrounds.lagoonCard};
 	color: ${(props) => props.theme.UI.texts.primary};
@@ -43,15 +43,22 @@ export const LoadingCard = styled(Card)`
 		}
 	}
 `;
-export const StyledCard = styled(Card)`
+
+export const StyledCard = styled(Card)<{ $isMain?: boolean }>`
+	${sharedCardStyles}
+
+	background-color: ${(props) =>
+		props.$isMain ? props.theme.UI.backgrounds.lagoonCardInverted : props.theme.UI.backgrounds.lagoonCard};
+	color: ${(props) => (props.$isMain ? props.theme.UI.texts.primaryInverted : props.theme.UI.texts.primary)};
+
 	&.ant-card {
-    cursor: pointer;
-		${sharedCardStyles}
+		cursor: pointer;
 		overflow: hidden;
+
 		.ant-card-head,
 		.ant-card-body,
 		.ant-card-actions > li > span > span[role='img'] {
-			color: ${(props) => props.theme.UI.texts.primary};
+			color: ${(props) => (props.$isMain ? props.theme.UI.texts.primaryInverted : props.theme.UI.texts.primary)};
 		}
 
 		.ant-card-actions {
@@ -63,26 +70,30 @@ export const StyledCard = styled(Card)`
 				}
 			}
 		}
+
 		.ant-card-actions > li > span > span[role='img']:hover {
-			color: ${colors.lagoonBlue};
+			color: ${(props) => (props.$isMain ? '#004d40' : '#00796b')};
 		}
+
 		.ant-card-head {
 			padding-left: 3.1875rem;
 			font-family: 'Roboto', sans-serif;
 			font-weight: bold;
 			font-size: 1rem;
 			line-height: 1.5rem;
 			.ant-card-extra {
-				color: ${(props) => props.theme.UI.texts.primary};
+				color: ${(props) => (props.$isMain ? props.theme.UI.texts.primaryInverted : props.theme.UI.texts.primary)};
 			}
 		}
+
 		.ant-card-extra {
 			display: flex;
 			gap: 10px;
 			> * {
 				cursor: pointer;
 			}
 		}
+
 		.ant-card-body {
 			padding: 0;
 			min-height: 9.375rem;
@@ -96,6 +107,7 @@ export const StyledCard = styled(Card)`
 				padding-left: 3.1875rem;
 			}
 		}
+
 		.ant-card-actions {
 			background-color: transparent;
 			height: 2.5rem;

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -13,11 +13,13 @@ export const darkTheme: DefaultTheme = {
       dataCard: colors.darkGray,
       selection: colors.gray,
       lagoonCard: colors.backgrounds.primary.dark,
+      lagoonCardInverted: colors.backgrounds.primary.light,
       footer: colors.backgrounds.primary.light,
       header: colors.header.dark,
     },
     texts: {
       primary: colors.texts.primary.dark,
+      primaryInverted: colors.texts.primary.light,
       label: "#dee2e5",
       secondary: colors.texts.secondary.dark,
       timeline:colors.texts.timeline.light,
@@ -45,11 +47,13 @@ export const lightTheme: DefaultTheme = {
       dataCard: colors.gray,
       selection: "#e6f4ff",
       lagoonCard: colors.backgrounds.primary.light,
+      lagoonCardInverted: colors.backgrounds.primary.dark,
       footer: colors.backgrounds.primary.dark,
       header: colors.header.light
     },
     texts: {
       primary: colors.texts.primary.light,
+      primaryInverted: colors.texts.primary.dark,
       label: "#555",
       secondary: colors.texts.secondary.dark,
       timeline:colors.texts.timeline.dark,

diff --git a/src/typings/styled.d.ts b/src/typings/styled.d.ts
@@ -14,12 +14,14 @@ export interface UITheme {
       dataCard: string;
       selection: string;
       lagoonCard: string;
+      lagoonCardInverted: string;
       footer: string;
       header:string;
 
     };
     texts: {
       primary: string;
+      primaryInverted: string;
       label: string;
       secondary: string;
       timeline: string;