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;
 }

src/Components/SingleDayForecast/Component.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import './Component.css';
 import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
 import { Forecast5DaysSeperated, ForecaseAtInstance, Utils } from '../../Utils';
+import { SingleInstanceForecast } from '../SingleInstanceForecast/Component';
 
 export interface SingleDayForecastProps {
   forecastCurrentDay: Array<ForecaseAtInstance>;
@@ -94,42 +95,46 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
     return (
       <div className="SingleDayForecast">
         <div className="SingleDayForecast-inner">
-          <div className="forecast-summary">
+          <div className="summary">
 
-            <div className="summary-weather-icon-container">
-              <div className={`summary-weather-icon owi owi-3x owi-${summary.modeWeatherIcon}`} />
+            <div className="weather-icon-container">
+              <div className={`weather-icon owi owi-3x owi-${summary.modeWeatherIcon}`} />
             </div>
 
-            <div className="summary-date">
+            <div className="date">
               {day.format('Do MMM')}
             </div>
 
-            <div className="summary-weather-description">
+            <div className="weather-description">
               {Utils.stringToNormalCase(summary.modeWeatherDescription)}
             </div>
 
-            <div className="summary-temp" title={`Temperature : ${summary.avgTemp.toFixed(0)}°C`}>
-              <div className="temp-desc">
+            <div className="temp" title={`Temperature : ${summary.avgTemp.toFixed(0)}°C`}>
+              <div className="desc">
                 T :
               </div>
-              <div className="temp-value">
+              <div className="value">
                 {summary.avgTemp.toFixed(0)}&deg;C
               </div>
               <div className="clearfix"/>
             </div>
 
-            <div className="summary-humidity" title={`Humidity : ${summary.avgHumidity.toFixed(0)} %`}>
-              <div className="humidity-desc">
+            <div className="humidity" title={`Humidity : ${summary.avgHumidity.toFixed(0)} %`}>
+              <div className="desc">
                 H :
               </div>
-              <div className="humidity-value">
+              <div className="value">
                 {summary.avgHumidity.toFixed(0)} %
               </div>
               <div className="clearfix"/>
             </div>
+
+            <div className="bottom-dividor" />
           </div>
-          <div className="forecast-details">
-            BLANK
+          <div className="details">
+            {this.props.forecastCurrentDay.map((forecastAtInstance) => {
+              return <SingleInstanceForecast forecastAtInstance={forecastAtInstance} key={forecastAtInstance.dt} />;
+            })}
         </div>
         </div>
       </div>