From 36a484bc3ef0ba2a8bb14f420b02f888fe89b9b7 Mon Sep 17 00:00:00 2001
From: Zeeshaun <zeeshaunmasood@landmarkcu.com>
Date: Tue, 5 May 2026 18:33:47 +0000
Subject: [PATCH] Refresh POS branding around logo

---
 client/src/App.jsx    |  84 ++++++++++++-----------
 client/src/styles.css | 151 +++++++++++++++++++++++++++++++-----------
 2 files changed, 158 insertions(+), 77 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index be0b03f..563ceec 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -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>
diff --git a/client/src/styles.css b/client/src/styles.css
index 3e6b7ab..1b21167 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -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%;
   }