[cashtab] Header style edits
DraftPublic
Actions

Authored by johnkuney on Fri, Nov 15, 17:44.

Details

Reviewers

None

Group Reviewers

Restricted Project

Summary

I was finding the header a bit cluttered and maybe emphasizing the wrong information in some places
Here are some propsed design tweaks

move wallet select to top right and logo left
Make the hide balance button more subtle and next to balance
Remove the sticky header stuff and replace with more simple sticky header of the top bar

I realize we're losing the balance and hide balance in the sticky header with this, but I think its an okay loss as
1: most screens do not have large vertical space
2: Its not super critical info as your scrolling, most people have an idea of their balance at most times
3: I was finding the shifting UI distracting personally

Open to pushback here though or any other UI feedback

Test Plan

preview the site and check new header

Diff Detail

Repository

rABC Bitcoin ABC

Branch

cashtab-header-styles

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 31152
Build 61805: Build Diff	cashtab-tests
Build 61804: arc lint + arc unit

Event Timeline

johnkuney created this revision.Fri, Nov 15, 17:44

Herald added a reviewer: Restricted Project. · View Herald TranscriptFri, Nov 15, 17:44

Harbormaster completed remote builds in B31152: Diff 50872.Fri, Nov 15, 17:47

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> ecash-lib@0.2.1 build
> tsc && tsc -p ./tsconfig.build.json && cp -r ./src/ffi ./dist

Installing ecash-agora dependencies...
/work/modules/ecash-agora /work/modules/ecash-lib /work/modules/ecash-lib-wasm /work/modules/ecash-script /work/modules/chronik-client /work/modules/mock-chronik-client /work/modules/ecashaddrjs /work/abc-ci-builds/cashtab-tests

added 364 packages, and audited 367 packages in 1s

60 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> ecash-agora@0.1.1 build
> tsc && tsc -p ./tsconfig.build.json

/work/cashtab /work/modules/ecash-agora /work/modules/ecash-lib /work/modules/ecash-lib-wasm /work/modules/ecash-script /work/modules/chronik-client /work/modules/mock-chronik-client /work/modules/ecashaddrjs /work/abc-ci-builds/cashtab-tests

added 1483 packages, and audited 3329 packages in 24s

323 packages are looking for funding
  run `npm fund` for details

3 vulnerabilities (2 moderate, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> cashtab@2.53.7 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/App/App.js
  Line 5:27:  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars
  Line 85:8:  'debounce' is defined but never used   @typescript-eslint/no-unused-vars


Build cashtab-tests failed with exit code 1