Merge pull request #1176 from SaptakS/expand-url

Adds UI/UX enhancements in different sections of tab layouts

15 files changed, 75 insertions, 19 deletions

diff --git a/onionshare_gui/gui_common.py b/onionshare_gui/gui_common.py
index 509e67fd..2e350cca 100644
--- a/onionshare_gui/gui_common.py
+++ b/onionshare_gui/gui_common.py
@@ -78,8 +78,9 @@ class GuiCommon:
                 }""",
             "mode_header_label": """
                 QLabel {
-                    color: #333333;
-                    font-size: 30px;
+                    color: #4E064F;
+                    font-size: 48px;
+                    margin-bottom: 16px;
                 }""",
             "settings_button": """
                 QPushButton {
@@ -217,6 +218,7 @@ class GuiCommon:
             "new_tab_button_image": """
                 QLabel {
                     padding: 30px;
+                    text-align: center;
                 }
                 """,
             "new_tab_button_text": """
@@ -228,6 +230,13 @@ class GuiCommon:
                     color: #4e0d4e;
                 }
                 """,
+            "new_tab_title_text": """
+                QLabel {
+                    text-align: center;
+                    color: #333333;
+                    font-size: 28px;
+                }
+                """,
             # Share mode and child widget styles
             "share_delete_all_files_button": """
                 QPushButton {
@@ -255,12 +264,14 @@ class GuiCommon:
                 """,
             "share_file_selection_drop_here_header_label": """
                 QLabel {
-                    color: #333333;
-                    font-size: 30px;
+                    color: #4E064F;
+                    font-size: 48px;
+                    margin-bottom: 72px;
                 }""",
             "share_file_selection_drop_here_label": """
                 QLabel {
                     color: #666666;
+                    margin-bottom: 48px;
                 }""",
             "share_file_selection_drop_count_label": """
                 QLabel {
diff --git a/onionshare_gui/tab/mode/__init__.py b/onionshare_gui/tab/mode/__init__.py
index 984e6573..65e46444 100644
--- a/onionshare_gui/tab/mode/__init__.py
+++ b/onionshare_gui/tab/mode/__init__.py
@@ -98,7 +98,6 @@ class Mode(QtWidgets.QWidget):
         # Note: It's up to the downstream Mode to add this to its layout
         self.primary_action_layout = QtWidgets.QVBoxLayout()
         self.primary_action_layout.addWidget(self.mode_settings_widget)
-        self.primary_action_layout.addWidget(self.server_status)
         self.primary_action = QtWidgets.QWidget()
         self.primary_action.setLayout(self.primary_action_layout)
 
diff --git a/onionshare_gui/tab/mode/chat_mode/__init__.py b/onionshare_gui/tab/mode/chat_mode/__init__.py
index 8b1fb142..4de9f387 100644
--- a/onionshare_gui/tab/mode/chat_mode/__init__.py
+++ b/onionshare_gui/tab/mode/chat_mode/__init__.py
@@ -86,6 +86,7 @@ class ChatMode(Mode):
         self.main_layout.addStretch()
         self.main_layout.addWidget(header_label)
         self.main_layout.addWidget(self.primary_action)
+        self.main_layout.addWidget(self.server_status)
         self.main_layout.addStretch()
         self.main_layout.addWidget(MinimumWidthWidget(700))
 
diff --git a/onionshare_gui/tab/mode/receive_mode/__init__.py b/onionshare_gui/tab/mode/receive_mode/__init__.py
index 6482b924..e6ca6f70 100644
--- a/onionshare_gui/tab/mode/receive_mode/__init__.py
+++ b/onionshare_gui/tab/mode/receive_mode/__init__.py
@@ -48,11 +48,9 @@ class ReceiveMode(Mode):
                 QtGui.QImage(self.common.get_resource_path("images/mode_receive.png"))
             )
         )
-        self.image_label.setFixedSize(300, 300)
+        self.image_label.setFixedSize(250, 250)
         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)
 
@@ -126,18 +124,26 @@ 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()
-        self.main_layout.addWidget(MinimumWidthWidget(700))
+        self.main_layout.addWidget(MinimumWidthWidget(525))
+
+        # Row layout
+        content_row = QtWidgets.QHBoxLayout()
+        content_row.addLayout(self.main_layout)
+        content_row.addWidget(self.image)
+        row_layout = QtWidgets.QVBoxLayout()
+        row_layout.addLayout(top_bar_layout)
+        row_layout.addStretch()
+        row_layout.addLayout(content_row)
+        row_layout.addWidget(self.server_status)
+        row_layout.addStretch()
+
 
         # Column layout
         self.column_layout = QtWidgets.QHBoxLayout()
-        self.column_layout.addWidget(self.image)
-        self.column_layout.addLayout(self.main_layout)
+        self.column_layout.addLayout(row_layout)
         self.column_layout.addWidget(self.history, stretch=1)
 
         # Wrapper layout
diff --git a/onionshare_gui/tab/mode/share_mode/__init__.py b/onionshare_gui/tab/mode/share_mode/__init__.py
index 3fd545de..ab4e320c 100644
--- a/onionshare_gui/tab/mode/share_mode/__init__.py
+++ b/onionshare_gui/tab/mode/share_mode/__init__.py
@@ -156,6 +156,7 @@ class ShareMode(Mode):
         self.main_layout.addLayout(top_bar_layout)
         self.main_layout.addLayout(self.file_selection)
         self.main_layout.addWidget(self.primary_action)
+        self.main_layout.addWidget(self.server_status)
         self.main_layout.addWidget(MinimumWidthWidget(700))
 
         # Column layout
diff --git a/onionshare_gui/tab/mode/website_mode/__init__.py b/onionshare_gui/tab/mode/website_mode/__init__.py
index 29019cb5..96fcdea3 100644
--- a/onionshare_gui/tab/mode/website_mode/__init__.py
+++ b/onionshare_gui/tab/mode/website_mode/__init__.py
@@ -156,6 +156,7 @@ class WebsiteMode(Mode):
         self.main_layout.addLayout(top_bar_layout)
         self.main_layout.addLayout(self.file_selection)
         self.main_layout.addWidget(self.primary_action)
+        self.main_layout.addWidget(self.server_status)
         self.main_layout.addWidget(MinimumWidthWidget(700))
 
         # Column layout
diff --git a/onionshare_gui/tab/tab.py b/onionshare_gui/tab/tab.py
index 69916f06..9303f18b 100644
--- a/onionshare_gui/tab/tab.py
+++ b/onionshare_gui/tab/tab.py
@@ -37,7 +37,7 @@ from ..widgets import Alert
 
 
 class NewTabButton(QtWidgets.QPushButton):
-    def __init__(self, common, image_filename, text):
+    def __init__(self, common, image_filename, title, text):
         super(NewTabButton, self).__init__()
         self.common = common
 
@@ -50,17 +50,26 @@ class NewTabButton(QtWidgets.QPushButton):
                 QtGui.QImage(self.common.get_resource_path(image_filename))
             )
         )
-        self.image_label.setFixedSize(280, 280)
+        self.image_label.setAlignment(QtCore.Qt.AlignCenter)
         self.image_label.setStyleSheet(self.common.gui.css["new_tab_button_image"])
-        self.image_label.setGeometry(0, 0, self.width(), self.height())
+        self.image_label.setGeometry(0, 0, self.width(), 200)
         self.image_label.show()
 
+        # Title
+        self.title_label = QtWidgets.QLabel(title, parent=self)
+        self.title_label.setAlignment(QtCore.Qt.AlignCenter)
+        self.title_label.setStyleSheet(self.common.gui.css["new_tab_title_text"])
+        self.title_label.setGeometry(
+            (self.width() - 250) / 2, self.height() - 100, 250, 30
+        )
+        self.title_label.show()
+
         # Text
         self.text_label = QtWidgets.QLabel(text, parent=self)
         self.text_label.setAlignment(QtCore.Qt.AlignCenter)
         self.text_label.setStyleSheet(self.common.gui.css["new_tab_button_text"])
         self.text_label.setGeometry(
-            (self.width() - 200) / 2, self.height() - 40, 200, 30
+            (self.width() - 200) / 2, self.height() - 50, 200, 30
         )
         self.text_label.show()
 
@@ -97,11 +106,26 @@ class Tab(QtWidgets.QWidget):
         # Start the OnionShare app
         self.app = OnionShare(common, self.common.gui.onion, self.common.gui.local_only)
 
+        # Onionshare logo
+        self.image_label = QtWidgets.QLabel()
+        self.image_label.setPixmap(
+            QtGui.QPixmap.fromImage(
+                QtGui.QImage(self.common.get_resource_path("images/logo_text.png"))
+            )
+        )
+        self.image_label.setFixedSize(160, 40)
+        image_layout = QtWidgets.QVBoxLayout()
+        image_layout.addWidget(self.image_label)
+        image_layout.addStretch()
+        self.image = QtWidgets.QWidget()
+        self.image.setLayout(image_layout)
+
         # New tab buttons
         self.share_button = NewTabButton(
             self.common,
             "images/mode_new_tab_share.png",
             strings._("gui_new_tab_share_button"),
+            strings._("gui_main_page_share_button"),
         )
         self.share_button.clicked.connect(self.share_mode_clicked)
 
@@ -109,6 +133,7 @@ class Tab(QtWidgets.QWidget):
             self.common,
             "images/mode_new_tab_receive.png",
             strings._("gui_new_tab_receive_button"),
+            strings._("gui_main_page_receive_button"),
         )
         self.receive_button.clicked.connect(self.receive_mode_clicked)
 
@@ -116,6 +141,7 @@ class Tab(QtWidgets.QWidget):
             self.common,
             "images/mode_new_tab_website.png",
             strings._("gui_new_tab_website_button"),
+            strings._("gui_main_page_website_button"),
         )
         self.website_button.clicked.connect(self.website_mode_clicked)
 
@@ -123,6 +149,7 @@ class Tab(QtWidgets.QWidget):
             self.common,
             "images/mode_new_tab_chat.png",
             strings._("gui_new_tab_chat_button"),
+            strings._("gui_main_page_chat_button"),
         )
         self.chat_button.clicked.connect(self.chat_mode_clicked)
 
@@ -144,8 +171,14 @@ class Tab(QtWidgets.QWidget):
         new_tab_layout.addLayout(new_tab_bottom_layout)
         new_tab_layout.addStretch()
 
+        new_tab_img_layout = QtWidgets.QHBoxLayout()
+        new_tab_img_layout.addWidget(self.image)
+        new_tab_img_layout.addStretch(1)
+        new_tab_img_layout.addLayout(new_tab_layout)
+        new_tab_img_layout.addStretch(2)
+
         self.new_tab = QtWidgets.QWidget()
-        self.new_tab.setLayout(new_tab_layout)
+        self.new_tab.setLayout(new_tab_img_layout)
         self.new_tab.show()
 
         # Layout
diff --git a/share/images/logo_text.png b/share/images/logo_text.png
new file mode 100644
index 00000000..3b584acd
--- /dev/null
+++ b/share/images/logo_text.png
diff --git a/share/images/mode_new_tab_chat.png b/share/images/mode_new_tab_chat.png
index 4d54f127..50759d64 100644
--- a/share/images/mode_new_tab_chat.png
+++ b/share/images/mode_new_tab_chat.png
diff --git a/share/images/mode_new_tab_receive.png b/share/images/mode_new_tab_receive.png
index fe46f5ff..9db809be 100644
--- a/share/images/mode_new_tab_receive.png
+++ b/share/images/mode_new_tab_receive.png
diff --git a/share/images/mode_new_tab_share.png b/share/images/mode_new_tab_share.png
index bb33318c..92973175 100644
--- a/share/images/mode_new_tab_share.png
+++ b/share/images/mode_new_tab_share.png
diff --git a/share/images/mode_new_tab_website.png b/share/images/mode_new_tab_website.png
index 08cc24a5..86b45f66 100644
--- a/share/images/mode_new_tab_website.png
+++ b/share/images/mode_new_tab_website.png
diff --git a/share/images/mode_share.png b/share/images/mode_share.png
index f2565bd5..ec287db4 100644
--- a/share/images/mode_share.png
+++ b/share/images/mode_share.png
diff --git a/share/images/mode_website.png b/share/images/mode_website.png
index b146f451..37a556d9 100644
--- a/share/images/mode_website.png
+++ b/share/images/mode_website.png
diff --git a/share/locale/en.json b/share/locale/en.json
index 7dbf9914..bb11cdfd 100644
--- a/share/locale/en.json
+++ b/share/locale/en.json
@@ -188,6 +188,10 @@
     "gui_new_tab_receive_button": "Receive Files",
     "gui_new_tab_website_button": "Host a Website",
     "gui_new_tab_chat_button": "Chat Anonymously",
+    "gui_main_page_share_button": "Start Sharing",
+    "gui_main_page_receive_button": "Start Receiving",
+    "gui_main_page_website_button": "Start Hosting",
+    "gui_main_page_chat_button": "Start Chatting",
     "gui_tab_name_share": "Share",
     "gui_tab_name_receive": "Receive",
     "gui_tab_name_website": "Website",