Add popover to indicate the current meal block period

src/components/BlockPeriods.css

@@ -0,0 +1,171 @@
+.block-periods__desktop {
+    position: relative;
+    font-family: inherit;
+    color: var(--input-text);
+}
+
+@media screen and (min-width: 900px) {
+    .block-periods__desktop-summary {
+        cursor: pointer;
+        display: block;
+        min-width: 500px;
+        display: flex;
+        align-items: baseline;
+        width: fit-content;
+        gap: 6px;
+        padding: 13px 14px;
+        border-radius: 16px;
+        background: var(--input-bg) url(../assets/control_button/expand_arrow.svg) no-repeat calc(100% - 17px);
+        outline: none;
+        border: 1px solid transparent;
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
+        transition: all 0.2s;
+        font-family: inherit;
+        font-size: 16px;
+        color: var(--input-text);
+        font-weight: 500;
+        animation: slide-in 1.2s forwards;
+        animation-timing-function: cubic-bezier(0.04, 0.34, 0.5, 1.02);
+        animation-delay: 0.1s;
+        opacity: 0;
+    }
+
+    .block-periods__desktop-summary:hover {
+        transition: all 0.5s;
+        box-shadow: 0 0 40px var(--hover-accent-color);
+        border-color: var(--hover-accent-color);
+    }
+
+    .block-periods__mobile {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 899px) {
+    .block-periods__desktop-summary {
+        display: none;
+    }
+
+    .block-periods__mobile {
+        width: 100%;
+    }
+
+    .block-periods__mobile-top-rule,
+    .block-periods__mobile-bottom-rule {
+        height: 1px;
+        background-color: #4b5563;
+        width: 100%;
+    }
+
+    .block-periods__mobile-summary {
+        margin: 8px 0;
+        padding: 0;
+        border: none;
+        background: none;
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+        width: 100%;
+        text-align: left;
+        color: #e5e7eb;
+        background: url(../assets/control_button/expand_arrow.svg) no-repeat calc(100% - 17px);
+    }
+}
+
+.block-periods__label {
+    color: #d1d5db;
+}
+
+.block-periods__period {
+    font-weight: 600;
+}
+
+.block-periods__range {
+    color: #9ca3af;
+}
+
+.block-periods__desktop-summary .block-periods__range {
+    font-size: 14px;
+}
+
+.block-periods__popup {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    min-width: 500px;
+    padding: 13px 14px;
+    border-radius: 16px;
+    background: var(--input-bg);
+    border: 1px solid var(--hover-accent-color);
+    box-shadow: 0 0 20px var(--hover-accent-color);
+    font-size: 15px;
+    color: var(--input-text);
+}
+
+.block-periods__popup .block-periods__range {
+    font-size: 14px;
+}
+
+@media screen and (max-width: 899px) {
+    .block-periods__popup .block-periods__range {
+        display: block;
+    }
+}
+
+@media screen and (max-width: 899px) {
+    .block-periods__popup {
+        position: absolute;
+        width: 90%;
+        min-width: 0;
+        max-width: none;
+    }
+}
+
+.block-periods__popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 10px;
+}
+
+.block-periods__popup-title {
+    font-size: 17px;
+}
+
+.block-periods__popup-close {
+    border: none;
+    background: none;
+    color: #9ca3af;
+    font-size: 19px;
+    line-height: 1;
+    padding: 2px;
+    cursor: pointer;
+}
+
+.block-periods__popup-list {
+    border-top: 1px solid #4b5563;
+    border-bottom: none;
+    padding: 10px 0;
+    font-variant-numeric: tabular-nums;
+}
+
+.block-periods__row {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 0;
+}
+
+.block-periods__row-label {
+    color: #e5e7eb;
+}
+
+.block-periods__row-time {
+    color: #d1d5db;
+    white-space: nowrap;
+}
+
+.block-periods__row--active .block-periods__row-label,
+.block-periods__row--active .block-periods__row-time {
+    font-weight: 700;
+}

src/components/BlockPeriods.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import './BlockPeriods.css';
+import x from '../assets/control_button/x.svg';
+
+function getBlockPeriodsWithTimes(): { period: string; timeRange: string }[] {
+    return [
+        { period: 'Breakfast', timeRange: '03:30 AM - 10:29 AM' },
+        { period: 'Lunch', timeRange: '10:30 AM - 04:29 PM' },
+        { period: 'Dinner', timeRange: '04:30 PM - 08:59 PM' },
+        { period: 'Late Night', timeRange: '09:00 PM - 03:29 AM' },
+    ];
+}
+
+function getBlockPeriod(): string {
+    const now = new Date();
+    const pittsburghTime = new Date(now.toLocaleString('en-US', { timeZone: 'America/New_York' }));
+    const seconds = pittsburghTime.getHours() * 3600 + pittsburghTime.getMinutes() * 60 + pittsburghTime.getSeconds();
+
+    const breakfastStart = 3 * 3600 + 30 * 60;
+    const lunchStart = 10 * 3600 + 30 * 60;
+    const dinnerStart = 16 * 3600 + 30 * 60;
+    const lateNightStart = 21 * 3600;
+
+    if (seconds >= breakfastStart && seconds < lunchStart) {
+        return 'Breakfast';
+    }
+    if (seconds >= lunchStart && seconds < dinnerStart) {
+        return 'Lunch';
+    }
+    if (seconds >= dinnerStart && seconds < lateNightStart) {
+        return 'Dinner';
+    }
+    return 'Late Night';
+}
+
+export function BlockPeriods() {
+    const [isPopupVisible, setPopupVisible] = useState(false);
+
+    const blockPeriods = getBlockPeriodsWithTimes();
+    const currentPeriod = getBlockPeriod();
+    const currentRange = blockPeriods.find((p) => p.period === currentPeriod)?.timeRange;
+
+    return (
+        <div className="block-periods__desktop">
+            <button type="button" className="block-periods__desktop-summary" onClick={() => setPopupVisible((v) => !v)}>
+                <span className="block-periods__label">Block Period:</span>
+                <span className="block-periods__period">{currentPeriod}</span>
+                <span className="block-periods__range">({currentRange})</span>
+            </button>
+
+            <div className="block-periods__mobile">
+                <div className="block-periods__mobile-top-rule" />
+                <button
+                    type="button"
+                    className="block-periods__mobile-summary"
+                    onClick={() => setPopupVisible((v) => !v)}
+                >
+                    <span className="block-periods__label">Block period:</span>
+                    <span className="block-periods__period">{currentPeriod}</span>
+                </button>
+                <div className="block-periods__mobile-bottom-rule" />
+            </div>
+
+            {isPopupVisible && (
+                <div className="block-periods__popup">
+                    <div className="block-periods__popup-header">
+                        <div className="block-periods__popup-title">
+                            Block Period: <span className="block-periods__period">{currentPeriod}</span>
+                            <span className="block-periods__range"> ({currentRange})</span>
+                        </div>
+                        <button
+                            type="button"
+                            className="block-periods__popup-close"
+                            onClick={() => setPopupVisible(false)}
+                        >
+                            <img src={x} alt="close icon" />
+                        </button>
+                    </div>
+
+                    <div className="block-periods__popup-list">
+                        {blockPeriods.map(({ period, timeRange }) => (
+                            <div
+                                key={period}
+                                className={
+                                    'block-periods__row' +
+                                    (period === currentPeriod ? ' block-periods__row--active' : '')
+                                }
+                            >
+                                <span className="block-periods__row-label">{period}</span>
+                                <span className="block-periods__row-time">{timeRange}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/components/SelectLocation.css

@@ -2,8 +2,9 @@
     appearance: none;
     cursor: pointer;
     display: block;
-    min-width: 500px;
-    width: fit-content;
+    min-width: 0;
+    max-width: 100%;
+    width: 100%;
 
     padding: 0.8rem 0.9rem;
     border-radius: 1rem;

src/pages/ListPage.css

@@ -30,6 +30,51 @@
     position: relative;
 }
 
+@media screen and (min-width: 900px) {
+    .Locations-header {
+        grid-template-columns: 1fr auto auto;
+        align-items: center;
+    }
+
+    .Locations-header__greeting-container {
+        order: 0;
+    }
+
+    .Locations-header__search {
+        order: 1;
+    }
+
+    .Locations-header__block-periods {
+        order: 2;
+    }
+
+    .Locations-header__filter {
+        order: 3;
+    }
+}
+
+@media screen and (max-width: 899px) {
+    .Locations-header {
+        grid-template-columns: 1fr;
+    }
+
+    .Locations-header__greeting-container {
+        order: 0;
+    }
+
+    .Locations-header__search {
+        order: 2;
+    }
+
+    .Locations-header__block-periods {
+        order: 1;
+    }
+
+    .Locations-header__filter {
+        order: 3;
+    }
+}
+
 .Locations-header__miku-toggle {
     position: absolute;
     top: -290px;
@@ -67,7 +112,6 @@
 }
 
 @keyframes sway {
-
     0%,
     100% {
         transform: rotate(1deg);
@@ -121,10 +165,12 @@
     animation-delay: 0.1s;
     opacity: 0;
 
-    mask-image: linear-gradient(to right,
-            rgba(0, 0, 0, 1) 0%,
-            rgba(0, 0, 0, 1) var(--right-cutoff),
-            rgba(0, 0, 0, 0) calc(var(--right-cutoff) + 10%));
+    mask-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 1) 0%,
+        rgba(0, 0, 0, 1) var(--right-cutoff),
+        rgba(0, 0, 0, 0) calc(var(--right-cutoff) + 10%)
+    );
 
     &.Locations-header__greeting--mobile {
         font-size: 2rem;
@@ -287,4 +333,4 @@
     animation:
         fade-in 1s cubic-bezier(0.08, 0.67, 0.64, 1.01) 1s forwards,
         oscillate-opacity 2s ease-in-out var(--oscillate-delay) infinite;
-}
+}