final styling touches v1

Author: aadams0

src/client/components/App.tsx

@@ -24,6 +24,7 @@ import { Box, Divider } from '@mui/material';
  * - AA 18 May, 2022
  */
 import '../../assets/style/App.scss';
+import WorkspaceContainer from './workspace/WorkspaceContainer';
 
 
 const { api } = window as unknown as WindowExt;
@@ -52,7 +53,7 @@ const App = () => {
         <Box sx={{ height: '100%', display: 'flex' }}>
           {/* Workspace. Left side of the application. */}
           <HistoryOrWorkspaceContainer currentWorkspaceId={currentWorkspaceId} setWorkspace={setWorkspace} />
-          <Divider orientation="vertical"/>
+          {/* <Divider orientation="horizontal" /> */}
           {/* Main container. Contains the composer and response panes. */}
           <MainContainer currentWorkspaceId={currentWorkspaceId} />
         </Box>

src/client/components/main/MainContainer.tsx

@@ -78,7 +78,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 function MainContainer(props) {
   return(
-    <Box sx={{p: 1.5, width: '80%', overflowY: 'scroll'}}>
+    <Box sx={{p: 1, width: '75%', overflowY: 'scroll'}}>
       <Routes>
         <Route
           path="/"
@@ -109,7 +109,6 @@ function MainContainer(props) {
           element={<WebhookComposer {...props} />}
         />
       </Routes>
-      {/* <Divider orientation="horizontal"/> */}
       <ResponsePaneContainer />
     </Box>
   )

src/client/components/main/response/WebSocketWindow.tsx

@@ -5,7 +5,7 @@
 /* eslint-disable no-param-reassign */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
+import WebSocketMessage from './WebSocketMessage';
 import ImageDropzone from './ImageDropzone';
 
 const { api } = window;
@@ -67,7 +67,7 @@ const WebSocketWindow = ({content, outgoingMessages, incomingMessages, connectio
   // maps the messages to view in chronological order and by whom - self/server
   const combinedMessagesReactArr = outgoingMessages
     .map((message: Record<string, unknown>) => {
-      message = {...message, source: 'client'}  
+      message = {...message, source: 'client'}
       return message;
     })
     .concat(

src/client/components/navbar/GeneralInfo.tsx

@@ -15,7 +15,7 @@ export default function GeneralInfo(props) {
       }}>
       {/* TODO: this GitHub button comes from a component library. Should build your own or find one that supports TS types. */ }
       {/* @ts-ignore:next-line */}
-      <GitHubButton href="https://github.com/oslabs-beta/Swell" data-color-scheme="no-preference: dark; light: light; dark: dark;" data-size="large" data-show-count="true" aria-label="Star oslabs-beta/Swell on GitHub">Star</GitHubButton>
+      <GitHubButton href="https://github.com/open-source-labs/Swell" data-size="large" data-show-count="true" aria-label="Star open-source-labs/Swell on GitHub">Star</GitHubButton>
     </Box>
   )
 }

src/client/components/navbar/LoginStatus.tsx

@@ -1,13 +1,25 @@
 import React from 'react';
 import Cookies from 'js-cookie';
 
-import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import Badge from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.common.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontWeight: 'bold',
+    },
+}));
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
@@ -72,12 +84,14 @@ export default function LoginContainer(props) {
           flexDirection: 'row',
           alignItems: 'center',
         }}>
-          <Button
-            sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
-            onClick={handleSignOut}
-          >
-            <LogoutRoundedIcon fontSize='small' />
-          </Button>
+          <LightTooltip title="Logout">
+            <Button
+              sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
+              onClick={handleSignOut}
+            >
+              <LogoutRoundedIcon fontSize='small' />
+            </Button>
+          </LightTooltip>
           <StyledBadge
             sx={{
               m: 1,

src/client/components/workspace/HistoryOrWorkspaceContainer.tsx

@@ -46,7 +46,7 @@ export default function HistoryOrWorkspaceContainer(props) {
   const [showGraph, setShowGraph] = React.useState(false);
   const [value, setValue] = React.useState(0);
 
-  const currentResponse = useSelector((store: any) => store.business.currentResponse);
+  // const currentResponse = useSelector((store: any) => store.business.currentResponse);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);

src/client/components/workspace/WorkspaceContainer.tsx

@@ -33,7 +33,7 @@ export default function WorkspaceContainer({ currentWorkspaceId, setWorkspace })
   })
 
   return (
-    <Box className="workspace-container" sx={{ minWidth: '20%', align: 'center', p: 1.5 }}>
+    <Box className="workspace-container" sx={{ minWidth: '20%', align: 'center' }}>
       {/* The display for your current workspace. Contains functionality for saving, importing, exporting, and adding other GitHub users to your workspace. */}
       <CurrentWorskpaceDisplay currentWorkspaceId={currentWorkspaceId} currentWorkspace={currentWorkspace} handleWorkspaceChange={handleWorkspaceChange}/>
       <Box className="collections-container">

src/client/components/workspace/buttons/DeleteWorkspaceButton.tsx

@@ -1,9 +1,23 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import * as actions from '../../../features/business/businessSlice'
-import DeleteForeverRoundedIcon from '@mui/icons-material/DeleteForeverRounded';
+import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
 import collectionsController from '../../../controllers/collectionsController';
 import { Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.common.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontWeight: 'bold',
+    },
+}));
 
 export default function DeleteRequestButton(props) {
   const dispatch = useDispatch();
@@ -14,13 +28,15 @@ export default function DeleteRequestButton(props) {
   };
 
   return(
-    <Button
-      color="error"
-      variant="text"
-      sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
-      onClick={deleteWorkspace}
-    >
-      <DeleteForeverRoundedIcon fontSize="small"/>
-    </Button>
+    <LightTooltip title="Delete Workspace">
+      <Button
+        color="error"
+        variant="text"
+        sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
+        onClick={deleteWorkspace}
+      >
+        <ClearRoundedIcon fontSize="small"/>
+      </Button>
+    </LightTooltip>
   )
 }

src/client/components/workspace/buttons/InviteToWorkspaceButton.tsx

@@ -1,22 +1,38 @@
-import React from "react";
-import { Button } from '@mui/material';
-import { PersonAddAlt1Rounded } from '@mui/icons-material';
-import InviteToWorkspaceModal from "../modals/invite-to-workspace/InviteToWorkspaceModal";
-
-export default function ExportWorkspaceButton() {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return(
-    <div>
-      <Button
-        variant="text"
-        sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
-        onClick={handleOpen}>
-        <PersonAddAlt1Rounded fontSize="small"/>
-      </Button>
-      <InviteToWorkspaceModal open={open} handleClose={handleClose}/>
-    </div>
-  )
-}
+import React from "react";
+import { Button } from '@mui/material';
+import { PersonAddAlt1Rounded } from '@mui/icons-material';
+import InviteToWorkspaceModal from "../modals/invite-to-workspace/InviteToWorkspaceModal";
+import { styled } from '@mui/material/styles';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.common.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontWeight: 'bold',
+    },
+}));
+
+export default function ExportWorkspaceButton() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return(
+    <div>
+      <LightTooltip title="Invite to Workspace">
+        <Button
+          variant="text"
+          sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
+          onClick={handleOpen}>
+          <PersonAddAlt1Rounded fontSize="small"/>
+        </Button>
+      </LightTooltip>
+      <InviteToWorkspaceModal open={open} handleClose={handleClose}/>
+    </div>
+  )
+}

src/client/components/workspace/modals/import-export-workspace/ExportToGitHubDialog.tsx

@@ -12,27 +12,10 @@ import ListItemButton from '@mui/material/ListItemButton';
 import db from '../../../../db';
 import { useLiveQuery } from 'dexie-react-hooks';
 
-
-// export interface SimpleDialogProps {
-//   open: boolean;
-//   selectedValue: string;
-//   onClose: (value: string) => void;
-// }
-
 export default function ExportToGithubDialog({ allUserRepos, workspace, selectedRepo, open, onClose}) {
   let files = useLiveQuery(() => db.files.toArray());
   let repos = useLiveQuery(() => db.repos.toArray());
 
-  // db.table('repo')
-  // .where('name')
-  // .equalsIgnoreCase(name)
-  // .first((foundCollection: boolean) => !!foundCollection)
-  // .then((found: boolean) => resolve(found))
-  // .catch((error: Record<string, undefined>) => {
-  //   console.error(error.stack || error);
-  //   reject(error);
-  // });
-
   const handleClose = () => {
     onClose(selectedRepo);
   };
@@ -52,13 +35,6 @@ export default function ExportToGithubDialog({ allUserRepos, workspace, selected
         sha = file.sha;
       }
     }
-    // db.table('files')
-    //   .where((workspace) => {
-
-    //   })
-
-
-
     collectionsController.exportToGithub(workspace.id, repo.name, sha)
   }
 
@@ -80,7 +56,6 @@ export default function ExportToGithubDialog({ allUserRepos, workspace, selected
     }
   }
 
-
   return (
     <Dialog onClose={handleClose} open={open}>
       <DialogTitle>Select a repository to export to.</DialogTitle>