Merge pull request #55 from oslabs-beta/alex/cleanup

evelingoldin · web-flow · commit f1a9361ceaf0 · 2022-05-19T15:05:35.000-05:00
Alex/cleanup
diff --git a/src/client/components/App.tsx b/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;
@@ -44,15 +45,15 @@ const App = () => {
    * main containers for this application.
    */
   return (
-    <div id="app" className="git brais-tall">
+    <div id="app" className="is-tall">
       <HashRouter>
         {/* Navigation bar. Top of the application. */}
         <NavBarContainer />
-        <Divider orientation="horizontal"/>
+        {/* <Divider orientation="horizontal" sx={{ borderBottomWidth: 2, background: '#51819b' }}/> */}
         <Box sx={{ height: '100%', display: 'flex' }}>
           {/* Workspace. Left side of the application. */}
           <HistoryOrWorkspaceContainer currentWorkspaceId={currentWorkspaceId} setWorkspace={setWorkspace} />
-          <Divider orientation="vertical"/>
+          <Divider orientation="vertical" sx={{ borderRightWidth: 2, background: '#51819b' }} />
           {/* Main container. Contains the composer and response panes. */}
           <MainContainer currentWorkspaceId={currentWorkspaceId} />
         </Box>
diff --git a/src/client/components/main/GRPCComposer.tsx b/src/client/components/main/GRPCComposer.tsx
@@ -176,7 +176,16 @@ export default function GRPCComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-grpc">
+    <Box
+      className="is-flex-grow-3 add-vertical-scroll"
+      sx={{
+        height: '40%',
+        px: 1,
+        overflowX: 'scroll',
+        overflowY: 'scroll',
+      }}
+      id = "composer-grpc"
+    >
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}
diff --git a/src/client/components/main/GraphQLComposer.tsx b/src/client/components/main/GraphQLComposer.tsx
@@ -236,7 +236,16 @@ export default function GraphQLComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-graphql">
+    <Box
+      className="is-flex-grow-3 add-vertical-scroll"
+      sx={{
+        height: '40%',
+        px: 1,
+        overflowX: 'scroll',
+        overflowY: 'scroll',
+      }}
+      id = "composer-graphql"
+    >
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}
diff --git a/src/client/components/main/MainContainer.tsx b/src/client/components/main/MainContainer.tsx
@@ -78,7 +78,14 @@ const mapDispatchToProps = (dispatch) => ({
 
 function MainContainer(props) {
   return(
-    <Box sx={{p: 1.5, width: '80%', overflowY: 'scroll'}}>
+    <Box
+      sx={{
+        width: '75%',
+        // overflowY: 'scroll',
+        // display: 'flex',
+        // flexDirection: 'column'
+      }}
+    >
       <Routes>
         <Route
           path="/"
@@ -109,7 +116,7 @@ function MainContainer(props) {
           element={<WebhookComposer {...props} />}
         />
       </Routes>
-      {/* <Divider orientation="horizontal"/> */}
+      <Divider orientation='horizontal' sx={{ borderBottomWidth: 2, background: '#51819b' }} />
       <ResponsePaneContainer />
     </Box>
   )
diff --git a/src/client/components/main/OpenAPIComposer.tsx b/src/client/components/main/OpenAPIComposer.tsx
@@ -120,7 +120,16 @@ export default function OpenAPIComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id= "composer-openapi">
+      <Box
+      className="is-flex-grow-3 add-vertical-scroll"
+      sx={{
+        height: '40%',
+        px: 1,
+        overflowX: 'scroll',
+        overflowY: 'scroll',
+      }}
+      id= "composer-openapi"
+    >
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}
diff --git a/src/client/components/main/WebRTCComposer.tsx b/src/client/components/main/WebRTCComposer.tsx
@@ -107,8 +107,11 @@ export default function WebRTCComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between"
-    id = "composer-webrtc">        <div
+    <Box
+      className="is-flex is-flex-direction-column is-justify-content-space-between"
+      id = "composer-webrtc"
+    >
+        <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}
         >
diff --git a/src/client/components/main/WebSocketComposer.tsx b/src/client/components/main/WebSocketComposer.tsx
@@ -103,7 +103,16 @@ export default function WebSocketComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-websocket">
+    <Box
+      className="is-flex-grow-3 add-vertical-scroll"
+      sx={{
+        height: '40%',
+        px: 1,
+        overflowX: 'scroll',
+        overflowY: 'scroll',
+      }}
+      id = "composer-websocket"
+    >
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}
diff --git a/src/client/components/main/WebhookComposer.tsx b/src/client/components/main/WebhookComposer.tsx
@@ -158,7 +158,7 @@ export default function WebhookComposer(props) {
 
   return(
     <Box className='mr-2 is-flex is-justify-content-center'
-    style={{padding: '10px'}}
+    sx={{padding: '10px', height: '40%'}}
     id = "composer-webhook">
       <button
             className={`button ${
diff --git a/src/client/components/main/http2-composer/Http2Composer.tsx b/src/client/components/main/http2-composer/Http2Composer.tsx
@@ -19,7 +19,7 @@ import NewRequestButton from '../new-request/NewRequestButton';
 import BodyEntryForm from '../new-request/BodyEntryForm';
 import TestEntryForm from '../new-request/TestEntryForm';
 // Import MUI components
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { BooleanValueNode } from 'graphql';
 
 // Translated from RestContainer.jsx
@@ -297,11 +297,16 @@ export default function Http2Composer(props) {
     <Box
       className="is-flex-grow-3 add-vertical-scroll"
       sx={{
+        height: '40%',
+        px: 1,
         overflowX: 'scroll',
         overflowY: 'scroll',
       }}
       id = "composer-http2"
     >
+      {/* <Typography align='center'>
+        HTTP/2
+      </Typography> */}
       {/**
        * TODO:
        * The two commented components are our attempt to port the entire app to use MaterialUI for consistency.
diff --git a/src/client/components/main/response/ResponsePaneContainer.tsx b/src/client/components/main/response/ResponsePaneContainer.tsx
@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import * as actions from '../../../features/business/businessSlice';
 import * as uiactions from '../../../features/ui/uiSlice';
 import ReqResCtrl from '../../../controllers/reqResController';
+import { Box } from '@mui/material';
 
 // Import local components.
 import EventsContainer from './EventsContainer';
@@ -39,10 +40,16 @@ const ResponsePaneContainer = () => {
   }
 
   return (
+    <Box
+      sx={{
+        height: '100%',
+        p: 1,
+      }}
+    >
     <div
       className={`${isDark ? 'is-dark-400' : 'is-divider-neutral-300'} box is-3 add-vertical-scroll`} // gigi playing with css
       // className={`${isDark ? 'is-dark-400' : ''} column is-one-third is-flex is-flex-direction-column is-tall`}
-      style={{ height: '50vh', margin: "0px", padding: "0px"}}
+      style={{ height: '54%', margin: "0px", marginTop: "1px"}}
       id="responses"
     >
 
@@ -203,6 +210,7 @@ const ResponsePaneContainer = () => {
           </div>
         )}
     </div>
+    </Box>
   );
 };
 
diff --git a/src/client/components/main/response/WebSocketWindow.tsx b/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(
diff --git a/src/client/components/navbar/GeneralInfo.tsx b/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>
   )
 }
diff --git a/src/client/components/navbar/LoginStatus.tsx b/src/client/components/navbar/LoginStatus.tsx
@@ -1,13 +1,68 @@
 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';
+import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+
+const blue = {
+  500: '#51819b',
+  600: '#51819b',
+  700: '#7ebdde',
+};
+
+const white = {
+  500: '#f0f6fa',
+}
+
+const CustomButton = styled(ButtonUnstyled)`
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: bold;
+  font-size: 0.875rem;
+  background-color: ${white[500]};
+  padding: 10px 0px;
+  border-radius: 3px;
+  color: ${blue[500]};
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: none;
+  width: 8vw;
+
+  &:hover {
+    background-color: ${blue[500]};
+  }
+
+  &.${buttonUnstyledClasses.active} {
+    background-color: ${blue[500]};
+  }
+
+  &.${buttonUnstyledClasses.focusVisible} {
+    box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+
+  &.${buttonUnstyledClasses.disabled} {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+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 +127,15 @@ 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
+              color='secondary'
+              sx={{ maxWidth: '24px', maxHeight: '24px', minWidth: '24px', minHeight: '24px' }}
+              onClick={handleSignOut}
+            >
+              <LogoutRoundedIcon fontSize='small' />
+            </Button>
+          </LightTooltip>
           <StyledBadge
             sx={{
               m: 1,
@@ -96,7 +154,7 @@ export default function LoginContainer(props) {
           flexDirection: 'row',
           alignItems: 'center',
         }}>
-          <Button variant="outlined" onClick={signInViaGitHub}>Sign In</Button>
+          <Button color='secondary' variant="text" onClick={signInViaGitHub}>Sign In</Button>
         </Box>
       }
     </Box>
diff --git a/src/client/components/navbar/NavBarContainer.tsx b/src/client/components/navbar/NavBarContainer.tsx
@@ -47,8 +47,10 @@ export default function NavBarContainer(props) {
     }
   }, []);
 
+  // bgcolor: '#e0e0e0'
+
   return(
-    <Box sx={{display: 'flex', flexDirection: 'row'}} width="100%">
+    <Box sx={{display: 'flex', flexDirection: 'row', bgcolor: '#51819b' }} width="100%">
       {/* Login status for the user. */}
       <LoginStatus session={session} setSession={setSession}/>
       {/* Protocol select buttons. */}
diff --git a/src/client/components/navbar/ProtocolSelect.tsx b/src/client/components/navbar/ProtocolSelect.tsx
@@ -25,10 +25,10 @@ const CustomButton = styled(ButtonUnstyled)`
   font-family: IBM Plex Sans, sans-serif;
   font-weight: bold;
   font-size: 0.875rem;
-  background-color: ${blue[500]};
+  background-color: ${white[500]};
   padding: 10px 0px;
   border-radius: 3px;
-  color: ${white[500]};
+  color: ${blue[500]};
   transition: all 150ms ease;
   cursor: pointer;
   border: none;
diff --git a/src/client/components/workspace/HistoryOrWorkspaceContainer.tsx b/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);
@@ -55,17 +55,16 @@ export default function HistoryOrWorkspaceContainer(props) {
   return (
     <Box
       sx={{
-        minWidth: '25%',
-        maxHeight: '100%',
-        overflowX: 'auto',
+        width: '25%',
+        height: '100%',
         overflowY: 'scroll',
       }}
     >
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
-          <Tab icon={<Work fontSize='small'/>} {...a11yProps(0)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
-          <Tab icon={<ScheduleSendRounded fontSize='small'/>} {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
-          <Tab icon={<AccessTime fontSize='small'/>} {...a11yProps(2)} sx={{fontSize:'10px', overflowWrap: "break-word", maxWidth: '50%'}}/>
+          <Tab icon={<Work fontSize='small'/>} {...a11yProps(0)} sx={{fontSize:'10px', overflowWrap: "break-word", width: '33.33%'}}/>
+          <Tab icon={<ScheduleSendRounded fontSize='small'/>} {...a11yProps(1)} sx={{fontSize:'10px', overflowWrap: "break-word", width: '33.33%'}}/>
+          <Tab icon={<AccessTime fontSize='small'/>} {...a11yProps(2)} sx={{fontSize:'10px', overflowWrap: "break-word", width: '33.33%'}}/>
         </Tabs>
       </Box>
       {value === 1 && (<Box
diff --git a/src/client/components/workspace/WorkspaceContainer.tsx b/src/client/components/workspace/WorkspaceContainer.tsx
diff --git a/src/client/components/workspace/buttons/DeleteWorkspaceButton.tsx b/src/client/components/workspace/buttons/DeleteWorkspaceButton.tsx
diff --git a/src/client/components/workspace/buttons/InviteToWorkspaceButton.tsx b/src/client/components/workspace/buttons/InviteToWorkspaceButton.tsx
diff --git a/src/client/components/workspace/modals/import-export-workspace/ExportToGitHubDialog.tsx b/src/client/components/workspace/modals/import-export-workspace/ExportToGitHubDialog.tsx
diff --git a/src/client/components/workspace/modals/import-export-workspace/ImportExportWorkspaceModal.tsx b/src/client/components/workspace/modals/import-export-workspace/ImportExportWorkspaceModal.tsx
diff --git a/src/index.js b/src/index.js
