starter public site

Creighcl · Feb 10, 2025 · 47088a0 · 47088a0
1 parent 855b2cf
commit 47088a0
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 84 deletions.
diff --git a/public/banner.jpg b/public/banner.jpg
diff --git a/src/App.js b/src/App.js
@@ -3,39 +3,13 @@ import { makeStyles } from '@mui/styles';
 import { initializeApp } from 'firebase/app';
 import { onAuthStateChanged, getAuth } from 'firebase/auth';
 import { getDatabase, ref, get } from 'firebase/database';
-import CircularProgress from '@mui/material/CircularProgress';
 import AppContext from './app-context';
-import AuthenticatedRoot from './app/pathing/authed-root';
 import AppBar from './app/app-bar';
-import SignInBox from './app/sign-in';
-import WaitWindow from './app/wait-window';
+import AppAuthed from './app-authed';
+import AppUnauthed from './app-unauthed';
+import appTheme from './app-theme';
 
-const drawerWidth = 320;
-
-const useStyles = makeStyles((theme) => ({
-  rootContainer: {
-    display: 'flex',
-    flexGrow: 1,
-    marginTop: 80
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  drawer: {
-    width: drawerWidth,
-    flexShrink: 0,
-  },
-  drawerPaper: {
-    width: drawerWidth,
-  },
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing(3),
-  },
-}));
+const useStyles = makeStyles(appTheme);
 
 let firebaseApp;
 
@@ -84,17 +58,10 @@ const App = () => {
 
   return (
     <div className={classes.rootContainer}>
-        <AppContext.Provider value={ appContextValue }>
-            { firebaseApp && getAuth().currentUser && (
-              <React.Fragment>
-                <AppBar />
-
-                <main className={classes.content}>
-                  <AuthenticatedRoot />
-                </main>
-              </React.Fragment>
-            )}
-            { (!firebaseApp || !getAuth().currentUser) && (<SignInBox />) }
+      <AppContext.Provider value={ appContextValue }>
+        <AppBar authorized={ firebaseApp && getAuth().currentUser } />
+        { firebaseApp && getAuth().currentUser && (<AppAuthed />)}
+        { (!firebaseApp || !getAuth().currentUser) && (<AppUnauthed />) }
       </AppContext.Provider>
     </div>);
 };

diff --git a/src/app-authed.js b/src/app-authed.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { makeStyles } from '@mui/styles';
+import AuthenticatedRoot from './app/pathing/authed-root';
+import appTheme from './app-theme';
+
+const useStyles = makeStyles(appTheme);
+
+const AppAuthed = () => {
+    const classes = useStyles();
+
+    return (<React.Fragment>
+        <main className={classes.content}>
+          <AuthenticatedRoot />
+        </main>
+      </React.Fragment>);
+};
+
+export default AppAuthed;
diff --git a/src/app-theme.js b/src/app-theme.js
@@ -0,0 +1,28 @@
+const drawerWidth = 320;
+
+const AppTheme = (theme) => ({
+  rootContainer: {
+    display: 'flex',
+    flexGrow: 1,
+    flexWrap: 'wrap'
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+  },
+});
+
+export default AppTheme;
diff --git a/src/app-unauthed.js b/src/app-unauthed.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import SignInBox from './app/sign-in';
+import { Typography } from '@mui/material';
+
+const AppUnauthed = () => {
+    return (<React.Fragment>
+        <div style={ { minWidth: '100%', height: 550, backgroundImage: 'linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)), url("banner.jpg")', backgroundPosition: 'bottom',  backgroundSize: 'cover' }}>
+            <div style={ { display: 'flex', flexWrap: 'wrap' } }>
+                <div style={ { flexGrow: 0, width: 500, maxWidth: '100%', justifyContent:"right", display: 'flex' } }>
+                    <img src="/front.png" />
+                </div>
+                <div style={ { flexGrow: 0, width: 550, maxWidth: '100%', color: 'white', display: 'flex', flexDirection: 'column', textAlign: 'right' } }>
+                    <Typography variant="h3" style={ { color: '#464646', width: 550, fontWeight: 600, lineHeight: '48px', marginTop: 72 } }>
+                        Reliable Handyman Services in Cincinnati
+                    </Typography>
+                    <Typography variant="h4" style={ { color: '#464646', fontWeight: 400, fontSize: 28, marginTop: 8 } }>
+                        Big or small, we fix it all!
+                    </Typography>
+                    <Typography variant="h4" style={ { color: '#000', fontWeight: 800, fontSize: 36, marginTop: 36, letterSpacing: '-2px' } }>
+                        (513) 520-2047
+                    </Typography>
+                </div>
+                <div style={ { flexGrow: 1 } } />
+                <div style={ { flexGrow: 0, width: 300, maxWidth: '100%', justifyContent:"right", display: 'flex' } } />
+            </div>
+        </div>
+        {/* <div>
+        <iframe
+                src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D61558045020745&tabs=timeline&width=900&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=365658417256090"
+                width="500"
+                height="700"
+                style={ { border:'none', overflow: 'hidden' } }
+                scrolling="no"
+                frameBorder="0" allowFullScreen={ true } allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
+        </div> */}
+        <div>
+            <SignInBox />
+
+        </div>
+    </React.Fragment>)
+}
+
+export default AppUnauthed;
diff --git a/src/app/app-bar.js b/src/app/app-bar.js
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
       },
   }));
 
-const TopAppBar = () => {
+const TopAppBar = ({ authorized = false }) => {
     const classes = useStyles();
     const [menuOpen, setMenuOpen] = useState(false);
     const iconRef = useRef(null);
@@ -53,50 +53,50 @@ const TopAppBar = () => {
         setMenuOpen(false)
     };
 
-    const { displayName, photoURL } = getAuth().currentUser;
 
-    if (!getAuth().currentUser) return null;
-
-    return (<AppBar color="mono" className={classes.appBar} position="fixed">
+    return (<AppBar color="mono" className={classes.appBar} position="relative">
     <Toolbar style={ { maxWidth: 1600, width: '100%', margin: '0 auto', padding: 0 } }>
         <div style={ { padding: '0 6px', display: 'flex', width: '100%' } }>
             <Link to="/">
-                <img style={ { height: 70, width: 204, marginTop: 6 } } src="/logo2.png" />
+                <img style={ { width: 150, margin: 11 } } src="/logo2.png" />
             </Link>
-            {
-                accessLevel >= 4 && (
-                    <div className={classes.buttonTray}>
-                        {
-                            Object.keys(CrudDefs).map((key) => (
-                                <Link key={key} className={classes.buttonStyle} to={`/${key.toLowerCase()}`}>
-                                    {CrudDefs[key].crudLabel}
-                                </Link>
-                            ))
-                        }
-                    </div>
-                )
-            }
-            <IconButton style={ { marginLeft: 'auto' } } onClick={toggleMenu} ref={iconRef}><Avatar alt={displayName} src={photoURL} /></IconButton>
-            <Menu
-                id="lock-menu"
-                anchorEl={iconRef.current}
-                keepMounted
-                open={menuOpen}
-                onClose={handleClose}
-            >
-                <div style={{ fontSize: 11, padding: 4 }}>
-                Logged in as
-                <div style={{ fontWeight: 'bold', borderBottom: '2px solid #545454', marginBottom: 12, paddingBottom: 12 }}>
-                    {displayName}
-                </div>
-                </div>
-                <MenuItem
-                key="abc"
-                onClick={googleSignout}
+
+            { authorized && (<React.Fragment>
+                {
+                    accessLevel >= 4 && (
+                        <div className={classes.buttonTray}>
+                            {
+                                Object.keys(CrudDefs).map((key) => (
+                                    <Link key={key} className={classes.buttonStyle} to={`/${key.toLowerCase()}`}>
+                                        {CrudDefs[key].crudLabel}
+                                    </Link>
+                                ))
+                            }
+                        </div>
+                    )
+                }
+                <IconButton style={ { marginLeft: 'auto' } } onClick={toggleMenu} ref={iconRef}><Avatar alt={getAuth().currentUser.displayName} src={getAuth().currentUser.photoURL} /></IconButton>
+                <Menu
+                    id="lock-menu"
+                    anchorEl={iconRef.current}
+                    keepMounted
+                    open={menuOpen}
+                    onClose={handleClose}
                 >
-                Logout
-                </MenuItem>
-            </Menu>
+                    <div style={{ fontSize: 11, padding: 4 }}>
+                    Logged in as
+                    <div style={{ fontWeight: 'bold', borderBottom: '2px solid #545454', marginBottom: 12, paddingBottom: 12 }}>
+                        {getAuth().currentUser.displayName}
+                    </div>
+                    </div>
+                    <MenuItem
+                    key="abc"
+                    onClick={googleSignout}
+                    >
+                    Logout
+                    </MenuItem>
+                </Menu>
+            </React.Fragment>) }
         </div>
     </Toolbar>
   </AppBar>);

diff --git a/src/app/sign-in.js b/src/app/sign-in.js
@@ -9,18 +9,17 @@ const SignIn = () => {
         await signInWithPopup(getAuth(), new GoogleAuthProvider());
     }
 
-    return (<div style={ { width: 300, padding: 36, margin: '0 auto' } }>
-        <img src="/front.png" />
+    return (
         <Button
             color="primary"
             variant="outlined"
             onClick={googleSignin}
             startIcon={<GoogleIcon color="inherit" />}
             style={ { width: '100%' } }
         >
-            Login with Google
+            Contractor Login
         </Button>
-    </div>);
+    );
 };
 
 export default SignIn;