Merge pull request #16 from oslabs-beta/performanceTabStyling

Updated styling for current button in map tab and data details in per…

Author: vnguyen95

src/app/components/RenderingFrequency.tsx

@@ -91,10 +91,9 @@ const ComponentCard = props => {
           <p>{renderFrequency}</p>
         </div>
       </div>
-      <div className="DataComponent">
+      <div className={expand === true ? 'DataComponent' : null} >
         {expand === true ? dataComponentArray : null}
       </div>
-
     </div>
   );
 };
@@ -107,11 +106,11 @@ const DataComponent = props => {
 
   // current bug
   // we want render time to display first but it gets push to the end of the array
-  // first pop is because the last item of array is always empty for some reason 
+  // first pop is because the last item of array is always empty for some reason
 
   // const [{ tabs, currentTab }, dispatch] = useStoreContext();
   return (
-    <div>
+    <div className="borderCheck">
       <h4>
         {' '}
         {header}

src/app/styles/components/_buttons.scss

@@ -118,6 +118,16 @@
   cursor: pointer;
 }
 
+.current-location {
+  outline: none;
+  height: 20px;
+  margin-bottom: 8px;
+  width: 70px;
+  border: transparent;
+  border-radius: 3px;
+  font: normal 11px 'Roboto', sans-serif;
+}
+
 .empty-button:hover {
   color: white;
   background-color: $highlight-color;

src/app/styles/components/_renderingFrequency.scss

@@ -1,25 +1,45 @@
-.borderStyling{
+.borderStyling {
 	border-radius: 5px;
 	border: 1px solid rgba(184, 196, 194, 0.25);
 	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
-	width: 40vh;
+	width: 53vw;
+}
+
+.borderCheck {
+	border-radius: 5px;
+	border: 1px solid rgba(184, 196, 194, 0.25);
+	box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
+	padding:5px;
+	width: 10vw;
+	height:25vw;
+	overflow-y: scroll;
+	overflow-wrap: break-word;
 }
 .DataComponent{
+	padding-left: 30px;
 	display: flex;
 	flex-direction: row;
-	width: 40vh
+	flex-wrap: wrap;
+	width: 50vw;
+	height:40vw;
+	overflow-y: scroll;
+	overflow-wrap: break-word;
 }
+
+
 .StyledGridElement {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	background: #242529;
-	padding: 20px;
-	width: 40vh;
+	padding: 20px; 
+	width: 50vw;
 	height: 5vh;
 	margin: 20px 10px;
 	font-family: 'Roboto', sans-serif;
-
+	// border-radius: 5px;
+	// border: 1px solid rgba(184, 196, 194, 0.25);
+	// box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
 
 	h3 {
 		color: $text-color;
@@ -47,13 +67,18 @@
 }
 .ExpandStyledGridElement {
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
 	background: #242529;
 	padding: 20px;
-	width: 80vh;
+	width: 50vw;
+	// height: 1000px;
 	margin: 20px 10px;
 	font-family: 'Roboto', sans-serif;
+	// border-radius: 5px;
+	// border: 1px solid rgba(184, 196, 194, 0.25);
+	// box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
 
 
 	h3 {
@@ -81,8 +106,9 @@
 	}
 }
 .RenderRight {
-	border-radius: 5px;
+	padding-right: 5px;
 	background: $blue-color-gradient;
-	width: 10%;
+	width: 50px;
 	padding: 0 0.5em;
-}
+	right: 10%;
+}