+ role='img'
+ aria-label='React'
+ className='text-lg text-react'>
+
{iconType === 'light' ? (
- 
+ 
+
)
diff --git a/src/components/search/SearchComponent.js b/src/components/search/SearchComponent.js
index bb7308a..f60f761 100644
--- a/src/components/search/SearchComponent.js
+++ b/src/components/search/SearchComponent.js
@@ -1,6 +1,17 @@
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:
+
+
+
+
{TYPES[type]}
+} const SearchComponent = props => { const {theme, colorTheme} = useContext(ThemeContext) @@ -8,7 +19,7 @@ const SearchComponent = props => {
-
+
{
className='flex right-0 absolute top-0 mr-4 mt-3 cursor-pointer'
onClick={props.caretClicked}>
{props.showAddresses ? (
-
+
{getWeatherIcon(day).startsWith('wi') ? (
-
+ }.svg`})
{
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`}>
diff --git a/src/components/weather/InfoComponent.js b/src/components/weather/InfoComponent.js
index 370cbea..f30d5e2 100644
--- a/src/components/weather/InfoComponent.js
+++ b/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() ? (
-
- ) : (
-
- )}
+ {isBookmarked() ?
+
{
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`}>
-
+
+
{FormatTime(day.sunriseTime, day.timezone, 'h:mm')}
-
+
+
{FormatTime(day.sunsetTime, day.timezone, 'HH:mm')}
diff --git a/src/components/weather/InfoDetailComponent.js b/src/components/weather/InfoDetailComponent.js
index c502eec..be32d0f 100644
--- a/src/components/weather/InfoDetailComponent.js
+++ b/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}) => {
-
-
+
- {getWeatherIcon(weatherCurrent).startsWith('wi') ? (
-
- ) : (
- }.svg`} "{weatherCurrent.summary}")
- )}
-
-
- )}
- - {weatherCurrent.summary} -
+
+ {getWeatherIcon(weatherCurrent).startsWith('wi') ? (
+
+ )}
+ {
+
+ )}
@@ -89,22 +90,29 @@ const InfoDetailComponent = ({weatherCurrent}) => {
+ {weatherCurrent.summary} +
-
- Humidity: - {Math.round(weatherCurrent.humidity)}% -
+
+
Humidity:
+{Math.round(weatherCurrent.humidity)}
+
+
Wind: {computedSpeedValue()}{' '}
-- +
+ {
+
diff --git a/src/components/weather/TimeframeComponent.js b/src/components/weather/TimeframeComponent.js index 94d1811..eb8b81d 100644 --- a/src/components/weather/TimeframeComponent.js +++ b/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}) => { }`}>
{getWeatherIcon(Timeframe).startsWith('wi') ? (
-
+ }.svg`})
{
/>
)}
-
+
{
/>
)}
+
{computedTempValue('temperature')} o
diff --git a/src/components/weather/WeatherIconComponent.js b/src/components/weather/WeatherIconComponent.js new file mode 100644 index 0000000..86e2f25 --- /dev/null +++ b/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':