@sensiblestats/widget-react 0.14.0 → 0.15.0

package/dist/styles.css

@@ -270,7 +270,8 @@
   min-width: 0;                      /* the panel is min(400px, 100vw - 40px): without this,
                                         a long Turkish title blows the column out */
 }
-.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ss-w-accent); font-size: 18px; }
+.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }
+.ss-w-dash-emoji { line-height: 1; }
 .ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
 .ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
 .ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
@@ -300,8 +301,56 @@
 .ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }
 .ss-w-dash--goal .ss-w-dash-tile { border-radius: 999px; padding: 10px 14px; }
 
-/* Discovery: tinted bento cards. */
+/* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets
+   the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow
+   column was wrapping "Most interesting angles" onto three lines. The chevron is dropped (the
+   whole card is the tap target) and the badge + crest row is forced onto one line. */
+.ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }
+.ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }
+.ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }
+/* The full-span trends tile has the whole panel width, so its icon and title sit on one row
+   (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */
+.ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }
+.ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }
+.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }
+.ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(1) { background: #eef8f1; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: #eef3fb; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: #fdf6ec; }
 .ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: #f5eefb; }
+
+/* club match-day dashboard */
+.ss-w-cdash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
+.ss-w-cdash-block { display: flex; flex-direction: column; }
+
+.ss-w-cdash-greeting { display: flex; flex-direction: column; gap: 2px; }
+.ss-w-cdash-greeting-title { font-weight: 700; font-size: 14px; color: var(--ss-w-ink); }
+.ss-w-cdash-greeting-subtitle { font-size: 11.5px; color: var(--ss-w-faint); }
+
+.ss-w-cdash-fixture { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 12px; text-align: center; }
+.ss-w-cdash-tie { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
+.ss-w-cdash-team { font-weight: 650; font-size: 13px; color: var(--ss-w-ink); min-width: 0; overflow-wrap: anywhere; }
+.ss-w-cdash-vs { font-size: 11px; color: var(--ss-w-faint); font-weight: 600; }
+.ss-w-cdash-crest { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--ss-w-bubble); }
+.ss-w-cdash-crest--fallback { display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }
+.ss-w-cdash-fixture-meta { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--ss-w-faint); }
+.ss-w-cdash-kickoff { font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-cdash-cta { font: inherit; font-weight: 700; font-size: 12px; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
+
+.ss-w-cdash-form { display: flex; flex-direction: column; gap: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; }
+.ss-w-cdash-form-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.ss-w-cdash-form-name { font-size: 12px; font-weight: 600; color: var(--ss-w-ink); min-width: 0; overflow-wrap: anywhere; }
+.ss-w-cdash-form-pills { flex: none; display: flex; align-items: center; gap: 3px; }
+.ss-w-cdash-pill { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 9.5px; font-weight: 700; color: #fff; }
+.ss-w-cdash-pill--w { background: color-mix(in srgb, var(--ss-w-pos) 88%, black); }
+.ss-w-cdash-pill--d { background: var(--ss-w-faint); }
+.ss-w-cdash-pill--l { background: color-mix(in srgb, var(--ss-w-neg) 88%, black); }
+
+.ss-w-cdash-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; }
+.ss-w-cdash-lines-heading { font-size: 12px; font-weight: 700; color: var(--ss-w-accent); }
+.ss-w-cdash-lines p { font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); }
+
+.ss-w-cdash-cd { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; text-align: center; }
+.ss-w-cdash-cd-clock { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; font-size: 18px; color: var(--ss-w-ink); }
+.ss-w-cdash-cd-h, .ss-w-cdash-cd-m, .ss-w-cdash-cd-s { color: var(--ss-w-accent); }
+.ss-w-cdash-cd-label { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Embeddable SensibleStats chat widget for React.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -37,7 +37,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@sensiblestats/widget-sdk": "^0.12.0",
+    "@sensiblestats/widget-sdk": "^0.13.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },