v0.2 stable release

package.json

@@ -19,6 +19,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-ga": "^2.7.0",
+    "react-icons": "^3.9.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
     "react-toggle": "^4.1.1"

src/components/footer/FooterComponent.js

@@ -3,6 +3,7 @@ import {ThemeContext} from '../../context/ThemeContext'
 import moment from 'moment-timezone'
 import {Link} from 'react-router-dom'
 import {Event} from '../../utils/ReactAnalytics'
+import {FaReact} from 'react-icons/fa'
 
 const FooterComponent = () => {
   const {theme, colorTheme} = useContext(ThemeContext)
@@ -34,15 +35,17 @@ const FooterComponent = () => {
         </p>
         <p className='flex flex-no-wrap justify-center my-2 sm:my-0 w-full sm:w-1/2'>
           Made with&nbsp;
-          <span title='Love' role='img' aria-label='Love' className='w-5 h-5'>
+          <span title='Love' role='img' aria-label='Love' className='text-lg'>
             ❤️
           </span>
           &nbsp;using&nbsp;
-          <img
-            src='./react.svg'
-            alt='React'
+          <span
             title='React'
-            className='w-4 h-4 object-contain object-center'></img>
+            role='img'
+            aria-label='React'
+            className='text-lg text-react'>
+            <FaReact />
+          </span>
           &nbsp;by&nbsp;
           <span title='Sai Nikhil' role='img' aria-label='Sai Nikhil'>
             👨‍💻

src/components/icon/IconComponent.js

@@ -1,13 +1,18 @@
 import React from 'react'
 import {PropTypes} from 'prop-types'
+import {FaSun, FaMoon} from 'react-icons/fa'
 
 const IconComponent = ({iconType}) => {
   return (
     <div>
       {iconType === 'light' ? (
-        <img src='./sun.svg' alt='Light' />
+        <p className='text-toggle'>
+          <FaSun />
+        </p>
       ) : (
-        <img src='./moon.svg' alt='Dark' />
+        <p className='text-toggle'>
+          <FaMoon />
+        </p>
       )}
     </div>
   )

src/components/search/SearchComponent.js

@@ -1,14 +1,25 @@
 import React, {useContext} from 'react'
 import {ThemeContext} from '../../context/ThemeContext'
 import {PropTypes} from 'prop-types'
+import {FiSearch} from 'react-icons/fi'
+import {IoIosArrowUp, IoIosArrowDown} from 'react-icons/io'
+
+const IconComponent = ({type, color}) => {
+  const TYPES = {
+    search: <FiSearch />,
+    up: <IoIosArrowUp />,
+    down: <IoIosArrowDown />
+  }
+  return <p className={`opacity-75 text-2xl fill-${color}`}>{TYPES[type]}</p>
+}
 
 const SearchComponent = props => {
   const {theme, colorTheme} = useContext(ThemeContext)
   return (
     <div className='h-12 mx-5 mt-5'>
       <div className='relative'>
         <div className='absolute top-0 left-0 ml-5 mt-3'>
-          <i className={`icon-search opacity-50 text-${colorTheme}`}></i>
+          <IconComponent type='search' color={colorTheme} />
         </div>
         <input
           style={{
@@ -27,10 +38,9 @@ const SearchComponent = props => {
             className='flex right-0 absolute top-0 mr-4 mt-3 cursor-pointer'
             onClick={props.caretClicked}>
             {props.showAddresses ? (
-              <i className={`icon-up-arrow opacity-50 text-${colorTheme}`}></i>
+              <IconComponent type='up' color={colorTheme} />
             ) : (
-              <i
-                className={`icon-down-arrow opacity-50 text-${colorTheme}`}></i>
+              <IconComponent type='down' color={colorTheme} />
             )}
           </div>
         ) : null}

src/components/weather/DayComponent.js

@@ -5,6 +5,7 @@ import {fToC} from '../../utils/TemperatureConvert'
 import getWeatherIcon from '../../utils/WeatherIcon'
 import FormatTime from './../../utils/FormatTime'
 import {PropTypes} from 'prop-types'
+import WeatherIconComponent from './WeatherIconComponent'
 
 const DayComponent = props => {
   const {day, index, selectedIndex} = props
@@ -38,11 +39,11 @@ const DayComponent = props => {
         {/* icon */}
         <div className='flex w-1/6 sm:w-full'>
           {getWeatherIcon(day).startsWith('wi') ? (
-            <i
-              title={day.summary}
-              className={`sm:mt-1 sm:mb-3 mx-auto sm:text-2xl wi wi-${getWeatherIcon(
-                day
-              )}`}></i>
+            <p
+              className='my-1 sm:mt-1 sm:mb-3 mx-auto text-3xl'
+              title={day.summary}>
+              <WeatherIconComponent type={getWeatherIcon(day)} />
+            </p>
           ) : (
             <img
               src={`./weather/${getWeatherIcon(day)}.svg`}
@@ -69,11 +70,15 @@ const DayComponent = props => {
             index === selectedIndex ? 'flex' : 'flex'
           } flex-row justify-around sm:justify-center sm:flex sm:flex-col w-5/12 sm:w-full font-light mt-1`}>
           <div className='flex flex-row justify-center items-center mx-2 sm:my-1 text-xs sm:text-sm'>
-            <i className='wi wi-sunrise text-sun mr-2' title='sunrise'></i>
+            <p className='text-xl text-sun mr-2' title='sunrise'>
+              <WeatherIconComponent type='sunrise' />
+            </p>
             <p>{FormatTime(day.sunriseTime, day.timezone, 'h:mm')}</p>
           </div>
           <div className='flex flex-row justify-center items-center mx-2 sm:my-1 text-xs sm:text-sm'>
-            <i className='wi wi-sunset text-sun mr-1' title='sunset'></i>
+            <p className='text-xl text-sun mr-1' title='sunset'>
+              <WeatherIconComponent type='sunset' />
+            </p>
             <p>{FormatTime(day.sunsetTime, day.timezone, 'HH:mm')}</p>
           </div>
         </div>

src/components/weather/InfoComponent.js

@@ -6,6 +6,7 @@ import {isUndefined, isEmpty} from 'lodash-es'
 import moment from 'moment-timezone'
 import {PropTypes} from 'prop-types'
 import {Event} from '../../utils/ReactAnalytics'
+import {FaRegHeart, FaHeart} from 'react-icons/fa'
 
 const InfoComponent = ({address, latlong, urbanArea, weatherCurrent}) => {
   const {updateFavorites} = useContext(AddressContext)
@@ -188,11 +189,7 @@ const InfoComponent = ({address, latlong, urbanArea, weatherCurrent}) => {
                 : 'Favorite this city'
             }
             onClick={favoritesHandler}>
-            {isBookmarked() ? (
-              <i className='icon-heart'></i>
-            ) : (
-              <i className='icon-heart-empty'></i>
-            )}
+            {isBookmarked() ? <FaHeart /> : <FaRegHeart />}
           </div>
         </div>
         <div className='hidden md:block text-right bottom-0 right-0 xl:mt-8 px-2'>

src/components/weather/InfoDetailComponent.js

@@ -6,6 +6,8 @@ import {mToK} from '../../utils/SpeedConvert'
 import {fToC} from '../../utils/TemperatureConvert'
 import {PropTypes} from 'prop-types'
 import {Event} from '../../utils/ReactAnalytics'
+import {FiPercent} from 'react-icons/fi'
+import WeatherIconComponent from './WeatherIconComponent'
 
 const InfoDetailComponent = ({weatherCurrent}) => {
   const {weatherUnit, updateWeatherUnit} = useContext(WeatherUnitContext)
@@ -41,26 +43,25 @@ const InfoDetailComponent = ({weatherCurrent}) => {
       <div className='sm:flex-col md:flex md:flex-row justify-between mt-5 mb-5 px-4'>
         <div className='flex-col sm:w-full lg:w-1/2'>
           <div className='flex flex-row items-start'>
-            <div className='flex flex-col'>
-              <div>
-                {getWeatherIcon(weatherCurrent).startsWith('wi') ? (
-                  <i
-                    className={`${getWeatherIcon(
-                      weatherCurrent
-                    )} text-5xl mr-2 mx-3`}
-                    title={weatherCurrent.summary}></i>
-                ) : (
-                  <img
-                    src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
-                    alt='icon'
-                    title={weatherCurrent.summary}
-                    className='-mt-2 w-20 h-20 object-contain'
-                  />
-                )}
-              </div>
-              <p className='font-medium ml-3 capitalize'>
-                {weatherCurrent.summary}
-              </p>
+            <div>
+              {getWeatherIcon(weatherCurrent).startsWith('wi') ? (
+                <p
+                  className='text-5xl ml-6 mr-2'
+                  title={weatherCurrent.summary}>
+                  {
+                    <WeatherIconComponent
+                      type={getWeatherIcon(weatherCurrent)}
+                    />
+                  }
+                </p>
+              ) : (
+                <img
+                  src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
+                  alt='icon'
+                  title={weatherCurrent.summary}
+                  className='-mt-2 w-20 h-20 object-contain'
+                />
+              )}
             </div>
             <div className='flex justify-start items-center ml-3'>
               <div>
@@ -89,22 +90,29 @@ const InfoDetailComponent = ({weatherCurrent}) => {
               </div>
             </div>
           </div>
+          <p className='font-medium ml-6 capitalize'>
+            {weatherCurrent.summary}
+          </p>
         </div>
         <div className='mt-6 ml-3 sm:mt-1 sm:w-full lg:w-1/2 text-sm sm:text-lg'>
-          <p>
-            <span className='font-light'>Humidity:</span>&nbsp;
-            {Math.round(weatherCurrent.humidity)}%
-          </p>
+          <div className='flex flex-row'>
+            <p className='font-light'>Humidity:</p>&nbsp;
+            <p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
+            <p className='text-sm mt-1'>
+              <FiPercent />
+            </p>
+          </div>
           <div className='flex items-center'>
             <p>
               <span className='font-light'>Wind:</span>&nbsp;
               {computedSpeedValue()}{' '}
             </p>
-            <p>
-              <i
-                className={`mx-2 mt-2 text-3xl wi wi-direction-${getWindDirection(
-                  weatherCurrent.windBearing
-                )}`}></i>
+            <p className='text-3xl'>
+              {
+                <WeatherIconComponent
+                  type={getWindDirection(weatherCurrent.windBearing)}
+                />
+              }
             </p>
           </div>
           <p>

src/components/weather/TimeframeComponent.js

@@ -5,6 +5,7 @@ import {fToC} from '../../utils/TemperatureConvert'
 import getWeatherIcon from '../../utils/WeatherIcon'
 import FormatTime from './../../utils/FormatTime'
 import {PropTypes} from 'prop-types'
+import WeatherIconComponent from './WeatherIconComponent'
 
 const TimeframeComponent = ({Timeframe}) => {
   const {weatherUnit} = useContext(WeatherUnitContext)
@@ -27,9 +28,9 @@ const TimeframeComponent = ({Timeframe}) => {
       }`}>
       <div>
         {getWeatherIcon(Timeframe).startsWith('wi') ? (
-          <i
-            title={Timeframe.summary}
-            className={`wi wi-${getWeatherIcon(Timeframe)} text-2xl my-1`}></i>
+          <p className='text-5xl mt-4' title={Timeframe.summary}>
+            <WeatherIconComponent type={getWeatherIcon(Timeframe)} />
+          </p>
         ) : (
           <img
             src={`./weather/${getWeatherIcon(Timeframe)}.svg`}
@@ -39,7 +40,7 @@ const TimeframeComponent = ({Timeframe}) => {
           />
         )}
       </div>
-      <p className='text-xl'>
+      <p className='text-lg'>
         {computedTempValue('temperature')}
         <sup>o</sup>
       </p>

src/components/weather/WeatherIconComponent.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import {
+  WiDirectionUp,
+  WiDirectionUpRight,
+  WiDirectionRight,
+  WiDirectionDownRight,
+  WiDirectionDown,
+  WiDirectionDownLeft,
+  WiDirectionLeft,
+  WiDirectionUpLeft,
+  WiDayFog,
+  WiNightFog,
+  WiDayCloudyWindy,
+  WiNightAltCloudyWindy,
+  WiTornado,
+  WiNa,
+  WiSunrise,
+  WiSunset
+} from 'react-icons/wi'
+
+const WeatherIconComponent = ({type}) => {
+  const ICON_TYPES = {
+    'wi-day-fog': <WiDayFog />,
+    'wi-night-fog': <WiNightFog />,
+    'wi-day-windy': <WiDayCloudyWindy />,
+    'wi-night-windy': <WiNightAltCloudyWindy />,
+    'wi-tornado': <WiTornado />,
+    'wi-na': <WiNa />,
+    up: <WiDirectionUp />,
+    'up-right': <WiDirectionUpRight />,
+    right: <WiDirectionRight />,
+    'down-right': <WiDirectionDownRight />,
+    down: <WiDirectionDown />,
+    'down-left': <WiDirectionDownLeft />,
+    left: <WiDirectionLeft />,
+    'up-left': <WiDirectionUpLeft />,
+    sunrise: <WiSunrise />,
+    sunset: <WiSunset />
+  }
+
+  return ICON_TYPES[type] || <WiNa />
+}
+
+export default WeatherIconComponent