Style Login Dialog [polishing]

[sssoleileraaa]

Description

This is an issue where you really pay attention to the details.

• [x] Update the font (this might be done application-wide after the text-styling work is finished in zeplin and may no longer be relevant to this issue)
• [x] Update Sign In button (should match and be updated in the main window as well) to no longer use a fill gradient
• [ ] Update offline hyperlink underline. Right now we use the "underline" css property but will need to create an image file to get the underline the correct distance away from the word
• [ ] Add states: live, disabled, focus, hover
• [ ] Add styling for user entered text in text fields

[eloquence]

Changed into checklist; remaining items will require sync-up w/ @ninavizz.

[ninavizz]

Dumb question I suspect is a QT issue: the border-bottom: 1px method to get an underline a nicer distance from the text than the standard underline property, I'd assumed could be used for this so we wouldn't need an image. Is that method incompatible with QT?

[sssoleileraaa]

@ninavizz that's a good idea and would be better than having an image of a line below the offline link text. i image we could remove any default qt margins and padding for the QLabel that holds the "USE OFFLINE" text and then add a blue underline that is 1px

[sssoleileraaa]

oh but we'd want a little space added at the bottom to get the distance right

[sssoleileraaa]

We can get it pretty close to the zeplin image if we apply this diff (but the border bottom will b the length of the qlabel and not the text - perhaps there's a way to hide parts of the border or limit the length :/):

diff --git a/securedrop_client/gui/widgets.py b/securedrop_client/gui/widgets.py
index 9f172ab..2381160 100644
--- a/securedrop_client/gui/widgets.py
+++ b/securedrop_client/gui/widgets.py
@@ -1444,7 +1444,7 @@ class LoginOfflineLink(QLabel):
         # Set css id
         self.setObjectName("LoginOfflineLink")

-        self.setFixedSize(QSize(120, 22))
+        self.setFixedHeight(26)

         self.setText(_("USE OFFLINE"))

diff --git a/securedrop_client/resources/css/sdclient.css b/securedrop_client/resources/css/sdclient.css
index f1c1188..b95eaed 100644
--- a/securedrop_client/resources/css/sdclient.css
+++ b/securedrop_client/resources/css/sdclient.css
@@ -26,9 +26,12 @@
 }

 #LoginOfflineLink {
-    border: none;
+    margin: 0px 0px 0px 0px;
+    padding: 0px;
+    border: 1px;
     color: #fff;
-    text-decoration: underline;
+/*    text-decoration: underline;
+*/    border-bottom: 1px solid rgba(241, 241, 241, 0.41);
 }

 #SignInButton {
(END)

See zeplin on left, client on right (running in a dev env on debian, not qubes):

[sssoleileraaa]

And, just for reference, this is what it currently looks like, without the diff applied (as of https://github.com/freedomofpress/securedrop-client/commit/c33f18a211626d4771e732920b93de78703a8dca):