v0.4 stable release - weather backgrounds

Author: iamsainikhil

src/components/weather/DayComponent.js

@@ -5,10 +5,12 @@ import getWeatherIcon from '../../utils/WeatherIcon'
 import FormatTime from './../../utils/FormatTime'
 import {PropTypes} from 'prop-types'
 import WeatherIconComponent from './WeatherIconComponent'
+import {ThemeContext} from '../../context/ThemeContext'
 
 const DayComponent = props => {
   const {day, index, selectedIndex} = props
   const {weatherUnit} = useContext(WeatherUnitContext)
+  const {theme, colorTheme} = useContext(ThemeContext)
 
   /**
    * type can be 'High' or 'Low'
@@ -26,8 +28,8 @@ const DayComponent = props => {
 
   return (
     <div
-      className={`sm:border-t sm:border-r sm:border-b-0 sm:border-l-0 sm:border-light sm:hover:bg-light sm:hover:text-black items-center text-center sm:flex-1 sm:py-1 sm:pb-3 cursor-pointer ${
-        index === selectedIndex ? `bg-light text-black` : ''
+      className={`sm:border-t sm:border-r sm:border-b-0 sm:border-l-0 md:border-light md:hover:bg-light md:hover:text-black items-center text-center sm:flex-1 sm:py-1 sm:pb-3 cursor-pointer ${
+        index === selectedIndex ? `bg-${colorTheme} text-${theme}` : ''
       } transition-all duration-1000 ease-in-out`}
       onClick={selectedDay}>
       <div className='flex flex-row flex-no-wrap sm:flex-col sm:flex-wrap justify-around items-center px-2'>

src/components/weather/TimeframeComponent.js

@@ -5,9 +5,11 @@ import getWeatherIcon from '../../utils/WeatherIcon'
 import FormatTime from './../../utils/FormatTime'
 import {PropTypes} from 'prop-types'
 import WeatherIconComponent from './WeatherIconComponent'
+import {ThemeContext} from '../../context/ThemeContext'
 
 const TimeframeComponent = ({Timeframe}) => {
   const {weatherUnit} = useContext(WeatherUnitContext)
+  const {colorTheme} = useContext(ThemeContext)
 
   /**
    * type can be `temperature` or `apparentTemperature`
@@ -20,7 +22,8 @@ const TimeframeComponent = ({Timeframe}) => {
   }
 
   return (
-    <div className='border-none flex flex-col justify-start items-center mx-3 mb-3 w-full font-light text-light'>
+    <div
+      className={`border-none flex flex-col justify-start items-center mx-3 mb-3 w-full font-light text-${colorTheme} md:text-light`}>
       <div>
         {getWeatherIcon(Timeframe).startsWith('wi') ? (
           <p className='text-5xl mt-4' title={Timeframe.summary}>

src/containers/weather/WeatherContainer.js

@@ -94,7 +94,7 @@ const WeatherContainer = () => {
               'flex flex-col justify-center items-center lg:px-5 pt-10'
             }>
             <div
-              className={`sm:w-full lg:w-5/6 xl:max-w-6xl bg-${theme} text-${colorTheme} rounded-t-2xl shadow-lg`}>
+              className={`sm:w-full lg:w-5/6 xl:max-w-6xl bg-${theme} text-${colorTheme} border border-${colorTheme} md:border-none rounded-t-2xl shadow-lg`}>
               <div className='relative'>
                 <img
                   src={`./weather-backgrounds/${getWeatherBackground(