Feat/cleanup and exchange colors (#896)

* feat: cleanup config colors change groundwater color * feat: add new color for watered by bezirksamt
technologiestiftung · May 2, 2024 · 919de10 · 919de10
1 parent 2416762
commit 919de10
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 11 deletions.
diff --git a/src/components/filter/age-range-slider/bar-item.tsx b/src/components/filter/age-range-slider/bar-item.tsx
@@ -12,7 +12,7 @@ export const BarItem: React.FC<BarItemProps> = ({
 	return (
 		<>
 			<div
-				className={`flex-1 z-10 self-end rounded-t ${isActive ? "bg-gdk-baby-blue" : "bg-gdk-lighter-gray"}`}
+				className={`flex-1 z-10 self-end rounded-t ${isActive ? "bg-gdk-bar-blue" : "bg-gdk-lighter-gray"}`}
 				style={{ height: barPercentage }}
 			></div>
 		</>

diff --git a/src/components/profile/profile-logged-in/adopted-trees/tree-card.tsx b/src/components/profile/profile-logged-in/adopted-trees/tree-card.tsx
@@ -49,7 +49,7 @@ export const TreeCard: React.FC<TreeCardProps> = ({
 						<div className="text-gdk-dark-green">
 							<WateringCanIcon />
 						</div>
-						<div className="text-gdk-dark-blue">
+						<div className="text-gdk-watering-blue">
 							<DropIcon />
 						</div>
 					</div>

diff --git a/src/components/profile/profile-logged-in/overview.tsx b/src/components/profile/profile-logged-in/overview.tsx
@@ -4,6 +4,7 @@ import { AdoptedTreeIcon } from "../../icons/adopted-tree-icon";
 import { Skeleton } from "../../skeleton/skeleton";
 import { WateringCanIcon } from "../../icons/watering-can-icon";
 import { useProfileStore } from "../../../shared-stores/profile-store";
+import { DropIcon } from "../../icons/drop-icon";
 
 export const Overview: React.FC = () => {
 	const i18n = useI18nStore().i18n();
@@ -46,7 +47,9 @@ export const Overview: React.FC = () => {
 						<div className="shadow-gdk-soft flex flex-col justify-between gap-3 lg:w-1/3 rounded-2xl border-2 p-4 font-semibold ">
 							{i18n.navbar.profile.overview.liter}
 							<span className="flex items-baseline gap-x-5 text-5xl font-medium">
-								<img src="images/icon-drop.svg" alt="" className="w-5" />
+								<div className="text-gdk-watering-blue">
+									<DropIcon />
+								</div>
 								{formatNumber(wateringAmountTotal ?? 0)}
 							</span>
 						</div>

diff --git a/src/components/tree-detail/hooks/use-tree-water-needs-data.tsx b/src/components/tree-detail/hooks/use-tree-water-needs-data.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import {
 	TreeAgeClassification,
 	TreeCoreData,
@@ -22,7 +23,14 @@ export function useTreeWaterNeedsData(
 	const NUMBER_OF_DAYS_TO_LOOK_AT = 30;
 
 	// OTHER_WATERING_COLOR is the color for watering by groundwater and bezirksamt
-	const OTHER_WATERING_COLOR = fullConfig.theme.colors["gdk-light-blue"];
+	const GROUNDWATER_WATERING_COLOR =
+		fullConfig.theme.colors["gdk-groundwater-blue"];
+	const DISTRICT_WATERING_COLOR =
+		fullConfig.theme.colors["gdk-distric-watering-green"];
+	const OTHER_WATERING_COLOR =
+		treeAgeClassification === TreeAgeClassification.BABY
+			? DISTRICT_WATERING_COLOR
+			: GROUNDWATER_WATERING_COLOR;
 	const USER_WATERING_COLOR = fullConfig.theme.colors["gdk-watering-blue"];
 	const RAIN_COLOR = fullConfig.theme.colors["gdk-rain-blue"];
 
@@ -138,7 +146,7 @@ export function useTreeWaterNeedsData(
 		waterParts: waterParts(),
 		shouldBeWatered: shouldBeWatered(),
 		userWateringColor: USER_WATERING_COLOR,
-		otherWateringColor: OTHER_WATERING_COLOR,
+		otherWateringColor: GROUNDWATER_WATERING_COLOR,
 		rainColor: RAIN_COLOR,
 	};
 }
diff --git a/src/components/tree-detail/tree-water-needs/tree-water-needs.tsx b/src/components/tree-detail/tree-water-needs/tree-water-needs.tsx
@@ -144,7 +144,7 @@ export const TreeWaterNeed: React.FC<TreeWaterNeedProps> = ({
 							{treeAgeClassification === TreeAgeClassification.BABY && (
 								<div className="flex flex-row items-center gap-4">
 									<div
-										className={`h-8 min-h-8 w-3 min-w-3 rounded-full bg-gdk-light-blue self-start translate-y-3`}
+										className={`h-8 min-h-8 w-3 min-w-3 rounded-full bg-gdk-distric-watering-green self-start translate-y-3`}
 									/>
 									<div className="flex flex-col">
 										<div className="font-bold">
@@ -158,7 +158,7 @@ export const TreeWaterNeed: React.FC<TreeWaterNeedProps> = ({
 							{treeAgeClassification === TreeAgeClassification.SENIOR && (
 								<div className="flex flex-row items-center gap-4">
 									<div
-										className={`h-8 min-h-8 w-3 min-w-3 rounded-full bg-gdk-light-blue`}
+										className={`h-8 min-h-8 w-3 min-w-3 rounded-full bg-gdk-groundwater-blue`}
 									/>
 									<div className="flex flex-col">
 										<div className="font-bold">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,23 +12,28 @@ export default {
 				"gdk-light-gray": "#808080",
 				"gdk-lighter-gray": "#EFEFEF",
 				"gdk-white": "#FEFEFE",
+
 				"gdk-blue": "#1169EE",
-				"gdk-dark-blue": "#0948A7",
 				"gdk-light-blue": "#96BCF4",
 				"gdk-lighter-blue": "#E7F0FD",
+
 				"gdk-dark-red": "#BD0909",
 				"gdk-light-red": "#DA7B7B",
-				"gdk-neon-green": "#3DF99A",
+
 				"gdk-dark-green": "#07964E",
 				"gdk-purple": "#660A9C",
 				"gdk-orange": "#FF8617",
+
 				"gdk-watering-blue": "#468AEF",
+				"gdk-groundwater-blue": "#7AEFF7",
 				"gdk-rain-blue": "#0B4295",
+				"gdk-distric-watering-green": "#4CDA3F",
+
+				"gdk-neon-green": "#3DF99A",
 				"gdk-tree-orange": "#FD9531",
 				"gdk-tree-yellow": "#FDE725",
 				"gdk-tree-gray": "#9E9FA0",
-
-				"gdk-baby-blue": "#5695F4",
+				"gdk-bar-blue": "#5695F4",
 			},
 			blur: {
 				xs: "2px",