Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update font weights to numbers and match zeplin #502

Merged
merged 2 commits into from
Aug 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 42 additions & 47 deletions securedrop_client/gui/widgets.py
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,8 @@ class ActivityStatusBar(QStatusBar):

CSS = '''
#activity_status_bar {
font-family: Source Sans Pro SemiBold;
font-family: 'Source Sans Pro';
font-weight: 600;
font-size: 12px;
color: #d3d8ea;
}
Expand Down Expand Up @@ -274,7 +275,7 @@ class ErrorStatusBar(QWidget):

CSS = '''
#error_vertical_bar {
background-color: #f22b5d;
background-color: #ff3366;
}
#error_icon {
background-color: qlineargradient(
Expand All @@ -297,8 +298,9 @@ class ErrorStatusBar(QWidget):
stop: 0.2 #fff,
stop: 1 #fff
);
font-family: Source Sans Pro Regular;
font-size: 13px;
font-family: 'Source Sans Pro';
font-weight: 400;
font-size: 14px;
color: #0c3e75;
}
'''
Expand Down Expand Up @@ -387,10 +389,11 @@ class UserProfile(QWidget):
QLabel#user_icon {
border: none;
padding: 10px;
background-color: #b4fffa;
font-family: Source Sans Pro;
font-size: 16px;
color: #2a319d;
background-color: #9211ff;
font-family: 'Source Sans Pro';
font-weight: 600;
font-size: 15px;
color: #fff;
}
'''

Expand Down Expand Up @@ -459,9 +462,10 @@ class UserButton(SvgPushButton):
border: none;
padding-left: 6px;
background-color: #0093da;
font-family: Source Sans Pro;
font-size: 14px;
color: #b4fffa;
font-family: 'Source Sans Pro';
font-weight: 700;
font-size: 12px;
color: #fff;
text-align: left;
}
SvgPushButton::menu-indicator {
Expand Down Expand Up @@ -526,7 +530,8 @@ class LoginButton(QPushButton):
#login {
border: none;
background-color: #05edfe;
font-family: Montserrat SemiBold;
font-family: 'Montserrat';
font-weight: 600;
font-size: 14px;
color: #2a319d;
}
Expand Down Expand Up @@ -735,18 +740,17 @@ class SourceWidget(QWidget):
"""

CSS = '''
QWidget#color_bar {
background-color: #9211ff;
}
QLabel#source_name {
font-family: Montserrat Medium;
QLabel#source-name {
font-family: 'Montserrat';
font-weight: 500;
font-size: 13px;
color: #000;
color: #383838;
}
QLabel#timestamp {
font-family: Montserrat Medium;
font-family: 'Montserrat';
font-weight: 500;
font-size: 13px;
color: #000;
color: #383838;
}
'''

Expand Down Expand Up @@ -789,7 +793,7 @@ def __init__(self, source: Source):
summary_layout.setContentsMargins(0, 0, 0, 0)
summary_layout.setSpacing(0)
self.name = QLabel()
self.name.setObjectName('source_name')
self.name.setObjectName('source-name')
self.preview = QLabel('')
self.preview.setObjectName('preview')
self.preview.setWordWrap(True)
Expand Down Expand Up @@ -1001,7 +1005,8 @@ class SignInButton(QPushButton):
#login {
border: none;
background-color: #05edfe;
font-family: Montserrat SemiBold;
font-family: 'Montserrat';
font-weight: 600;
font-size: 14px;
color: #2a319d;
}
Expand Down Expand Up @@ -1043,8 +1048,9 @@ class LoginErrorBar(QWidget):
color: #fff;
}
#error_status_bar {
font-family: Source Sans Pro Regular;
font-size: 14px;
font-family: 'Montserrat';
font-weight: 500;
font-size: 12px;
color: #fff;
}
'''
Expand Down Expand Up @@ -1107,7 +1113,9 @@ class LoginDialog(QDialog):
CSS = '''
#login_form QLabel {
color: #fff;
font-family: Montserrat Medium;
font-family: 'Montserrat';
font-weight: 500;
font-size: 13px;
}
#login_form QLineEdit {
border-radius: 0px;
Expand Down Expand Up @@ -1286,12 +1294,14 @@ class SpeechBubble(QWidget):

CSS = '''
#speech_bubble {
font-family: Source Sans Pro Regular;
font-family: 'Source Sans Pro';
font-weight: 400;
font-size: 15px;
padding: 20px;
min-height: 32px;
min-width: 556px;
border-bottom: 0;
background-color: #fff;
}
#color_bar {
padding: 0px;
Expand Down Expand Up @@ -1374,32 +1384,18 @@ class MessageWidget(ConversationWidget):
Represents an incoming message from the source.
"""

CSS = '''
background-color: #ffffff;
'''

def __init__(self, message_id: str, message: str, update_signal) -> None:
super().__init__(message_id,
message,
update_signal,
align="left")

# Set css id
self.setObjectName('message_widget')

# Set styles
self.setStyleSheet(self.CSS)


class ReplyWidget(ConversationWidget):
"""
Represents a reply to a source.
"""

CSS = '''
background-color: #ffffff;
'''

CSS_COLOR_BAR_REPLY_FAIL = '''
background-color: #ff3366;
'''
Expand All @@ -1422,11 +1418,7 @@ def __init__(
align="right")
self.message_id = message_id

# Set css id
self.setObjectName('reply_widget')

# Set styles
self.setStyleSheet(self.CSS)
self.speech_bubble.color_bar.setStyleSheet(self.CSS_COLOR_BAR_REPLY)

message_succeeded_signal.connect(self._on_reply_success)
Expand Down Expand Up @@ -1713,7 +1705,8 @@ class ReplyBoxWidget(QWidget):

CSS = '''
#replybox {
font-family: Montserrat Regular;
font-family: 'Montserrat';
font-weight: 400;
font-size: 18px;
color: #9c9dbb;
}
Expand Down Expand Up @@ -1852,7 +1845,8 @@ class TitleLabel(QLabel):

CSS = '''
#conversation-title-source-name {
font-family: Montserrat Regular;
font-family: 'Montserrat';
font-weight: 400;
font-size: 24px;
color: #2a319d;
}
Expand All @@ -1873,7 +1867,8 @@ class LastUpdatedLabel(QLabel):

CSS = '''
#conversation-title-date {
font-family: Montserrat ExtraLight;
font-family: 'Montserrat';
font-weight: 200;
font-size: 24px;
color: #2a319d;
}
Expand Down
2 changes: 1 addition & 1 deletion securedrop_client/resources/images/error_icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 6 additions & 7 deletions tests/gui/test_widgets.py
Original file line number Diff line number Diff line change
Expand Up @@ -1101,9 +1101,12 @@ def test_SpeechBubble_init(mocker):
mock_connect = mocker.Mock()
mock_signal.connect = mock_connect

SpeechBubble('mock id', 'hello', mock_signal)
sb = SpeechBubble('mock id', 'hello', mock_signal)
ss = sb.styleSheet()

mock_label.assert_called_once_with('hello')
assert mock_connect.called
assert 'background-color' in ss


def test_SpeechBubble_update_text(mocker):
Expand Down Expand Up @@ -1186,10 +1189,8 @@ def test_MessageWidget_init(mocker):
mock_connected = mocker.Mock()
mock_signal.connect = mock_connected

mw = MessageWidget('mock id', 'hello', mock_signal)
ss = mw.styleSheet()
MessageWidget('mock id', 'hello', mock_signal)

assert 'background-color' in ss
assert mock_connected.called


Expand All @@ -1209,16 +1210,14 @@ def test_ReplyWidget_init(mocker):
mock_failure_connected = mocker.Mock()
mock_failure_signal.connect = mock_failure_connected

rw = ReplyWidget(
ReplyWidget(
'mock id',
'hello',
mock_update_signal,
mock_success_signal,
mock_failure_signal,
)
ss = rw.styleSheet()

assert 'background-color' in ss
assert mock_update_connected.called
assert mock_success_connected.called
assert mock_failure_connected.called
Expand Down