fix: add overlay on mobile

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

web/app/components/CenterCol.tsx

@@ -91,11 +91,26 @@ export default function CenterCol() {
     greet += 'evening'
   }
 
+  const nth = function(d) {
+    if (d > 3 && d < 21) return 'th';
+    switch (d % 10) {
+      case 1:  return "st";
+      case 2:  return "nd";
+      case 3:  return "rd";
+      default: return "th";
+    }
+  }
+
+  const dayName = function(d) {
+    const days = ["Monday", "Tuesday", "Wednesday", "Thhursday", "Friday", "Saturday", "Sunday"]
+    return days[d-1]
+  }
+
   return (
     <div className={styles.main}>
       <div className={styles.title}>
         <div className={styles.greeting}>{greet}, Nishant</div>
-        <div className={styles.date}>{"It's 3rd of January, a Monday"}</div>
+        <div className={styles.date}>{`It's ${today.getDate()}${nth(today.getDate())} of ${today.toLocaleString('default', { month: 'long' })}, a ${dayName(today.getDay())}`}</div>
       </div>
       <CenterLoading />
     </div>

web/app/page.module.css

@@ -9,3 +9,22 @@
   gap: 30px;
 }
 
+.overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background: #F0F1F5;
+  padding: 20px;
+  color: #7F7C9A;
+  font: bold 1.2em Arial, Sans-serif;
+
+}
+
+@media screen and (min-width: 600px){
+  .overlay {
+    visibility: hidden;
+  }
+}

web/app/page.tsx

@@ -6,10 +6,13 @@ import RecentTransactions from './components/RecentTransactions'
 
 export default function Home() {
   return (
-    <main className={styles.main}>
+    <>
-      <RecurringCol />
+      <main className={styles.main}>
-      <CenterCol />
+        <RecurringCol />
-      <RecentTransactions />
+        <CenterCol />
-    </main>
+        <RecentTransactions />
+      </main>
+      <div className={styles.overlay}>The demo is best viewed on the Desktop :)</div>
+    </>
   )
 }