Fix mobile views for players (#294)

packages/web/src/analytics/firebase.ts

@@ -74,6 +74,10 @@ const leaderboardsDisplayed = (): void => {
   firebase.logEvent("leaderboards");
 };
 
+const playersPageDisplayed = (): void => {
+  firebase.logEvent("playersPage");
+};
+
 const playerCardDisplayed = (): void => {
   firebase.logEvent("playerCard");
 };
@@ -136,6 +140,7 @@ const firebaseAnalytics = {
   playerCardDisplayed,
   leaderboardsDateInteraction,
   leaderboardsTypeInteraction,
+  playersPageDisplayed,
   playerCardMatchesDisplayed,
   playerCardMatchDetailsDisplayed,
   playerCardFullMatchDetailsDisplayed,

packages/web/src/components/charts/geo-map/geo-world-map.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ResponsiveChoropleth } from "@nivo/geo";
 import { geoMapFeatures } from "./geo-map-features";
 import { stateNamesByCode } from "./states";
-import { Row, Space, Table } from "antd";
+import { Row, Table } from "antd";
 import { CountryFlag } from "../../country-flag";
 import { UserOutlined } from "@ant-design/icons";
 
@@ -65,8 +65,8 @@ const GeoWorldMap: React.FC<GeoWorldMapProps> = ({ data }) => {
   return (
     <div>
       <Row justify={"center"}>
-        <Space size={"large"} align={"center"} wrap={true}>
-          <div style={{ width: 650, height: 420 }}>
+        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
+          <div style={{ width: "100%", maxWidth: 650, height: 420, marginRight: 20 }}>
             <ResponsiveChoropleth
               data={data}
               features={geoMapFeatures.features}
@@ -127,15 +127,15 @@ const GeoWorldMap: React.FC<GeoWorldMapProps> = ({ data }) => {
               //     ]}
             />
           </div>
-          <div>
+          <div style={{ flex: "1", maxWidth: 450 }}>
             <Table
               dataSource={data.slice(0, 10)}
               columns={columns}
               size="small"
               pagination={false}
             />
           </div>
-        </Space>
+        </div>
       </Row>
     </div>
   );

packages/web/src/pages/about/about.tsx

@@ -3,6 +3,7 @@ import { Typography } from "antd";
 import { doc, getDoc, getFirestore } from "firebase/firestore";
 import { KofiDonate } from "./kofi-donate";
 import config from "../../config";
+import { PayPalDonation } from "./paypal-donations";
 
 const { Title, Link, Text, Paragraph } = Typography;
 
@@ -242,7 +243,8 @@ const About: React.FC = () => {
         kind of income (donations/ads?).
         <br />
         <br />
-        If you would like to give financial support, you can do so. <br />
+        If you like the site please consider donating.
+        <br />
         100% of donations will go towards this project costs <br />
         <br />
         <KofiDonate />
@@ -252,6 +254,10 @@ const About: React.FC = () => {
           <br />
           no registration required.
         </i>
+        <br />
+        <br />
+        <PayPalDonation />
+        <i>Direct PayPal</i>
       </div>
     </div>
   );

packages/web/src/pages/players/stats/player-stats.tsx

@@ -9,6 +9,7 @@ import { Loading } from "../../../components/loading";
 import { AlertBox } from "../../../components/alert-box";
 import { Link } from "react-router-dom";
 import routes from "../../../routes";
+import firebaseAnalytics from "../../../analytics";
 
 const { Text, Title } = Typography;
 
@@ -27,6 +28,8 @@ const PlayerStats: React.FC = () => {
   const [error, setError] = useState("");
 
   useEffect(() => {
+    firebaseAnalytics.playersPageDisplayed();
+
     try {
       (async () => {
         setIsLoading(true);