Added css styling

[extremelyonline]

This PR provide basic styling to the extension. It tries to keep everything clean and minimal.

• Defined colors for both light mode and dark mode
• I picked a light blue color as the primary accent colour. This can be changed.
• Perhaps the accent color can be used in the logo as well.
• Chose Roboto as the typeface. Just a clean and unflashy choice. Woff2 files are used.
• Defined font size and line height, using rem whenever possible to stay responsive.
• Reworded and simplified onboarding.html.
• Depending on Treat all permissions as optional #23, Individual checkboxes/toggle button can be added to onboarding.html.

[libreom]

Thanks for the pr, I will review it this weekend/maybe more due to some work and non-availability of pc. Which css libraries/ handwritten code have you used? Also can you change checkbox to toggle switch if possible? And make inputs a little larger. Also are you the one who contacted me on matrix for contribution? I will release next version after doing the styling, search engine or maybe more services and maybe updatable lists

[extremelyonline]

Yes, I am. I didn't use any css libraries. My last commit changed checkbox to toggle switch.

• Css-only toggle switch

• Rewrote the html to make the "Custom Instance" input always in the next line. I think this is more consistent.

• Not sure what you meant by making inputs larger. I adjusted the vertical spacing. The font size can be adjusted using the variable at root.

• Am I correct to assume that popup.html is the same for both src and firefox-src? Perhaps a workflow/script to copy static files to src folders are better in terms of development. Just a thought. Thanks.

[libreom]

Sorry for delay, The changes looks good 👍, It would be better if you made little margins in onboarding css /responsive for firefox android

Am I correct to assume that popup.html is the same for both src and firefox-src? Perhaps a workflow/script to copy static files to src folders are better in terms of development. Just a thought. Thanks.

Yes almost all html files are identical and js files are a little different ( chrome => browser namespace for apis, promise=firefox vs callbacks=chrome, onboarding for firefox due to them not allowing asking for host_permissions on install time

I will work on searx service tomorrow, and merge your commit for the next release, if you want to change/polish something, please do
Thanks

[extremelyonline]

Hi, I've added padding on the left and right in onboarding. It should work for all screen sizes.

Sorry, I realized that Roboto is not really necessary. Arial looks just as good. It is up to you whether to keep the woff or not!

In onboarding, I suggest either changing the button's text or showing a gray line like "permission granted" after the user has clicked. I think these make more sense than indicating the status in the paragraph.

[libreom]

Hi, I've added padding on the left and right in onboarding. It should work for all screen sizes.

Cool

Sorry, I realized that Roboto is not really necessary. Arial looks just as good. It is up to you whether to keep the woff or not!

True, I was also thinking that, a system font stack should be better, like this or little modified-

font:px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;

This will ensure Mac's get their system font, windows, android, Linux too

In onboarding, I suggest either changing the button's text or showing a gray line like "permission granted" after the user has clicked. I think these make more sense than indicating the status in the paragraph.

Agree
Also have you thought about logo? Even that forward right sign could be enough

[extremelyonline]

Hi, in my last commit:

• Use font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
• Remove all Roboto files
• In onboarding, added --hover-color and --gray-color.
• I haven't do this: please modify the js to change the button text and color to --gray color after permissions are granted.

For the logo, I personally prefer a minimal design. I think using simple arrows are ok because there aren't many extensions that use this approach. The following designs are based on online SVG files. The original files have CC licenses, and attributions may be needed. Some of them are rotated to resemble a P or ]

• I picked the primary color #4385BE. You can change this to a darker blue, like the current logo, if you want.

https://thenounproject.com/icon/u-turn-482102/

https://www.svgrepo.com/svg/86156/curve-arrow

https://thenounproject.com/icon/u-turn-5809407/

Font awesome:

SVG file with the four artboards (Adobe AI):
https://github.com/libreom/predirect/assets/100532901/19bb5b56-4477-4b35-84a4-6b9479d9492e

[libreom]

I added to onboarding js that turns button green if permission is granted and red if permission is refused also changed some text. Also can you remove with css the horizontal scrollbar and maybe make smaller/remove "Predirect Options"

For the logo, I would like a little darker/different color, also between these, I don't really have a preference, so go with one you like

[extremelyonline]

Hi, the logo is changed. The attribution is added to README.

I've fixed the scrollbars in popup. Sorry for that.

In onboarding, I specified the red and green colors so that they follow a color palette (roughly based on [flexoki(https://stephango.com/flexoki)). Please check if the js works. When hovered, the button's opacity is decreased.

[libreom]

Good,The js works now, logo is good 👍, can you modify popup css to better place input with scrollbar as it is overlapping now, maybe remove some empty space

This looks ready to merge now

[libreom]

Also maybe decrease these spaces as in mobile it looks like this

[extremelyonline]

In terms of design, I highly recommend leaving some white space between elements. They are all just one line apart. I really think the empty space is essential.

The padding on the top of the page can be reduced on mobile though. Will do so.

For the scrollbar, are you using Chrome? I guess the thin scrollbar CSS doesn't work as intended. Moreover, I think we can investigate how to set a min-width for the extension popup...

[libreom]

Yes, I also think whitespace is essential, maybe decrease it in some places.
Screenshot is of firefox light mode, yes we should investigate- perhaps setting min-width to html or body does it. https://developer.chrome.com/docs/extensions/reference/api/action#show_a_popup
https://stackoverflow.com/questions/5020953/popup-html-change-width
https://groups.google.com/a/chromium.org/g/chromium-extensions/c/nJIWEuJpI3Y

[extremelyonline]

Hi, please test if the min-width and scrollbar width work.

I've reduced padding on the top of the page if the device has a touch screen.

[libreom]

Firefox Android onboarding is better , It(scrollbar,min-width) didn't work as intended, popup is too wide in firefox, scrollbar isn't there in chromium. Maybe revert this( or as you think would be better) and add just a tiny margin in input in popup

[extremelyonline]

Hi, sorry for the back-and-forth.

I think min-width can still work, just to be reduced. Would you please test and see if 250px (or ever lower) is good? (I can only get a thin scrollbar in both Linux and Windows, Firefox and Chromium. I am not sure why.)

Currently, the scrollbar only appears when scrolled. We can remove overflow-y: auto; to always show the scrollbar.

[libreom]

Hi, sorry for late reply, I tried decreasing min-width, Imo 215px to 225px works good, also after removing this code, scrollbar appears in chrome, otherwise it doesn't so please elaborate this

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5);}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar { width: 5px; }
::-moz-scrollbar { width: 5px; }
::-ms-scrollbar { width: 5px; }

Also I think if this approach is good? wouldn't just adding margin in right side to input or div work? Like this is current screenshot


Also please add little opacity to input text

[extremelyonline]

Hi, the css were intended to make a thinner scrollbar. I may have made a mistake. Would you please test the following with the *?

*::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5);}
*::-webkit-scrollbar { width: 5px; }
*::-webkit-scrollbar { width: 5px; }
*::-moz-scrollbar { width: 5px; }
*::-ms-scrollbar { width: 5px; }

I'm not sure how Firefox/Chrome interprets margin in right side to input or div. But yes, I think we can try that!

By opacity, do you mean that of the gray text?

[libreom]

After adding right margin it looks okay in all browsers,Tell me if any change is needed ,It is ready to merge now.(Removed scrollbar css as I couldn't see what It was doing)

[extremelyonline]

Thanks, please do merge it. Sorry for taking so long!

I may take a stab at the scrollbar in another PR. HNY

[libreom]

Merged 🎉, Thanks for contribution, other prs open too