animates temp change

.eslintcache

@@ -1 +1 @@
-[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3"},{"size":362,"mtime":1606235130117,"results":"4","hashOfConfig":"5"},{"size":6148,"mtime":1606629561799,"results":"6","hashOfConfig":"5"},{"size":500,"mtime":1606235130116,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"139zll3",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[]]
+[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3"},{"size":362,"mtime":1606235130117,"results":"4","hashOfConfig":"5"},{"size":6891,"mtime":1606688186814,"results":"6","hashOfConfig":"5"},{"size":500,"mtime":1606235130116,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"139zll3",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[]]

src/App.js

@@ -176,6 +176,31 @@ export default class App extends Component {
 			return Math.round((this.state.weather.main.temp - 32) * (5 / 9)) + '°C';
 	};
 
+	getTextWidth = (text, font) => {
+		let canvas =
+			this.getTextWidth.canvas ||
+			(this.getTextWidth.canvas = document.createElement('canvas'));
+
+		let context = canvas.getContext('2d');
+
+		context.font = font;
+
+		let metrics = context.measureText(text);
+
+		console.log(metrics.width);
+		return metrics.width;
+	};
+
+	sizeCheck = () => {
+		let impTemp = String(Math.round(this.state.weather.main.temp)) + '°F';
+		let metTemp =
+			String(Math.round((this.state.weather.main.temp - 32) * (5 / 9))) + '°C';
+
+		return this.state.isImp === true
+			? this.getTextWidth(impTemp, '900 102pt montseratt')
+			: this.getTextWidth(metTemp, '900 102pt montseratt');
+	};
+
 	render() {
 		return (
 			<div
@@ -215,12 +240,13 @@ export default class App extends Component {
 											? this.setState({ isImp: false })
 											: this.setState({ isImp: true })
 									}
+									style={{ width: this.sizeCheck() + 'px' }}
 								>
 									<TextTransition
 										text={this.switchUnits()}
 										springConfig={presets.slow}
 										noOverflow={true}
-										// direction={'down'}
+										direction={this.state.isImp === true ? 'down' : 'up'}
 									/>
 								</div>
 								<div className="weather">{this.state.climate}</div>

src/index.css

@@ -97,6 +97,10 @@ main {
 	color: #313131;
 }
 
+.search-box i:hover {
+	cursor: pointer;
+}
+
 .location-box .location {
 	color: #fff;
 	font-size: 32px;
@@ -123,10 +127,10 @@ main {
 .weather-box .temp {
 	position: relative;
 	display: inline-block;
-	margin: 30px auto;
+	margin: 15px auto;
 	background-color: rgba(255, 255, 255, 0.2);
 	border-radius: 16px;
-
+	
 	padding: 15px 25px;
 
 	color: #fff;
@@ -137,8 +141,12 @@ main {
 	text-align: center;
 	box-shadow: 3px 6px rgba(0, 0, 0, 0.2);
 
-	background-size: 100% 100%;
-	transition: 1s ease-out;
+	transition: width 0.6s ease;
+	transform-origin: center;
+}
+
+.weather-box .temp:hover {
+	cursor: pointer;
 }
 
 .weather-box .weather {