lightning-browser-extension
lightning-browser-extension copied to clipboard
UI: update tab-style
Feature description
Update tabs-style

If you start working on this please coordinate with @dvoroneca regarding which styling is preffered or i.e. easiest to implement.
We also need to consider dark-mode.
Describe the solution
We currently use the default tabs with an minimal adjusted style-set: https://headlessui.com/react/tabs
We only use the tabs here currently:
- dark-mode:
https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/screens/Home/index.tsx/#L396-L445
- light-mode:

(If #1560 is done we will use tabs in two file screens)
Describe alternatives
A clear and concise description of any alternative solutions or features you've considered
Additional context
- This is a follow-up to #1560
- If #1560 is done, we should also move Tabs in their own component to make it more reusable (like we already do with other components). This can be done in this or in a new issue.
is this issue still open? If so I would like to be assigned! @escapedcat
@Nasimmhn yes! Thanks! Let us know if you need any support or get stuck.
Hey @Nasimmhn you need any support? Did you already start?
@Nasimmhn unassining you here to give other people a chance. I guess you're busy with other things. No worries.
Hello @escapedcat, is this issue still open? If yes, can you please assign it to me?
@whyprax you got it. Let ue know if you have any issues or get stuck.
Hey @escapedcat, I need your help in setting up the project.
I have followed these steps : Ensure you have
[Node.js](https://nodejs.org/) v14 [14.20.1] installed (We only support v14 currently)
[Yarn](https://yarnpkg.com/) v1 or v2 installed
Suppported but not required
[nodenv](https://github.com/nodenv/nodenv)
[nvm](https://github.com/nvm-sh/nvm#intro)
Then run the following
Install dependencies
yarn install
Start the development server for the extension
yarn run dev:chrome
yarn run dev:firefox
yarn run dev:opera
But, I'm still not able to set it up running.
This is the error I'm getting:
yarn run v1.22.19
$ cross-env NODE_ENV=development TARGET_BROWSER=firefox webpack --watch
wext-manifest-webpack-plugin: removed js/manifest.bundle.js
(node:27328) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:27328) [DEP_WEBPACK_CHUNK_ENTRY_MODULE] DeprecationWarning: Chunk.entryModule: Use new ChunkGraph API
(node:27328) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: chunk.files was changed from Array to Set (using Array method 'filter' is deprecated)
2022-11-08 21:51:39: webpack compiled (568341dc2db6b84dd3b8)
This looks good.
2022-11-08 21:51:39: webpack compiled (568341dc2db6b84dd3b8)
This indicates it was build successfully. You should be able to import it into your browser, like described here: https://github.com/getAlby/lightning-browser-extension#-load-extension-into-browser
For faster assistance you can join our slack-channel and contact me there.
@escapedcat is this assigned to someone, or I can work on it?
@escapedcat is this assigned to someone, or I can work on it?
Hey @kkartik07 , assgined you now. But let's check with @reneaaron if this is still a thing we want. This issue is rather old.
@escapedcat is this assigned to someone, or I can work on it?
Hey @kkartik07 , assgined you now. But let's check with @reneaaron if this is still a thing we want. This issue is rather old.
Ok fine 👍
I'd probably postpone this for now until we had our designer have a look at those new tab designs again and decide how we want to go about the extension UI in general.
This is the tab design I proposed for onchain tabs, that could be potentially used in other places in the app. But we could use more flat ones, something like in the issue description. Which design do you guys prefer more @rolznz @reneaaron?

@stackingsaunter I like the new design but am happy with either 👍
Closing as we already have new tab styles implemented :partying_face: