Merge pull request #18 from oslabs-beta/CHRONOS-59-Updating-UX-UI

Chronos 59 updating ux UI

Author: ashleybisram

app/components/About/About.tsx

@@ -13,15 +13,14 @@ const About: React.FC = React.memo(() => {
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
   const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
   return (
-
-    
-    <div className="about" >
+    <div className="about">
       <div className="blurb" data-testid="aboutPage" style={currentStyle}>
-        <h3 style={currentStyle} className="mainTitle">About</h3>
-        <p style={currentStyle} 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.
+        <h3 style={currentStyle} className="mainTitle">About </h3>
+        <p style={currentStyle} 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.
         </p>
         <br></br>
         <TeamMembers />
@@ -31,4 +30,4 @@ const About: React.FC = React.memo(() => {
   );
 });
 
-export default About;
+export default About;

app/components/About/styles.scss

@@ -9,31 +9,39 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  padding: 0;
+
 }
 
 .sprout {
   margin: 0;
+  
 }
 
 .mainTitle {
   font-size: 36px;
   color: $background;
   text-align: left;
   font-weight: 600;
+    margin: 0;
 }
 
 .title {
   font-size: 18px;
   color: $background;
   text-align: left;
   font-weight: 600;
+  padding: 0;
+  margin: 0;
 }
 
 .text {
   font-size: 20px;
   color: $background;
   text-align: left;
   font-weight: 300;
+  padding: 0;
+  margin: 0;
 }
 
 .blurb {
@@ -46,7 +54,7 @@
   border: none;
   box-shadow: $boxshadow2;
   padding: 30px;
-
+  margin: 0;
   &:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }
@@ -63,13 +71,19 @@
   background-color: transparent;
   border-radius: 50%;
   background-size: scale-down;
+  padding: 0;
+  margin: 0;
   &:hover {
     background-color: $hover;
     opacity: 0.85;
     animation: none;
   }
 }
-
+#OSPNames p{
+  margin: 10px 0px;
+}
 p {
   padding-left: 10px;
+  margin: 0;
+  // border:2px green solid;
 }

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -26,7 +26,7 @@ const ApplicationsCard:React.FC<ApplicationCardProps> = (props) => {
         key={`card-${i}`}
         className={classes.paper}
         variant="outlined"
-        onClick={() => handleClick(application[0], application[3], i)}
+         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
           <div className="databaseIconHeader"></div>

app/components/ApplicationsCard/styles.scss

@@ -8,7 +8,7 @@
   padding: 0;
   cursor: pointer;
   transition: all 0.5s;
-
+// border: 2px solid green;
   &:after,
   &:before {
     content: ' ';

app/components/Contact/styles.scss

@@ -1,4 +1,4 @@
-@use '../../index.scss' as *;
+@use '../../index' as *;
 
 .contact {
   display: flex;
@@ -10,13 +10,13 @@
   justify-items: center;
   top: 0;
   left: 0;
+  height: auto;
   min-height: 100vh;
   opacity: 1;
   vertical-align: top;
   justify-content: center;
   align-items: center;
   color: $background;
-  
 }
 .contact-border {
   display: flex;
@@ -167,6 +167,12 @@ input[type='file'] {
   }
 }
 
-.contact-blurb p{
+.contact-blurb p {
+  margin: 0;
   font-weight: 300;
-}
+
+}
+.contact-blurb h1 {
+  margin: 0;
+  padding: 0;
+}

app/components/DashboardIcons/styles.scss

@@ -2,6 +2,7 @@
 
 .dashboardIconWrapper {
   margin-right: 37px;
+
 }
 
 .dashboardIconArea {
@@ -25,6 +26,7 @@
   z-index: 1;
   top: 50px;
   right: -14px;
+
 }
 
 .dashboardIconArea .dashboardTooltip::after {
@@ -134,6 +136,7 @@
 .personIconArea {
   position: relative;
   display: inline-block;
+
 }
 
 .personIconArea:hover .personTooltip {

app/components/FirstLaunch/styles.scss

@@ -7,6 +7,7 @@
 
 .home {
   background: $darkblue;
+
   display: flex;
   flex-direction: column;
   align-content: center;