boxes and buttons

This commit is contained in:
sameeranageshwar
2025-04-13 01:05:30 -04:00
parent 3af9ad2acc
commit b7ce205898
3 changed files with 31 additions and 27 deletions

View File

@@ -6,6 +6,7 @@ const InfoContent = () => {
return (
<div>
<div className="bg-[color:var(--color-success-600)]/60 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
<h1 className="text-3xl dark:text-3xl font-bold mb-4">
Beverage Consumption Info!
</h1>
@@ -15,6 +16,7 @@ const InfoContent = () => {
overall health. Below are basic guidelines based on established public
health recommendations.
</p>
</div>
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">

View File

@@ -57,6 +57,7 @@ const PointGuide = () => {
return (
<div>
<div className="bg-[color:var(--color-success-600)]/60 backdrop-blur-md rounded-xl px-6 py-5 my-6 shadow-sm">
<h1 className="text-2xl sm:text-3xl font-bold mb-4 text-white">
Points Guide
</h1>
@@ -64,18 +65,19 @@ const PointGuide = () => {
Learn how many points you receive for each drink!
</p>
<ul>
<span className="text-base sm:text-lg">Game Points System:</span>
<ul className="list-disc pl-5 mt-1 space-y-1 text-sm sm:text-base">
<li> +150 points for drinking 100 oz of water </li>
<li> +100 points for keeping caffeine &lt; 200 mg </li>
<li> +150 points for staying under the sugar cap all day </li>
<div>
<span className="text-base sm:text-lg text-white">Game Points System:</span>
<ul className="list-disc pl-5 mt-1 space-y-1 text-sm sm:text-base text-white">
<li>+150 points for drinking 100 oz of water</li>
<li>+100 points for keeping caffeine &lt; 200 mg</li>
<li>+150 points for staying under the sugar cap all day</li>
<li>
Exceeding 400mg caffeine limit or 30.5g sugar limit = 0 pts logged for
those drinks
</li>
</ul>
</ul>
</div>
</div>
<div className="bg-surface-700 rounded-xl px-4 py-4 my-6 shadow-sm">
<div className="overflow-x-auto rounded-xl scroll-auto">

View File

@@ -14,8 +14,8 @@ export default function InfoPage() {
<button
className={`px-4 py-2 rounded ${
activeComponent === "info"
? "bg-primary-500 text-white"
: "bg-secondary-700 text-gray-300"
? "bg-success-500 text-white"
: "bg-surface-700 text-gray-300"
}`}
onClick={() => setActiveComponent("info")}
>
@@ -24,8 +24,8 @@ export default function InfoPage() {
<button
className={`px-4 py-2 rounded ${
activeComponent === "points"
? "bg-primary-500 text-white"
: "bg-secondary-700 text-gray-300"
? "bg-success-500 text-white"
: "bg-surface-700 text-gray-300"
}`}
onClick={() => setActiveComponent("points")}
>