Current ui

1. When chill mode is on, it says chill:
2. When work mode is on, it says work:

Enchancement

While in chill mode, the status text shall say chilling... and on hovering over that it should say work or maybe switch to work clicking upon which shall switch to work mode and status text should say working... vice versa.

Check the clip below.

https://user-images.githubusercontent.com/58453023/149613234-b5617bdc-d222-41a0-9ca7-0766a68a5ae8.mp4

Once the extension is unpacked and loaded, I get the home page.

But how do I get back there again?

Right now, when I reload the extension, I get the homepage:

Review: The code here can be shortened by creating classes and defining styles in the stylesheet.

https://github.com/dheerajdlalwani/back-to-work/blob/fc5c9820ee350dc1ab69f9c9aff77465bc33f979/src/popup/popup.js#L7-L18

It can be shortened more using a default, which I assume is Chill. Have the HTML, state & styles initially for that.

Have a class for Work, and toggle that whenever necessary.

 (mode === "Work") ? modeBtn.classList.add("work") : modeBtn.classList.remove("work");

Now CSS for work would be something like:

.work {
  content: "work";
  background-color: #f95050;
  color: #ffffff;
}

Reason to do that?

Keeps the JS clean and and implementation short. No need for item.style.backgroundColor etc.

Beep boop. Your images are optimized!

Your image file size has been reduced by 28% 🎉

📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

~Imgbot - Part of Optimole family

The source code is pretty much filled with non-semantic markup. Need to use proper semantic tags for example <section>, <main> wherever appropriate.

Beep boop. Your images are optimized!

Your image file size has been reduced by 27% 🎉

📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

~Imgbot - Part of Optimole family

I was trying to install this extension on firefox(primary browser) but it seems that Manifest v3 is not supported. Mozilla on Manifest v3 support https://blog.mozilla.org/addons/2021/05/27/manifest-v3-update/ https://blog.mozilla.org/addons/2019/09/03/mozillas-manifest-v3-faq/ Possible solution: Downgrade version v2 to support firefox. I have not read the source code of the extension so I don't know if that would be a problem. I'll be happy to work on this if any major work is required.

Current UI Redesign UI The current UI could be updated with the above-mentioned UI. This is just to give you an idea you can make it more aesthetically pleasing. I'm not good at CSS so forgive me. Below is the code snippet just to give you an idea. https://gist.github.com/gupta-shrinath/6194e225375170d153bfa2c30727c862

Suppose I am on a website which is diverging me to a whole new thing and not letting me focus on the stuff I chose to do while switching to work mode. So what I should be able to do is, open the extension window and just click on the button which says Add current page to block list and that's it. The tab closes and I can't access it till I go to chill mode.

1. Different Call to actions button should be styled differently

2. Extra margin here at the bottom won't hurt :P

3. Once URL is typed, pressing enter should do the job of the Add button. It is a good UX.