From 8155d335360d1e17511c6287f40daffe0160fe83 Mon Sep 17 00:00:00 2001
From: Aditya Mathur <mathuraditya724@gmail.com>
Date: Thu, 23 May 2024 15:48:35 +0530
Subject: [PATCH] refactor(sandbox): improved the app

---
 apps/sandbox/.gitignore     |  1 +
 apps/sandbox/package.json   |  2 +-
 apps/sandbox/src/Card.tsx   |  8 +++++---
 apps/sandbox/src/Layout.tsx | 10 ++++++----
 apps/sandbox/src/Page.tsx   |  6 +++++-
 apps/sandbox/src/index.tsx  |  4 ++--
 package.json                |  1 -
 7 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/apps/sandbox/.gitignore b/apps/sandbox/.gitignore
index e985853..d698f51 100644
--- a/apps/sandbox/.gitignore
+++ b/apps/sandbox/.gitignore
@@ -1 +1,2 @@
 .vercel
+pnpm-lock.yaml
\ No newline at end of file
diff --git a/apps/sandbox/package.json b/apps/sandbox/package.json
index d845c96..4e42869 100644
--- a/apps/sandbox/package.json
+++ b/apps/sandbox/package.json
@@ -4,7 +4,7 @@
     "build": "echo 🔥"
   },
   "dependencies": {
-    "hono-rate-limiter": "^0.2.3",
+    "hono-rate-limiter": "^0.3.0",
     "@hono-rate-limiter/redis": "^0.1.0",
     "@vercel/kv": "^1.0.1",
     "@hono/node-server": "^1.8.2",
diff --git a/apps/sandbox/src/Card.tsx b/apps/sandbox/src/Card.tsx
index 1c9e46c..8325c78 100644
--- a/apps/sandbox/src/Card.tsx
+++ b/apps/sandbox/src/Card.tsx
@@ -2,6 +2,7 @@ import { css } from "hono/css";
 import type { FC } from "hono/jsx";
 
 const cardLayout = css`
+  user-select: none;
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid transparent;
@@ -26,7 +27,7 @@ const cardLayout = css`
 const labelClass = css`
   font-size: 24px;
   font-weight: 600;
-  margin-bottom: 0.75rem;
+  margin: 0 0 0.75rem;
   @media (prefers-color-scheme: dark) {
     color: white;
   }
@@ -34,6 +35,7 @@ const labelClass = css`
 
 const valueClass = css`
   font-size: 14px;
+  margin: 0;
   opacity: 0.5;
   @media (prefers-color-scheme: dark) {
     color: white;
@@ -45,8 +47,8 @@ export type Card = { label: string; value?: string | number };
 export const Card: FC<Card> = ({ label, value }: Card) => {
   return (
     <div class={cardLayout}>
-      <div class={labelClass}>{label}</div>
-      <div class={valueClass}>{value}</div>
+      <h2 class={labelClass}>{label}</h2>
+      <p class={valueClass}>{value}</p>
     </div>
   );
 };
diff --git a/apps/sandbox/src/Layout.tsx b/apps/sandbox/src/Layout.tsx
index f73cdb5..1789084 100644
--- a/apps/sandbox/src/Layout.tsx
+++ b/apps/sandbox/src/Layout.tsx
@@ -7,12 +7,14 @@ const globalClasses = css`
   font-weight: 400;
   font-style: normal;
   font-variation-settings: "slnt" 0;
-  background: linear-gradient(to bottom, transparent, rgb(255, 255, 255))
-    rgb(214, 219, 220);
+  background: linear-gradient(
+    to bottom,
+    rgb(214, 219, 220),
+    rgb(255, 255, 255)
+  );
   margin: 0;
   @media (prefers-color-scheme: dark) {
-    background: linear-gradient(to bottom, transparent, rgb(0, 0, 0))
-      rgb(0, 0, 0);
+    background: #000;
   }
 `;
 
diff --git a/apps/sandbox/src/Page.tsx b/apps/sandbox/src/Page.tsx
index a7ea044..8bd0fb9 100644
--- a/apps/sandbox/src/Page.tsx
+++ b/apps/sandbox/src/Page.tsx
@@ -6,6 +6,7 @@ import { Layout } from "./Layout";
 
 const checkOut = css`
   font-family: monospace;
+  user-select: none;
   padding: 1rem;
   border-radius: 0.75rem;
   border: 1px solid rgb(209 213 219);
@@ -16,7 +17,7 @@ const checkOut = css`
   @media (prefers-color-scheme: dark) {
     color: white;
     border: 1px solid rgb(38 38 38);
-    background-color: rgba(39, 39, 42, 0.3);
+    background-color: rgba(39, 39, 42, 0.4);
   }
 `;
 
@@ -61,6 +62,9 @@ const linkClass = css`
   @media (prefers-color-scheme: dark) {
     color: white;
   }
+  &:hover {
+    text-decoration-line: underline;
+  }
 `;
 
 export type Page = {
diff --git a/apps/sandbox/src/index.tsx b/apps/sandbox/src/index.tsx
index 6f99cd6..d2707cc 100644
--- a/apps/sandbox/src/index.tsx
+++ b/apps/sandbox/src/index.tsx
@@ -2,9 +2,9 @@ import { RedisStore } from "@hono-rate-limiter/redis";
 import { kv } from "@vercel/kv";
 import { Hono } from "hono";
 import {
+  rateLimiter,
   type Promisify,
   type RateLimitInfo,
-  rateLimiter,
 } from "hono-rate-limiter";
 import { Page } from "./Page";
 
@@ -29,5 +29,5 @@ app.get(
     }),
     handler: (_, next) => next(),
   }),
-  (c) => c.html(<Page info={c.get("rateLimit")} />),
+  (c) => c.html(<Page info={c.get("rateLimit")} />)
 );
diff --git a/package.json b/package.json
index 0ecc6ae..839fd68 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "nx run sandbox:serve --configuration=production",
     "commit": "czg",
     "prepare": "is-ci || husky install",
     "format": "biome check --apply ."