final

Author: cyburns

app/src/components/left/RoomsContainer.tsx

@@ -71,7 +71,7 @@ const RoomsContainer = () => {
   const roomPassword = useSelector(
     (store: RootState) => store.roomSlice.password
   );
-
+ 
   const userJoined = useSelector(
     (store: RootState) => store.roomSlice.userJoined
   );

app/src/components/top/NavBar.tsx

@@ -6,7 +6,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import NavBarButtons from './NavBarButtons';
 import NewExportButton from './NewExportButton';
 import { RootState } from '../../redux/store';
-import logo from '../../public/icons/win/blue-R-white-bg.png';
+import logo from '../../public/icons/win/logo.png';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   publishProject,
@@ -22,22 +22,6 @@ import {
 import { State } from '../../interfaces/Interfaces';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';
 import Snackbar from '@mui/material/Snackbar';
-import {
-  Send,
-  CancelScheduleSend,
-  MoreVert,
-  ManageSearch,
-  Menu
-} from '@mui/icons-material/';
-import { styled, alpha } from '@mui/material/styles';
-import {
-  AppBar,
-  Box,
-  Toolbar,
-  IconButton,
-  Typography,
-  InputBase
-} from '@mui/material';
 
 const NavBar: React.FC = () => {
   const [dropMenu, setDropMenu] = useState(false);
@@ -58,43 +42,6 @@ const NavBar: React.FC = () => {
   const [openAlert, setOpenAlert] = React.useState<boolean>(false);
   const [loginAlert, setLoginAlert] = React.useState<boolean>(false);
 
-  const SearchIconWrapper = styled('div')(({ theme }) => ({
-    padding: theme.spacing(0, 2),
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }));
-
-  const Search = styled('div')(({ theme }) => ({
-    color: 'white',
-    backgroundColor: '#4a4a4a',
-    borderRadius: theme.shape.borderRadius,
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    width: 'auto',
-    display: 'flex', // Make the container a flex container
-    alignItems: 'center' // Align items vertically
-  }));
-
-  const StyledInputBase = styled(InputBase)(({ theme }) => ({
-    color: 'inherit',
-    '& .MuiInputBase-input': {
-      padding: theme.spacing(1, 5, 1, 0),
-      paddingLeft: `calc(1em + ${theme.spacing(6)})`,
-      transition: theme.transitions.create('width'),
-      width: '10ch', // Adjust width as needed
-      [theme.breakpoints.up('sm')]: {
-        width: '50ch',
-        '&:focus': {
-          width: '60ch' // Adjust width as needed
-        }
-      }
-    }
-  }));
-
   useEffect(() => {
     setProjectName(state.name);
   }, [state.name]);
@@ -109,9 +56,8 @@ const NavBar: React.FC = () => {
 
   const buttonContainerStyle = {
     display: 'flex',
-    margin: '0',
-    justifyContent: 'flex-start',
-    padding: '0'
+    alignItems: 'center',
+    justifyContent: 'flex-start'
   };
 
   const buttonStyle = {
@@ -127,7 +73,8 @@ const NavBar: React.FC = () => {
   };
 
   const moreVertButtonStyle = {
-    backgroundColor: 'black',
+    backgroundColor: '#333',
+    border: '1px solid #333',
     padding: '0',
     cursor: 'pointer',
     display: 'flex',
@@ -137,7 +84,7 @@ const NavBar: React.FC = () => {
     width: '30px',
     minWidth: '20px',
     marginLeft: '0px',
-    marginRight: '5rem'
+    marginRight: '10px'
   };
 
   const handlePublish = () => {
@@ -200,59 +147,30 @@ const NavBar: React.FC = () => {
       <nav className="main-navbar" style={{ backgroundColor: '#151515' }}>
         <Link to="/" style={{ textDecoration: 'none', cursor: 'default' }}>
           <div className="main-logo">
-            <Avatar
-              src={logo}
-              sx={{
-                width: '3rem',
-                height: '3rem'
-              }}
-            />
+            <Avatar src={logo}></Avatar>
+            <h1 style={{ color: '#151515' }}>reactype</h1>
           </div>
         </Link>
-
-        <Box sx={{ flexGrow: 1 }}>
-          <Toolbar>
-            <IconButton
-              size="large"
-              edge="start"
-              color="inherit"
-              aria-label="open drawer"
-              sx={{ mr: 2 }}
-            ></IconButton>
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
-            ></Typography>
-            <Search>
-              <SearchIconWrapper>
-                <ManageSearch sx={{ marginRight: '2rem' }} />
-              </SearchIconWrapper>
-              <StyledInputBase
-                placeholder="Search…"
-                inputProps={{ 'aria-label': 'search' }}
-              />
-            </Search>
-          </Toolbar>
-        </Box>
-
         <div style={buttonContainerStyle}>
           {isMarketplace ? null : state.published ? (
-            <Button style={buttonStyle} onClick={handleUnpublish}>
-              <CancelScheduleSend
-                style={{ color: 'white', marginRight: '-1rem' }}
-              />
-            </Button>
+            <button style={buttonStyle} onClick={handleUnpublish}>
+              Unpublish
+            </button>
           ) : (
-            <Button onClick={handlePublish}>
-              <Send style={{ color: '#86868b', marginRight: '-1rem' }} />
-            </Button>
+            <button style={buttonStyle} onClick={handlePublish}>
+              Publish
+            </button>
           )}
           <NewExportButton />
-          <Button onClick={() => setDropMenu(!dropMenu)} ref={menuButtonRef}>
-            <MoreVert
-              style={{ color: '#86868b' }}
+          <Button
+            style={moreVertButtonStyle}
+            variant="contained"
+            color="primary"
+            onClick={() => setDropMenu(!dropMenu)}
+            ref={menuButtonRef}
+          >
+            <MoreVertIcon
+              style={{ color: 'white' }}
               data-testid="more-vert-button"
             />
           </Button>
@@ -351,4 +269,4 @@ const NavBar: React.FC = () => {
   );
 };
 
-export default NavBar;
+export default NavBar;

app/src/components/top/NewExportButton.tsx

@@ -3,11 +3,9 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import createModal from '../../components/right/createModal';
-import zipFiles from '../../helperFunctions/zipFiles';
+import zipFiles from '../../helperFunctions/zipFiles'; // Import your zipFiles function
 import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
-import { IosShare, Publish } from '@mui/icons-material';
-import { Button } from '@mui/material';
 
 export default function NewExportButton(): React.JSX.Element {
   const [modal, setModal] = useState(null);
@@ -17,6 +15,17 @@ export default function NewExportButton(): React.JSX.Element {
 
   const closeModal = () => setModal('');
 
+  const buttonStyle = {
+    backgroundColor: '#333',
+    border: 'none',
+    color: 'white',
+    fontSize: '12px',
+    padding: '8px 12px',
+    cursor: 'pointer',
+    marginRight: '10px',
+    borderRadius: '4px'
+  };
+
   const showGenerateAppModal = () => {
     const children = (
       <List className="export-preference">
@@ -28,8 +37,7 @@ export default function NewExportButton(): React.JSX.Element {
             style={{
               border: '1px solid #3c59ba',
               marginBottom: '2%',
-              marginTop: '5%',
-              backgroundColor: '#4a4a4a'
+              marginTop: '5%'
             }}
           >
             <ListItemText primary={option} style={{ textAlign: 'center' }} />
@@ -72,10 +80,10 @@ export default function NewExportButton(): React.JSX.Element {
 
   return (
     <div>
-      <Button sx={{ color: 'white' }} onClick={showGenerateAppModal}>
-        <IosShare style={{ color: '#86868b', marginRight: '-0.7rem' }} />
-      </Button>
+      <button style={buttonStyle} onClick={showGenerateAppModal}>
+        &lt; &gt; Export
+      </button>
       {modal}
     </div>
   );
-}
+}

server/server.ts

@@ -95,7 +95,7 @@ io.on('connection', (client) => {
           io.emit('room is already taken');
         }
 
-        if (!roomLists[roomCode] && method === "JOIN") {
+        if (!roomLists[roomCode] && method === 'JOIN') {
           io.emit('room does not exist');
         }