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