feat: get rid of card and simplify styling

mgierada · Jun 16, 2024 · 6452322 · 6452322
1 parent 60c9d18
commit 6452322
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 36 deletions.
diff --git a/ui/src/app/page.js b/ui/src/app/page.js
@@ -1,6 +1,4 @@
-import axios from "axios";
 import CounterDisplay from "@/components/CounterDisplay";
-import CounterCard from "@/components/Card";
 
 /**
  * @typedef {Object} CounterApiResponse
@@ -73,13 +71,11 @@ const Home = async () => {
   const data = await fetchCounter();
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex"></div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+    <main className="flex min-h-screen flex-col items-center justify-center p-5">
+      <div className="z-10 max-w-5xl w-full flex flex-col items-center justify-center font-mono text-sm lg:flex"></div>
+      <div className="flex flex-col items-center justify-center">
         <CounterDisplay currentValue={data.currentValue} error={data.error} />
       </div>
-      <div>{/* <CounterCard /> */}</div>
     </main>
   );
 };

diff --git a/ui/src/components/Card/index.jsx b/ui/src/components/Card/index.jsx
diff --git a/ui/src/components/CounterDisplay/index.jsx b/ui/src/components/CounterDisplay/index.jsx
@@ -2,14 +2,15 @@
 
 const CounterDisplay = ({ currentValue, error }) => {
   return (
-    <div>
+    <div className="flex items-center justify-center h-full text-center">
       {error ? (
         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
           {error}
         </h1>
       ) : (
         <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-          Current streak: {currentValue} days 🔥
+          Current streak:
+          <br /> {currentValue} days 🔥
         </h1>
       )}
     </div>