Extract noLibrariesWidget theme and use themed line assets

YACReaderLibrary/images.qrc

@@ -42,7 +42,7 @@
         <file>../images/flow3.png</file>
         <file>../images/flow4.png</file>
         <file>../images/flow5.png</file>
-        <file>../images/glowLine.png</file>
+        <file>../images/glowLine.svg</file>
         <file>../images/metadata_dialog/loadCustomCover.svg</file>
         <file>../images/import/coversToggle.svg</file>
         <file>../images/icon-new.svg</file>
@@ -74,7 +74,7 @@
         <file>../images/library_dialogs/new.svg</file>
         <file>../images/metadata_dialog/nextCoverPage.svg</file>
         <file>../images/noLibrariesIcon.svg</file>
-        <file>../images/noLibrariesLine.png</file>
+        <file>../images/noLibrariesLine.svg</file>
         <file>../images/notCover.png</file>
         <file>../images/library_dialogs/openLibrary.svg</file>
         <file>../images/metadata_dialog/previousCoverPage.svg</file>
@@ -111,13 +111,11 @@
         <file>../images/import/updatingIcon.svg</file>
         <file>../images/custom_dialog/custom_close_button.svg</file>
         <file>../images/whats_new/whatsnew_header.svg</file>
-
         <file>../images/lists/default_0.svg</file>
         <file>../images/lists/default_1.svg</file>
         <file>../images/lists/default_2.svg</file>
         <file>../images/lists/label_template.svg</file>
         <file>../images/lists/list.svg</file>
-
         <file>../images/clearSearchNew.svg</file>
         <file>../images/iconSearchNew.svg</file>
     </qresource>

YACReaderLibrary/import_widget.cpp

@@ -23,6 +23,8 @@ class YACReaderActivityIndicatorWidget : public QWidget
 {
 public:
     YACReaderActivityIndicatorWidget(QWidget *parent = 0);
+    void setPixmaps(const QPixmap &normalLine, const QPixmap &glowLine);
+
 public slots:
 
 private:
@@ -31,16 +33,11 @@ private:
 };
 
 YACReaderActivityIndicatorWidget::YACReaderActivityIndicatorWidget(QWidget *parent)
-    : QWidget(parent)
+    : QWidget(parent), normal(nullptr), glow(nullptr)
 {
-    QPixmap line(":/images/noLibrariesLine.png");
-    QPixmap glowLine(":/images/glowLine.png");
     normal = new QLabel(this);
     glow = new QLabel(this);
 
-    normal->setPixmap(line);
-    glow->setPixmap(glowLine);
-
     auto layout = new QHBoxLayout();
 
     layout->addWidget(normal, 0, Qt::AlignVCenter);
@@ -50,11 +47,6 @@ YACReaderActivityIndicatorWidget::YACReaderActivityIndicatorWidget(QWidget *pare
     layout->setContentsMargins(4, 4, 4, 4);
     layout->setSpacing(0);
 
-    // setFixedHeight(3);
-    // resize(579,3);
-    glow->setGeometry(4, 4, glowLine.width(), glowLine.height());
-    // normal->setGeometry(0,1,579,1);
-
     auto effect = new QGraphicsOpacityEffect();
     // effect->setOpacity(1.0);
 
@@ -80,6 +72,13 @@ YACReaderActivityIndicatorWidget::YACReaderActivityIndicatorWidget(QWidget *pare
     animation->start();
 }
 
+void YACReaderActivityIndicatorWidget::setPixmaps(const QPixmap &normalLine, const QPixmap &glowLine)
+{
+    normal->setPixmap(normalLine);
+    glow->setPixmap(glowLine);
+    glow->setGeometry(4, 4, glowLine.width(), glowLine.height());
+}
+
 ImportWidget::ImportWidget(QWidget *parent)
     : QWidget(parent)
 {
@@ -88,7 +87,7 @@ ImportWidget::ImportWidget(QWidget *parent)
 
     iconLabel = new QLabel();
 
-    auto activityIndicator = new YACReaderActivityIndicatorWidget();
+    activityIndicator = new YACReaderActivityIndicatorWidget();
 
     text = new QLabel();
     textDescription = new QLabel();
@@ -399,6 +398,9 @@ void ImportWidget::applyTheme(const Theme &theme)
     bottomDecorator->setPixmap(importTheme.bottomCoversDecoration);
     bottomDecorator->setFixedHeight(importTheme.bottomCoversDecoration.height());
 
+    const auto &noLibrariesWidget = theme.noLibrariesWidget;
+    activityIndicator->setPixmaps(noLibrariesWidget.noLibrariesLinePixmap, importTheme.glowLinePixmap);
+
     // Apply text colors
     updateTextColors();
 }

YACReaderLibrary/import_widget.h

@@ -14,6 +14,8 @@
 #include <QToolButton>
 #include <QWidget>
 
+class YACReaderActivityIndicatorWidget;
+
 class ImportWidget : public QWidget, protected Themable
 {
     Q_OBJECT
@@ -57,6 +59,7 @@ private:
     QToolButton *hideButton;
     QLabel *topDecorator;
     QLabel *bottomDecorator;
+    YACReaderActivityIndicatorWidget *activityIndicator;
 
     void resizeEvent(QResizeEvent *event) override;
     void updateTextColors();

YACReaderLibrary/no_libraries_widget.cpp

@@ -13,9 +13,7 @@ NoLibrariesWidget::NoLibrariesWidget(QWidget *parent)
 
     iconLabel = new QLabel();
 
-    QPixmap line(":/images/noLibrariesLine.png");
+    lineLabel = new QLabel();
-    QLabel *lineLabel = new QLabel();
-    lineLabel->setPixmap(line);
 
     text = new QLabel(tr("You don't have any libraries yet"));
     text->setStyleSheet("QLabel {font-size:25px;font-weight:bold;}");
@@ -75,19 +73,20 @@ NoLibrariesWidget::NoLibrariesWidget(QWidget *parent)
 
 void NoLibrariesWidget::applyTheme(const Theme &theme)
 {
-    auto emptyTheme = theme.emptyContainer;
+    auto nlwTheme = theme.noLibrariesWidget;
 
     QPalette p(palette());
-    p.setColor(QPalette::Window, emptyTheme.backgroundColor);
+    p.setColor(QPalette::Window, nlwTheme.backgroundColor);
     setPalette(p);
 
     QPalette textPalette = text->palette();
-    textPalette.setColor(QPalette::WindowText, emptyTheme.textColor);
+    textPalette.setColor(QPalette::WindowText, nlwTheme.textColor);
     text->setPalette(textPalette);
 
     QPalette descPalette = textDescription->palette();
-    descPalette.setColor(QPalette::WindowText, emptyTheme.descriptionTextColor);
+    descPalette.setColor(QPalette::WindowText, nlwTheme.descriptionTextColor);
     textDescription->setPalette(descPalette);
 
-    iconLabel->setPixmap(emptyTheme.noLibrariesIcon);
+    iconLabel->setPixmap(nlwTheme.noLibrariesIcon);
+    lineLabel->setPixmap(nlwTheme.noLibrariesLinePixmap);
 }

YACReaderLibrary/no_libraries_widget.h

@@ -25,6 +25,7 @@ private:
     QLabel *iconLabel;
     QLabel *text;
     QLabel *textDescription;
+    QLabel *lineLabel;
 };
 
 #endif // NO_LIBRARIES_WIDGET_H

YACReaderLibrary/themes/builtin_classic.json

@@ -39,9 +39,7 @@
     },
     "emptyContainer": {
         "backgroundColor": "#2a2a2a",
-        "descriptionTextColor": "#aaaaaa",
+        "iconColor": "#4c4c4c",
-        "searchIconColor": "#4c4c4c",
-        "textColor": "#cccccc",
         "titleTextColor": "#cccccc"
     },
     "gridAndInfoView": {
@@ -97,6 +95,7 @@
         "coversViewBackgroundColor": "#3a3a3a",
         "currentComicTextColor": "#aaaaaa",
         "descriptionTextColor": "#aaaaaa",
+        "glowLineColor": "#ffe100",
         "iconCheckedColor": "#aaaaaa",
         "iconColor": "#cccccc",
         "modeIconColor": "#4a4a4a",
@@ -179,6 +178,13 @@
         "selectionBackgroundColor": "#2e2e2e",
         "textColor": "#dddfdf"
     },
+    "noLibrariesWidget": {
+        "backgroundColor": "#2a2a2a",
+        "descriptionTextColor": "#aaaaaa",
+        "iconColor": "#4c4c4c",
+        "noLibrariesLineColor": "#a8a8a8",
+        "textColor": "#cccccc"
+    },
     "readingListIcons": {
         "currentlyReadingMainColor": "#ffcc00",
         "currentlyReadingMainSelectedColor": "#ffcc00",

YACReaderLibrary/themes/builtin_dark.json

@@ -39,9 +39,7 @@
     },
     "emptyContainer": {
         "backgroundColor": "#2a2a2a",
-        "descriptionTextColor": "#aaaaaa",
+        "iconColor": "#4c4c4c",
-        "searchIconColor": "#4c4c4c",
-        "textColor": "#cccccc",
         "titleTextColor": "#cccccc"
     },
     "gridAndInfoView": {
@@ -97,6 +95,7 @@
         "coversViewBackgroundColor": "#3a3a3a",
         "currentComicTextColor": "#aaaaaa",
         "descriptionTextColor": "#aaaaaa",
+        "glowLineColor": "#ffe100",
         "iconCheckedColor": "#aaaaaa",
         "iconColor": "#cccccc",
         "modeIconColor": "#4a4a4a",
@@ -179,6 +178,13 @@
         "selectionBackgroundColor": "#2e2e2e",
         "textColor": "#dddfdf"
     },
+    "noLibrariesWidget": {
+        "backgroundColor": "#2a2a2a",
+        "descriptionTextColor": "#aaaaaa",
+        "iconColor": "#4c4c4c",
+        "noLibrariesLineColor": "#a8a8a8",
+        "textColor": "#cccccc"
+    },
     "readingListIcons": {
         "currentlyReadingMainColor": "#ffcc00",
         "currentlyReadingMainSelectedColor": "#ffcc00",

YACReaderLibrary/themes/builtin_light.json

@@ -39,9 +39,7 @@
     },
     "emptyContainer": {
         "backgroundColor": "#ffffff",
-        "descriptionTextColor": "#565959",
+        "iconColor": "#cccccc",
-        "searchIconColor": "#cccccc",
-        "textColor": "#495252",
         "titleTextColor": "#888888"
     },
     "gridAndInfoView": {
@@ -97,6 +95,7 @@
         "coversViewBackgroundColor": "#e6e6e6",
         "currentComicTextColor": "#565959",
         "descriptionTextColor": "#565959",
+        "glowLineColor": "#ffe100",
         "iconCheckedColor": "#565959",
         "iconColor": "#495252",
         "modeIconColor": "#e6e6e6",
@@ -179,6 +178,13 @@
         "selectionBackgroundColor": "#333133",
         "textColor": "#000000"
     },
+    "noLibrariesWidget": {
+        "backgroundColor": "#ffffff",
+        "descriptionTextColor": "#565959",
+        "iconColor": "#cccccc",
+        "noLibrariesLineColor": "#a8a8a8",
+        "textColor": "#495252"
+    },
     "readingListIcons": {
         "currentlyReadingMainColor": "#ffcc00",
         "currentlyReadingMainSelectedColor": "#ffcc00",

YACReaderLibrary/themes/theme.h

@@ -122,11 +122,6 @@ struct EmptyContainerTheme {
     QColor backgroundColor;
     QString titleLabelQSS;
 
-    // For NoLibrariesWidget
-    QColor textColor;
-    QColor descriptionTextColor;
-    QPixmap noLibrariesIcon;
-
     // Search-related icons (themed from search_result.svg)
     QPixmap searchingIcon; // For ClassicComicsView searching state
     QPixmap noSearchResultsIcon; // For NoSearchResultsWidget empty state
@@ -139,6 +134,14 @@ struct EmptyContainerTheme {
     QMap<int, QPixmap> emptyLabelIcons; // Keyed by YACReader::LabelColors enum value
 };
 
+struct NoLibrariesWidgetTheme {
+    QColor backgroundColor; // Background of the widget
+    QColor textColor; // Main title text color
+    QColor descriptionTextColor; // Description text color
+    QPixmap noLibrariesIcon; // Icon displayed in the widget
+    QPixmap noLibrariesLinePixmap; // Themed horizontal line separator
+};
+
 struct SidebarTheme {
     QColor backgroundColor;
     QColor separatorColor;
@@ -172,6 +175,7 @@ struct ImportWidgetTheme {
     QPixmap importingIcon;
     QPixmap updatingIcon;
     QIcon coversToggleIcon;
+    QPixmap glowLinePixmap; // Themed glow line animation
 };
 
 struct NavigationTreeThemeTemplates {
@@ -491,6 +495,7 @@ struct Theme {
     HelpAboutDialogTheme helpAboutDialog;
     WhatsNewDialogTheme whatsNewDialog;
     EmptyContainerTheme emptyContainer;
+    NoLibrariesWidgetTheme noLibrariesWidget;
     SidebarTheme sidebar;
     SidebarIconsTheme sidebarIcons;
     LibraryItemTheme libraryItem;

YACReaderLibrary/themes/theme_factory.cpp

@@ -60,11 +60,15 @@ struct EmptyContainerParams {
     QColor backgroundColor;
     QColor titleTextColor;
 
-    // For NoLibrariesWidget
+    QColor iconColor;
+};
+
+struct NoLibrariesWidgetParams {
+    QColor backgroundColor;
     QColor textColor;
     QColor descriptionTextColor;
-
+    QColor iconColor;
-    QColor searchIconColor; // Color for search-related icons (replaces #f0f in search_result.svg)
+    QColor noLibrariesLineColor;
 };
 
 struct SidebarParams {
@@ -94,6 +98,7 @@ struct ImportWidgetParams {
     QColor modeIconColor;
     QColor iconColor;
     QColor iconCheckedColor;
+    QColor glowLineColor;
 };
 
 struct NavigationTreeParams {
@@ -345,6 +350,7 @@ struct ThemeParams {
     MetadataScraperDialogParams metadataScraperDialogParams;
     HelpAboutDialogTheme helpAboutDialogParams;
     EmptyContainerParams emptyContainerParams;
+    NoLibrariesWidgetParams noLibrariesWidgetParams;
     SidebarParams sidebarParams;
     SidebarIconsParams sidebarIconsParams;
     LibraryItemParams libraryItemParams;
@@ -457,21 +463,19 @@ Theme makeTheme(const ThemeParams &params)
 
     theme.emptyContainer.backgroundColor = ec.backgroundColor;
     theme.emptyContainer.titleLabelQSS = ect.titleLabelQSS.arg(ec.titleTextColor.name());
-    theme.emptyContainer.textColor = ec.textColor;
-    theme.emptyContainer.descriptionTextColor = ec.descriptionTextColor;
-    theme.emptyContainer.noLibrariesIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/noLibrariesIcon.svg", ec.searchIconColor, params.meta.id), 165, 160, qApp->devicePixelRatio());
     {
         const qreal dpr = qApp->devicePixelRatio();
-        theme.emptyContainer.searchingIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.searchIconColor, params.meta.id, { .suffix = "_searching" }), 97, dpr);
+        const auto &rli = params.readingListIconsParams;
-        theme.emptyContainer.noSearchResultsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.searchIconColor, params.meta.id, { .suffix = "_no_results" }), 239, dpr);
 
-        theme.emptyContainer.emptyFolderIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_folder.svg", ec.searchIconColor, params.meta.id), 319, 243, dpr);
+        theme.emptyContainer.searchingIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.iconColor, params.meta.id, { .suffix = "_searching" }), 97, dpr);
-        theme.emptyContainer.emptyFavoritesIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_favorites.svg", QColor(0xe84853), params.meta.id), 238, 223, dpr);
+        theme.emptyContainer.noSearchResultsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/search_result.svg", ec.iconColor, params.meta.id, { .suffix = "_no_results" }), 239, dpr);
-        theme.emptyContainer.emptyCurrentReadingsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_current_readings.svg", ec.searchIconColor, params.meta.id), 167, 214, dpr);
+
-        theme.emptyContainer.emptyReadingListIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_reading_list.svg", ec.searchIconColor, params.meta.id), 248, 187, dpr);
+        theme.emptyContainer.emptyFolderIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_folder.svg", ec.iconColor, params.meta.id), 319, 243, dpr);
+        theme.emptyContainer.emptyFavoritesIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_favorites.svg", rli.favoritesMainColor, params.meta.id), 238, 223, dpr);
+        theme.emptyContainer.emptyCurrentReadingsIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_current_readings.svg", ec.iconColor, params.meta.id), 167, 214, dpr);
+        theme.emptyContainer.emptyReadingListIcon = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/empty_container/empty_reading_list.svg", ec.iconColor, params.meta.id), 248, 187, dpr);
 
         // Generate empty label icons for each label color
-        const auto &rli = params.readingListIconsParams;
         for (int c = YACReader::YRed; c <= YACReader::YDark; ++c) {
             auto labelColor = static_cast<YACReader::LabelColors>(c);
             auto colorName = YACReader::colorToName(labelColor);
@@ -484,6 +488,21 @@ Theme makeTheme(const ThemeParams &params)
     }
     // end EmptyContainer
 
+    // NoLibrariesWidget
+    const auto &nlw = params.noLibrariesWidgetParams;
+    const qreal dprNLW = qApp->devicePixelRatio();
+
+    theme.noLibrariesWidget.backgroundColor = nlw.backgroundColor;
+    theme.noLibrariesWidget.textColor = nlw.textColor;
+    theme.noLibrariesWidget.descriptionTextColor = nlw.descriptionTextColor;
+    theme.noLibrariesWidget.noLibrariesIcon = renderSvgToPixmap(
+            recoloredSvgToThemeFile(":/images/noLibrariesIcon.svg", nlw.iconColor, params.meta.id),
+            165, 160, dprNLW);
+    theme.noLibrariesWidget.noLibrariesLinePixmap = renderSvgToPixmap(
+            recoloredSvgToThemeFile(":/images/noLibrariesLine.svg", nlw.noLibrariesLineColor, params.meta.id),
+            579, 1, dprNLW);
+    // end NoLibrariesWidget
+
     // Sidebar
     const auto &sb = params.sidebarParams;
     theme.sidebar.backgroundColor = sb.backgroundColor;
@@ -508,6 +527,8 @@ Theme makeTheme(const ThemeParams &params)
     theme.importWidget.bottomCoversDecoration = QPixmap(recoloredSvgToThemeFile(":/images/import/importBottomCoversDecoration.svg", iw.coversDecorationBgColor, iw.coversDecorationShadowColor, params.meta.id));
     theme.importWidget.importingIcon = QPixmap(recoloredSvgToThemeFile(":/images/import/importingIcon.svg", iw.modeIconColor, params.meta.id));
     theme.importWidget.updatingIcon = QPixmap(recoloredSvgToThemeFile(":/images/import/updatingIcon.svg", iw.modeIconColor, params.meta.id));
+    // glowLine: 579x5 glow line animation
+    theme.importWidget.glowLinePixmap = renderSvgToPixmap(recoloredSvgToThemeFile(":/images/glowLine.svg", iw.glowLineColor, params.meta.id), 579, 5, qApp->devicePixelRatio());
     {
         QIcon coversToggle;
         const QString normalPath = recoloredSvgToThemeFile(":/images/import/coversToggle.svg", iw.iconColor, params.meta.id);
@@ -1005,9 +1026,17 @@ Theme makeTheme(const QJsonObject &json)
         auto &ec = p.emptyContainerParams;
         ec.backgroundColor = colorFromJson(o, "backgroundColor", ec.backgroundColor);
         ec.titleTextColor = colorFromJson(o, "titleTextColor", ec.titleTextColor);
-        ec.textColor = colorFromJson(o, "textColor", ec.textColor);
+        ec.iconColor = colorFromJson(o, "iconColor", ec.iconColor);
-        ec.descriptionTextColor = colorFromJson(o, "descriptionTextColor", ec.descriptionTextColor);
+    }
-        ec.searchIconColor = colorFromJson(o, "searchIconColor", ec.searchIconColor);
+
+    if (json.contains("noLibrariesWidget")) {
+        const auto o = json["noLibrariesWidget"].toObject();
+        auto &nlw = p.noLibrariesWidgetParams;
+        nlw.backgroundColor = colorFromJson(o, "backgroundColor", nlw.backgroundColor);
+        nlw.textColor = colorFromJson(o, "textColor", nlw.textColor);
+        nlw.descriptionTextColor = colorFromJson(o, "descriptionTextColor", nlw.descriptionTextColor);
+        nlw.iconColor = colorFromJson(o, "iconColor", nlw.iconColor);
+        nlw.noLibrariesLineColor = colorFromJson(o, "noLibrariesLineColor", nlw.noLibrariesLineColor);
     }
 
     if (json.contains("sidebar")) {
@@ -1058,6 +1087,7 @@ Theme makeTheme(const QJsonObject &json)
         iw.modeIconColor = colorFromJson(o, "modeIconColor", iw.modeIconColor);
         iw.iconColor = colorFromJson(o, "iconColor", iw.iconColor);
         iw.iconCheckedColor = colorFromJson(o, "iconCheckedColor", iw.iconCheckedColor);
+        iw.glowLineColor = colorFromJson(o, "glowLineColor", iw.glowLineColor);
     }
 
     if (json.contains("serverConfigDialog")) {

images/glowLine.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 589 3.5">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke: url(#linear-gradient);
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        fill: none;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2 {
+        stroke: url(#linear-gradient-3);
+      }
+
+      .cls-2, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-3 {
+        stroke: url(#linear-gradient-2);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="9.67" y1=".42" x2="588.67" y2=".42" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f0f" stop-opacity=".1"/>
+      <stop offset=".03" stop-color="#f0f" stop-opacity=".2"/>
+      <stop offset=".1" stop-color="#f0f" stop-opacity=".41"/>
+      <stop offset=".17" stop-color="#f0f" stop-opacity=".59"/>
+      <stop offset=".24" stop-color="#f0f" stop-opacity=".74"/>
+      <stop offset=".3" stop-color="#f0f" stop-opacity=".85"/>
+      <stop offset=".37" stop-color="#f0f" stop-opacity=".93"/>
+      <stop offset=".44" stop-color="#f0f" stop-opacity=".98"/>
+      <stop offset=".5" stop-color="#f0f"/>
+      <stop offset=".56" stop-color="#f0f" stop-opacity=".98"/>
+      <stop offset=".63" stop-color="#f0f" stop-opacity=".93"/>
+      <stop offset=".7" stop-color="#f0f" stop-opacity=".85"/>
+      <stop offset=".76" stop-color="#f0f" stop-opacity=".74"/>
+      <stop offset=".83" stop-color="#f0f" stop-opacity=".59"/>
+      <stop offset=".9" stop-color="#f0f" stop-opacity=".41"/>
+      <stop offset=".97" stop-color="#f0f" stop-opacity=".2"/>
+      <stop offset="1" stop-color="#f0f" stop-opacity=".1"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="9.67" y1="1.92" x2="588.67" y2="1.92" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f0f" stop-opacity="0"/>
+      <stop offset=".5" stop-color="#f0f"/>
+      <stop offset="1" stop-color="#f0f" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="9.67" y1="2.92" x2="588.67" y2="2.92" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f0f" stop-opacity="0"/>
+      <stop offset=".08" stop-color="#f0f" stop-opacity=".01"/>
+      <stop offset=".15" stop-color="#f0f" stop-opacity=".05"/>
+      <stop offset=".21" stop-color="#f0f" stop-opacity=".12"/>
+      <stop offset=".26" stop-color="#f0f" stop-opacity=".21"/>
+      <stop offset=".32" stop-color="#f0f" stop-opacity=".33"/>
+      <stop offset=".37" stop-color="#f0f" stop-opacity=".48"/>
+      <stop offset=".42" stop-color="#f0f" stop-opacity=".66"/>
+      <stop offset=".47" stop-color="#f0f" stop-opacity=".86"/>
+      <stop offset=".5" stop-color="#f0f"/>
+      <stop offset=".53" stop-color="#f0f" stop-opacity=".86"/>
+      <stop offset=".58" stop-color="#f0f" stop-opacity=".66"/>
+      <stop offset=".63" stop-color="#f0f" stop-opacity=".48"/>
+      <stop offset=".68" stop-color="#f0f" stop-opacity=".33"/>
+      <stop offset=".74" stop-color="#f0f" stop-opacity=".21"/>
+      <stop offset=".79" stop-color="#f0f" stop-opacity=".12"/>
+      <stop offset=".85" stop-color="#f0f" stop-opacity=".05"/>
+      <stop offset=".92" stop-color="#f0f" stop-opacity=".01"/>
+      <stop offset="1" stop-color="#f0f" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <line class="cls-1" x1="9.67" y1=".42" x2="588.67" y2=".42"/>
+  <line class="cls-3" x1="9.67" y1="1.92" x2="588.67" y2="1.92"/>
+  <line class="cls-2" x1="9.67" y1="2.92" x2="588.67" y2="2.92"/>
+</svg>

images/noLibrariesLine.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 579 1">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+        stroke: url(#linear-gradient-2);
+        stroke-miterlimit: 10;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="0" y1=".5" x2="579" y2=".5" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f0f" stop-opacity="0"/>
+      <stop offset="0" stop-color="#f0f" stop-opacity=".04"/>
+      <stop offset=".02" stop-color="#f0f" stop-opacity=".22"/>
+      <stop offset=".05" stop-color="#f0f" stop-opacity=".39"/>
+      <stop offset=".07" stop-color="#f0f" stop-opacity=".53"/>
+      <stop offset=".1" stop-color="#f0f" stop-opacity=".66"/>
+      <stop offset=".13" stop-color="#f0f" stop-opacity=".77"/>
+      <stop offset=".16" stop-color="#f0f" stop-opacity=".85"/>
+      <stop offset=".2" stop-color="#f0f" stop-opacity=".92"/>
+      <stop offset=".25" stop-color="#f0f" stop-opacity=".97"/>
+      <stop offset=".31" stop-color="#f0f" stop-opacity=".99"/>
+      <stop offset=".5" stop-color="#f0f"/>
+      <stop offset=".69" stop-color="#f0f" stop-opacity=".99"/>
+      <stop offset=".75" stop-color="#f0f" stop-opacity=".97"/>
+      <stop offset=".8" stop-color="#f0f" stop-opacity=".92"/>
+      <stop offset=".84" stop-color="#f0f" stop-opacity=".85"/>
+      <stop offset=".87" stop-color="#f0f" stop-opacity=".77"/>
+      <stop offset=".9" stop-color="#f0f" stop-opacity=".66"/>
+      <stop offset=".93" stop-color="#f0f" stop-opacity=".53"/>
+      <stop offset=".95" stop-color="#f0f" stop-opacity=".39"/>
+      <stop offset=".98" stop-color="#f0f" stop-opacity=".22"/>
+      <stop offset="1" stop-color="#f0f" stop-opacity=".04"/>
+      <stop offset="1" stop-color="#f0f" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0" y1=".5" x2="579" y2=".5" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f0f" stop-opacity="0"/>
+      <stop offset=".5" stop-color="#f0f"/>
+      <stop offset="1" stop-color="#f0f" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+  <line class="cls-1" y1=".5" x2="579" y2=".5"/>
+</svg>