time-convertor

commit ca1428f7243de763b0ac0d656d3d911226693ccb
parent 208a5dc4d6f0719e462df5692e547cafe2096a40
Author: Agastya Chandrakant <me@hanabi.in>
Date:   Mon, 18 May 2020 14:34:31 +0530

from to headers + header footer styling

Diffstat:
M
src/comp/currentTime.js
 | 
8
++++++++
M
src/comp/footer.js
 | 
9
+++------
M
src/comp/fromToTime.js
 | 
8
++++++++
M
src/comp/header.js
 | 
2
+-

4 files changed, 20 insertions(+), 7 deletions(-)
diff --git a/src/comp/currentTime.js b/src/comp/currentTime.js
@@ -12,6 +12,14 @@ function CurrentTime() {
   );
   return (
     <div className="time-conversion">
+      <div className="row mb-3" id="fromto">
+        <div className="col text-right" id="labels-from">
+          <h1>From</h1>
+        </div>
+        <div className="col text-left" id="labels-to">
+          <h1>To</h1>
+        </div>
+      </div>
       <div className="row mb-3" id="labels">
         <div className="col text-right" id="local-time-lbl-box">
           <h4 aria-level="4" id="local-time-lbl">
diff --git a/src/comp/footer.js b/src/comp/footer.js
@@ -3,12 +3,9 @@ import React from 'react';
 function Footer() {
   const year = new Date().getFullYear();
   return (
-    <footer
-      className="mt-5 w-100"
-      style={{ bottom: 0, left: 0, position: 'fixed' }}
-    >
-      <hr />
-      <div className="page-footer text-center" style={{ padding: '5px' }}>
+    <footer className="w-100" style={{ bottom: 0, left: 0, position: 'fixed' }}>
+      <hr style={{ marginTop: 0 }} />
+      <div className="page-footer text-center" style={{ paddingBottom: '5px' }}>
         Copyright &copy; {year}{' '}
         <a
           href="https://en.wikinews.org/wiki/User:Acagastya"
diff --git a/src/comp/fromToTime.js b/src/comp/fromToTime.js
@@ -16,6 +16,14 @@ function FromToTime() {
   );
   return (
     <div className="time-conversion">
+      <div className="row mb-3" id="fromto">
+        <div className="col text-right" id="labels-from">
+          <h1>From</h1>
+        </div>
+        <div className="col text-left" id="labels-to">
+          <h1>To</h1>
+        </div>
+      </div>
       <div className="row mb-3" id="labels">
         <div className="col text-right" id="first-time-lbl-box">
           <AutoCompleteText
diff --git a/src/comp/header.js b/src/comp/header.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function Header() {
   return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-danger mb-5">
+    <nav className="navbar navbar-expand-lg navbar-dark bg-danger mb-4">
       <Link className="navbar-brand" to="/">
         <span role="img" aria-label="time convertor">
           {new Date().getSeconds() % 2 ? '⏳' : '⌛️'}