Fixed dates to show local time.

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@churchapps/apphelper": "0.2.89",
+    "@churchapps/apphelper": "0.2.95",
     "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.7",
     "@types/react-cropper": "^1.3.2",
@@ -42,7 +42,7 @@
     "exec-deploy-prod": "aws s3 sync build/ s3://chums-app",
     "postdeploy-prod": "aws cloudfront create-invalidation --distribution-id E3FB2K4FSP7ZUB --paths \"/*\"",
     "deploy-prod": "npm run predeploy-prod && npm run exec-deploy-prod && npm run postdeploy-prod",
-    "postinstall": "copyfiles -a -f node_modules/@churchapps/apphelper/public/locales/** public/apphelper/locales"
+    "postinstall": "copyfiles -a -f node_modules/@churchapps/apphelper/public/locales/** public/apphelper/locales && copyfiles -a -f node_modules/@churchapps/apphelper/public/css/** public/apphelper/css"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx,js}": [

public/css/all.css

@@ -706,77 +706,6 @@ label .description {
 .positionsTable div img { height:25px; }
 
 
-.sideNav ul {
-  padding-left: 0px;
-}
-
-.sideNav li {
-  list-style-type: none;
-  border-bottom: 1px solid #ccc;
-  padding:8px 10px;
-}
-.sideNav li a {
-  color:#333;
-}
-
-.sideNav li.active {
-  list-style-type: none;
-  border-bottom: 1px solid var(--c1l2);
-  padding:8px 10px;
-}
-
-.sideNav li.active a, .sideNav li a:hover {
-  color:var(--c1l2);
-}
-
-.sideNav .subhead {
-  margin-top:30px;
-  background-color:var(--c1l6);
-  padding-left:12px;
-  padding-top:5px;
-  padding-bottom: 5px;
-}
-
-.sideNav li span {
-  padding-top:5px;
-  overflow:visible;
-}
-
-#appBarSpacer {
-  height: 64px;
-}
-
-#primaryNavButton {
-  margin-right:50px;
-  text-transform: "none";
-}
-
-#primaryNavButton img {
-  height:35px;
-  margin-right:15px;
-}
-
-#banner {
-  background-color:var(--c1l2);
-  color: #FFF;
-  padding: 12px 24px;
-}
-
-#banner h1 {
-  border-bottom: none;
-  line-height: 30px;
-  margin-top:10px;
-  margin-bottom: 0px;
-  font-size:30px;
-}
-
-#mainContent {
-  padding:24px;
-}
-
-#primaryMenu span, #primaryMenu a {
-  color:#FFF;
-}
 
 
 @media print {

public/index.html

@@ -17,6 +17,7 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="%PUBLIC_URL%/css/all.css" />
+    <link rel="stylesheet" href="/apphelper/css/styles.css"  />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/icon?family=Material+Icons"

src/components/Header.tsx

@@ -3,9 +3,11 @@ import { Locale, UserHelper, Permissions, ApiHelper } from "@churchapps/apphelpe
 import UserContext from "../UserContext";
 import { SiteHeader } from "@churchapps/apphelper";
 import { SecondaryMenuHelper } from "../helpers/SecondaryMenuHelper";
+import { useNavigate } from "react-router-dom";
 
 export const Header: React.FC = () => {
   const context = React.useContext(UserContext);
+  const navigate = useNavigate();
   const formPermission = UserHelper.checkAccess(Permissions.membershipApi.forms.admin) || UserHelper.checkAccess(Permissions.membershipApi.forms.edit);
   const [donationError, setDonationError] = React.useState<boolean>(false);
   const [isFormMember, setIsFormMember] = React.useState<boolean>(false);
@@ -62,6 +64,8 @@ export const Header: React.FC = () => {
 
   const secondaryMenu = SecondaryMenuHelper.getSecondaryMenu(window.location.pathname, {formPermission});
 
+  const handleNavigate = (url: string) => {navigate(url);}
+
   /*<Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>*/
-  return (<SiteHeader primaryMenuItems={getPrimaryMenu()} primaryMenuLabel={getPrimaryLabel()} secondaryMenuItems={secondaryMenu.menuItems} secondaryMenuLabel={secondaryMenu.label} context={context} appName={"CHUMS"} /> );
+  return (<SiteHeader primaryMenuItems={getPrimaryMenu()} primaryMenuLabel={getPrimaryLabel()} secondaryMenuItems={secondaryMenu.menuItems} secondaryMenuLabel={secondaryMenu.label} context={context} appName={"CHUMS"} onNavigate={handleNavigate} /> );
 }

src/components/Question.tsx

@@ -13,7 +13,16 @@ export const Question: React.FC<Props> = (props) => {
     let displayValue = "";
     switch (q.fieldType) {
       case "Date":
-        displayValue = (a.value === null || a.value === "") ? "" : DateHelper.getShortDate(new Date(a.value));
+        displayValue = "";
+        if (a.value) {
+          try {
+            const theDate = new Date(a.value);
+            const localDate = new Date(theDate.getTime() + (theDate.getTimezoneOffset() * 60000));
+            displayValue = DateHelper.getShortDate(localDate);
+          } catch (e) {
+            console.log(e);
+          }
+        }
         break;
       case "Yes/No":
         displayValue = (a.value === null || a.value === "") ? "" : a.value.replace("False", Locale.label("common.no")).replace("True", Locale.label("common.yes"));