NavBar Icons Update
This commit is contained in:
@@ -21,7 +21,7 @@ export default function RootLayout({
|
||||
alt="Drink Happy Logo Image"
|
||||
width={500}
|
||||
height={500}
|
||||
className="w-100 h-auto mx-auto w-1/2"
|
||||
className="h-auto mx-auto w-1/2"
|
||||
/>
|
||||
{children}
|
||||
{ isMobile && isSafari ? (
|
||||
|
||||
@@ -20,29 +20,31 @@ export default function InfoPage() {
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The recommended daily fluid intake is approximately 2.7 liters for
|
||||
women and 3.7 liters for men. This app suggest at least 100oz per day!
|
||||
women and 3.7 liters for men. This app suggest at least 100oz per
|
||||
day!
|
||||
</li>
|
||||
<li>Water contains no calories, sugar, or caffeine.</li>
|
||||
<li>
|
||||
Helps with focus, digestion, and temperature regulation.
|
||||
</li>
|
||||
<li>Helps with focus, digestion, and temperature regulation.</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Carry a refillable water bottle to stay hydrated. Drinking water will earn you the most points!
|
||||
Carry a refillable water bottle to stay hydrated. Drinking water will
|
||||
earn you the most points!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="bg-[color:var(--color-success-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-200)]">
|
||||
Caffeine
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The maximum recommended daily caffeine intake for most healthy adults is 400 mg.
|
||||
The maximum recommended daily caffeine intake for most healthy
|
||||
adults is 400 mg.
|
||||
</li>
|
||||
<li>
|
||||
Excessive caffeine consumption can cause elevated heart rate,
|
||||
insomnia, anxiety, and headaches.
|
||||
</li>
|
||||
<li>Excessive caffeine consumption can cause elevated heart rate, insomnia, anxiety, and headaches.</li>
|
||||
<li>
|
||||
Caffeine content in common drinks:
|
||||
<ul className="list-disc pl-5 mt-1 space-y-1">
|
||||
@@ -54,22 +56,27 @@ export default function InfoPage() {
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-700)] mt-1">
|
||||
Exceeding the 400 mg daily limit will result in no points awarded for additional caffeinated drinks that day!
|
||||
Exceeding the 400 mg daily limit will result in no points awarded for
|
||||
additional caffeinated drinks that day!
|
||||
</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)]">
|
||||
Added Sugar Drinks
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The American Heart Association recommends limiting added sugar intake to 25 grams per day for women and 36 grams per day for men
|
||||
The American Heart Association recommends limiting added sugar
|
||||
intake to 25 grams per day for women and 36 grams per day for men
|
||||
</li>
|
||||
<li>High sugar intake is associated with increased risk of obesity, diabetes, and heart disease!</li>
|
||||
<li>
|
||||
Added sugar is commonly found in sodas, energy drinks, sweetened teas, and flavored waters.
|
||||
High sugar intake is associated with increased risk of obesity,
|
||||
diabetes, and heart disease!
|
||||
</li>
|
||||
<li>
|
||||
Added sugar is commonly found in sodas, energy drinks, sweetened
|
||||
teas, and flavored waters.
|
||||
</li>
|
||||
<li>
|
||||
Sugar content in common drinks:
|
||||
@@ -82,48 +89,53 @@ export default function InfoPage() {
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Surpassing the daily sugar limit will result in zero points awarded for any further drink entries for that day!
|
||||
Surpassing the daily sugar limit will result in zero points awarded
|
||||
for any further drink entries for that day!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="bg-[color:var(--color-success-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)]">
|
||||
Juice and Flavored Drinks
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
100% fruit juice contains essential vitamins but also high amounts of natural sugar and lacks dietary fiber.
|
||||
100% fruit juice contains essential vitamins but also high amounts
|
||||
of natural sugar and lacks dietary fiber.
|
||||
</li>
|
||||
<li>Many flavored drinks marketed as “healthy” contain significant added sugar.</li>
|
||||
<li>
|
||||
Look for “unsweetened” or “no added sugar” labels to minimize sugar intake! Whole fruits are preferable over fruit juice!
|
||||
|
||||
Many flavored drinks marketed as “healthy” contain significant added
|
||||
sugar.
|
||||
</li>
|
||||
<li>
|
||||
Look for “unsweetened” or “no added sugar” labels to minimize sugar
|
||||
intake! Whole fruits are preferable over fruit juice!
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-700)] mt-1">
|
||||
These drinks still count to the daily sugar intake but you’ll earn more points with juice than most other drinks!
|
||||
These drinks still count to the daily sugar intake but you’ll earn
|
||||
more points with juice than most other drinks!
|
||||
</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)]">
|
||||
Milk and Milk Alternatives
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
Dairy and fortified plant-based milks (such as almond, soy, or oat) provide calcium, vitamin D, and protein!
|
||||
Dairy and fortified plant-based milks (such as almond, soy, or oat)
|
||||
provide calcium, vitamin D, and protein!
|
||||
</li>
|
||||
<li>Choose unsweetened, low-fat, or fat-free options!</li>
|
||||
<li>
|
||||
Flavored varieties (ex. chocolate or vanilla) often contain added sugars and should be consumed in moderation.
|
||||
Flavored varieties (ex. chocolate or vanilla) often contain added
|
||||
sugars and should be consumed in moderation.
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Unsweetened/regular milk or milk alternatives can allow you to gain more points!
|
||||
Unsweetened/regular milk or milk alternatives can allow you to gain
|
||||
more points!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,8 +3,9 @@
|
||||
import React from "react";
|
||||
import { Navigation } from "@skeletonlabs/skeleton-react";
|
||||
import {
|
||||
Home as IconHome,
|
||||
Folder as IconFolder,
|
||||
Image as IconImage,
|
||||
BookText as BookImage,
|
||||
Music as IconMusic,
|
||||
Video as IconVideo,
|
||||
} from "lucide-react";
|
||||
@@ -15,17 +16,11 @@ const Footer = () => {
|
||||
return (
|
||||
<div className="p-4 flex flex-col items-center gap-4 bg-surface-900">
|
||||
<Navigation.Bar className="flex justify-around w-full">
|
||||
<Navigation.Tile label="Files" href="#/files" className="flex flex-col items-center">
|
||||
<IconFolder />
|
||||
<Navigation.Tile label="Home" href="/" className="flex flex-col items-center">
|
||||
<IconHome />
|
||||
</Navigation.Tile>
|
||||
<Navigation.Tile label="Images" href="#/images" className="flex flex-col items-center">
|
||||
<IconImage />
|
||||
</Navigation.Tile>
|
||||
<Navigation.Tile label="Music" href="#/music" className="flex flex-col items-center">
|
||||
<IconMusic />
|
||||
</Navigation.Tile>
|
||||
<Navigation.Tile label="Videos" href="#/videos" className="flex flex-col items-center">
|
||||
<IconVideo />
|
||||
<Navigation.Tile label="Info" href="/info" className="flex flex-col items-center">
|
||||
<BookImage />
|
||||
</Navigation.Tile>
|
||||
</Navigation.Bar>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user