refactor: change about page layout

src/app/gui/main.py

@@ -368,6 +368,16 @@ class MainWindow(QtWidgets.QMainWindow):
               color: #d5dae3;
               background: #0b0d11;
             }
+            QFrame#aboutCard {
+              background: #0b0d11;
+              border: 1px solid #20242d;
+              border-radius: 14px;
+            }
+            QLabel#cardTitle {
+              font-size: 15px;
+              font-weight: 600;
+              color: #f2f4f8;
+            }
             QHeaderView::section {
               background: #0b0d11;
               color: #cfd3da;

src/app/gui/pages/about.py

@@ -9,79 +9,104 @@ class AboutPage(QtWidgets.QWidget):
         self.setObjectName("aboutPage")
 
         layout = QtWidgets.QVBoxLayout(self)
-        layout.setSpacing(12)
+        layout.setContentsMargins(16, 16, 16, 16)
+        layout.setSpacing(14)
 
         title = QtWidgets.QLabel("About")
         title.setObjectName("pageTitle")
         layout.addWidget(title)
 
-        subtitle = QtWidgets.QLabel(
+        layout.addWidget(self._hero_card())
+        layout.addWidget(self._project_card())
+        layout.addWidget(self._suggestions_card())
+        layout.addStretch(1)
+
+    def _card(self) -> tuple[QtWidgets.QFrame, QtWidgets.QVBoxLayout]:
+        card = QtWidgets.QFrame()
+        card.setObjectName("aboutCard")
+
+        card_layout = QtWidgets.QVBoxLayout(card)
+        card_layout.setContentsMargins(16, 16, 16, 16)
+        card_layout.setSpacing(10)
+        return card, card_layout
+
+    def _card_title(self, text: str) -> QtWidgets.QLabel:
+        label = QtWidgets.QLabel(text)
+        label.setObjectName("cardTitle")
+        return label
+
+    def _muted_label(self, text: str) -> QtWidgets.QLabel:
+        label = QtWidgets.QLabel(text)
+        label.setWordWrap(True)
+        label.setProperty("muted", True)
+        return label
+
+    def _link_label(self, text: str, url: str) -> QtWidgets.QLabel:
+        label = QtWidgets.QLabel(f'<a href="{url}">{text}</a>')
+        label.setWordWrap(True)
+        label.setProperty("link", True)
+        label.setTextInteractionFlags(
+            QtCore.Qt.TextInteractionFlag.TextBrowserInteraction
+        )
+        label.setOpenExternalLinks(True)
+        return label
+
+    def _hero_card(self) -> QtWidgets.QFrame:
+        card, layout = self._card()
+        layout.addWidget(self._card_title("About this project"))
+        layout.addWidget(
+            self._muted_label(
                 "ytpl-sync is a desktop app for keeping local copies of YouTube playlists in sync."
             )
-        subtitle.setWordWrap(True)
-        subtitle.setProperty("muted", True)
-        layout.addWidget(subtitle)
-
-        note = QtWidgets.QLabel(
-            "This project is a student project."
         )
-        note.setWordWrap(True)
+        layout.addWidget(
-        note.setProperty("muted", True)
+            self._muted_label(
-        layout.addWidget(note)
+                "This is a student project."
+            )
+        )
+        return card
 
-        info_box = QtWidgets.QGroupBox("Project")
+    def _project_card(self) -> QtWidgets.QFrame:
-        info_box.setObjectName("aboutCard")
+        card, layout = self._card()
-        info_layout = QtWidgets.QFormLayout(info_box)
+        layout.addWidget(self._card_title("Project"))
-        info_layout.setLabelAlignment(QtCore.Qt.AlignmentFlag.AlignLeft)
+
-        info_layout.setFormAlignment(
+        form = QtWidgets.QFormLayout()
+        form.setLabelAlignment(QtCore.Qt.AlignmentFlag.AlignLeft)
+        form.setFormAlignment(
             QtCore.Qt.AlignmentFlag.AlignTop | QtCore.Qt.AlignmentFlag.AlignLeft
         )
-        info_layout.setHorizontalSpacing(14)
+        form.setHorizontalSpacing(14)
-        info_layout.setVerticalSpacing(10)
+        form.setVerticalSpacing(10)
 
-        author = QtWidgets.QLabel("Dark_Zoul")
+        author = self._muted_label("Dark_Zoul")
-        info_layout.addRow("Author", author)
+        form.addRow("Author", author)
-
+        form.addRow(
-        repo = QtWidgets.QLabel(
+            "Repository",
-            '<a href="https://github.com/darkzoul5/YoutubePlaylistSync">'
+            self._link_label(
-            "https://github.com/darkzoul5/YoutubePlaylistSync</a>"
+                "https://github.com/darkzoul5/YoutubePlaylistSync",
+                "https://github.com/darkzoul5/YoutubePlaylistSync",
+            ),
         )
-        repo.setTextInteractionFlags(
+        form.addRow(
-            QtCore.Qt.TextInteractionFlag.TextBrowserInteraction
+            "Report issue",
+            self._link_label(
+                "https://github.com/darkzoul5/YoutubePlaylistSync/issues",
+                "https://github.com/darkzoul5/YoutubePlaylistSync/issues",
+            ),
         )
-        repo.setOpenExternalLinks(True)
-        repo.setWordWrap(True)
-        repo.setProperty("link", True)
-        info_layout.addRow("Repository", repo)
 
-        issue = QtWidgets.QLabel(
+        layout.addLayout(form)
-            '<a href="https://github.com/darkzoul5/YoutubePlaylistSync/issues">'
+        return card
-            "https://github.com/darkzoul5/YoutubePlaylistSync/issues</a>"
-        )
-        issue.setTextInteractionFlags(
-            QtCore.Qt.TextInteractionFlag.TextBrowserInteraction
-        )
-        issue.setOpenExternalLinks(True)
-        issue.setWordWrap(True)
-        issue.setProperty("link", True)
-        info_layout.addRow("Report issue", issue)
 
-        layout.addWidget(info_box)
+    def _suggestions_card(self) -> QtWidgets.QFrame:
-
+        card, layout = self._card()
-        suggestions_box = QtWidgets.QGroupBox("Suggestions")
+        layout.addWidget(self._card_title("Suggestions"))
-        suggestions_box.setObjectName("aboutCard")
-        suggestions_layout = QtWidgets.QVBoxLayout(suggestions_box)
-        suggestions_layout.setSpacing(8)
 
         suggestions = [
             "Keep the app updated regularly so that YouTube extraction stays reliable."
         ]
         for text in suggestions:
-            label = QtWidgets.QLabel(f"• {text}")
+            layout.addWidget(self._muted_label(f"• {text}"))
-            label.setWordWrap(True)
-            label.setProperty("muted", True)
-            suggestions_layout.addWidget(label)
 
-        suggestions_layout.addStretch(1)
-        layout.addWidget(suggestions_box)
         layout.addStretch(1)
+        return card