revise the subtitles

BetaNYC · Dec 13, 2023 · 9903d96 · 9903d96
1 parent 8a06368
commit 9903d96
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 20 deletions.
diff --git a/components/Geopanel/Geopanel.tsx b/components/Geopanel/Geopanel.tsx
@@ -105,7 +105,7 @@ const Geopanel = () => {
         map?.moveLayer('districts_clicked_outline', "zipcodes")
 
 
-        map?.flyTo({ zoom: 8 })
+4
 
 
 
@@ -243,7 +243,7 @@ const Geopanel = () => {
                         </div>
                         <div className='my-[16px]'>
                             <div className='mb-[5px] text-[10px] text-grey_1'>Counties</div>
-                            <div className='grid grid-cols-1 gap-[12px]'>
+                            <div className='grid grid-cols-1 lg:grid-cols-2 gap-[12px]'>
                                 {
                                     selectedDistrictOverlappedData &&
                                     selectedDistrictOverlappedData.counties.map((c, i) =>
@@ -253,7 +253,7 @@ const Geopanel = () => {
                         </div>
                         <div>
                             <div className='mb-[5px] text-[10px] text-grey_1'>Zip Codes</div>
-                            <div className='grid grid-cols-2 gap-[12px]'>
+                            <div className='grid grid-cols-2 lg:grid-cols-3 gap-[12px]'>
                                 {
                                     selectedDistrictOverlappedData &&
                                     selectedDistrictOverlappedData.zip_codes.map((z, i) =>

diff --git a/components/Geopanel/Membershippanel.tsx b/components/Geopanel/Membershippanel.tsx
@@ -4,6 +4,8 @@ import { XMarkIcon } from '@heroicons/react/24/solid'
 import { MapContext, MapContextType } from '@/context/MapContext'
 import GeoInfoBtns from './GeoInfoBtns'
 
+import * as turf from "@turf/turf";
+
 import assembly from "../../public/assembly.geo.json"
 import senate from "../../public/senate.geo.json"
 
@@ -60,6 +62,36 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
             type: "FeatureCollection",
             features: hoveredDistrctData.features
         })
+
+        let coordinatesArray = hoveredDistrctData.features[0].geometry.coordinates[0]
+        while (coordinatesArray.length === 1) coordinatesArray = coordinatesArray[0]
+        const targetPolygon = turf.polygon([coordinatesArray])
+        /* @ts-ignore */
+        const targetCentroid = turf.center(targetPolygon).geometry.coordinates
+        const labelData = {
+            'type': 'FeatureCollection',
+            'features': [
+                {
+                    "type": "Feature",
+                    "properties": {
+                        "label": hoveredDistrctData.features[0].properties.House + " " + hoveredDistrctData.features[0].properties.District.toString(),
+                        "party": hoveredDistrctData.features[0].properties.Party_x
+                    },
+                    "geometry": {
+                        'type': 'Point',
+                        'coordinates': targetCentroid
+                    }
+                }
+            ]
+        }
+
+        /* @ts-ignore */
+        map?.getSource("districts_hovered_label").setData({
+            type: "FeatureCollection",
+            features: labelData.features as GeoJson["features"]
+        })
+
+        map?.setPaintProperty("districts_hovered_label", "text-opacity", 1)
     }
 
 
@@ -69,14 +101,23 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
         map?.setPaintProperty("counties_borders", "fill-opacity", [
             "case",
             ['all', ['==', ['get', "name"], selectedCounty + " County"]],
-            1, 0
+            .7, 0
         ])
 
         map?.setPaintProperty("counties_labels", "text-opacity", [
             "case",
             ['all', ['==', ['get', "name"], selectedCounty + " County"]],
             1, 0
         ])
+
+        map?.moveLayer("background", "counties_borders")
+        map?.moveLayer("districts", "counties_borders")
+        map?.moveLayer('pattern', "counties_borders")
+        map?.moveLayer('pattern', "counties_labels")
+        map?.moveLayer('districts_outline', "counties_borders")
+        map?.moveLayer('districts_clicked_outline', "counties_borders")
+        map?.moveLayer('districts_outline', "counties_labels")
+        map?.moveLayer('districts_clicked_outline', "counties_labels")
     }
 
     const zipcodeMouseEnterHandler = (e: MouseEvent<HTMLElement>) => {
@@ -101,6 +142,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
             features: []
         })
         map?.moveLayer("districts", "counties_borders")
+        map?.setPaintProperty("districts_hovered_label", "text-opacity", 0)
     }
 
 
@@ -130,7 +172,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
                             <img src={selectedMemberFeatures?.properties["Membership Status"].includes("Member") ? "/icons/checked_member.svg" : "/icons/empty_member.svg"} alt="" className='w-[20px] h-[20px]' />
                             <div>
                                 <div className='text-[10px] text-white'>Right to Counsel NYC Coalition</div>
-                                <div className='font-semibold text-label text-white'>Campaign Member</div>
+                                <div className={`font-semibold text-label text-white `}>{selectedMemberFeatures?.properties["Membership Status"].includes("Member") ? "Campaign Member" : "Endorser"}</div>
                             </div>
                         </div>
                     </div>
@@ -164,10 +206,14 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
                                     <div className="w-[120px] font-regular text-label">{selectedMemberFeatures?.properties.Address}</div>
                                 </div>
                             }
-                            <div className="flex items-start gap-[8px]">
-                                <img src="/icons/phone.svg" alt="" className="w-[16px] h-[16px]" />
-                                <div className="font-regular text-label">{selectedMemberFeatures?.properties.Phone}</div>
-                            </div>
+                            {
+                                (selectedMemberFeatures?.properties.Phone) !== undefined &&
+                                <div className="flex items-start gap-[8px]">
+                                    <img src="/icons/phone.svg" alt="" className="w-[16px] h-[16px]" />
+                                    <div className="font-regular text-label">{selectedMemberFeatures?.properties.Phone}</div>
+                                </div>
+                            }
+
                             {
                                 (selectedMemberFeatures?.properties.Website) !== undefined &&
                                 (

diff --git a/components/Map/Legend.tsx b/components/Map/Legend.tsx
@@ -85,11 +85,11 @@ const Legend = () => {
                             <div className=' flex flex-col gap-[5px] mt-[13px]'>
                                 <div className='flex items-center gap-[10px]'>
                                     <div className='w-[16px] h-[16px] bg-[#802948] border-[2px] border-[#802948] rounded-full'></div>
-                                    <div className='text-label'>Member, Right to Counsel Coalition </div>
+                                    <div className='text-label'>Member, Right to Counsel NYC Coalition </div>
                                 </div>
                                 <div className='flex items-center gap-[10px]'>
                                     <div className='w-[16px] h-[16px] bg-white border-[2px] border-[#802948] rounded-full'></div>
-                                    <div className='text-label'>Endorser, Right to Counsel Coalition </div>
+                                    <div className='text-label'>Endorser, Right to Counsel NYC Coalition </div>
                                 </div>
                             </div>
                         )}

diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
@@ -328,6 +328,8 @@ const Map = () => {
                 paint: {
                     'text-opacity': 0,
                     "text-color": "white",
+                    'text-halo-color': 'black',
+                    "text-halo-width": 0.6
                 }
             })
 

diff --git a/components/SidePanel/About.tsx b/components/SidePanel/About.tsx
@@ -79,7 +79,7 @@ const About = ({ expand, legislationsClickHandler }: Props) => {
                         </div>
                         <div className="m-[20px] mb-[40px] ">
                             <p className='font-semibold text-body'>BetaNYC Civic Innovation Lab Team</p>
-                            <p>Ashley Louie (Director), Hao Lun Hung (Project Lead), Erik Brown, Hailee Luong</p>
+                            <p>Ashley Louie (Director), Hao Lun Hung (Project Lead), Erik Brown, Hailee Hoa Luong</p>
 
                         </div>
                     </div>

diff --git a/components/SidePanel/VotesVisualization.tsx b/components/SidePanel/VotesVisualization.tsx
@@ -430,18 +430,18 @@ const VotesVisualization = ({ legislation }: Props) => {
                 </svg>
                 <div className='relative'>
                     <div className={`absolute top-0 left-[calc(50%+2px)] font-regular text-[10px] lg:text-label text-grey_1 ${labelShown['simpleMajority'] ? 'opacity-1' : "opacity-0"}`}>32 votes<br />Simple Majority</div>
-                    <div className={`absolute top-0 left-[calc(75%+2px)] font-regular text-[10px] lg:text-label text-grey_1 ${labelShown['superMajority'] ? 'opacity-1' : "opacity-0"}`}>42 votes<br />Super Majority</div>
+                    <div className={`absolute top-0 left-[calc(75%+2px)] font-regular text-[10px] lg:text-label text-grey_1 ${labelShown['superMajority'] ? 'opacity-1' : "opacity-0"}`}>42 votes<br />Supermajority</div>
                     {
                         labelShown['senateDemoVotes'] &&
-                        (<div className={`font-semibold text-[10px] lg:text-label text-demo`}>{+senateDemo[0][legislation]} Democratic votes</div>)
+                        (<div className={`font-semibold text-[10px] lg:text-label text-demo`}>{+senateDemo[0][legislation]} Democratic sponsors</div>)
                     }
                     {
                         labelShown['senateRepVotes'] &&
-                        (<div className={`font-semibold text-[10px] lg:text-label text-rep`}>{+senateRep[0][legislation]} Republican votes</div>)
+                        (<div className={`font-semibold text-[10px] lg:text-label text-rep`}>{+senateRep[0][legislation]} Republican sponsors</div>)
                     }
                     {
                         labelShown['senateTotalVotes'] &&
-                        (<div className={`font-semibold text-[10px] lg:text-label text-rtc_navy`}>{senateTotalVotes} votes</div>)
+                        (<div className={`font-semibold text-[10px] lg:text-label text-rtc_navy`}>{senateTotalVotes} sponsors</div>)
                     }
 
 
@@ -466,19 +466,19 @@ const VotesVisualization = ({ legislation }: Props) => {
                 <svg className='w-full h-[42px]' ref={assemblyRef}></svg>
                 <div className='relative'>
                     <div className={`absolute top-0 left-[calc(50%+2px)] font-regular text-[10px] lg:text-label text-grey_1 ${labelShown['simpleMajority'] ? 'opacity-1' : "opacity-0"}`}>75 votes<br />Simple Majority</div>
-                    <div className={`absolute top-0 left-[calc(75%+2px)] font-regular text-[10px] lg:text-label text-grey_1 ${labelShown['superMajority'] ? 'opacity-1' : "opacity-0"}`}>100 votes<br />Super Majority</div>
+                    <div className={`absolute top-0 left-[calc(75%+2px)] font-regular text-[10px] lg:text-label text-grey_1 ${labelShown['superMajority'] ? 'opacity-1' : "opacity-0"}`}>100 votes<br />Supermajority</div>
                     {
                         labelShown['assemblyDemoVotes'] &&
-                        (<div className={`font-semibold text-[10px] lg:text-label text-demo`}>{+assemblyDemo[0][legislation]} Democratic votes</div>)
+                        (<div className={`font-semibold text-[10px] lg:text-label text-demo`}>{+assemblyDemo[0][legislation]} Democratic sponsors</div>)
                     }
                     {
                         labelShown['assemblyRepVotes'] &&
-                        (<div className={`font-semibold text-[10px] lg:text-label text-rep`}>{+assemblyRep[0][legislation]} Republican votes</div>)
+                        (<div className={`font-semibold text-[10px] lg:text-label text-rep`}>{+assemblyRep[0][legislation]} Republican sponsors</div>)
                     }
 
                     {
                         labelShown['assemblyTotalVotes'] &&
-                        (<div className={`font-semibold text-[10px] lg:text-label text-rtc_navy`}>{assemblyTotalVotes} votes</div>)
+                        (<div className={`font-semibold text-[10px] lg:text-label text-rtc_navy`}>{assemblyTotalVotes} sponsors</div>)
                     }
                 </div>
             </div>