Merge pull request #16 from oslabs-beta/sofia

Sofia

Author: mdtagg

app/components/About/About.tsx

@@ -12,7 +12,7 @@ const About: React.FC = React.memo(() => {
     <div className="about">
       <div className="blurb" data-testid="aboutPage">
         <h3 style={currentMode} className="mainTitle">About</h3>
-        <p style={currentMode} className="text">
+        <p style={currentMode} className="text" >
           The Chronos Team has a passion for building tools that are powerful, beautifully
           designed, and easy to use. Chronos was conceived as an Open Source endeavor that directly benefits the developer
           community. It can also monitor applications deployed using AWS, EC2, and ECS from Amazon.

app/components/About/styles.scss

@@ -30,10 +30,10 @@
 }
 
 .text {
-  font-size: 18px;
+  font-size: 20px;
   color: $background;
   text-align: left;
-  font-weight: 100;
+  font-weight: 200;
 }
 
 .blurb {

app/components/Occupied/Occupied.tsx

@@ -97,7 +97,7 @@ const Occupied = React.memo(() => {
             return (
               <Link 
                 to={services.length > 0 ? `/applications/example/${services.join(' ')}` : '#'}
-              >
+               className=''>
                 <ApplicationsCard
                   key={crypto.randomUUID()}
                   application={application}

app/components/Occupied/styles.scss

@@ -100,4 +100,9 @@ select:-webkit-autofill:focus {
   align-self: center;
   width: 80%;
   margin-top: 50px;
+  text-decoration: none;
+}
+
+a{
+  text-decoration: none;
 }

app/components/SearchBar/SearchBar.tsx

@@ -25,4 +25,4 @@ const SearchBar = (props) => {
   )
 }
 
-export default SearchBar
+export default SearchBar;

app/components/TransferColumns.tsx

@@ -6,7 +6,9 @@ import { EventContext } from '../context/EventContext';
 import { DataGrid } from '@material-ui/data-grid';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from './Styling';
-import { Button } from '@material-ui/core';
+import { Button, TextField } from '@material-ui/core';
+import SearchBar from './SearchBar/SearchBar';
+
 
 interface Params {
   service: string;
@@ -26,6 +28,7 @@ const TransferColumns = React.memo(() => {
   const { eventData } = useContext(EventContext);
   const { service } = useParams<keyof Params>() as Params;
   const { mode } = useContext(DashboardContext.DashboardContext);
+  const [searchTerm, setSearchTerm] = useState<string>('');
 
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
 
@@ -197,6 +200,7 @@ const TransferColumns = React.memo(() => {
       </div>
       <div id="transferTest">
         <div style={{ height: '500px', width: '100%' }}>
+        
           <DataGrid
             style={currentMode}
             rows={rows}
@@ -212,6 +216,7 @@ const TransferColumns = React.memo(() => {
               setTargetKeys(metrics);
             }}
           />
+          
         </div>
         {selectedRows.length > 0 && (
           <h3 style={{ marginTop: '20px', color: currentMode.color }}>Selected Rows:</h3>

app/components/WindowBar/WindowBar.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import Close from '@material-ui/icons/Close';
-import Maximize from '@material-ui/icons/CheckBoxOutlineBlankSharp';
-import Minimize from '@material-ui/icons/RemoveSharp';
+// import Close from '@material-ui/icons/Close';
+// import Maximize from '@material-ui/icons/CheckBoxOutlineBlankSharp';
+// import Minimize from '@material-ui/icons/RemoveSharp';
 import './styles.scss'; 
 
-const { ipcRenderer } = window.require('electron');
+// const { ipcRenderer } = window.require('electron');
 
 const WindowBar = () => {
   return (
     <div id="titleBar">
-      <Minimize className="button" id="min-btn" onClick={() => ipcRenderer.send('min')} />
+      {/* <Minimize className="button" id="min-btn" onClick={() => ipcRenderer.send('min')} />
       <Maximize className="button" id="max-btn" onClick={() => ipcRenderer.send('max')} />
-      <Close className="button" id="close-btn" onClick={() => ipcRenderer.send('close')} />
+      <Close className="button" id="close-btn" onClick={() => ipcRenderer.send('close')} /> */}
     </div>
   );
 }

app/containers/SidebarContainer.tsx

@@ -14,7 +14,7 @@ import { DashboardContext } from '../context/DashboardContext';
 const SidebarContainer = React.memo(() => {
 
   // Extract invervalID from ApplicationContext. Initival value: intervalID = null
-  const { intervalID,setExample } = useContext(ApplicationContext);
+  const { intervalID } = useContext(ApplicationContext);
   // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true
   const { isLoading, setLoadingState } = useContext(AwsContext);
   // clear interval and set loading state to true when leaving graph containers
@@ -29,9 +29,6 @@ const SidebarContainer = React.memo(() => {
   };
 
   const handleExample = () => {
-    
-    setExample(true)
-
     const fields = {
       typeOfService: 'Microservices',
       database: 'MongoDB',

app/modals/EnvModal/EnvModal.tsx

@@ -9,6 +9,7 @@ const EnvModal: React.FC<TModalSetter> = React.memo(
 
     return (
       <div className="add-container">
+
         <div className="card" id="card-env">
           <button
             className="env-button"
@@ -19,6 +20,8 @@ const EnvModal: React.FC<TModalSetter> = React.memo(
             </Typography>
             <Typography>Cloud-Based</Typography>
           </button>
+
+          
           <button
             className="env-button2"
             onClick={() => setModal({isOpen:true,type:'addModal'})}

app/modals/UserModal/UserModal.tsx

@@ -26,17 +26,17 @@ const UserModal: React.FC<TModalSetter> = React.memo(({ setModal }) => {
           <h2>Hello {user}</h2> <PersonIcon className="navIcon" id="personIcon" />
         </div>
         {user === 'guest' ?
-        <>
-          <Button variant='contained' color='primary' onClick={() => navigate('/login')}>Log In</Button>
-          <br></br><br></br>
-          <Button variant="outlined" color='primary' onClick={() => navigate('/signup')}>Sign Up</Button>
-          <br></br><br></br>
-        </>
-        :
-        <>
-          <Button variant='outlined' color='primary' onClick={handleSignout}>Log Out</Button>
-          <br></br><br></br>
-        </>
+          <>
+            <Button variant='contained' color='primary' onClick={() => navigate('/login')}>Log In</Button>
+            <br></br><br></br>
+            <Button variant="outlined" color='primary' onClick={() => navigate('/signup')}>Sign Up</Button>
+            <br></br><br></br>
+          </>
+          :
+          <>
+            <Button variant='outlined' color='primary' onClick={handleSignout}>Log Out</Button>
+            <br></br><br></br>
+          </>
 
         }
         <Button