Update CBS Mobile App codebase
This commit is contained in:
Abin Toppo
@@ -0,0 +1,198 @@
|
||||
# Stitch prompt — Login screen
|
||||
|
||||
Paste the block below into Stitch. It is self-contained: use it on its own, or
|
||||
after the system prompt in [STITCH_PROMPT.md](STITCH_PROMPT.md) — if you have
|
||||
already run that one, Stitch will reuse those tokens and you can delete the
|
||||
CONSTRAINTS section here.
|
||||
|
||||
**No progress indicator.** Stated three times in the prompt, because Stitch adds
|
||||
step dots to auth screens unprompted.
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
Design the sign-in screen for BankCBS, an Indian mobile banking app built in
|
||||
React Native. One screen, but it has six distinct states — I need all of them.
|
||||
|
||||
── CRITICAL: WHAT NOT TO ADD ────────────────────────────────────────────────
|
||||
NO progress indicator. No step dots, no "Step 1 of 3", no numbered circles, no
|
||||
segmented progress bar, no breadcrumb. Signing in is a single screen, not a
|
||||
flow, and any progress ornament on it is wrong. Do not add one anywhere.
|
||||
|
||||
Also do not add: a "Forgot MPIN" link (there is deliberately no reset flow —
|
||||
see the copy below), a social sign-in row, a "Remember me" checkbox for the
|
||||
password, a carousel of marketing slides, or a language switcher.
|
||||
|
||||
── HOW SIGNING IN ACTUALLY WORKS ────────────────────────────────────────────
|
||||
There is no password. A customer registers a device once, sets a 4-digit MPIN,
|
||||
and from then on signs in with that MPIN — or with the phone's fingerprint or
|
||||
face unlock, if they turned it on. The profile is bound to the handset, so a
|
||||
returning customer does not retype their mobile number.
|
||||
|
||||
Two audiences share this screen, chosen by a tab at the top:
|
||||
- CUSTOMER — a retail bank customer. Calm, trustworthy, premium.
|
||||
- AGENT — a bank field-collection employee who visits customers door to door.
|
||||
Same visual family, but this person is standing in daylight working fast.
|
||||
|
||||
── BRAND ────────────────────────────────────────────────────────────────────
|
||||
Primary brand navy #124577 is locked — it is the bank's identity. Use it for
|
||||
the primary button, active states and brand moments. You choose everything
|
||||
else: accent colour, semantic colours, the neutral ramp, spacing, radii,
|
||||
elevation. The current screen is flat white cards on light grey with no
|
||||
hierarchy; make it look like a bank someone trusts with their salary.
|
||||
|
||||
App name: BankCBS. Mark: a shield with a tick inside (Ionicons
|
||||
"shield-checkmark"). There is no logo file — design the mark from the icon.
|
||||
|
||||
── THE SIX STATES, ALL REQUIRED ─────────────────────────────────────────────
|
||||
|
||||
STATE 1 — RETURNING CUSTOMER (the common case, design this first)
|
||||
The device already knows who this is, so there is no mobile-number field.
|
||||
- An identity card showing: a circular avatar with the customer's first
|
||||
initial, their full name ("Priya Sharma"), their masked mobile
|
||||
("••••••3210"), and a small green verified shield at the trailing edge.
|
||||
- Below it, a 4-box MPIN entry. Digits are always obscured. Boxes fill left to
|
||||
right, and the box being typed into is visibly focused.
|
||||
- Primary full-width button: "Sign In".
|
||||
- A divider reading "OR SIGN IN WITH", then a single circular 64pt fingerprint
|
||||
button (Ionicons "finger-print-outline") with the caption "Use Biometrics".
|
||||
Divider and button appear or disappear together.
|
||||
- Footer, small: "Not you? Register" — Register is the tappable part.
|
||||
- Static note, not a link: "Forgot your MPIN? Visit your branch to have it
|
||||
reset." There is deliberately no in-app reset. Design this so it reads as
|
||||
helpful information rather than a dead end.
|
||||
|
||||
STATE 2 — NEW DEVICE / AGENT
|
||||
No stored profile, so the full form shows.
|
||||
- Field: "REGISTERED MOBILE NUMBER" — an uppercase label above the input, a
|
||||
"+91" prefix inside the field separated by a thin vertical rule, then 10
|
||||
digits displayed as "98765 43210". A tick appears at the trailing edge once
|
||||
10 digits are in.
|
||||
- Then the same 4-box MPIN entry, "Sign In" button, and footer.
|
||||
- Footer copy here is "New to BankCBS? Register".
|
||||
|
||||
STATE 3 — ROLE TABS
|
||||
Two tabs above the card: "Customer" and "Agent". The active tab is filled with
|
||||
the brand navy and connects visually to the card below it, as though the card
|
||||
and tab are one continuous surface — the inactive tab is not. Show both
|
||||
positions. Also show the screen with the tab strip absent entirely, because
|
||||
when only one role is available it is not rendered at all.
|
||||
|
||||
STATE 4 — LOADING
|
||||
- The whole screen while the app is still reading the stored profile: a
|
||||
centred spinner, no form. This is the first thing shown on a cold start, so
|
||||
it must not look broken.
|
||||
- The "Sign In" button mid-request: a spinner in place of the label, button
|
||||
disabled, fields locked.
|
||||
|
||||
STATE 5 — ERRORS
|
||||
- Wrong MPIN: the MPIN boxes clear and show an error treatment, plus a toast
|
||||
at the top of the screen titled "Sign-in failed" with the body "Check your
|
||||
mobile number and MPIN, then try again."
|
||||
- Invalid mobile number, inline under the field: "Enter the 10-digit number
|
||||
registered with your bank".
|
||||
- An information toast: "Biometric sign-in cancelled — you can sign in with
|
||||
your MPIN instead."
|
||||
Design the toast: it appears at the top, over content, and has success, error
|
||||
and information variants.
|
||||
|
||||
STATE 6 — MPIN LOCKED (a separate full screen)
|
||||
Too many wrong attempts. There is no way out inside the app, and the design
|
||||
must be honest about that without feeling punitive.
|
||||
- Heading: "MPIN locked"
|
||||
- Sub: "Too many incorrect attempts"
|
||||
- Body explaining the MPIN can only be reset at a branch.
|
||||
- Two buttons: "Contact support" (secondary) and "Back to sign in" (ghost).
|
||||
|
||||
── ONE MORE ELEMENT ─────────────────────────────────────────────────────────
|
||||
On the customer tab, when the phone supports biometrics but the customer has
|
||||
not enabled them yet, a row appears above the button: the label "Enable
|
||||
biometric sign-in next time" and a switch. Show it on and off.
|
||||
|
||||
── HARD TECHNICAL CONSTRAINTS (React Native, not a browser) ─────────────────
|
||||
Anything here is unbuildable and must not appear in the design:
|
||||
- No blur, frosted glass or backdrop filter. No blur library is installed.
|
||||
Translucent surfaces must be flat low-opacity fills.
|
||||
- No CSS grid — flexbox only. No pseudo-elements (::before / ::after); every
|
||||
visible thing must be a real element.
|
||||
- No text gradients. No radial, conic or mesh gradients — linear only, two or
|
||||
three stops.
|
||||
- One outer shadow per element, maximum. No inner shadows, no stacked shadows,
|
||||
no coloured glows. Android ignores shadow colour and offset entirely, so do
|
||||
not build depth from soft coloured shadows — use borders, surface-tone steps
|
||||
and spacing.
|
||||
- No blend modes, filters, clip paths or opacity masks. No position: sticky.
|
||||
|
||||
FONT: Nunito, and only weights 400, 600, 700 and 800 exist as real files. There
|
||||
is no 300, no 500, no 900 — Android does not synthesise missing weights, it
|
||||
falls back and renders wrong. Every text style must use one of those four.
|
||||
|
||||
LAYOUT: 360–412pt viewport, mid-range Android is the common case. Translucent
|
||||
status bar with content passing under it — tell me whether your header needs
|
||||
light or dark status-bar icons. The MPIN and mobile fields must remain visible
|
||||
with the keyboard open, and the primary button should sit above the keyboard
|
||||
rather than at the end of a scroll. Minimum touch target 44x44pt. Light theme
|
||||
only.
|
||||
|
||||
ACCESSIBILITY: body text at WCAG AA 4.5:1 or better — give me the ratio for
|
||||
each text-on-surface pairing. Never encode meaning in colour alone. The layout
|
||||
must survive the system font scaling up 130%.
|
||||
|
||||
Icons come from Ionicons. Name the exact icons you use (shield-checkmark,
|
||||
finger-print-outline, call-outline, chevron-back, and so on) and say whether
|
||||
you mean the filled or outline variant.
|
||||
|
||||
── DO NOT MAKE IT LOOK AI-GENERATED ─────────────────────────────────────────
|
||||
Avoid: purple-to-blue gradient heroes; frosted cards floating over blurred
|
||||
colour blobs; one corner radius and one shadow stamped on every element, which
|
||||
flattens all hierarchy; emoji as icons; a full-height centred hero that pushes
|
||||
the form off screen; and dead vertical space with the button stranded at the
|
||||
bottom. Spend the visual weight on the identity card and the MPIN entry, and
|
||||
keep everything else quiet.
|
||||
|
||||
── DELIVER ──────────────────────────────────────────────────────────────────
|
||||
1. All six states as separate frames.
|
||||
2. A token table: every colour as a hex with a semantic name, every spacing
|
||||
step, radius and shadow as a number.
|
||||
3. The type scale used: name, px size, weight (400/600/700/800 only), line
|
||||
height, letter spacing.
|
||||
4. Contrast ratios for each text-on-surface pairing.
|
||||
5. Annotations on the frames giving the padding, height, radius and border
|
||||
width of the identity card, the MPIN boxes, the input, the tabs and the
|
||||
button.
|
||||
6. Anything you had to substitute because of the constraints above, and what
|
||||
you used instead.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## What to send back
|
||||
|
||||
The token table and type scale **as text** if you can — those become
|
||||
`src/theme/tokens.ts` directly and exact values matter more than any image.
|
||||
Then the six frames, and Stitch's exported code if you have it.
|
||||
|
||||
When the code arrives I will flag what cannot cross over. Stitch reaches for
|
||||
`backdrop-filter`, multi-layer `box-shadow`, `background-clip: text`,
|
||||
`display: grid` and `::before` decoration, none of which have a React Native
|
||||
equivalent — I will tell you what I substituted rather than quietly approximating.
|
||||
|
||||
## Two details in the current build worth knowing
|
||||
|
||||
- The active role tab is drawn as an **SVG path with a notched, angled right
|
||||
edge**, hard-coded to `#143e6c` in
|
||||
[LoginRoleTabs.tsx](src/modules/auth/components/LoginRoleTabs.tsx) — slightly
|
||||
off the brand navy. The prompt describes the intent (tab fused to the card)
|
||||
rather than that shape, so Stitch is free to propose something better. If it
|
||||
does, that file needs the new geometry and the literal replaced with a token.
|
||||
- `AppHeader`'s subtitle is commented out app-wide, so `ScreenShell`'s
|
||||
`subtitle` prop renders nothing. LoginScreen sidesteps this by passing no
|
||||
title at all and drawing its own hero. Whatever Stitch returns, the heading
|
||||
has to live in the screen body — or that component needs fixing first.
|
||||
|
||||
## One thing to confirm
|
||||
|
||||
You said you do not want the progress indicator. The Login screen never had
|
||||
one — the three-segment bar is on the **Register** screen I built earlier
|
||||
([RegistrationSteps.tsx](src/modules/auth/components/RegistrationSteps.tsx)).
|
||||
Say the word and I will pull it off Register too; it is a two-line change.
|
||||
Reference in New Issue
Block a user