Opened 4 weeks ago

Closed 3 weeks ago

#30962 closed defect (fixed)

Improve the webextension design

Reported by: arlolra Owned by: arlolra
Priority: Medium Milestone:
Component: Circumvention/Snowflake Version:
Severity: Normal Keywords: snowflake-webextension
Cc: arlolra, cohosh, phw, dcf, antonela Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description (last modified by arlolra)

In comment:40:ticket:23888 @antonela wrote,

Some comments:

  1. Gray icon for disabled
  2. Purple icon for enabled (waiting)
  3. Rotating purple icon for proxying (enabled + transferring). I did the animation with CSS here ​https://snowfl4k3.glitch.me/.
  • The doorhanger can be narrower. 320px is fair enough.
  • Could we use the system font? In that way, it will use the client's default. Now, it is loading Times New Roman.
  • The copy is great. Although, I think we can iterate over the technical terms in the future.

Child Tickets

Change History (8)

comment:1 Changed 4 weeks ago by arlolra

Cc: antonela added

Could we use the system font? In that way, it will use the client's default. Now, it is loading Times New Roman.

We haven't defined a font-family yet,
https://gitweb.torproject.org/pluggable-transports/snowflake.git/tree/proxy/webext/popup.css

Search for "system" returns something like,

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

Is that what you mean?

comment:2 Changed 4 weeks ago by antonela

is that what you mean?

Yes, exactly. This should work:

body {
  margin: 1em;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

https://css-tricks.com/snippets/css/system-font-stack/

comment:4 Changed 4 weeks ago by arlolra

The doorhanger can be narrower. 320px is fair enough.

I see, this rendered differently between browsers. Fixed in,
https://gitweb.torproject.org/pluggable-transports/snowflake.git/commit/?id=ff6f91f3dacb02fedfce7fe965e385cbe4965520

comment:5 Changed 4 weeks ago by arlolra

Description: modified (diff)

comment:6 Changed 4 weeks ago by arlolra

  1. Gray icon for disabled

Needs #30934

comment:7 Changed 4 weeks ago by cohosh

Owner: set to arlolra
Status: newassigned

comment:8 Changed 3 weeks ago by arlolra

Resolution: fixed
Status: assignedclosed

The icon is a great way to offer visual feedback to users.

This will be resolved in #30934

Note: See TracTickets for help on using tickets.