visual updates

react-ui/src/components/builds/BuildsBrowser.js

@@ -48,7 +48,7 @@ const BuildsBrowser = () => {
           prevItem={{ content: <Icon name="angle left" />, icon: true }}
           nextItem={{ content: <Icon name="angle right" />, icon: true }}
         />
-        <Card.Group style={{ marginTop: "1em" }}>
+        <Card.Group style={{ marginTop: "1em" }} centered>
           {data.searchForBuildsByWeapon.builds.map(build => {
             return (
               <BuildCard key={build.id} build={build} showWeapon={!weapon} />

react-ui/src/components/calendar/Calendar.js

@@ -11,7 +11,8 @@ const PageCalendar = () => {
 
   const iFrameHTML = `<iframe title="calendar" src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=2&amp;bgcolor=%23ffffff&amp;src=NDNnYnJlamkxbnQyZTY1dWJuZzdvYWkxZGtAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23E67C73&amp;showTitle=0&amp;showNav=1&amp;showDate=1&amp;showPrint=0&amp;showCalendars=0&amp;ctz=${jstz
     .determine()
-    .name()}" style=border-width: 0 width=${containerWidth} height="1000" frameBorder="0" scrolling="no"></iframe>`
+    .name()}" style=border-width: 0 width=${containerWidth *
+    0.95} height="1000" frameBorder="0" scrolling="no"></iframe>`
 
   //This is a weird solution but I couldn't get it working just setting the iframe src from a variable
   useEffect(() => {
@@ -59,7 +60,7 @@ const PageCalendar = () => {
           </Segment>
         )}
       </div>
-      <div style={{ paddingTop: "15px" }} ref={calenderDiv}></div>
+      <div style={{ paddingTop: "10px" }} ref={calenderDiv}></div>
       If an event is missing you can contact{" "}
       <a href="https://twitter.com/Kbot_273">Kbot</a> about it.
       <br />

react-ui/src/components/plans/MapPlanner.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from "react";
-import { SketchField, Tools } from "@sendou/react-sketch";
-import { CirclePicker } from "react-color";
+import React, { useState, useEffect, useRef } from "react"
+import { SketchField, Tools } from "@sendou/react-sketch"
+import { CirclePicker } from "react-color"
 import {
   Button,
   Icon,
@@ -8,41 +8,41 @@ import {
   Grid,
   Label,
   Message,
-  Dropdown
-} from "semantic-ui-react";
-import WeaponDropdown from "../common/WeaponDropdown";
-import weaponDict from "../../utils/english_internal.json";
-import useWindowDimensions from "../../hooks/useWindowDimensions";
+  Dropdown,
+} from "semantic-ui-react"
+import WeaponDropdown from "../common/WeaponDropdown"
+import weaponDict from "../../utils/english_internal.json"
+import useWindowDimensions from "../../hooks/useWindowDimensions"
 
-import academy from "../../assets/plannerMaps/academy-sz.png";
-import arena from "../../assets/plannerMaps/arena-sz.png";
-import camp from "../../assets/plannerMaps/camp-sz.png";
-import canal from "../../assets/plannerMaps/canal-sz.png";
-import dome from "../../assets/plannerMaps/dome-sz.png";
-import fitness from "../../assets/plannerMaps/fitness-sz.png";
-import games from "../../assets/plannerMaps/games-sz.png";
-import hotel from "../../assets/plannerMaps/hotel-sz.png";
-import institute from "../../assets/plannerMaps/institute-sz.png";
-import mainstage from "../../assets/plannerMaps/mainstage-sz.png";
-import mall from "../../assets/plannerMaps/mall-sz.png";
-import manta from "../../assets/plannerMaps/manta-sz.png";
-import mart from "../../assets/plannerMaps/mart-sz.png";
-import pavilion from "../../assets/plannerMaps/pavilion-sz.png";
-import pit from "../../assets/plannerMaps/pit-sz.png";
-import pitrm from "../../assets/plannerMaps/pit-rm.png";
-import port from "../../assets/plannerMaps/port-sz.png";
-import pumptrack from "../../assets/plannerMaps/pumptrack-sz.png";
-import reef from "../../assets/plannerMaps/reef-sz.png";
-import shipyard from "../../assets/plannerMaps/shipyard-sz.png";
-import skatepark from "../../assets/plannerMaps/skatepark-sz.png";
-import towers from "../../assets/plannerMaps/towers-sz.png";
-import warehouse from "../../assets/plannerMaps/warehouse-sz.png";
-import world from "../../assets/plannerMaps/world-sz.png";
-import { wpnMedium } from "../../assets/imageImports";
+import academy from "../../assets/plannerMaps/academy-sz.png"
+import arena from "../../assets/plannerMaps/arena-sz.png"
+import camp from "../../assets/plannerMaps/camp-sz.png"
+import canal from "../../assets/plannerMaps/canal-sz.png"
+import dome from "../../assets/plannerMaps/dome-sz.png"
+import fitness from "../../assets/plannerMaps/fitness-sz.png"
+import games from "../../assets/plannerMaps/games-sz.png"
+import hotel from "../../assets/plannerMaps/hotel-sz.png"
+import institute from "../../assets/plannerMaps/institute-sz.png"
+import mainstage from "../../assets/plannerMaps/mainstage-sz.png"
+import mall from "../../assets/plannerMaps/mall-sz.png"
+import manta from "../../assets/plannerMaps/manta-sz.png"
+import mart from "../../assets/plannerMaps/mart-sz.png"
+import pavilion from "../../assets/plannerMaps/pavilion-sz.png"
+import pit from "../../assets/plannerMaps/pit-sz.png"
+import pitrm from "../../assets/plannerMaps/pit-rm.png"
+import port from "../../assets/plannerMaps/port-sz.png"
+import pumptrack from "../../assets/plannerMaps/pumptrack-sz.png"
+import reef from "../../assets/plannerMaps/reef-sz.png"
+import shipyard from "../../assets/plannerMaps/shipyard-sz.png"
+import skatepark from "../../assets/plannerMaps/skatepark-sz.png"
+import towers from "../../assets/plannerMaps/towers-sz.png"
+import warehouse from "../../assets/plannerMaps/warehouse-sz.png"
+import world from "../../assets/plannerMaps/world-sz.png"
+import { wpnMedium } from "../../assets/imageImports"
 
 const MapPlanner = () => {
-  let sketch = null;
-  const { containerWidth } = useWindowDimensions();
+  let sketch = null
+  const { containerWidth } = useWindowDimensions()
   const defaultValue = {
     shadowWidth: 0,
     shadowOffset: 0,
@@ -66,91 +66,91 @@ const MapPlanner = () => {
     expandBack: false,
     expandImages: false,
     expandControlled: false,
-    enableCopyPaste: false
-  };
-  const fileInput = useRef(null);
-  const [tool, setTool] = useState(Tools.Pencil);
-  const [color, setColor] = useState("#f44336");
-  const [weapon, setWeapon] = useState("");
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
-  const [text, setText] = useState("");
-  const [bg, setBg] = useState(null);
-  const [uploadError, setUploadError] = useState(null);
-  const [controlledValue, setControlledValue] = useState(defaultValue);
+    enableCopyPaste: false,
+  }
+  const fileInput = useRef(null)
+  const [tool, setTool] = useState(Tools.Pencil)
+  const [color, setColor] = useState("#f44336")
+  const [weapon, setWeapon] = useState("")
+  const [canUndo, setCanUndo] = useState(false)
+  const [canRedo, setCanRedo] = useState(false)
+  const [text, setText] = useState("")
+  const [bg, setBg] = useState(null)
+  const [uploadError, setUploadError] = useState(null)
+  const [controlledValue, setControlledValue] = useState(defaultValue)
 
   useEffect(() => {
-    document.title = "Planner - sendou.ink";
-  }, []);
+    document.title = "Planner - sendou.ink"
+  }, [])
 
   // doesn't work properly when coming back from another page - not sure why
   useEffect(() => {
     if (!sketch) {
-      return;
+      return
     }
-    setBg(reef);
-    sketch.setBackgroundFromDataUrl(reef);
-  }, [sketch]);
+    setBg(reef)
+    sketch.setBackgroundFromDataUrl(reef)
+  }, [sketch])
 
   const tools = [
     {
       key: 1,
       text: "Pencil",
       value: Tools.Pencil,
-      icon: "pencil"
+      icon: "pencil",
     },
     {
       key: 2,
       text: "Line",
       value: Tools.Line,
-      icon: "window minimize outline"
+      icon: "window minimize outline",
     },
     {
       key: 3,
       text: "Rectangle",
       value: Tools.Rectangle,
-      icon: "square outline"
+      icon: "square outline",
     },
     {
       key: 4,
       text: "Circle",
       value: Tools.Circle,
-      icon: "circle outline"
+      icon: "circle outline",
     },
     {
       key: 5,
       text: "Select",
       value: Tools.Select,
-      icon: "object group outline"
-    }
-  ];
+      icon: "object group outline",
+    },
+  ]
 
   const maps = [
     { key: "The Reef", text: "The Reef", value: reef },
     {
       key: "Musselforge Fitness",
       text: "Musselforge Fitness",
-      value: fitness
+      value: fitness,
     },
     {
       key: "Starfish Mainstage",
       text: "Starfish Mainstage",
-      value: mainstage
+      value: mainstage,
     },
     {
       key: "Humpback Pump Track",
       text: "Humpback Pump Track",
-      value: pumptrack
+      value: pumptrack,
     },
     {
       key: "Inkblot Art Academy",
       text: "Inkblot Art Academy",
-      value: academy
+      value: academy,
     },
     {
       key: "Sturgeon Shipyard",
       text: "Sturgeon Shipyard",
-      value: shipyard
+      value: shipyard,
     },
     { key: "Moray Towers", text: "Moray Towers", value: towers },
     { key: "Port Mackerel", text: "Port Mackerel", value: port },
@@ -160,18 +160,18 @@ const MapPlanner = () => {
     {
       key: "Blackbelly Skatepark",
       text: "Blackbelly Skatepark",
-      value: skatepark
+      value: skatepark,
     },
     { key: "MakoMart", text: "MakoMart", value: mart },
     {
       key: "Walleye Warehouse",
       text: "Walleye Warehouse",
-      value: warehouse
+      value: warehouse,
     },
     {
       key: "Shellendorf Institute",
       text: "Shellendorf Institute",
-      value: institute
+      value: institute,
     },
     { key: "Arowana Mall", text: "Arowana Mall", value: mall },
     { key: "Goby Arena", text: "Goby Arena", value: arena },
@@ -179,31 +179,31 @@ const MapPlanner = () => {
     {
       key: "Piranha Pit (RM)",
       text: "Piranha Pit (RM)",
-      value: pitrm
+      value: pitrm,
     },
     {
       key: "Camp Triggerfish",
       text: "Camp Triggerfish",
-      value: camp
+      value: camp,
     },
     { key: "Wahoo World", text: "Wahoo World", value: world },
     {
       key: "New Albacore Hotel",
       text: "New Albacore Hotel",
-      value: hotel
+      value: hotel,
     },
     { key: "Ancho-V Games", text: "Ancho-V Games", value: games },
     {
       key: "Skipper Pavilion",
       text: "Skipper Pavilion",
-      value: pavilion
-    }
-  ];
+      value: pavilion,
+    },
+  ]
 
   const addImageToSketch = () => {
-    sketch.addImg(wpnMedium[weaponDict[weapon]]);
-    setTool(Tools.Select);
-  };
+    sketch.addImg(wpnMedium[weaponDict[weapon]])
+    setTool(Tools.Select)
+  }
 
   const addTextToSketch = () => {
     sketch.addText(text, {
@@ -211,82 +211,78 @@ const MapPlanner = () => {
       fontFamily: "lato",
       stroke: "#000000",
       strokeWidth: 3,
-      paintFirst: "stroke"
-    });
-    setTool(Tools.Select);
-  };
+      paintFirst: "stroke",
+    })
+    setTool(Tools.Select)
+  }
 
   const undo = () => {
-    sketch.undo();
-    setCanUndo(sketch.canUndo());
-    setCanRedo(sketch.canRedo());
-  };
+    sketch.undo()
+    setCanUndo(sketch.canUndo())
+    setCanRedo(sketch.canRedo())
+  }
 
   const redo = () => {
-    sketch.redo();
-    setCanUndo(sketch.canUndo());
-    setCanRedo(sketch.canRedo());
-  };
+    sketch.redo()
+    setCanUndo(sketch.canUndo())
+    setCanRedo(sketch.canRedo())
+  }
 
   const removeSelected = () => {
-    sketch.removeSelected();
-  };
+    sketch.removeSelected()
+  }
 
   const onSketchChange = () => {
-    let prev = canUndo;
-    let now = sketch.canUndo();
+    let prev = canUndo
+    let now = sketch.canUndo()
     if (prev !== now) {
-      setCanUndo(now);
+      setCanUndo(now)
     }
-  };
+  }
 
   const getDateFormatted = () => {
-    const today = new Date();
+    const today = new Date()
     const date =
-      today.getFullYear() +
-      "-" +
-      (today.getMonth() + 1) +
-      "-" +
-      today.getDate();
+      today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate()
     const time =
-      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
-    return date + " " + time;
-  };
+      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds()
+    return date + " " + time
+  }
 
   const download = (dataUrl, extension) => {
-    let a = document.createElement("a");
-    document.body.appendChild(a);
-    a.style = "display: none";
-    a.href = dataUrl;
+    let a = document.createElement("a")
+    document.body.appendChild(a)
+    a.style = "display: none"
+    a.href = dataUrl
     a.download = `${
       bg.replace("/static/media/", "").split("-")[0]
-    } plans ${getDateFormatted()}.${extension}`;
-    a.click();
-    window.URL.revokeObjectURL(dataUrl);
-  };
+    } plans ${getDateFormatted()}.${extension}`
+    a.click()
+    window.URL.revokeObjectURL(dataUrl)
+  }
 
   const handleUpload = () => {
     if (fileInput.current.files.length === 0) {
-      setUploadError("Upload file");
-      setTimeout(() => setUploadError(null), 5000);
-      return;
+      setUploadError("Upload file")
+      setTimeout(() => setUploadError(null), 5000)
+      return
     }
-    const fileObj = fileInput.current.files[0];
-    const reader = new FileReader();
+    const fileObj = fileInput.current.files[0]
+    const reader = new FileReader()
     reader.onload = function(event) {
-      const jsonObj = JSON.parse(event.target.result);
-      setControlledValue(jsonObj);
-    };
+      const jsonObj = JSON.parse(event.target.result)
+      setControlledValue(jsonObj)
+    }
 
-    reader.readAsText(fileObj);
-  };
+    reader.readAsText(fileObj)
+  }
 
   const onBgChange = value => {
-    sketch.clear();
-    setBg(value);
-    setCanUndo(false);
-    sketch.setBackgroundFromDataUrl(value);
-  };
+    sketch.clear()
+    setBg(value)
+    setCanUndo(false)
+    sketch.setBackgroundFromDataUrl(value)
+  }
 
   return (
     <div>
@@ -307,6 +303,7 @@ const MapPlanner = () => {
         value={controlledValue}
         onChange={onSketchChange}
         tool={tool}
+        style={{ position: "relative", left: "-20px" }}
       />
       <div style={{ marginTop: "1em" }}>
         <Button primary icon disabled={!canUndo} onClick={() => undo()}>
@@ -406,6 +403,6 @@ const MapPlanner = () => {
         </Grid>
       </div>
     </div>
-  );
-};
-export default MapPlanner;
+  )
+}
+export default MapPlanner

react-ui/src/components/root/App.js

@@ -8,18 +8,18 @@ const App = () => {
   return (
     <div style={{ paddingTop: "0.3em" }}>
       <MainMenu />
-      <div
-        style={{
-          background: "white",
-          padding: "1.5em",
-          margin: "0.5em 2em 0.5em 2em",
-          borderRadius: "7px"
-        }}
-      >
-        <Container>
+      <Container>
+        <div
+          style={{
+            background: "white",
+            padding: "2% 5%",
+            margin: "0 -2em 0 -2em",
+            borderRadius: "7px",
+          }}
+        >
           <Routes />
-        </Container>
-      </div>
+        </div>
+      </Container>
       <Footer />
     </div>
   )

react-ui/src/components/user/BuildTab.js

@@ -13,7 +13,7 @@ import Error from "../common/Error"
 
 const BuildTab = ({ user, userViewed }) => {
   const { data, error, loading } = useQuery(searchForBuilds, {
-    variables: { discord_id: userViewed.discord_id }
+    variables: { discord_id: userViewed.discord_id },
   })
   const [errorMsg, setErrorMsg] = useState(null)
   const [successMsg, setSuccessMsg] = useState(null)
@@ -32,9 +32,9 @@ const BuildTab = ({ user, userViewed }) => {
     refetchQueries: [
       {
         query: searchForBuilds,
-        variables: { discord_id: userViewed.discord_id }
-      }
-    ]
+        variables: { discord_id: userViewed.discord_id },
+      },
+    ],
   })
 
   const [deleteBuildMutation] = useMutation(deleteBuild, {
@@ -42,9 +42,9 @@ const BuildTab = ({ user, userViewed }) => {
     refetchQueries: [
       {
         query: searchForBuilds,
-        variables: { discord_id: userViewed.discord_id }
-      }
-    ]
+        variables: { discord_id: userViewed.discord_id },
+      },
+    ],
   })
 
   const [editBuildMutation] = useMutation(updateBuild, {
@@ -52,14 +52,14 @@ const BuildTab = ({ user, userViewed }) => {
     refetchQueries: [
       {
         query: searchForBuilds,
-        variables: { discord_id: userViewed.discord_id }
-      }
-    ]
+        variables: { discord_id: userViewed.discord_id },
+      },
+    ],
   })
 
   const deleteBuildById = async ({ id, title, weapon }) => {
     await deleteBuildMutation({
-      variables: { id }
+      variables: { id },
     })
 
     const buildTitle = title ? title : `${weapon} build`
@@ -73,7 +73,7 @@ const BuildTab = ({ user, userViewed }) => {
 
   const editBuildById = async build => {
     await editBuildMutation({
-      variables: { ...build }
+      variables: { ...build },
     })
 
     setSuccessMsg("Build successfully edited")

react-ui/src/components/xsearch/Top500Browser.js

@@ -13,7 +13,7 @@ import {
   Image,
   Header,
   Pagination,
-  Icon
+  Icon,
 } from "semantic-ui-react"
 import WpnImage from "../common/WpnImage"
 import { modeIcons } from "../../assets/imageImports"
@@ -28,7 +28,7 @@ const Top500Browser = ({ setMenuSelection }) => {
     mode: NumberParam,
     unique_id: StringParam,
     month: NumberParam,
-    year: NumberParam
+    year: NumberParam,
   })
   const [forms, setForms] = useState({
     page: 1,
@@ -37,11 +37,11 @@ const Top500Browser = ({ setMenuSelection }) => {
     mode: 0,
     unique_id: "",
     month: "",
-    year: ""
+    year: "",
   })
 
   const { data, error, loading } = useQuery(searchForPlacements, {
-    variables: query
+    variables: query,
   })
 
   const handleClear = () => {
@@ -52,7 +52,7 @@ const Top500Browser = ({ setMenuSelection }) => {
       mode: 0,
       unique_id: "",
       month: "",
-      year: ""
+      year: "",
     })
   }