Upgrade styled components to v6 and add proper typing to styled compo…

…nents properties
maplibre · Dec 6, 2023 · daef924 · daef924
1 parent 2aa736f
commit daef924
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 6 deletions.
diff --git 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
@@ -1,14 +1,13 @@
 import styled from 'styled-components';
 
-export default styled.div`
+export default styled.div<{ isEnabled: boolean }>`
   padding: 5px;
   border-radius: 5px;
 
   font-size: 16px;
   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
@@ -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
@@ -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;