Receive mode and chat mode are also looking awesome

onionshare_gui/gui_common.py

@@ -74,13 +74,8 @@ class GuiCommon:
                 }""",
             "mode_header_label": """
                 QLabel {
-                    color: #ffffff;
+                    color: #333333;
-                    background-color: #4e064f;
+                    font-size: 30px;
-                    border: 0;
-                    font-weight: bold;
-                    font-size: 18px;
-                    border-radius: 0;
-                    padding: 10px 0 10px 0;
                 }""",
             "settings_button": """
                 QPushButton {
@@ -132,7 +127,7 @@ class GuiCommon:
                 QPushButton {
                     background-color: #5fa416;
                     color: #ffffff;
-                    padding: 10px;
+                    padding: 10px 30px 10px 30px;
                     border: 0;
                     border-radius: 5px;
                 }""",
@@ -140,7 +135,7 @@ class GuiCommon:
                 QPushButton {
                     background-color: #4c8211;
                     color: #ffffff;
-                    padding: 10px;
+                    padding: 10px 30px 10px 30px;
                     border: 0;
                     border-radius: 5px;
                     font-style: italic;
@@ -149,7 +144,7 @@ class GuiCommon:
                 QPushButton {
                     background-color: #d0011b;
                     color: #ffffff;
-                    padding: 10px;
+                    padding: 10px 30px 10px 30px;
                     border: 0;
                     border-radius: 5px;
                 }""",

onionshare_gui/tab/mode/__init__.py

@@ -93,12 +93,6 @@ class Mode(QtWidgets.QWidget):
         self.starting_server_early.connect(self.start_server_early)
         self.starting_server_error.connect(self.start_server_error)
 
-        # Header
-        # Note: It's up to the downstream Mode to add this to its layout
-        self.header_label = QtWidgets.QLabel()
-        self.header_label.setStyleSheet(self.common.gui.css["mode_header_label"])
-        self.header_label.setAlignment(QtCore.Qt.AlignHCenter)
-
         # Primary action
         # Note: It's up to the downstream Mode to add this to its layout
         self.primary_action_layout = QtWidgets.QVBoxLayout()

onionshare_gui/tab/mode/chat_mode/__init__.py

@@ -47,8 +47,20 @@ class ChatMode(Mode):
         # Create the Web object
         self.web = Web(self.common, True, self.settings, "chat")
 
-        # Header
+        # Chat image
-        self.header_label.setText(strings._("gui_new_tab_chat_button"))
+        self.image_label = QtWidgets.QLabel()
+        self.image_label.setPixmap(
+            QtGui.QPixmap.fromImage(
+                QtGui.QImage(self.common.get_resource_path("images/mode_chat.png"))
+            )
+        )
+        self.image_label.setFixedSize(300, 300)
+        image_layout = QtWidgets.QVBoxLayout()
+        image_layout.addStretch()
+        image_layout.addWidget(self.image_label)
+        image_layout.addStretch()
+        self.image = QtWidgets.QWidget()
+        self.image.setLayout(image_layout)
 
         # Server status
         self.server_status.set_mode("chat")
@@ -59,6 +71,10 @@ class ChatMode(Mode):
         self.server_status.web = self.web
         self.server_status.update()
 
+        # Header
+        header_label = QtWidgets.QLabel(strings._("gui_new_tab_chat_button"))
+        header_label.setStyleSheet(self.common.gui.css["mode_header_label"])
+
         # Top bar
         top_bar_layout = QtWidgets.QHBoxLayout()
         top_bar_layout.addStretch()
@@ -66,17 +82,19 @@ class ChatMode(Mode):
         # Main layout
         self.main_layout = QtWidgets.QVBoxLayout()
         self.main_layout.addLayout(top_bar_layout)
+        self.main_layout.addStretch()
+        self.main_layout.addWidget(header_label)
         self.main_layout.addWidget(self.primary_action)
         self.main_layout.addStretch()
         self.main_layout.addWidget(MinimumWidthWidget(700))
 
         # Column layout
         self.column_layout = QtWidgets.QHBoxLayout()
+        self.column_layout.addWidget(self.image)
         self.column_layout.addLayout(self.main_layout)
 
         # Wrapper layout
         self.wrapper_layout = QtWidgets.QVBoxLayout()
-        self.wrapper_layout.addWidget(self.header_label)
         self.wrapper_layout.addLayout(self.column_layout)
         self.setLayout(self.wrapper_layout)
 

onionshare_gui/tab/mode/receive_mode/__init__.py

@@ -40,8 +40,20 @@ class ReceiveMode(Mode):
         # Create the Web object
         self.web = Web(self.common, True, self.settings, "receive")
 
-        # Header
+        # Receive image
-        self.header_label.setText(strings._("gui_new_tab_receive_button"))
+        self.image_label = QtWidgets.QLabel()
+        self.image_label.setPixmap(
+            QtGui.QPixmap.fromImage(
+                QtGui.QImage(self.common.get_resource_path("images/mode_receive.png"))
+            )
+        )
+        self.image_label.setFixedSize(300, 300)
+        image_layout = QtWidgets.QVBoxLayout()
+        image_layout.addStretch()
+        image_layout.addWidget(self.image_label)
+        image_layout.addStretch()
+        self.image = QtWidgets.QWidget()
+        self.image.setLayout(image_layout)
 
         # Settings
         data_dir_label = QtWidgets.QLabel(
@@ -97,6 +109,10 @@ class ReceiveMode(Mode):
             ),
         )
 
+        # Header
+        header_label = QtWidgets.QLabel(strings._("gui_new_tab_receive_button"))
+        header_label.setStyleSheet(self.common.gui.css["mode_header_label"])
+
         # Receive mode warning
         receive_warning = QtWidgets.QLabel(strings._("gui_receive_mode_warning"))
         receive_warning.setMinimumHeight(80)
@@ -110,6 +126,8 @@ class ReceiveMode(Mode):
         # Main layout
         self.main_layout = QtWidgets.QVBoxLayout()
         self.main_layout.addLayout(top_bar_layout)
+        self.main_layout.addStretch()
+        self.main_layout.addWidget(header_label)
         self.main_layout.addWidget(receive_warning)
         self.main_layout.addWidget(self.primary_action)
         self.main_layout.addStretch()
@@ -117,12 +135,12 @@ class ReceiveMode(Mode):
 
         # Column layout
         self.column_layout = QtWidgets.QHBoxLayout()
+        self.column_layout.addWidget(self.image)
         self.column_layout.addLayout(self.main_layout)
         self.column_layout.addWidget(self.history, stretch=1)
 
         # Wrapper layout
         self.wrapper_layout = QtWidgets.QVBoxLayout()
-        self.wrapper_layout.addWidget(self.header_label)
         self.wrapper_layout.addLayout(self.column_layout)
         self.setLayout(self.wrapper_layout)
 

onionshare_gui/tab/server_status.py

@@ -129,8 +129,12 @@ class ServerStatus(QtWidgets.QWidget):
         url_layout.addLayout(url_buttons_layout)
 
         # Add the widgets
+        button_layout = QtWidgets.QHBoxLayout()
+        button_layout.addWidget(self.server_button)
+        button_layout.addStretch()
+
         layout = QtWidgets.QVBoxLayout()
-        layout.addWidget(self.server_button)
+        layout.addLayout(button_layout)
         layout.addLayout(url_layout)
         self.setLayout(layout)