hz/ranaze-pos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refresh POS branding around logo

Browse Source
This commit is contained in:
Zeeshaun
2026-05-05 18:33:47 +00:00
parent fe8cc83a20
commit 36a484bc3e
2 changed files with 158 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+46 -38
View File
@@ -8,6 +8,7 @@ import {
resetMenu, resetMenu,
updateOrderStatus updateOrderStatus
} from "./api.js"; } from "./api.js";
import logo from "../../assets/ranaze-logo.png";
const queueStatuses = ["new", "making", "ready"]; const queueStatuses = ["new", "making", "ready"];
const orderIdleTimeoutMs = 90_000; const orderIdleTimeoutMs = 90_000;
@@ -154,9 +155,17 @@ export default function App() {
return ( return (
<div className="app-shell"> <div className="app-shell">
<header className="topbar"> <header className="topbar">
<div> <div className="brand-lockup">
<p className="eyebrow">Self-hosted boba POS</p> <div className="brand-mark">
<h1>Ranaze</h1> <img src={logo} alt="Ranaze Bubble Tea & Slush" />
</div>
<div className="brand-copy">
<p className="eyebrow">Ranaze Bubble Tea & Slush</p>
<h1>Tablet POS</h1>
<p className="muted">
Fast ordering for house favorites, easy edits, and detailed custom drinks.
</p>
</div>
</div> </div>
<nav className="tabs"> <nav className="tabs">
{["order", "queue", "menu"].map((tab) => ( {["order", "queue", "menu"].map((tab) => (
@@ -217,21 +226,26 @@ export default function App() {
<div className="panel"> <div className="panel">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Step 1</p> <p className="eyebrow">{activeMode.stepLabel}</p>
<h2>Choose drinks</h2> <h2>Choose a drink</h2>
<p className="muted builder-intro">{activeMode.description}</p>
</div> </div>
<div className="chip-row"> <div className="builder-header-actions">
{categories.map((category) => ( <button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
<button <div className="ticket-total">{formatCurrency(ticketTotal(ticket, settings))}</div>
key={category}
className={`chip ${selectedCategory === category ? "is-active" : ""}`}
onClick={() => setSelectedCategory(category)}
>
{category}
</button>
))}
</div> </div>
</div> </div>
<div className="chip-row">
{categories.map((category) => (
<button
key={category}
className={`chip ${selectedCategory === category ? "is-active" : ""}`}
onClick={() => setSelectedCategory(category)}
>
{category}
</button>
))}
</div>
<div className="drink-grid"> <div className="drink-grid">
{visibleMenu.map((drink) => ( {visibleMenu.map((drink) => (
<button <button
@@ -249,25 +263,18 @@ export default function App() {
</button> </button>
))} ))}
</div> </div>
</div>
)}
{orderMode && (
<div className="panel">
<div className="panel-header">
<div>
<p className="eyebrow">Step 2 • {activeMode.stepLabel}</p>
<h2>{activeMode.title}</h2>
<p className="muted builder-intro">{activeMode.description}</p>
</div>
<div className="builder-header-actions">
<button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
<div className="ticket-total">{formatCurrency(ticketTotal(ticket, settings))}</div>
</div>
</div>
{selectedDrink && builder ? ( {selectedDrink && builder ? (
<> <div className="inline-builder">
<div className="inline-builder-header">
<div>
<p className="eyebrow">Selected drink</p>
<h3>{activeMode.title}</h3>
</div>
<div className="line-price">
{formatCurrency(lineTotal(selectedDrink, builder, settings))}
</div>
</div>
{orderMode !== "premade" && ( {orderMode !== "premade" && (
<OptionGroup <OptionGroup
label="Size" label="Size"
@@ -338,9 +345,6 @@ export default function App() {
</div> </div>
)} )}
<div className="builder-actions"> <div className="builder-actions">
<div className="line-price">
{formatCurrency(lineTotal(selectedDrink, builder, settings))}
</div>
<button <button
className="primary-btn" className="primary-btn"
onClick={() => { onClick={() => {
@@ -359,15 +363,19 @@ export default function App() {
{activeMode.buttonLabel} {activeMode.buttonLabel}
</button> </button>
</div> </div>
</> </div>
) : ( ) : (
<div className="empty-state">Add menu items to start taking orders.</div> <div className="empty-state">Add menu items to start taking orders.</div>
)} )}
</div>
)}
{orderMode && (
<div className="panel">
<section className="ticket"> <section className="ticket">
<div className="ticket-header"> <div className="ticket-header">
<div> <div>
<p className="eyebrow">Step 3</p> <p className="eyebrow">Current order</p>
<h3>Current ticket</h3> <h3>Current ticket</h3>
</div> </div>
<button className="text-btn" onClick={() => setTicket([])}>Clear</button> <button className="text-btn" onClick={() => setTicket([])}>Clear</button>
client/src/styles.css
+112 -39
View File
@@ -1,16 +1,17 @@
:root { :root {
--bg: #f3eadf; --bg: #f5eedf;
--panel: #fffaf2; --panel: rgba(255, 251, 244, 0.92);
--panel-strong: #f7efe3; --panel-strong: #f8ecda;
--ink: #1f2923; --ink: #171717;
--muted: #677168; --muted: #6f6657;
--accent: #2f5d50; --accent: #101010;
--accent-soft: #dbe8e2; --accent-soft: #f4ddae;
--warm: #c9784d; --warm: #f6b33e;
--line: #d9cfbf; --warm-deep: #dfa232;
--danger: #b1463a; --line: rgba(33, 28, 21, 0.12);
--shadow: 0 18px 40px rgba(59, 47, 34, 0.12); --danger: #aa4639;
font-family: "Trebuchet MS", "Avenir Next", sans-serif; --shadow: 0 20px 45px rgba(83, 61, 24, 0.12);
font-family: "Avenir Next", "Trebuchet MS", sans-serif;
} }
* { * {
@@ -21,8 +22,9 @@ body {
margin: 0; margin: 0;
color: var(--ink); color: var(--ink);
background: background:
radial-gradient(circle at top left, rgba(201, 120, 77, 0.18), transparent 28%), radial-gradient(circle at top left, rgba(246, 179, 62, 0.22), transparent 28%),
linear-gradient(180deg, #f9f3ea, #efe3d3 55%, #eadcc8); radial-gradient(circle at right center, rgba(244, 221, 174, 0.38), transparent 22%),
linear-gradient(180deg, #fbf6ee, #f3e7d4 52%, #eedcc1);
} }
button, button,
@@ -38,19 +40,20 @@ button {
.app-shell { .app-shell {
min-height: 100vh; min-height: 100vh;
padding: 1rem; padding: 1.25rem;
} }
.topbar { .topbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1.5rem;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1.25rem;
padding: 1rem 1.25rem; padding: 1.1rem 1.35rem;
border: 1px solid rgba(47, 93, 80, 0.15); border: 1px solid rgba(16, 16, 16, 0.08);
border-radius: 24px; border-radius: 30px;
background: rgba(255, 250, 242, 0.92); background:
linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(250, 239, 214, 0.94));
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@@ -61,11 +64,47 @@ button {
font-family: Georgia, "Times New Roman", serif; font-family: Georgia, "Times New Roman", serif;
} }
.brand-lockup {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.brand-mark {
width: 104px;
height: 104px;
flex: 0 0 auto;
border-radius: 28px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(16, 16, 16, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
display: grid;
place-items: center;
overflow: hidden;
}
.brand-mark img {
width: 100%;
height: 100%;
object-fit: cover;
}
.brand-copy {
display: grid;
gap: 0.2rem;
}
.brand-copy p:last-child {
margin: 0;
max-width: 30rem;
}
.eyebrow { .eyebrow {
margin: 0; margin: 0;
color: var(--muted); color: var(--muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.12em;
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
} }
@@ -112,10 +151,11 @@ button {
.panel, .panel,
.summary-card { .summary-card {
background: var(--panel); background: var(--panel);
border: 1px solid rgba(47, 93, 80, 0.1); border: 1px solid rgba(16, 16, 16, 0.08);
border-radius: 28px; border-radius: 28px;
padding: 1rem; padding: 1rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
backdrop-filter: blur(10px);
} }
.mode-launcher { .mode-launcher {
@@ -124,8 +164,8 @@ button {
gap: 1.25rem; gap: 1.25rem;
padding: 1.4rem; padding: 1.4rem;
background: background:
radial-gradient(circle at top right, rgba(47, 93, 80, 0.1), transparent 24%), radial-gradient(circle at top right, rgba(246, 179, 62, 0.17), transparent 24%),
linear-gradient(135deg, rgba(255, 250, 242, 0.96), rgba(247, 239, 227, 0.98)); linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(249, 235, 205, 0.98));
} }
.mode-launcher-copy { .mode-launcher-copy {
@@ -142,18 +182,18 @@ button {
display: grid; display: grid;
gap: 0.65rem; gap: 0.65rem;
padding: 1.25rem; padding: 1.25rem;
border: 1px solid rgba(47, 93, 80, 0.14); border: 1px solid rgba(16, 16, 16, 0.08);
border-radius: 24px; border-radius: 24px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
text-align: left; text-align: left;
box-shadow: 0 10px 24px rgba(59, 47, 34, 0.08); box-shadow: 0 12px 28px rgba(83, 61, 24, 0.08);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
} }
.mode-card:hover { .mode-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(47, 93, 80, 0.34); border-color: rgba(246, 179, 62, 0.5);
box-shadow: 0 16px 32px rgba(59, 47, 34, 0.12); box-shadow: 0 16px 32px rgba(83, 61, 24, 0.14);
} }
.mode-card h3, .mode-card h3,
@@ -189,7 +229,7 @@ button {
.status-btn { .status-btn {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 999px; border-radius: 999px;
background: #fff; background: rgba(255, 255, 255, 0.94);
color: var(--ink); color: var(--ink);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
@@ -198,7 +238,7 @@ button {
.choice-btn.is-active, .choice-btn.is-active,
.chip.is-active { .chip.is-active {
background: var(--accent); background: var(--accent);
color: #fff; color: #fff6e8;
border-color: var(--accent); border-color: var(--accent);
} }
@@ -210,9 +250,10 @@ button {
border: none; border: none;
border-radius: 18px; border-radius: 18px;
padding: 0.95rem 1.2rem; padding: 0.95rem 1.2rem;
background: var(--warm); background: linear-gradient(135deg, var(--warm), var(--warm-deep));
color: #fff; color: #1b1408;
font-weight: 700; font-weight: 700;
box-shadow: 0 12px 24px rgba(223, 162, 50, 0.28);
} }
.primary-btn:disabled { .primary-btn:disabled {
@@ -240,14 +281,16 @@ button {
.ticket-line { .ticket-line {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 22px; border-radius: 22px;
background: #fff; background: rgba(255, 255, 255, 0.92);
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
} }
.drink-card.is-selected { .drink-card.is-selected {
border-color: var(--accent); border-color: rgba(246, 179, 62, 0.7);
box-shadow: inset 0 0 0 2px rgba(47, 93, 80, 0.15); box-shadow:
inset 0 0 0 2px rgba(246, 179, 62, 0.2),
0 14px 28px rgba(223, 162, 50, 0.14);
} }
.muted { .muted {
@@ -274,7 +317,7 @@ button {
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 18px; border-radius: 18px;
background: #fff; background: rgba(255, 255, 255, 0.92);
} }
textarea, textarea,
@@ -284,7 +327,7 @@ select {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 16px; border-radius: 16px;
padding: 0.9rem 1rem; padding: 0.9rem 1rem;
background: #fffdf8; background: rgba(255, 253, 248, 0.96);
} }
.ticket { .ticket {
@@ -309,6 +352,21 @@ select {
max-width: 28rem; max-width: 28rem;
} }
.inline-builder {
display: grid;
gap: 1rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.inline-builder-header {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
}
.mode-note { .mode-note {
border: 1px dashed rgba(47, 93, 80, 0.16); border: 1px dashed rgba(47, 93, 80, 0.16);
} }
@@ -330,7 +388,7 @@ select {
.column-head { .column-head {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 18px; border-radius: 18px;
background: var(--accent-soft); background: linear-gradient(135deg, rgba(244, 221, 174, 0.9), rgba(255, 245, 225, 0.92));
} }
.status-btn.danger { .status-btn.danger {
@@ -367,11 +425,26 @@ select {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.topbar,
.brand-lockup {
align-items: flex-start;
flex-direction: column;
}
.brand-mark {
width: 88px;
height: 88px;
}
.order-toolbar { .order-toolbar {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.inline-builder-header {
flex-direction: column;
}
.tabs { .tabs {
width: 100%; width: 100%;
} }