lightning-browser-extension icon indicating copy to clipboard operation
lightning-browser-extension copied to clipboard

UI: update tab-style

Open escapedcat opened this issue 3 years ago • 2 comments
trafficstars

Feature description

Update tabs-style image image image

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 image
  • light-mode:
    image

(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.

escapedcat avatar Oct 05 '22 04:10 escapedcat

is this issue still open? If so I would like to be assigned! @escapedcat

NasimMhn avatar Oct 05 '22 12:10 NasimMhn

@Nasimmhn yes! Thanks! Let us know if you need any support or get stuck.

escapedcat avatar Oct 05 '22 12:10 escapedcat

Hey @Nasimmhn you need any support? Did you already start?

escapedcat avatar Oct 17 '22 07:10 escapedcat

@Nasimmhn unassining you here to give other people a chance. I guess you're busy with other things. No worries.

escapedcat avatar Oct 21 '22 14:10 escapedcat

Hello @escapedcat, is this issue still open? If yes, can you please assign it to me?

whyprax avatar Nov 04 '22 18:11 whyprax

@whyprax you got it. Let ue know if you have any issues or get stuck.

escapedcat avatar Nov 04 '22 18:11 escapedcat

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)

whyprax avatar Nov 08 '22 16:11 whyprax

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 avatar Nov 08 '22 16:11 escapedcat

@escapedcat is this assigned to someone, or I can work on it?

kkartik07 avatar Jan 29 '23 12:01 kkartik07

@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 avatar Jan 29 '23 12:01 escapedcat

@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 👍

kkartik07 avatar Jan 29 '23 12:01 kkartik07

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.

reneaaron avatar Jan 31 '23 10:01 reneaaron

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?

image

stackingsaunter avatar Apr 10 '23 21:04 stackingsaunter

@stackingsaunter I like the new design but am happy with either 👍

rolznz avatar Apr 11 '23 10:04 rolznz

Closing as we already have new tab styles implemented :partying_face:

reneaaron avatar Sep 01 '23 11:09 reneaaron