fix: svgify user card pin button (#6399)

CHANGELOG.md

@@ -93,6 +93,7 @@
 - Dev: Refactored `Button` and friends. (#6102, #6255, #6266, #6302, #6268, #6334, #6371, #6372)
 - Dev: Made "add split" button (part of the split header) a natively rendered button. (#6349)
 - Dev: Made Settings & Account button on Linux/macOS SVGs. (#6267)
+- Dev: Made user card "pin" button SVGs. (#6399)
 - Dev: Some more setting widget refactors. (#6317)
 - Dev: Emoji style / set is now stored lowercase (and matched case-insensitively). Changing emoji style from this point on and then running an old version might mean you will use the Twitter emoji style by default. (#6300)
 - Dev: Refactored `OnceFlag`. (#6237, #6316)

resources/buttons/pinDisabled-darkMode.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="15.999924mm"
+   height="15.999949mm"
+   viewBox="0 0 15.999924 15.999949"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><g
+     id="layer2"
+     transform="translate(-4.439446e-5,3.0446178e-5)"><path
+       class="UnoptimicedTransforms"
+       style="fill:#b7b7b7;fill-opacity:1;stroke:#b7b7b7;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 12.435417,-0.52916667 3.96875,3.96874997 V 3.96875 l -4.7625,4.7625 V 11.1125 L 11.1125,11.641667 H 10.847917 L 4.2333333,5.0270833 V 4.7625 L 4.7625,4.2333333 h 2.38125 l 4.7625,-4.76249997 z"
+       id="path234"
+       transform="matrix(1.0300653,0,0,1.0300668,-1.0336639,0.68131565)" /><path
+       style="fill:#b7b7b7;fill-opacity:1;stroke:#b7b7b7;stroke-width:0.272538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 5.098444,9.8113564 6.1885966,10.901511 1.2829102,15.807204 0.19275776,14.717051 Z"
+       id="path1157" /></g></svg>

resources/buttons/pinDisabled-lightMode.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="15.999924mm"
+   height="15.999949mm"
+   viewBox="0 0 15.999924 15.999949"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><g
+     id="layer2"
+     transform="translate(-4.439446e-5,3.0446178e-5)"><path
+       class="UnoptimicedTransforms"
+       style="fill:#4d4d4d;fill-opacity:1;stroke:#4d4d4d;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 12.435417,-0.52916667 3.96875,3.96874997 V 3.96875 l -4.7625,4.7625 V 11.1125 L 11.1125,11.641667 H 10.847917 L 4.2333333,5.0270833 V 4.7625 L 4.7625,4.2333333 h 2.38125 l 4.7625,-4.76249997 z"
+       id="path234"
+       transform="matrix(1.0300653,0,0,1.0300668,-1.0336639,0.68131565)" /><path
+       style="fill:#4d4d4d;fill-opacity:1;stroke:#4d4d4d;stroke-width:0.272538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 5.098444,9.8113564 6.1885966,10.901511 1.2829102,15.807204 0.19275776,14.717051 Z"
+       id="path1157" /></g></svg>

resources/buttons/pinEnabled.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="15.999924mm"
+   height="15.999949mm"
+   viewBox="0 0 15.999924 15.999949"
+   version="1.1"
+   id="svg5"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2" /><g
+     id="layer2"
+     transform="translate(-4.439446e-5,3.0446178e-5)"><path
+       class="UnoptimicedTransforms"
+       style="fill:#a34532;fill-opacity:1;stroke:#a34532;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 12.435417,-0.52916667 3.96875,3.96874997 V 3.96875 l -4.7625,4.7625 V 11.1125 L 11.1125,11.641667 H 10.847917 L 4.2333333,5.0270833 V 4.7625 L 4.7625,4.2333333 h 2.38125 l 4.7625,-4.76249997 z"
+       id="path234"
+       transform="matrix(1.0300653,0,0,1.0300668,-1.0336639,0.68131565)" /><path
+       style="fill:#a34532;fill-opacity:1;stroke:#a34532;stroke-width:0.272538px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 5.098444,9.8113564 6.1885966,10.901511 1.2829102,15.807204 0.19275776,14.717051 Z"
+       id="path1157" /></g></svg>

src/singletons/Theme.cpp

@@ -549,12 +549,10 @@ void Theme::parseFrom(const QJsonObject &root, bool isCustomTheme)
     if (this->isLightTheme())
     {
         this->buttons.copy = getResources().buttons.copyDark;
-        this->buttons.pin = getResources().buttons.pinDisabledDark;
     }
     else
     {
         this->buttons.copy = getResources().buttons.copyLight;
-        this->buttons.pin = getResources().buttons.pinDisabledLight;
     }
 
     // This assumes that we never update the application palette

src/singletons/Theme.hpp

@@ -153,7 +153,6 @@ public:
 
     struct {
         QPixmap copy;
-        QPixmap pin;
     } buttons;
 
     QPalette palette;

src/widgets/DraggablePopup.cpp

@@ -1,8 +1,6 @@
 #include "widgets/DraggablePopup.hpp"
 
-#include "singletons/Resources.hpp"
+#include "buttons/SvgButton.hpp"
-#include "singletons/Theme.hpp"
-#include "widgets/buttons/PixmapButton.hpp"
 
 #include <QMouseEvent>
 
@@ -109,18 +107,17 @@ void DraggablePopup::togglePinned()
     if (isPinned_)
     {
         this->windowDeactivateAction = WindowDeactivateAction::Nothing;
-        this->pinButton_->setPixmap(getResources().buttons.pinEnabled);
+        this->pinButton_->setSource(this->pinEnabledSource_);
     }
     else
     {
         this->windowDeactivateAction = WindowDeactivateAction::Delete;
-        this->pinButton_->setPixmap(getTheme()->buttons.pin);
+        this->pinButton_->setSource(this->pinDisabledSource_);
     }
 }
 Button *DraggablePopup::createPinButton()
 {
-    this->pinButton_ = new PixmapButton(this);
+    this->pinButton_ = new SvgButton(pinDisabledSource_, this, {3, 3});
-    this->pinButton_->setPixmap(getTheme()->buttons.pin);
     this->pinButton_->setScaleIndependentSize(18, 18);
     this->pinButton_->setToolTip("Pin Window");
 

src/widgets/DraggablePopup.hpp

@@ -1,5 +1,6 @@
 #pragma once
 
+#include "buttons/SvgButton.hpp"
 #include "widgets/BaseWindow.hpp"
 
 #include <QPoint>
@@ -9,8 +10,6 @@
 
 namespace chatterino {
 
-class PixmapButton;
-
 class DraggablePopup : public BaseWindow
 {
     Q_OBJECT
@@ -62,7 +61,15 @@ private:
     // dragTimer_ is called ~60 times per second once the user has initiated dragging
     QTimer dragTimer_;
 
-    PixmapButton *pinButton_ = nullptr;
+    SvgButton *pinButton_{};
+    SvgButton::Src pinDisabledSource_{
+        .dark = ":/buttons/pinDisabled-darkMode.svg",
+        .light = ":/buttons/pinDisabled-lightMode.svg",
+    };
+    SvgButton::Src pinEnabledSource_{
+        .dark = ":/buttons/pinEnabled.svg",
+        .light = ":/buttons/pinEnabled.svg",
+    };
     bool isPinned_ = false;
 };
 

src/widgets/PluginRepl.cpp

@@ -11,7 +11,6 @@
 #    include "singletons/Resources.hpp"
 #    include "singletons/Settings.hpp"
 #    include "singletons/Theme.hpp"
-#    include "widgets/buttons/PixmapButton.hpp"
 #    include "widgets/buttons/SvgButton.hpp"
 
 #    include <QBoxLayout>
@@ -445,7 +444,7 @@ PluginRepl::PluginRepl(QString id, QWidget *parent)
             }
         });
 
-        this->ui.pin = new PixmapButton;
+        this->ui.pin = new SvgButton(this->ui.pinDisabledSource_, this, {0, 0});
         this->ui.pin->setScaleIndependentSize({18, 18});
         this->ui.pin->setToolTip(u"Pin Window"_s);
         QObject::connect(this->ui.pin, &Button::leftClicked, this, [this] {
@@ -512,15 +511,6 @@ void PluginRepl::themeChangedEvent()
         this->blockFormats.error.setBackground(QColor(0x4b2f36));
     }
 
-    if (this->isPinned)
-    {
-        this->ui.pin->setPixmap(getResources().buttons.pinEnabled);
-    }
-    else
-    {
-        this->ui.pin->setPixmap(getTheme()->buttons.pin);
-    }
-
     auto pal = this->palette();
     pal.setColor(QPalette::Window,
                  getTheme()->tabs.selected.backgrounds.regular);
@@ -754,11 +744,11 @@ void PluginRepl::updatePinned()
     this->setTopMost(this->isPinned);
     if (this->isPinned)
     {
-        this->ui.pin->setPixmap(getResources().buttons.pinEnabled);
+        this->ui.pin->setSource(this->ui.pinEnabledSource_);
     }
     else
     {
-        this->ui.pin->setPixmap(getTheme()->buttons.pin);
+        this->ui.pin->setSource(this->ui.pinDisabledSource_);
     }
 }
 

src/widgets/PluginRepl.hpp

@@ -1,6 +1,7 @@
 #pragma once
 
 #ifdef CHATTERINO_HAVE_PLUGINS
+#    include "buttons/SvgButton.hpp"
 #    include "widgets/BaseWindow.hpp"
 
 #    include <boost/signals2/connection.hpp>
@@ -20,8 +21,6 @@ enum class LogLevel;
 namespace chatterino {
 
 class Plugin;
-class SvgButton;
-class PixmapButton;
 
 class PluginRepl : public BaseWindow
 {
@@ -65,7 +64,15 @@ private:
         QTextEdit *output = nullptr;
         SvgButton *clear = nullptr;
         SvgButton *reload = nullptr;
-        PixmapButton *pin = nullptr;
+        SvgButton *pin = nullptr;
+        SvgButton::Src pinDisabledSource_{
+            .dark = ":/buttons/pinDisabled-darkMode.svg",
+            .light = ":/buttons/pinDisabled-lightMode.svg",
+        };
+        SvgButton::Src pinEnabledSource_{
+            .dark = ":/buttons/pinEnabled.svg",
+            .light = ":/buttons/pinEnabled.svg",
+        };
     } ui;
 
     struct {