Update card styles and content

src/components/Card.tsx

@@ -10,6 +10,7 @@ const Wrapper = styled.div`
 	justify-content: center;
 	align-items: center;
 	text-align: center;
+	width: 100%;
 	padding: 1rem;
 	margin: 1rem 0rem;
 
@@ -18,34 +19,41 @@ const Wrapper = styled.div`
 	}
 
 	.cold {
-        color: #429BB8;
+		color: #429bb8;
 	}
 
 	.hot {
-        color: #FF4500;
+		color: #ff4500;
 	}
 `;
 
 interface Props {
-    date: Date,
-    data: string,
-    icon: number,
-    time: boolean,
-    temp?: 'hot' | 'cold' | null,
-    description?: string
-};
+	date: Date;
+	data: string;
+	icon: number;
+	time: boolean;
+	temp?: 'hot' | 'cold' | null;
+	description?: string;
+}
 
 const Card: React.FC<Props> = ({ date, time, data, temp, icon, description }) => {
-    const timeString: string = `${date.getHours() < 10 ? 0 : ''}${date.getHours()}:${date.getMinutes() < 10 ? 0 : ''}${date.getMinutes()}`;
+	const timeString: string = `${date.getHours() < 10 ? 0 : ''}${date.getHours()}:${
+		date.getMinutes() < 10 ? 0 : ''
+	}${date.getMinutes()}`;
 
 	return (
 		<Wrapper>
-            <p>{time ? timeString : ''} {date.toDateString().split(' ')[0]} {date.getDate() + '/' + (date.getMonth() + 1)}</p>
+			<p>
+				{date.toDateString().split(' ')[0]} {time ? timeString : ''}{' '}
+				{(date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth()) +
+					'/' +
+					date.getDate()}
+			</p>
 			<h3>{data}</h3>
-            <i className={`wi wi-owm-${icon} ${temp && temp}`} ></i>
+			<i className={`wi wi-owm-${icon} ${temp && temp}`}></i>
 			<p>{description && description}</p>
 		</Wrapper>
 	);
-}
+};
 
 export default Card;