new button styling

Author: sarhiri

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

@@ -7,7 +7,7 @@ import { DataGrid } from '@material-ui/data-grid';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from './Styling';
 import { Button, TextField } from '@material-ui/core';
-import SearchBar from './SearchBar';
+import SearchBar from './SearchBar/SearchBar';
 
 
 interface Params {
@@ -188,9 +188,6 @@ const TransferColumns = React.memo(() => {
 
   return (
     <>
-    <SearchBar
-              setSearchTerm={setSearchTerm}
-            />
       <div id="getChartsContainer">
         <Button
           id="getCharts"

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',