From daef92433dd2d332b3af029fad82fba63045a8ad Mon Sep 17 00:00:00 2001
From: Jt Miclat <jtmiclat@gmail.com>
Date: Wed, 6 Dec 2023 13:26:04 +0800
Subject: [PATCH] Upgrade styled components to v6 and add proper typing to
 styled components properties

---
 demo/frontend/package.json                                | 2 +-
 demo/frontend/src/Components/Map/Filters/AvgTime.ts       | 3 +--
 demo/frontend/src/Components/Map/Filters/Layers/Layer.ts  | 3 +--
 demo/frontend/src/Components/Map/Filters/Layers/Legend.ts | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/demo/frontend/package.json b/demo/frontend/package.json
index f8805b6e6..dc7347fe6 100644
--- a/demo/frontend/package.json
+++ b/demo/frontend/package.json
@@ -21,7 +21,7 @@
     "react-dom": "18.2.0",
     "react-map-gl": "^7.1.6",
     "react-scroll-parallax": "3.4.3",
-    "styled-components": "5.3.11"
+    "styled-components": "6.1.1"
   },
   "devDependencies": {
     "@types/node": "^20.9.0",
diff --git a/demo/frontend/src/Components/Map/Filters/AvgTime.ts b/demo/frontend/src/Components/Map/Filters/AvgTime.ts
index b04111989..8733e8683 100644
--- a/demo/frontend/src/Components/Map/Filters/AvgTime.ts
+++ b/demo/frontend/src/Components/Map/Filters/AvgTime.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.div`
+export default styled.div<{ isEnabled: boolean }>`
   padding: 5px;
   border-radius: 5px;
 
@@ -8,7 +8,6 @@ export default styled.div`
   font-weight: bold;
 
   color: ${({ isEnabled }) => (isEnabled ? '#DADFEE' : '#6C7495')};
-  
   cursor: pointer;
 
   &:hover {
diff --git a/demo/frontend/src/Components/Map/Filters/Layers/Layer.ts b/demo/frontend/src/Components/Map/Filters/Layers/Layer.ts
index bf1120b69..265464053 100644
--- a/demo/frontend/src/Components/Map/Filters/Layers/Layer.ts
+++ b/demo/frontend/src/Components/Map/Filters/Layers/Layer.ts
@@ -1,12 +1,11 @@
 import styled from 'styled-components';
 
-export default styled.div`
+export default styled.div<{ isLayerVisible: boolean }>`
   padding: 5px;
   border-radius: 5px;
   margin-bottom: 15px;
 
   color: ${({ isLayerVisible }) => (isLayerVisible ? '#DADFEE' : '#6C7495')};
-  
   cursor: pointer;
 
   &:hover {
diff --git a/demo/frontend/src/Components/Map/Filters/Layers/Legend.ts b/demo/frontend/src/Components/Map/Filters/Layers/Legend.ts
index e3421baa0..c9f89e417 100644
--- a/demo/frontend/src/Components/Map/Filters/Layers/Legend.ts
+++ b/demo/frontend/src/Components/Map/Filters/Layers/Legend.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export default styled.div`
+export default styled.div<{ fromColor: string; toColor: string }>`
   height: 4px;
   border-radius: 5px;
   margin-top: 6px;