Merge pull request #51 from oslabs-beta/Yale/frontendmods

Yale/frontendmods

Author: evelingoldin

main.js

@@ -117,8 +117,8 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     width: 2000,
     height: 1000,
-    minWidth: 1304,
-    minHeight: 700,
+    minWidth: 1000,
+    minHeight: 600,
     backgroundColor: '-webkit-linear-gradient(top, #3dadc2 0%,#2f4858 100%)',
     show: false,
     webPreferences: {

src/client/components-v2/main/GRPCComposer.tsx

@@ -176,7 +176,7 @@ export default function GRPCComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id = "composer-grpc">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-grpc">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/GraphQLComposer.tsx

@@ -236,7 +236,7 @@ export default function GraphQLComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id = "composer-graphql">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-graphql">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/MainContainer.tsx

@@ -109,7 +109,7 @@ function MainContainer(props) {
           element={<WebhookComposer {...props} />}
         />
       </Routes>
-      <Divider orientation="horizontal"/>
+      {/* <Divider orientation="horizontal"/> */}
       <ResponsePaneContainer />
     </Box>
   )

src/client/components-v2/main/OpenAPIComposer.tsx

@@ -120,7 +120,7 @@ export default function OpenAPIComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id= "composer-openapi">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id= "composer-openapi">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/WebRTCComposer.tsx

@@ -107,7 +107,7 @@ export default function WebRTCComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall"
+    <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' }}

src/client/components-v2/main/WebSocketComposer.tsx

@@ -103,7 +103,7 @@ export default function WebSocketComposer(props) {
   };
 
   return(
-    <Box className="is-flex is-flex-direction-column is-justify-content-space-between is-tall" id = "composer-websocket">
+    <Box className="is-flex is-flex-direction-column is-justify-content-space-between" id = "composer-websocket">
         <div
           className="is-flex-grow-3 add-vertical-scroll"
           style={{ overflowX: 'hidden' }}

src/client/components-v2/main/response/ResponsePaneContainer.tsx

@@ -40,9 +40,9 @@ const ResponsePaneContainer = () => {
 
   return (
     <div
-      className={`${isDark ? 'is-dark-400' : 'is-divider-neutral-300'} box is-child`} // gigi playing with css
+      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: "10px"}}
+      style={{ height: '50vh', margin: "0px", padding: "0px"}}
       id="responses"
     >
 
@@ -51,7 +51,9 @@ const ResponsePaneContainer = () => {
 
 
       {/* HEADER */}
-      <div className="hero is-primary is-flex is-flex-direction-row is-justify-content-center">
+      <div className="hero is-primary is-flex is-flex-direction-row is-justify-content-center"
+        style={{padding: "10px"}}
+        >
         <ResponseTime currentResponse={currentResponse} />
         {currentResponse.responseSize && (
           <div className="response-size-placement">

src/client/components-v2/navbar/ProtocolSelect.tsx

@@ -7,7 +7,51 @@ import * as actions from './../../features/business/businessSlice';
 import * as uiactions from './../../features/ui/uiSlice';
 
 // Import MUI components.
+import { styled } from '@mui/system';
 import { Box, Button } from '@mui/material';
+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: ${blue[500]};
+  padding: 10px 0px;
+  border-radius: 3px;
+  color: ${white[500]};
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: none;
+  width: 8vw;
+
+  &:hover {
+    background-color: ${blue[600]};
+  }
+
+  &.${buttonUnstyledClasses.active} {
+    background-color: ${blue[700]};
+  }
+
+  &.${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 mapStateToProps = (store) => {
   return {
@@ -71,13 +115,13 @@ const mapDispatchToProps = (dispatch) => ({
  * value: The value of the button used to update the Redux store.
  */
 const pages = [
-  { name: 'HTTP2', route: '/', value: 'rest' },
-  { name: 'GRAPHQL', route: '/graphql', value: 'graphQL' },
-  { name: 'GRPC', route: '/grpc', value: 'grpc' },
-  { name: 'WEB SOCKET', route: '/websocket', value: 'ws' },
-  { name: 'WEBRTC', route: '/webrtc', value: 'webrtc' },
-  { name: 'OPENAPI', route: '/openapi', value: 'openapi' },
-  { name: 'WEBHOOK', route: '/webhook', value: 'webhook' },
+  { name: 'HTTP/2', route: '/', value: 'rest' },
+  { name: 'GraphQL', route: '/graphql', value: 'graphQL' },
+  { name: 'gRPC', route: '/grpc', value: 'grpc' },
+  { name: 'WebSocket', route: '/websocket', value: 'ws' },
+  { name: 'WebRTC', route: '/webrtc', value: 'webrtc' },
+  { name: 'OpenAPI', route: '/openapi', value: 'openapi' },
+  { name: 'Webhook', route: '/webhook', value: 'webhook' },
 ]
 
 /**
@@ -274,10 +318,10 @@ function ProtocolSelect(props) {
           key={page.name}
           to={page.route}
           >
-          <Button
+          <CustomButton
             key={page.name}
-            variant="contained"
-            color="primary"
+            // variant="contained"
+            // color="primary"
             onClick={() => {
               console.log(page.value)
               onProtocolSelect(page.value)}
@@ -286,7 +330,7 @@ function ProtocolSelect(props) {
               m: 1
             }}>
             {page.name}
-          </Button>
+          </CustomButton>
         </Link>
       ))}
     </Box>