Merge pull request #115 from utopia-os/info-dialog

feat(source): info dialog

src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx

@@ -27,7 +27,7 @@ export const PopupButton = ({
     <Link to={`${url}/${parameterField ? getValue(item, parameterField) : ''}?${params}`}>
       <button
         style={{
-          backgroundColor: `${colorField && getValue(item, colorField) ? getValue(item, colorField) : item && getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor}`,
+          backgroundColor: `${colorField && getValue(item, colorField) ? getValue(item, colorField) : item && getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor ? item?.layer?.markerDefaultColor : '#000'}`,
         }}
         className='tw-btn tw-text-white tw-btn-sm tw-float-right tw-mt-1'
       >

src/Components/Map/UtopiaMap.tsx

@@ -19,6 +19,7 @@ function UtopiaMap({
   showGratitudeControl = false,
   showLayerControl = true,
   infoText,
+  donationWidget,
 }: UtopiaMapProps) {
   return (
     <ContextWrapper>
@@ -35,6 +36,7 @@ function UtopiaMap({
           showGratitudeControl={showGratitudeControl}
           showLayerControl={showLayerControl}
           infoText={infoText}
+          donationWidget={donationWidget}
         >
           {children}
         </UtopiaMapInner>

src/Components/Map/UtopiaMapInner.tsx

@@ -33,6 +33,7 @@ import { GratitudeControl } from './Subcomponents/Controls/GratitudeControl'
 import { LayerControl } from './Subcomponents/Controls/LayerControl'
 import { SearchControl } from './Subcomponents/Controls/SearchControl'
 import { TagsControl } from './Subcomponents/Controls/TagsControl'
+import { PopupButton } from './Subcomponents/ItemPopupComponents/PopupButton'
 import { TextView } from './Subcomponents/ItemPopupComponents/TextView'
 import { SelectPosition } from './Subcomponents/SelectPosition'
 
@@ -46,7 +47,7 @@ export function UtopiaMapInner({
   showFilterControl = false,
   showGratitudeControl = false,
   showLayerControl = true,
-  infoText,
+  donationWidget,
 }: UtopiaMapProps) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -70,10 +71,21 @@ export function UtopiaMapInner({
   const init = useRef(false)
   useEffect(() => {
     if (!init.current) {
-      infoText &&
+      donationWidget &&
         setTimeout(() => {
-          toast(<TextView rawText={infoText} />, { autoClose: false })
+          toast(
-        }, 10000)
+            <>
+              <TextView rawText={'## Do you like this Map?'} />
+              <div>
+                <TextView
+                  rawText={'Support us building free opensource maps and help us grow 🌱☀️'}
+                />
+                <PopupButton url={'https://opencollective.com/utopia-project'} text={'Donate'} />
+              </div>
+            </>,
+            { autoClose: false },
+          )
+        }, 600000)
       init.current = true
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/types/UtopiaMapProps.d.ts

@@ -13,4 +13,5 @@ export interface UtopiaMapProps {
   showLayerControl?: boolean
   showGratitudeControl?: boolean
   infoText?: string
+  donationWidget?: boolean
 }