Remove css classname prefixes + use singleinstancforecast

src/Components/SingleDayForecast/Component.css

@@ -12,55 +12,77 @@
   width: 100%;
   height: 100%;
   
-  padding: 0 0.5em;
-  
   border: 2px solid gray;
 }
 
-.SingleDayForecast .forecast-summary {
+.SingleDayForecast .summary {
+  position: relative;
+
+  padding: 0 0.5em;
   padding-bottom: .5em;
-  border-bottom: 2px solid #000;
+
+  height: 40%;
 }
 
-.SingleDayForecast .forecast-summary>* {
+.SingleDayForecast .summary>* {
   padding: 0.125em 0;
 }
 
-.SingleDayForecast .summary-weather-description {
+.SingleDayForecast .summary .weather-description {
   padding-bottom: .25em;
 }
 
-.SingleDayForecast .summary-weather-icon-container {
+.SingleDayForecast .summary .weather-icon-container {
   padding: .75em 0;
 }
 
-.SingleDayForecast .summary-date {
+.SingleDayForecast .summary .date {
   font-size: 1.5em;
 }
 
-.SingleDayForecast .summary-temp,
-.SingleDayForecast .summary-humidity {
+.SingleDayForecast .summary .temp,
+.SingleDayForecast .summary .humidity {
   margin: auto;
   width: 70%;
 }
 
-.SingleDayForecast .temp-desc,
-.SingleDayForecast  .temp-value,
-.SingleDayForecast  .humidity-desc,
-.SingleDayForecast  .humidity-value {
+.SingleDayForecast .summary .desc,
+.SingleDayForecast .summary  .value {
   float: left;
 }
 
-.SingleDayForecast .temp-desc,
-.SingleDayForecast  .humidity-desc {
+.SingleDayForecast .summary .desc {
   width: 30%;
+
+  text-align: right;
 }
 
-.SingleDayForecast .temp-value,
-.SingleDayForecast .humidity-value {
+.SingleDayForecast .summary .value{
   width: 70%;
+  
 }
 
 .SingleDayForecast .clearfix {
   clear: both;
+}
+
+.SingleDayForecast .summary .bottom-dividor{
+  /* border-bottom: 2px solid #000; */
+  padding: 0 !important;
+
+  position: absolute;
+  
+  top: 100%;
+  left: 50%;
+  
+  width: 85%;
+  height: 2px;
+  
+  background-color: #000;
+  transform: translateX(-50%);
+}
+
+.SingleDayForecast .details {
+  height: 60%;
+  overflow: auto;
 }