Welcome: Unify design with Qt Design Studio

This applies the design of the new Welcome Screen for the Qt Design
Studio to the Welcome Screen of Qt Creator.

Change-Id: Id63283da1db43ac1036d371694cc2ea4a6de8d8c
Reviewed-by: Eike Ziller <eike.ziller@qt.io>

share/qtcreator/themes/dark.creatortheme

@@ -303,13 +303,13 @@ Debugger_WatchItem_ValueChanged=ffff6666
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
 Welcome_TextColor=text
-Welcome_ForegroundPrimaryColor=ff999999
+Welcome_ForegroundPrimaryColor=ffa3a3a3
 Welcome_ForegroundSecondaryColor=ff808080
-Welcome_BackgroundColor=normalBackground
+Welcome_BackgroundPrimaryColor=normalBackground
-Welcome_ButtonBackgroundColor=normalBackground
+Welcome_BackgroundSecondaryColor=shadowBackground
-Welcome_DividerColor=ff555555
+Welcome_HoverColor=ff404040
-Welcome_HoverColor=ff444444
+Welcome_AccentColor=ff57d658
-Welcome_LinkColor=ff78bb39
+Welcome_LinkColor=ff67e668
 Welcome_DisabledLinkColor=textDisabled
 
 Timeline_TextColor=text

share/qtcreator/themes/default.creatortheme

@@ -293,13 +293,13 @@ Debugger_WatchItem_ValueChanged=ffc80000
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
 Welcome_TextColor=ff000000
-Welcome_ForegroundPrimaryColor=ff555759
+Welcome_ForegroundPrimaryColor=shadowBackground
-Welcome_ForegroundSecondaryColor=ff727476
+Welcome_ForegroundSecondaryColor=ff939393
-Welcome_BackgroundColor=fff8f8f8
+Welcome_BackgroundPrimaryColor=fffafafa
-Welcome_ButtonBackgroundColor=ffdfdfdf
+Welcome_BackgroundSecondaryColor=ffffffff
-Welcome_DividerColor=ffd6d6d6
+Welcome_HoverColor=ffefefef
-Welcome_HoverColor=ffe8e8e8
+Welcome_AccentColor=ff45ce55
-Welcome_LinkColor=ff5caa15
+Welcome_LinkColor=ff20a020
 Welcome_DisabledLinkColor=textDisabled
 
 Timeline_TextColor=darkText

share/qtcreator/themes/design-light.creatortheme

@@ -308,13 +308,13 @@ Debugger_WatchItem_ValueChanged=ffbf0303
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
 Welcome_TextColor=ff000000
-Welcome_ForegroundPrimaryColor=ff404244
+Welcome_ForegroundPrimaryColor=ff404040
-Welcome_ForegroundSecondaryColor=ff727476
+Welcome_ForegroundSecondaryColor=ff727272
-Welcome_BackgroundColor=normalBackground
+Welcome_BackgroundPrimaryColor=ffeaeaea
-Welcome_ButtonBackgroundColor=normalBackground
+Welcome_BackgroundSecondaryColor=ffefefef
-Welcome_DividerColor=ffd6d6d6
+Welcome_HoverColor=ffe1e1e1
-Welcome_HoverColor=fff6f6f6
+Welcome_AccentColor=ff25709a
-Welcome_LinkColor=ff5caa15
+Welcome_LinkColor=ff104090
 Welcome_DisabledLinkColor=textDisabled
 
 Timeline_TextColor=text

share/qtcreator/themes/design.creatortheme

@@ -305,13 +305,13 @@ Debugger_WatchItem_ValueChanged=ffff6666
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
 Welcome_TextColor=text
-Welcome_ForegroundPrimaryColor=ff999999
+Welcome_ForegroundPrimaryColor=ffa3a3a3
 Welcome_ForegroundSecondaryColor=ff808080
-Welcome_BackgroundColor=normalBackground
+Welcome_BackgroundPrimaryColor=ff242424
-Welcome_ButtonBackgroundColor=normalBackground
+Welcome_BackgroundSecondaryColor=ff1c1c1c
-Welcome_DividerColor=ff555555
+Welcome_HoverColor=ff2b2a2a
-Welcome_HoverColor=ff444444
+Welcome_AccentColor=ff3f8ccc
-Welcome_LinkColor=ff7fc63c
+Welcome_LinkColor=ff5fafef
 Welcome_DisabledLinkColor=textDisabled
 
 Timeline_TextColor=text

share/qtcreator/themes/flat-dark.creatortheme

@@ -309,11 +309,11 @@ Debugger_Breakpoint_TextMarkColor=ffff4040
 Welcome_TextColor=text
 Welcome_ForegroundPrimaryColor=ff999999
 Welcome_ForegroundSecondaryColor=ff808080
-Welcome_BackgroundColor=normalBackground
+Welcome_BackgroundPrimaryColor=normalBackground
-Welcome_ButtonBackgroundColor=normalBackground
+Welcome_BackgroundSecondaryColor=ff242628
-Welcome_DividerColor=ff555555
+Welcome_HoverColor=ff404243
-Welcome_HoverColor=ff444444
+Welcome_AccentColor=ff36c148
-Welcome_LinkColor=ff7fc63c
+Welcome_LinkColor=ff5fcf4f
 Welcome_DisabledLinkColor=textDisabled
 
 Timeline_TextColor=text

share/qtcreator/themes/flat-light.creatortheme

@@ -303,13 +303,13 @@ Debugger_WatchItem_ValueChanged=ffbf0303
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
 Welcome_TextColor=ff000000
-Welcome_ForegroundPrimaryColor=ff404244
+Welcome_ForegroundPrimaryColor=ff232323
-Welcome_ForegroundSecondaryColor=ff727476
+Welcome_ForegroundSecondaryColor=ff939393
-Welcome_BackgroundColor=normalBackground
+Welcome_BackgroundPrimaryColor=fffafafa
-Welcome_ButtonBackgroundColor=normalBackground
+Welcome_BackgroundSecondaryColor=ffffffff
-Welcome_DividerColor=ffd6d6d6
+Welcome_HoverColor=ffefefef
-Welcome_HoverColor=fff6f6f6
+Welcome_AccentColor=ff45ce55
-Welcome_LinkColor=ff5caa15
+Welcome_LinkColor=ff20a020
 Welcome_DisabledLinkColor=textDisabled
 
 Timeline_TextColor=text

share/qtcreator/themes/flat.creatortheme

@@ -302,12 +302,12 @@ Debugger_Breakpoint_TextMarkColor=ffff4040
 
 Welcome_TextColor=ff000000
 Welcome_ForegroundPrimaryColor=shadowBackground
-Welcome_ForegroundSecondaryColor=ff727476
+Welcome_ForegroundSecondaryColor=ff939393
-Welcome_BackgroundColor=normalBackground
+Welcome_BackgroundPrimaryColor=fffafafa
-Welcome_ButtonBackgroundColor=normalBackground
+Welcome_BackgroundSecondaryColor=ffffffff
-Welcome_DividerColor=ffd6d6d6
+Welcome_HoverColor=ffefefef
-Welcome_HoverColor=fff6f6f6
+Welcome_AccentColor=ff45ce55
-Welcome_LinkColor=ff5caa15
+Welcome_LinkColor=ff20a020
 Welcome_DisabledLinkColor=textDisabled
 
 Timeline_TextColor=text

src/libs/utils/theme/theme.h

@@ -249,11 +249,11 @@ public:
         Welcome_TextColor,
         Welcome_ForegroundPrimaryColor,
         Welcome_ForegroundSecondaryColor,
-        Welcome_BackgroundColor,
+        Welcome_BackgroundPrimaryColor,
-        Welcome_ButtonBackgroundColor,
+        Welcome_BackgroundSecondaryColor,
-        Welcome_DividerColor,
-        Welcome_LinkColor,
         Welcome_HoverColor,
+        Welcome_AccentColor,
+        Welcome_LinkColor,
         Welcome_DisabledLinkColor,
 
         /* Timeline Library */

src/plugins/coreplugin/CMakeLists.txt

@@ -205,5 +205,19 @@ if ((NOT WIN32) AND (NOT APPLE))
   endforeach()
 endif()
 
+set(FONTS_BASE "${QtCreator_SOURCE_DIR}/src/share/3rdparty/studiofonts/")
+if(${Qt5_VERSION} VERSION_LESS "6")
+extend_qtc_plugin(Core
+  SOURCES "${FONTS_BASE}/studiofonts.qrc"
+)
+else() # < Qt 6
+qt_add_resources(Core
+  CoreWelcomeScreenFonts_rcc
+  BASE ${FONTS_BASE}
+  PREFIX "studiofonts"
+  FILES "${FONTS_BASE}/TitilliumWeb-Regular.ttf"
+)
+endif()
+
 # transitional qmake plugin build support
 qtc_add_public_header(coreplugin_dependencies.pri)

src/plugins/coreplugin/coreplugin.qbs

@@ -178,6 +178,12 @@ Project {
             ]
         }
 
+        Group {
+            name: "studiofonts"
+            prefix: "../../share/3rdparty/studiofonts/"
+            files: "studiofonts.qrc"
+        }
+
         Group {
             name: "Action Manager"
             prefix: "actionmanager/"

src/plugins/coreplugin/iwelcomepage.cpp

@@ -26,6 +26,7 @@
 #include "iwelcomepage.h"
 
 #include "icore.h"
+#include "welcomepagehelper.h"
 
 #include <utils/icon.h>
 #include <utils/theme/theme.h>
@@ -33,13 +34,18 @@
 #include <QHBoxLayout>
 #include <QLabel>
 #include <QPainter>
+#include <QPainterPath>
 #include <QPixmap>
 #include <QUrl>
 
+#include <qdrawutil.h>
+
 using namespace Utils;
 
 namespace Core {
 
+const char WITHACCENTCOLOR_PROPERTY_NAME[] = "_withAccentColor";
+
 static QList<IWelcomePage *> g_welcomePages;
 
 const QList<IWelcomePage *> IWelcomePage::allWelcomePages()
@@ -64,10 +70,10 @@ QPalette WelcomePageFrame::buttonPalette(bool isActive, bool isCursorInside, boo
     if (isActive) {
         if (forText) {
             pal.setColor(QPalette::Window, theme->color(Theme::Welcome_ForegroundPrimaryColor));
-            pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_BackgroundColor));
+            pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_BackgroundPrimaryColor));
         } else {
-            pal.setColor(QPalette::Window, theme->color(Theme::Welcome_ForegroundPrimaryColor));
+            pal.setColor(QPalette::Window, theme->color(Theme::Welcome_AccentColor));
-            pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_ForegroundPrimaryColor));
+            pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_AccentColor));
         }
     } else {
         if (isCursorInside) {
@@ -83,7 +89,7 @@ QPalette WelcomePageFrame::buttonPalette(bool isActive, bool isCursorInside, boo
                 pal.setColor(QPalette::Window, theme->color(Theme::Welcome_ForegroundPrimaryColor));
                 pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_TextColor));
             } else {
-                pal.setColor(QPalette::Window, theme->color(Theme::Welcome_BackgroundColor));
+                pal.setColor(QPalette::Window, theme->color(Theme::Welcome_BackgroundPrimaryColor));
                 pal.setColor(QPalette::WindowText, theme->color(Theme::Welcome_ForegroundSecondaryColor));
             }
         }
@@ -100,27 +106,28 @@ WelcomePageFrame::WelcomePageFrame(QWidget *parent)
 void WelcomePageFrame::paintEvent(QPaintEvent *event)
 {
     QWidget::paintEvent(event);
-
-    const QRectF adjustedRect(QRectF(rect()).adjusted(0.5, 0.5, -0.5, -0.5));
-    QPen pen(palette().color(QPalette::WindowText));
-    pen.setJoinStyle(Qt::MiterJoin);
-
     QPainter p(this);
-    p.setPen(pen);
+
-    p.drawRect(adjustedRect);
+    qDrawPlainRect(&p, rect(), palette().color(QPalette::WindowText), 1);
+
+    if (property(WITHACCENTCOLOR_PROPERTY_NAME).toBool()) {
+        const int accentRectWidth = 10;
+        const QRect accentRect = rect().adjusted(width() - accentRectWidth, 0, 0, 0);
+        p.fillRect(accentRect, creatorTheme()->color(Theme::Welcome_AccentColor));
+    }
 }
 
 class WelcomePageButtonPrivate
 {
 public:
-    WelcomePageButtonPrivate(WelcomePageButton *parent) : q(parent) {}
+    explicit WelcomePageButtonPrivate(WelcomePageButton *parent)
+        : q(parent) {}
     bool isActive() const;
     void doUpdate(bool cursorInside);
 
     WelcomePageButton *q;
     QHBoxLayout *m_layout = nullptr;
     QLabel *m_label = nullptr;
-    QLabel *m_icon = nullptr;
 
     std::function<void()> onClicked;
     std::function<bool()> activeChecker;
@@ -131,17 +138,16 @@ WelcomePageButton::WelcomePageButton(QWidget *parent)
 {
     setAutoFillBackground(true);
     setPalette(buttonPalette(false, false, false));
+    setContentsMargins(0, 1, 0, 1);
 
-    QFont f = font();
-    f.setPixelSize(15);
     d->m_label = new QLabel(this);
-    d->m_label->setFont(f);
     d->m_label->setPalette(buttonPalette(false, false, true));
+    d->m_label->setAlignment(Qt::AlignCenter);
 
     d->m_layout = new QHBoxLayout;
-    d->m_layout->setContentsMargins(13, 5, 20, 5);
     d->m_layout->setSpacing(0);
     d->m_layout->addWidget(d->m_label);
+    setSize(SizeLarge);
     setLayout(d->m_layout);
 }
 
@@ -177,8 +183,6 @@ void WelcomePageButtonPrivate::doUpdate(bool cursorInside)
     q->setPalette(WelcomePageFrame::buttonPalette(active, cursorInside, false));
     const QPalette lpal = WelcomePageFrame::buttonPalette(active, cursorInside, true);
     m_label->setPalette(lpal);
-    if (m_icon)
-        m_icon->setPalette(lpal);
     q->update();
 }
 
@@ -187,14 +191,17 @@ void WelcomePageButton::setText(const QString &text)
     d->m_label->setText(text);
 }
 
-void WelcomePageButton::setIcon(const QPixmap &pixmap)
+void WelcomePageButton::setSize(Size size)
 {
-    if (!d->m_icon) {
+    const int hMargin = size == SizeSmall ? 12 : 26;
-        d->m_icon = new QLabel(this);
+    const int vMargin = size == SizeSmall ? 2 : 4;
-        d->m_layout->insertWidget(0, d->m_icon);
+    d->m_layout->setContentsMargins(hMargin, vMargin, hMargin, vMargin);
-        d->m_layout->insertSpacing(1, 10);
+    d->m_label->setFont(size == SizeSmall ? font() : WelcomePageHelpers::brandFont());
-    }
+}
-    d->m_icon->setPixmap(pixmap);
+
+void WelcomePageButton::setWithAccentColor(bool withAccent)
+{
+    setProperty(WITHACCENTCOLOR_PROPERTY_NAME, withAccent);
 }
 
 void WelcomePageButton::setActiveChecker(const std::function<bool ()> &value)

src/plugins/coreplugin/iwelcomepage.h

@@ -75,6 +75,11 @@ public:
 class CORE_EXPORT WelcomePageButton : public WelcomePageFrame
 {
 public:
+    enum Size {
+        SizeSmall,
+        SizeLarge,
+    };
+
     WelcomePageButton(QWidget *parent);
     ~WelcomePageButton() override;
 
@@ -83,7 +88,8 @@ public:
     void leaveEvent(QEvent *) override;
 
     void setText(const QString &text);
-    void setIcon(const QPixmap &pixmap);
+    void setSize(enum Size);
+    void setWithAccentColor(bool withAccent);
     void setOnClicked(const std::function<void ()> &value);
     void setActiveChecker(const std::function<bool ()> &value);
     void recheckActive();

src/plugins/coreplugin/welcomepagehelper.cpp

@@ -28,9 +28,11 @@
 #include <utils/algorithm.h>
 #include <utils/fancylineedit.h>
 #include <utils/qtcassert.h>
+#include <utils/stylehelper.h>
 #include <utils/theme/theme.h>
 
 #include <QEasingCurve>
+#include <QFontDatabase>
 #include <QHeaderView>
 #include <QHoverEvent>
 #include <QLayout>
@@ -57,23 +59,58 @@ static QFont sizedFont(int size, const QWidget *widget)
     return f;
 }
 
+namespace WelcomePageHelpers {
+
+QFont brandFont()
+{
+    const static QFont f = []{
+        const int id = QFontDatabase::addApplicationFont(":/studiofonts/TitilliumWeb-Regular.ttf");
+        QFont result;
+        result.setPixelSize(16);
+        if (id >= 0) {
+            const QStringList fontFamilies = QFontDatabase::applicationFontFamilies(id);
+            result.setFamilies(fontFamilies);
+        }
+        return result;
+    }();
+    return f;
+}
+
+QWidget *panelBar(QWidget *parent)
+{
+    auto frame = new QWidget(parent);
+    frame->setAutoFillBackground(true);
+    frame->setMinimumWidth(WelcomePageHelpers::HSpacing);
+    QPalette pal = frame->palette();
+    pal.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundPrimaryColor));
+    frame->setPalette(pal);
+    return frame;
+}
+
+} // namespace WelcomePageHelpers
+
 SearchBox::SearchBox(QWidget *parent)
     : WelcomePageFrame(parent)
 {
-    QPalette pal = buttonPalette(false, false, true);
+    setAutoFillBackground(true);
-    pal.setColor(QPalette::Base, themeColor(Theme::Welcome_BackgroundColor));
-    // for macOS dark mode
-    pal.setColor(QPalette::Text, themeColor(Theme::Welcome_TextColor));
-    setPalette(pal);
 
     m_lineEdit = new FancyLineEdit;
     m_lineEdit->setFiltering(true);
     m_lineEdit->setFrame(false);
-    m_lineEdit->setFont(sizedFont(14, this));
+    m_lineEdit->setFont(WelcomePageHelpers::brandFont());
+    m_lineEdit->setMinimumHeight(33);
     m_lineEdit->setAttribute(Qt::WA_MacShowFocusRect, false);
 
+    QPalette pal = buttonPalette(false, false, true);
+    // for the margins
+    pal.setColor(QPalette::Window, m_lineEdit->palette().color(QPalette::Base));
+    // for macOS dark mode
+    pal.setColor(QPalette::WindowText, themeColor(Theme::Welcome_ForegroundPrimaryColor));
+    pal.setColor(QPalette::Text, themeColor(Theme::Welcome_TextColor));
+    setPalette(pal);
+
     auto box = new QHBoxLayout(this);
-    box->setContentsMargins(10, 3, 3, 3);
+    box->setContentsMargins(10, 0, 1, 0);
     box->addWidget(m_lineEdit);
 }
 
@@ -89,7 +126,7 @@ GridView::GridView(QWidget *parent)
     setUniformItemSizes(true);
 
     QPalette pal;
-    pal.setColor(QPalette::Base, themeColor(Theme::Welcome_BackgroundColor));
+    pal.setColor(QPalette::Base, themeColor(Theme::Welcome_BackgroundSecondaryColor));
     setPalette(pal); // Makes a difference on Mac.
 }
 
@@ -99,7 +136,7 @@ void GridView::leaveEvent(QEvent *)
     viewportEvent(&hev); // Seemingly needed to kill the hover paint.
 }
 
-const QSize ListModel::defaultImageSize(188, 145);
+const QSize ListModel::defaultImageSize(214, 160);
 
 ListModel::ListModel(QObject *parent)
     : QAbstractListModel(parent)
@@ -223,7 +260,7 @@ struct SearchStringLexer
 
     inline void yyinp() { yychar = *codePtr++; }
 
-    SearchStringLexer(const QString &code)
+    explicit SearchStringLexer(const QString &code)
         : code(code)
         , codePtr(code.unicode())
         , yychar(QLatin1Char(' ')) { }
@@ -327,11 +364,12 @@ bool ListModelFilter::leaveFilterAcceptsRowBeforeFiltering(const ListItem *, boo
 }
 
 ListItemDelegate::ListItemDelegate()
+    : backgroundPrimaryColor(themeColor(Theme::Welcome_BackgroundPrimaryColor))
+    , backgroundSecondaryColor(themeColor(Theme::Welcome_BackgroundSecondaryColor))
+    , foregroundPrimaryColor(themeColor(Theme::Welcome_ForegroundPrimaryColor))
+    , hoverColor(themeColor(Theme::Welcome_HoverColor))
+    , textColor(themeColor(Theme::Welcome_TextColor))
 {
-    lightColor = QColor(221, 220, 220); // color: "#dddcdc"
-    backgroundColor = themeColor(Theme::Welcome_BackgroundColor);
-    foregroundColor1 = themeColor(Theme::Welcome_ForegroundPrimaryColor); // light-ish.
-    foregroundColor2 = themeColor(Theme::Welcome_ForegroundSecondaryColor); // blacker.
 }
 
 void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option,
@@ -339,24 +377,25 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti
 {
     const ListItem *item = index.data(ListModel::ItemRole).value<Core::ListItem *>();
 
-    // Quick hack for empty items in the last row.
-    if (!item)
-        return;
-
     const QRect rc = option.rect;
+    const QRect tileRect(0, 0, rc.width() - GridItemGap, rc.height() - GridItemGap);
+    const QSize thumbnailBgSize = ListModel::defaultImageSize.grownBy(QMargins(1, 1, 1, 1));
+    const QRect thumbnailBgRect((tileRect.width() - thumbnailBgSize.width()) / 2, GridItemGap,
+                                thumbnailBgSize.width(), thumbnailBgSize.height());
+    const QRect textArea = tileRect.adjusted(GridItemGap, GridItemGap, -GridItemGap, -GridItemGap);
 
-    const int d = 10;
-    const int x = rc.x() + d;
-    const int y = rc.y() + d;
-    const int w = rc.width() - 2 * d;
-    const int h = rc.height() - 2 * d;
     const bool hovered = option.state & QStyle::State_MouseOver;
 
-    const int tagsBase = TagsSeparatorY + 10;
+    constexpr int tagsBase = TagsSeparatorY + 17;
-    const int shiftY = TagsSeparatorY - 20;
+    constexpr int shiftY = TagsSeparatorY - 16;
-    const int nameY = TagsSeparatorY - 20;
+    constexpr int nameY = TagsSeparatorY - 20;
 
-    const QRect textRect = QRect(x, y + nameY, w, h);
+    const QRect textRect = textArea.translated(0, nameY);
+
+    painter->save();
+    painter->translate(rc.topLeft());
+
+    painter->fillRect(tileRect, hovered ? hoverColor : backgroundPrimaryColor);
 
     QTextOption wrapped;
     wrapped.setWrapMode(QTextOption::WordWrap);
@@ -365,121 +404,135 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti
     if (hovered) {
         if (index != m_previousIndex) {
             m_previousIndex = index;
+            m_blurredThumbnail = QPixmap();
             m_startTime.start();
             m_currentArea = rc;
             m_currentWidget = qobject_cast<QAbstractItemView *>(
                 const_cast<QWidget *>(option.widget));
         }
-        animationProgress = m_startTime.elapsed() / 200.0; // Duration 200 ms.
+        constexpr float hoverAnimationDuration = 260;
-        static const QEasingCurve animationCurve(QEasingCurve::OutQuad);
+        animationProgress = m_startTime.elapsed() / hoverAnimationDuration;
+        static const QEasingCurve animationCurve(QEasingCurve::OutCubic);
         offset = animationCurve.valueForProgress(animationProgress) * shiftY;
         if (offset < shiftY)
             QTimer::singleShot(10, this, &ListItemDelegate::goon);
-        else if (offset > shiftY)
-            offset = shiftY;
     } else {
         m_previousIndex = QModelIndex();
     }
 
-    const QFontMetrics fm(option.widget->font());
     const QRect shiftedTextRect = textRect.adjusted(0, -offset, 0, -offset);
 
     // The pixmap.
-    if (offset < shiftY) {
+    const QPixmap pm = index.data(ListModel::ItemImageRole).value<QPixmap>();
-        QPixmap pm = index.data(ListModel::ItemImageRole).value<QPixmap>();
+    QPoint thumbnailPos = thumbnailBgRect.center();
-        QRect inner(x + 11, y, ListModel::defaultImageSize.width(),
+    if (!pm.isNull()) {
-                    ListModel::defaultImageSize.height());
+        painter->fillRect(thumbnailBgRect, backgroundSecondaryColor);
-        QRect pixmapRect = inner;
-        if (!pm.isNull()) {
-            painter->setPen(foregroundColor2);
 
-            adjustPixmapRect(&pixmapRect);
+        thumbnailPos.rx() -= pm.width() / pm.devicePixelRatio() / 2 - 1;
+        thumbnailPos.ry() -= pm.height() / pm.devicePixelRatio() / 2 - 1;
+        painter->drawPixmap(thumbnailPos, pm);
 
-            QPoint pixmapPos = pixmapRect.center();
+        painter->setPen(foregroundPrimaryColor);
-            pixmapPos.rx() -= pm.width() / pm.devicePixelRatio() / 2;
+        drawPixmapOverlay(item, painter, option, thumbnailBgRect);
-            pixmapPos.ry() -= pm.height() / pm.devicePixelRatio() / 2;
-            painter->drawPixmap(pixmapPos, pm);
-
-            drawPixmapOverlay(item, painter, option, pixmapRect);
-
-        } else {
-            // The description text as fallback.
-            painter->setPen(foregroundColor2);
-            painter->setFont(sizedFont(11, option.widget));
-            painter->drawText(pixmapRect.adjusted(6, 10, -6, -10), item->description, wrapped);
-        }
-        qDrawPlainRect(painter, pixmapRect.translated(-1, -1), foregroundColor1);
-    }
-
-    // The description background rect
-    if (offset) {
-        QRect backgroundRect = shiftedTextRect.adjusted(0, -16, 0, 0);
-        painter->fillRect(backgroundRect, backgroundColor);
-    }
-
-    // The title of the example.
-    painter->setPen(foregroundColor1);
-    painter->setFont(sizedFont(13, option.widget));
-    QRectF nameRect;
-    if (offset) {
-        nameRect = painter->boundingRect(shiftedTextRect, item->name, wrapped);
-        painter->drawText(nameRect, item->name, wrapped);
     } else {
-        nameRect = QRect(x, y + nameY, x + w, y + nameY + 20);
+        // The description text as fallback.
-        QString elidedName = fm.elidedText(item->name, Qt::ElideRight, w - 20);
+        painter->setPen(textColor);
-        painter->drawText(nameRect, elidedName);
+        painter->setFont(sizedFont(11, option.widget));
+        painter->drawText(thumbnailBgRect.adjusted(6, 10, -6, -10), item->description, wrapped);
     }
 
-    // The separator line below the example title.
+    // The description background
+    if (offset && !pm.isNull()) {
+        if (m_blurredThumbnail.isNull()) {
+            constexpr int blurRadius = 50;
+            QImage thumbnail(tileRect.size() + QSize(blurRadius, blurRadius) * 2,
+                             QImage::Format_ARGB32_Premultiplied);
+            thumbnail.fill(hoverColor);
+            QPainter thumbnailPainter(&thumbnail);
+            thumbnailPainter.translate(blurRadius, blurRadius);
+            thumbnailPainter.fillRect(thumbnailBgRect, backgroundSecondaryColor);
+            thumbnailPainter.drawPixmap(thumbnailPos, pm);
+            thumbnailPainter.setPen(foregroundPrimaryColor);
+            drawPixmapOverlay(item, &thumbnailPainter, option, thumbnailBgRect);
+            thumbnailPainter.end();
+
+            m_blurredThumbnail = QPixmap(tileRect.size());
+            QPainter blurredThumbnailPainter(&m_blurredThumbnail);
+            blurredThumbnailPainter.translate(-blurRadius, -blurRadius);
+            qt_blurImage(&blurredThumbnailPainter, thumbnail, blurRadius, false, false);
+            blurredThumbnailPainter.setOpacity(0.825);
+            blurredThumbnailPainter.fillRect(tileRect, hoverColor);
+        }
+        QRect thumbnailPortionRect = tileRect;
+        thumbnailPortionRect.setTop(shiftY - offset);
+        const QPixmap thumbnailPortionPM = m_blurredThumbnail.copy(thumbnailPortionRect);
+        painter->drawPixmap(thumbnailPortionRect.topLeft(), thumbnailPortionPM);
+    }
+
+    // The description Text (unhovered or hovered)
+    painter->setPen(textColor);
+    painter->setFont(sizedFont(13, option.widget)); // Title font
     if (offset) {
-        int ll = nameRect.bottom() + 5;
+        // The title of the example
-        painter->setPen(lightColor);
+        const QRectF nameRect = painter->boundingRect(shiftedTextRect, item->name, wrapped);
+        painter->drawText(nameRect, item->name, wrapped);
+
+        // The separator line below the example title.
+        const int ll = nameRect.height() + 3;
+        const QLine line = QLine(0, ll, textArea.width(), ll).translated(shiftedTextRect.topLeft());
+        painter->setPen(foregroundPrimaryColor);
         painter->setOpacity(animationProgress); // "fade in" separator line and description
-        painter->drawLine(x, ll, x + w, ll);
+        painter->drawLine(line);
-    }
 
-    // The description text.
+        // The description text.
-    if (offset) {
+        const int dd = ll + 5;
-        int dd = nameRect.height() + 10;
+        const QRect descRect = shiftedTextRect.adjusted(0, dd, 0, dd);
-        QRect descRect = shiftedTextRect.adjusted(0, dd, 0, dd);
+        painter->setPen(textColor);
-        painter->setPen(foregroundColor2);
         painter->setFont(sizedFont(11, option.widget));
         painter->drawText(descRect, item->description, wrapped);
         painter->setOpacity(1);
+    } else {
+        // The title of the example
+        const QString elidedName = painter->fontMetrics()
+                .elidedText(item->name, Qt::ElideRight, textRect.width());
+        painter->drawText(textRect, elidedName);
     }
 
     // Separator line between text and 'Tags:' section
-    painter->setPen(lightColor);
+    painter->setPen(foregroundPrimaryColor);
-    painter->drawLine(x, y + TagsSeparatorY, x + w, y + TagsSeparatorY);
+    painter->drawLine(QLineF(textArea.topLeft(), textArea.topRight())
+                      .translated(0, TagsSeparatorY));
 
     // The 'Tags:' section
-    const int tagsHeight = h - tagsBase;
+    painter->setPen(foregroundPrimaryColor);
     const QFont tagsFont = sizedFont(10, option.widget);
-    const QFontMetrics tagsFontMetrics(tagsFont);
-    QRect tagsLabelRect = QRect(x, y + tagsBase, 30, tagsHeight - 2);
-    painter->setPen(foregroundColor2);
     painter->setFont(tagsFont);
-    painter->drawText(tagsLabelRect, tr("Tags:"));
+    const QFontMetrics fm = painter->fontMetrics();
+    const QString tagsLabelText = tr("Tags:");
+    constexpr int tagsHorSpacing = 5;
+    const QRect tagsLabelRect =
+            QRect(0, 0, fm.horizontalAdvance(tagsLabelText) + tagsHorSpacing, fm.height())
+            .translated(textArea.x(), tagsBase);
+    painter->drawText(tagsLabelRect, tagsLabelText);
 
     painter->setPen(themeColor(Theme::Welcome_LinkColor));
     m_currentTagRects.clear();
     int xx = 0;
-    int yy = y + tagsBase;
+    int yy = 0;
     for (const QString &tag : item->tags) {
-        const int ww = tagsFontMetrics.horizontalAdvance(tag) + 5;
+        const int ww = fm.horizontalAdvance(tag) + tagsHorSpacing;
-        if (xx + ww > w - 30) {
+        if (xx + ww > textArea.width() - tagsLabelRect.width()) {
-            yy += 15;
+            yy += fm.lineSpacing();
             xx = 0;
         }
-        const QRect tagRect(xx + x + 30, yy, ww, 15);
+        const QRect tagRect = QRect(xx, yy, ww, tagsLabelRect.height())
+                .translated(tagsLabelRect.topRight());
         painter->drawText(tagRect, tag);
-        m_currentTagRects.append({ tag, tagRect });
+        m_currentTagRects.append({ tag, tagRect.translated(rc.topLeft()) });
         xx += ww;
     }
 
-    // Box it when hovered.
+    painter->restore();
-    if (hovered)
-        qDrawPlainRect(painter, rc, lightColor);
 }
 
 bool ListItemDelegate::editorEvent(QEvent *event, QAbstractItemModel *model,
@@ -524,10 +577,6 @@ void ListItemDelegate::clickAction(const ListItem *) const
 {
 }
 
-void ListItemDelegate::adjustPixmapRect(QRect *) const
-{
-}
-
 void ListItemDelegate::goon()
 {
     if (m_currentWidget)

src/plugins/coreplugin/welcomepagehelper.h

@@ -40,10 +40,19 @@ namespace Utils { class FancyLineEdit; }
 
 namespace Core {
 
+namespace WelcomePageHelpers {
+
+constexpr int HSpacing = 20;
+constexpr int ItemGap = 4;
+CORE_EXPORT QFont brandFont();
+CORE_EXPORT QWidget *panelBar(QWidget *parent = nullptr);
+
+} // namespace WelcomePageHelpers
+
 class CORE_EXPORT SearchBox : public WelcomePageFrame
 {
 public:
-    SearchBox(QWidget *parent);
+    explicit SearchBox(QWidget *parent);
 
     Utils::FancyLineEdit *m_lineEdit = nullptr;
 };
@@ -121,10 +130,10 @@ public:
     void paint(QPainter *painter, const QStyleOptionViewItem &option,
                const QModelIndex &index) const override;
 
-    static constexpr int GridItemWidth = 230;
+    static constexpr int GridItemGap = 3 * WelcomePageHelpers::ItemGap;
-    static constexpr int GridItemHeight = 230;
+    static constexpr int GridItemWidth = 240 + GridItemGap;
-    static constexpr int GridItemGap = 10;
+    static constexpr int GridItemHeight = GridItemWidth;
-    static constexpr int TagsSeparatorY = GridItemHeight - 60;
+    static constexpr int TagsSeparatorY = GridItemHeight - GridItemGap - 52;
 
 signals:
     void tagClicked(const QString &tag);
@@ -138,14 +147,14 @@ protected:
                                    const QStyleOptionViewItem &option,
                                    const QRect &currentPixmapRect) const;
     virtual void clickAction(const ListItem *item) const;
-    virtual void adjustPixmapRect(QRect *pixmapRect) const;
 
     void goon();
 
-    QColor lightColor;
+    const QColor backgroundPrimaryColor;
-    QColor backgroundColor;
+    const QColor backgroundSecondaryColor;
-    QColor foregroundColor1;
+    const QColor foregroundPrimaryColor;
-    QColor foregroundColor2;
+    const QColor hoverColor;
+    const QColor textColor;
 
 private:
     mutable QPersistentModelIndex m_previousIndex;
@@ -153,6 +162,7 @@ private:
     mutable QRect m_currentArea;
     mutable QPointer<QAbstractItemView> m_currentWidget;
     mutable QVector<QPair<QString, QRect>> m_currentTagRects;
+    mutable QPixmap m_blurredThumbnail;
 };
 
 } // namespace Core

src/plugins/marketplace/productlistmodel.cpp

@@ -157,6 +157,7 @@ SectionedProducts::SectionedProducts(QWidget *parent)
 
     auto sectionedView = new QWidget;
     auto layout = new QVBoxLayout;
+    layout->setContentsMargins(0, 0, 0, 0);
     layout->addStretch();
     sectionedView->setLayout(layout);
     area->setWidget(sectionedView);
@@ -377,10 +378,9 @@ void SectionedProducts::addNewSection(const Section &section, const QList<Core::
     m_productModels.insert(section, productModel);
     const auto it = m_gridViews.insert(section, gridView);
 
-    QFont f = font();
-    f.setPixelSize(16);
     auto sectionLabel = new QLabel(section.name);
-    sectionLabel->setFont(f);
+    sectionLabel->setContentsMargins(0, Core::WelcomePageHelpers::ItemGap, 0, 0);
+    sectionLabel->setFont(Core::WelcomePageHelpers::brandFont());
     auto scrollArea = qobject_cast<QScrollArea *>(widget(0));
     auto vbox = qobject_cast<QVBoxLayout *>(scrollArea->widget()->layout());
 

src/plugins/marketplace/qtmarketplacewelcomepage.cpp

@@ -65,27 +65,33 @@ class QtMarketplacePageWidget : public QWidget
 public:
     QtMarketplacePageWidget()
     {
-        const int sideMargin = 27;
         auto searchBox = new Core::SearchBox(this);
         m_searcher = searchBox->m_lineEdit;
         m_searcher->setPlaceholderText(QtMarketplaceWelcomePage::tr("Search in Marketplace..."));
 
         auto vbox = new QVBoxLayout(this);
-        vbox->setContentsMargins(30, sideMargin, 0, 0);
+        vbox->setContentsMargins(0, 0, 0, Core::WelcomePageHelpers::ItemGap);
+        vbox->setSpacing(Core::WelcomePageHelpers::ItemGap);
 
-        auto hbox = new QHBoxLayout;
+        auto searchBar = Core::WelcomePageHelpers::panelBar();
+        auto hbox = new QHBoxLayout(searchBar);
+        hbox->setContentsMargins(Core::WelcomePageHelpers::HSpacing, 0,
+                                 Core::WelcomePageHelpers::HSpacing, 0);
         hbox->addWidget(searchBox);
-        hbox->addSpacing(sideMargin);
+        vbox->addWidget(searchBar);
-        vbox->addItem(hbox);
         m_errorLabel = new QLabel(this);
         m_errorLabel->setVisible(false);
         vbox->addWidget(m_errorLabel);
 
+        auto resultWidget = new QWidget(this);
+        auto resultHBox = new QHBoxLayout(resultWidget);
+        resultHBox->setContentsMargins(Core::WelcomePageHelpers::HSpacing, 0, 0, 0);
         m_sectionedProducts = new SectionedProducts(this);
         auto progressIndicator = new Utils::ProgressIndicator(ProgressIndicatorSize::Large, this);
         progressIndicator->attachToWidget(m_sectionedProducts);
         progressIndicator->hide();
-        vbox->addWidget(m_sectionedProducts);
+        resultHBox->addWidget(m_sectionedProducts);
+        vbox->addWidget(resultWidget);
 
         connect(m_sectionedProducts, &SectionedProducts::toggleProgressIndicator,
                 progressIndicator, &Utils::ProgressIndicator::setVisible);

src/plugins/projectexplorer/projectwelcomepage.cpp

@@ -35,6 +35,7 @@
 #include <coreplugin/icontext.h>
 #include <coreplugin/icore.h>
 #include <coreplugin/iwizardfactory.h>
+#include <coreplugin/welcomepagehelper.h>
 
 #include <utils/algorithm.h>
 #include <utils/fileutils.h>
@@ -56,10 +57,13 @@
 #include <QTreeView>
 
 using namespace Core;
+using namespace Core::WelcomePageHelpers;
 using namespace Utils;
 
 const int LINK_HEIGHT = 35;
-const int SESSION_LINE_HEIGHT = 30;
+const int TEXT_OFFSET_HORIZONTAL = 36;
+const int SESSION_LINE_HEIGHT = 28;
+const int SESSION_ARROW_RECT_WIDTH = 24;
 const char PROJECT_BASE_ID[] = "Welcome.OpenRecentProject";
 
 namespace ProjectExplorer {
@@ -188,7 +192,8 @@ static QColor themeColor(Theme::Color role)
     return Utils::creatorTheme()->color(role);
 }
 
-static QFont sizedFont(int size, const QWidget *widget, bool underline = false)
+static QFont sizedFont(int size, const QWidget *widget,
+                       bool underline = false)
 {
     QFont f = widget->font();
     f.setPixelSize(size);
@@ -266,30 +271,32 @@ public:
         //const bool hovered = option.state & QStyle::State_MouseOver;
         const bool hovered = option.rect.contains(mousePos);
         const bool expanded = m_expandedSessions.contains(sessionName);
-        if (hovered)
+        painter->fillRect(rc, themeColor(Theme::Welcome_BackgroundSecondaryColor));
-            painter->fillRect(expanded ? rc : rc.adjusted(0, 0, -24, 0), hoverColor);
+        painter->fillRect(rc.adjusted(0, 0, 0, -ItemGap),
+                          hovered ? hoverColor : backgroundPrimaryColor);
 
         const int x = rc.x();
-        const int x1 = x + 36;
+        const int x1 = x + TEXT_OFFSET_HORIZONTAL;
         const int y = rc.y();
         const int firstBase = y + 18;
 
         painter->drawPixmap(x + 11, y + 6, sessionIcon);
 
         if (hovered && !expanded) {
-            const QRect arrowRect = rc.adjusted(rc.width() - 24, 0, 0, 0);
+            const QRect arrowRect = rc.adjusted(rc.width() - SESSION_ARROW_RECT_WIDTH, 0, 0, 0);
-            if (arrowRect.contains(mousePos))
+            const bool arrowRectHovered = arrowRect.contains(mousePos);
-                painter->fillRect(arrowRect, hoverColor);
+            painter->fillRect(arrowRect.adjusted(0, 0, 0, -ItemGap),
+                              arrowRectHovered ? hoverColor : backgroundPrimaryColor);
         }
 
         if (hovered || expanded) {
             static const QPixmap arrowUp = pixmap("expandarrow",Theme::Welcome_ForegroundSecondaryColor);
             static const QPixmap arrowDown = QPixmap::fromImage(arrowUp.toImage().mirrored(false, true));
-            painter->drawPixmap(rc.right() - 20, y + 7, expanded ? arrowDown : arrowUp);
+            painter->drawPixmap(rc.right() - 19, y + 6, expanded ? arrowDown : arrowUp);
         }
 
         if (idx.row() < 9) {
-            painter->setPen(foregroundColor2);
+            painter->setPen(foregroundSecondaryColor);
             painter->setFont(sizedFont(10, option.widget));
             painter->drawText(x + 3, firstBase, QString::number(idx.row() + 1));
         }
@@ -304,11 +311,16 @@ public:
         if (isActiveSession && !isDefaultVirgin)
             fullSessionName = ProjectWelcomePage::tr("%1 (current session)").arg(fullSessionName);
 
-        const QRect switchRect = QRect(x, y, rc.width() - 24, SESSION_LINE_HEIGHT);
+        const QRect switchRect = QRect(x, y, rc.width() - SESSION_ARROW_RECT_WIDTH, SESSION_LINE_HEIGHT);
         const bool switchActive = switchRect.contains(mousePos);
+        const int textSpace = rc.width() - TEXT_OFFSET_HORIZONTAL - 6;
+        const int sessionNameTextSpace =
+                textSpace -(hovered || expanded ? SESSION_ARROW_RECT_WIDTH : 0);
         painter->setPen(linkColor);
         painter->setFont(sizedFont(13, option.widget, switchActive));
-        painter->drawText(x1, firstBase, fullSessionName);
+        const QString fullSessionNameElided = painter->fontMetrics().elidedText(
+                    fullSessionName, Qt::ElideRight, sessionNameTextSpace);
+        painter->drawText(x1, firstBase, fullSessionNameElided);
         if (switchActive)
             m_activeSwitchToRect = switchRect;
 
@@ -316,24 +328,24 @@ public:
             painter->setPen(textColor);
             painter->setFont(sizedFont(12, option.widget));
             const QStringList projects = SessionManager::projectsForSessionName(sessionName);
-            int yy = firstBase + 25;
+            int yy = firstBase + SESSION_LINE_HEIGHT - 3;
             QFontMetrics fm(option.widget->font());
             for (const QString &project : projects) {
                 // Project name.
                 FilePath projectPath = FilePath::fromString(project);
                 QString completeBase = projectPath.completeBaseName();
                 painter->setPen(textColor);
-                painter->drawText(x1, yy, completeBase);
+                painter->drawText(x1, yy, fm.elidedText(completeBase, Qt::ElideMiddle, textSpace));
                 yy += 18;
 
                 // Project path.
                 QString pathWithTilde = Utils::withTildeHomePath(projectPath.toUserOutput());
-                painter->setPen(foregroundColor1);
+                painter->setPen(foregroundPrimaryColor);
-                painter->drawText(x1, yy, fm.elidedText(pathWithTilde, Qt::ElideMiddle, rc.width() - 40));
+                painter->drawText(x1, yy, fm.elidedText(pathWithTilde, Qt::ElideMiddle, textSpace));
                 yy += 22;
             }
 
-            yy += 5;
+            yy += 3;
             int xx = x1;
             const QStringList actions = {
                 ProjectWelcomePage::tr("Clone"),
@@ -343,15 +355,17 @@ public:
             for (int i = 0; i < 3; ++i) {
                 const QString &action = actions.at(i);
                 const int ww = fm.horizontalAdvance(action);
-                const QRect actionRect(xx, yy - 10, ww, 15);
+                const int spacing = 7; // Between action link and separator line
+                const QRect actionRect =
+                        QRect(xx, yy - 10, ww, 15).adjusted(-spacing, -spacing, spacing, spacing);
                 const bool isForcedDisabled = (i != 0 && sessionName == "default");
                 const bool isActive = actionRect.contains(mousePos) && !isForcedDisabled;
                 painter->setPen(isForcedDisabled ? disabledLinkColor : linkColor);
                 painter->setFont(sizedFont(12, option.widget, isActive));
                 painter->drawText(xx, yy, action);
                 if (i < 2) {
-                    xx += ww + 14;
+                    xx += ww + 2 * spacing;
-                    int pp = xx - 7;
+                    int pp = xx - spacing;
                     painter->setPen(textColor);
                     painter->drawLine(pp, yy - 10, pp, yy);
                 }
@@ -367,9 +381,9 @@ public:
         QString sessionName = idx.data(Qt::DisplayRole).toString();
         if (m_expandedSessions.contains(sessionName)) {
             QStringList projects = SessionManager::projectsForSessionName(sessionName);
-            h += projects.size() * 40 + LINK_HEIGHT;
+            h += projects.size() * 40 + LINK_HEIGHT - 6;
         }
-        return QSize(380, h);
+        return QSize(380, h + ItemGap);
     }
 
     bool editorEvent(QEvent *ev, QAbstractItemModel *model,
@@ -379,7 +393,8 @@ public:
             const QMouseEvent *mouseEvent = static_cast<QMouseEvent *>(ev);
             const Qt::MouseButtons button = mouseEvent->button();
             const QPoint pos = static_cast<QMouseEvent *>(ev)->pos();
-            const QRect rc(option.rect.right() - 24, option.rect.top(), 24, SESSION_LINE_HEIGHT);
+            const QRect rc(option.rect.right() - SESSION_ARROW_RECT_WIDTH, option.rect.top(),
+                           SESSION_ARROW_RECT_WIDTH, SESSION_LINE_HEIGHT);
             const QString sessionName = idx.data(Qt::DisplayRole).toString();
             if (rc.contains(pos) || button == Qt::RightButton) {
                 // The expand/collapse "button".
@@ -408,7 +423,7 @@ public:
         if (ev->type() == QEvent::MouseMove) {
             emit model->layoutChanged({QPersistentModelIndex(idx)}); // Somewhat brutish.
             //update(option.rect);
-            return true;
+            return false;
         }
         return false;
     }
@@ -418,9 +433,9 @@ private:
     const QColor textColor = themeColor(Theme::Welcome_TextColor);
     const QColor linkColor = themeColor(Theme::Welcome_LinkColor);
     const QColor disabledLinkColor = themeColor(Theme::Welcome_DisabledLinkColor);
-    const QColor backgroundColor = themeColor(Theme::Welcome_BackgroundColor);
+    const QColor backgroundPrimaryColor = themeColor(Theme::Welcome_BackgroundPrimaryColor);
-    const QColor foregroundColor1 = themeColor(Theme::Welcome_ForegroundPrimaryColor); // light-ish.
+    const QColor foregroundPrimaryColor = themeColor(Theme::Welcome_ForegroundPrimaryColor);
-    const QColor foregroundColor2 = themeColor(Theme::Welcome_ForegroundSecondaryColor); // blacker.
+    const QColor foregroundSecondaryColor = themeColor(Theme::Welcome_ForegroundSecondaryColor);
 
     QStringList m_expandedSessions;
 
@@ -442,15 +457,18 @@ public:
         QRect rc = option.rect;
 
         const bool hovered = option.widget->isActiveWindow() && option.state & QStyle::State_MouseOver;
-        if (hovered)
+        const QRect bgRect = rc.adjusted(0, 0, -ItemGap, -ItemGap);
-            painter->fillRect(rc, themeColor(Theme::Welcome_HoverColor));
+        painter->fillRect(rc, themeColor(Theme::Welcome_BackgroundSecondaryColor));
+        painter->fillRect(bgRect, themeColor(hovered ? Theme::Welcome_HoverColor
+                                                     : Theme::Welcome_BackgroundPrimaryColor));
 
         const int x = rc.x();
         const int y = rc.y();
         const int firstBase = y + 18;
         const int secondBase = firstBase + 19;
 
-        static const QPixmap projectIcon = pixmap("project", Theme::Welcome_ForegroundSecondaryColor);
+        static const QPixmap projectIcon =
+                pixmap("project", Theme::Welcome_ForegroundSecondaryColor);
         painter->drawPixmap(x + 11, y + 6, projectIcon);
 
         QString projectName = idx.data(Qt::DisplayRole).toString();
@@ -462,14 +480,20 @@ public:
         if (idx.row() < 9)
             painter->drawText(x + 3, firstBase, QString::number(idx.row() + 1));
 
+        const int textSpace = rc.width() - TEXT_OFFSET_HORIZONTAL - ItemGap - 6;
+
         painter->setPen(themeColor(Theme::Welcome_LinkColor));
         painter->setFont(sizedFont(13, option.widget, hovered));
-        painter->drawText(x + 36, firstBase, projectName);
+        const QString projectNameElided =
+                painter->fontMetrics().elidedText(projectName, Qt::ElideRight, textSpace);
+        painter->drawText(x + TEXT_OFFSET_HORIZONTAL, firstBase, projectNameElided);
 
         painter->setPen(themeColor(Theme::Welcome_ForegroundPrimaryColor));
         painter->setFont(sizedFont(13, option.widget));
         QString pathWithTilde = Utils::withTildeHomePath(projectPath.toUserOutput());
-        painter->drawText(x + 36, secondBase, pathWithTilde);
+        const QString pathWithTildeElided =
+                painter->fontMetrics().elidedText(pathWithTilde, Qt::ElideMiddle, textSpace);
+        painter->drawText(x + TEXT_OFFSET_HORIZONTAL, secondBase, pathWithTildeElided);
     }
 
     QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &idx) const final
@@ -478,8 +502,8 @@ public:
         QString projectPath = idx.data(ProjectModel::FilePathRole).toString();
         QFontMetrics fm(sizedFont(13, option.widget));
         int width = std::max(fm.horizontalAdvance(projectName),
-                             fm.horizontalAdvance(projectPath)) + 36;
+                             fm.horizontalAdvance(projectPath)) + TEXT_OFFSET_HORIZONTAL;
-        return QSize(width, 48);
+        return QSize(width, 47 + ItemGap);
     }
 
     bool editorEvent(QEvent *ev, QAbstractItemModel *model,
@@ -537,22 +561,16 @@ public:
         setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
         setFocusPolicy(Qt::NoFocus);
 
-        QPalette pal;  // Needed for classic theme (only).
+        QPalette pal;
-        pal.setColor(QPalette::Base, themeColor(Theme::Welcome_BackgroundColor));
+        pal.setColor(QPalette::Base, themeColor(Theme::Welcome_BackgroundSecondaryColor));
         viewport()->setPalette(pal);
     }
-
-    void leaveEvent(QEvent *) final
-    {
-        QHoverEvent hev(QEvent::HoverLeave, QPointF(), QPointF());
-        viewportEvent(&hev); // Seemingly needed to kill the hover paint.
-    }
 };
 
 class SessionsPage : public QWidget
 {
 public:
-    SessionsPage(ProjectWelcomePage *projectWelcomePage)
+    explicit SessionsPage(ProjectWelcomePage *projectWelcomePage)
     {
         // FIXME: Remove once facilitateQml() is gone.
         if (!projectWelcomePage->m_sessionModel)
@@ -561,26 +579,16 @@ public:
             projectWelcomePage->m_projectModel = new ProjectModel(this);
 
         auto manageSessionsButton = new WelcomePageButton(this);
-        manageSessionsButton->setText(ProjectWelcomePage::tr("Manage"));
+        manageSessionsButton->setText(ProjectWelcomePage::tr("Manage..."));
-        manageSessionsButton->setIcon(pixmap("settings", Theme::Welcome_ForegroundSecondaryColor));
+        manageSessionsButton->setWithAccentColor(true);
         manageSessionsButton->setOnClicked([] { ProjectExplorerPlugin::showSessionManager(); });
 
-        auto newButton = new WelcomePageButton(this);
-        newButton->setText(ProjectWelcomePage::tr("New"));
-        newButton->setIcon(pixmap("new", Theme::Welcome_ForegroundSecondaryColor));
-        newButton->setOnClicked([] { ProjectExplorerPlugin::openNewProjectDialog(); });
-
-        auto openButton = new WelcomePageButton(this);
-        openButton->setText(ProjectWelcomePage::tr("Open"));
-        openButton->setIcon(pixmap("open", Theme::Welcome_ForegroundSecondaryColor));
-        openButton->setOnClicked([] { ProjectExplorerPlugin::openOpenProjectDialog(); });
-
         auto sessionsLabel = new QLabel(this);
-        sessionsLabel->setFont(sizedFont(16, this));
+        sessionsLabel->setFont(brandFont());
         sessionsLabel->setText(ProjectWelcomePage::tr("Sessions"));
 
         auto recentProjectsLabel = new QLabel(this);
-        recentProjectsLabel->setFont(sizedFont(16, this));
+        recentProjectsLabel->setFont(brandFont());
         recentProjectsLabel->setText(ProjectWelcomePage::tr("Projects"));
 
         auto sessionsList = new TreeView(this, "Sessions");
@@ -595,41 +603,31 @@ public:
         projectsList->setItemDelegate(&m_projectDelegate);
         projectsList->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
 
-        auto hbox11 = new QHBoxLayout;
+        auto sessionHeader = panelBar(this);
-        hbox11->setContentsMargins(0, 0, 0, 0);
+        auto hbox11 = new QHBoxLayout(sessionHeader);
+        hbox11->setContentsMargins(12, 0, 0, 0);
         hbox11->addWidget(sessionsLabel);
-        hbox11->addSpacing(16);
-        hbox11->addWidget(manageSessionsButton);
         hbox11->addStretch(1);
+        hbox11->addWidget(manageSessionsButton);
 
-        auto hbox21 = new QHBoxLayout;
+        auto projectsHeader = panelBar(this);
-        hbox21->setContentsMargins(0, 0, 0, 0);
+        auto hbox21 = new QHBoxLayout(projectsHeader);
+        hbox21->setContentsMargins(hbox11->contentsMargins());
         hbox21->addWidget(recentProjectsLabel);
-        hbox21->addSpacing(16);
-        hbox21->addWidget(newButton);
-        hbox21->addSpacing(16);
-        hbox21->addWidget(openButton);
-        hbox21->addStretch(1);
 
-        auto vbox1 = new QVBoxLayout;
+        auto grid = new QGridLayout(this);
-        vbox1->setContentsMargins(0, 0, 0, 0);
+        grid->setContentsMargins(0, 0, 0, ItemGap);
-        vbox1->addItem(hbox11);
+        grid->setHorizontalSpacing(0);
-        vbox1->addSpacing(16);
+        grid->setVerticalSpacing(ItemGap);
-        vbox1->addWidget(sessionsList);
+        grid->addWidget(panelBar(this), 0, 0);
-
+        grid->addWidget(sessionHeader, 0, 1);
-        auto vbox2 = new QVBoxLayout;
+        grid->addWidget(sessionsList, 1, 1);
-        vbox2->setContentsMargins(0, 0, 0, 0);
+        grid->addWidget(panelBar(this), 0, 2);
-        vbox2->addItem(hbox21);
+        grid->setColumnStretch(1, 9);
-        vbox2->addSpacing(16);
+        grid->setColumnMinimumWidth(1, 200);
-        vbox2->addWidget(projectsList);
+        grid->addWidget(projectsHeader, 0, 3);
-
+        grid->addWidget(projectsList, 1, 3);
-        auto hbox = new QHBoxLayout(this);
+        grid->setColumnStretch(3, 20);
-        hbox->setContentsMargins(30, 27, 0, 27);
-        hbox->addItem(vbox1);
-        hbox->setStretchFactor(vbox1, 1);
-        hbox->addSpacing(16);
-        hbox->addItem(vbox2);
-        hbox->setStretchFactor(vbox2, 3);
     }
 
     SessionDelegate m_sessionDelegate;

src/plugins/qtsupport/gettingstartedwelcomepage.cpp

@@ -247,21 +247,16 @@ protected:
         QTC_ASSERT(item, return);
         const auto exampleItem = static_cast<const ExampleItem *>(item);
         if (exampleItem->isVideo) {
-            QFont f = option.widget->font();
+            painter->save();
-            f.setPixelSize(13);
+            painter->setFont(option.font);
-            painter->setFont(f);
+            painter->setCompositionMode(QPainter::CompositionMode_Difference);
-            QString videoLen = exampleItem->videoLength;
+            painter->setPen(Qt::white);
-            painter->drawText(currentPixmapRect.adjusted(0, 0, 0, painter->font().pixelSize() + 3),
+            painter->drawText(currentPixmapRect.translated(0, -WelcomePageHelpers::ItemGap),
-                              videoLen, Qt::AlignBottom | Qt::AlignHCenter);
+                              exampleItem->videoLength, Qt::AlignBottom | Qt::AlignHCenter);
+            painter->restore();
         }
     }
 
-    void adjustPixmapRect(QRect *pixmapRect) const override
-    {
-        if (!m_showExamples)
-            *pixmapRect = pixmapRect->adjusted(6, 20, -6, -15);
-    }
-
     bool m_showExamples = true;
 };
 
@@ -272,7 +267,6 @@ public:
         : m_isExamples(isExamples)
     {
         m_exampleDelegate.setShowExamples(isExamples);
-        const int sideMargin = 27;
         static auto s_examplesModel = new ExamplesListModel(this);
         m_examplesModel = s_examplesModel;
 
@@ -281,10 +275,14 @@ public:
         auto searchBox = new SearchBox(this);
         m_searcher = searchBox->m_lineEdit;
 
-        auto vbox = new QVBoxLayout(this);
+        auto grid = new QGridLayout(this);
-        vbox->setContentsMargins(30, sideMargin, 0, 0);
+        grid->setContentsMargins(0, 0, 0, WelcomePageHelpers::ItemGap);
+        grid->setHorizontalSpacing(0);
+        grid->setVerticalSpacing(WelcomePageHelpers::ItemGap);
 
-        auto hbox = new QHBoxLayout;
+        auto searchBar = WelcomePageHelpers::panelBar(this);
+        auto hbox = new QHBoxLayout(searchBar);
+        hbox->setContentsMargins(0, 0, 0, 0);
         if (m_isExamples) {
             m_searcher->setPlaceholderText(ExamplesWelcomePage::tr("Search in Examples..."));
 
@@ -303,21 +301,22 @@ public:
             connect(exampleSetModel, &ExampleSetModel::selectedExampleSetChanged,
                     exampleSetSelector, &QComboBox::setCurrentIndex);
 
-            hbox->setSpacing(17);
+            hbox->setSpacing(Core::WelcomePageHelpers::HSpacing);
             hbox->addWidget(exampleSetSelector);
         } else {
             m_searcher->setPlaceholderText(ExamplesWelcomePage::tr("Search in Tutorials..."));
         }
         hbox->addWidget(searchBox);
-        hbox->addSpacing(sideMargin);
+        grid->addWidget(WelcomePageHelpers::panelBar(this), 0, 0);
-        vbox->addItem(hbox);
+        grid->addWidget(searchBar, 0, 1);
+        grid->addWidget(WelcomePageHelpers::panelBar(this), 0, 2);
 
         auto gridView = new GridView(this);
         gridView->setModel(filteredModel);
         gridView->setItemDelegate(&m_exampleDelegate);
         if (auto sb = gridView->verticalScrollBar())
             sb->setSingleStep(25);
-        vbox->addWidget(gridView);
+        grid->addWidget(gridView, 1, 1, 1, 2);
 
         connect(&m_exampleDelegate, &ExampleDelegate::tagClicked,
                 this, &ExamplesPageWidget::onTagClicked);

src/plugins/welcome/welcome.qrc

@@ -4,28 +4,12 @@
         <file>images/mode_welcome@2x.png</file>
         <file>images/mode_welcome_mask.png</file>
         <file>images/mode_welcome_mask@2x.png</file>
-        <file>images/blogs.png</file>
-        <file>images/blogs@2x.png</file>
-        <file>images/community.png</file>
-        <file>images/community@2x.png</file>
-        <file>images/open.png</file>
-        <file>images/open@2x.png</file>
         <file>images/project.png</file>
         <file>images/project@2x.png</file>
-        <file>images/qtaccount.png</file>
-        <file>images/qtaccount@2x.png</file>
         <file>images/session.png</file>
         <file>images/session@2x.png</file>
-        <file>images/userguide.png</file>
-        <file>images/userguide@2x.png</file>
-        <file>images/new.png</file>
-        <file>images/new@2x.png</file>
         <file>images/expandarrow.png</file>
         <file>images/expandarrow@2x.png</file>
         <file>images/border.png</file>
-        <file>images/download.png</file>
-        <file>images/download@2x.png</file>
-        <file>images/settings.png</file>
-        <file>images/settings@2x.png</file>
     </qresource>
 </RCC>

src/plugins/welcome/welcomeplugin.cpp

@@ -34,11 +34,13 @@
 #include <coreplugin/actionmanager/actionmanager.h>
 #include <coreplugin/actionmanager/command.h>
 #include <coreplugin/coreconstants.h>
+#include <coreplugin/coreicons.h>
 #include <coreplugin/icore.h>
 #include <coreplugin/imode.h>
 #include <coreplugin/iwelcomepage.h>
 #include <coreplugin/iwizardfactory.h>
 #include <coreplugin/modemanager.h>
+#include <coreplugin/welcomepagehelper.h>
 
 #include <utils/algorithm.h>
 #include <utils/fileutils.h>
@@ -61,63 +63,69 @@
 #include <QVBoxLayout>
 
 using namespace Core;
+using namespace Core::WelcomePageHelpers;
 using namespace ExtensionSystem;
 using namespace Utils;
 
 namespace Welcome {
 namespace Internal {
 
-class SideBar;
+class TopArea;
+class SideArea;
+class BottomArea;
 
-const int lrPadding = 34;
 const char currentPageSettingsKeyC[] = "Welcome2Tab";
+constexpr int buttonSpacing = 16;
 
 static QColor themeColor(Theme::Color role)
 {
     return Utils::creatorTheme()->color(role);
 }
 
-static QFont sizedFont(int size, const QWidget *widget, bool underline = false)
-{
-    QFont f = widget->font();
-    f.setPixelSize(size);
-    f.setUnderline(underline);
-    return f;
-}
-
-static QPalette lightText()
-{
-    QPalette pal;
-    pal.setColor(QPalette::WindowText, themeColor(Theme::Welcome_ForegroundPrimaryColor));
-    return pal;
-}
-
 static void addWeakVerticalSpacerToLayout(QVBoxLayout *layout, int maximumSize)
 {
     auto weakSpacer = new QWidget;
     weakSpacer->setMaximumHeight(maximumSize);
+    weakSpacer->setMinimumHeight(buttonSpacing);
     weakSpacer->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Maximum);
     layout->addWidget(weakSpacer);
     layout->setStretchFactor(weakSpacer, 1);
 }
 
-class WelcomeMode : public IMode
+class ResizeSignallingWidget : public QWidget
 {
     Q_OBJECT
+
+public:
+    void resizeEvent(QResizeEvent *event);
+
+signals:
+    void resized(const QSize &size, const QSize &oldSize);
+};
+
+void ResizeSignallingWidget::resizeEvent(QResizeEvent *event)
+{
+    emit resized(event->size(), event->oldSize());
+}
+
+class WelcomeMode : public IMode
+{
 public:
     WelcomeMode();
     ~WelcomeMode();
 
     void initPlugins();
 
-    Q_INVOKABLE bool openDroppedFiles(const QList<QUrl> &urls);
+    bool openDroppedFiles(const QList<QUrl> &urls);
 
 private:
     void addPage(IWelcomePage *page);
 
-    QWidget *m_modeWidget;
+    ResizeSignallingWidget *m_modeWidget;
     QStackedWidget *m_pageStack;
-    SideBar *m_sideBar;
+    TopArea *m_topArea;
+    SideArea *m_sideArea;
+    BottomArea *m_bottomArea;
     QList<IWelcomePage *> m_pluginList;
     QList<WelcomePageButton *> m_pageButtons;
     Id m_activePage;
@@ -165,145 +173,189 @@ public:
     WelcomeMode *m_welcomeMode = nullptr;
 };
 
-class IconAndLink : public QWidget
+class TopArea : public QWidget
-{
-public:
-    IconAndLink(const QString &iconSource,
-                const QString &title,
-                const QString &openUrl,
-                QWidget *parent)
-        : QWidget(parent), m_iconSource(iconSource), m_title(title), m_openUrl(openUrl)
-    {
-        setAutoFillBackground(true);
-        setMinimumHeight(35);
-        setToolTip(m_openUrl);
-
-        const QString fileName = QString(":/welcome/images/%1.png").arg(iconSource);
-        const Icon icon({{FilePath::fromString(fileName), Theme::Welcome_ForegroundPrimaryColor}},
-                        Icon::Tint);
-
-        m_icon = new QLabel;
-        m_icon->setPixmap(icon.pixmap());
-
-        m_label = new QLabel(title);
-        m_label->setFont(sizedFont(11, m_label, false));
-
-        auto layout = new QHBoxLayout;
-        layout->setContentsMargins(lrPadding, 0, lrPadding, 0);
-        layout->addWidget(m_icon);
-        layout->addSpacing(2);
-        layout->addWidget(m_label);
-        layout->addStretch(1);
-        setLayout(layout);
-    }
-
-    void enterEvent(EnterEvent *) override
-    {
-        QPalette pal;
-        pal.setColor(QPalette::Window, themeColor(Theme::Welcome_HoverColor));
-        setPalette(pal);
-        m_label->setFont(sizedFont(11, m_label, true));
-        update();
-    }
-
-    void leaveEvent(QEvent *) override
-    {
-        QPalette pal;
-        pal.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundColor));
-        setPalette(pal);
-        m_label->setFont(sizedFont(11, m_label, false));
-        update();
-    }
-
-    void mousePressEvent(QMouseEvent *) override
-    {
-        QDesktopServices::openUrl(m_openUrl);
-    }
-
-    QString m_iconSource;
-    QString m_title;
-    const QString m_openUrl;
-
-    QLabel *m_icon;
-    QLabel *m_label;
-};
-
-class SideBar : public QWidget
 {
     Q_OBJECT
+
 public:
-    SideBar(QWidget *parent)
+    TopArea(QWidget *parent = nullptr)
         : QWidget(parent)
     {
         setAutoFillBackground(true);
+        setMinimumHeight(11); // For compact state
         setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
-        setPalette(themeColor(Theme::Welcome_BackgroundColor));
+        setPalette(themeColor(Theme::Welcome_BackgroundPrimaryColor));
 
-        auto vbox = new QVBoxLayout(this);
+        m_title = new QWidget;
-        vbox->setSpacing(0);
+
-        vbox->setContentsMargins(0, 27, 0, 0);
+        auto hbox = new QHBoxLayout(m_title);
+        hbox->setSpacing(0);
+        hbox->setContentsMargins(HSpacing - 5, 2, 0, 2);
 
         {
-            auto l = m_pluginButtons = new QVBoxLayout;
+            auto ideIconLabel = new QLabel;
-            l->setContentsMargins(lrPadding, 0, lrPadding, 0);
+            const QPixmap logo = Core::Icons::QTCREATORLOGO_BIG.pixmap();
-            l->setSpacing(19);
+            ideIconLabel->setPixmap(logo.scaled(logo.size() * 0.6, Qt::IgnoreAspectRatio,
-            vbox->addItem(l);
+                                                Qt::SmoothTransformation));
+            hbox->addWidget(ideIconLabel, 0);
+
+            hbox->addSpacing(16);
+
+            QFont welcomeFont = brandFont();
+            welcomeFont.setPixelSize(30);
+            welcomeFont.setWeight(QFont::Light);
+            welcomeFont.setWordSpacing(2);
+
+            auto welcomeLabel = new QLabel("Welcome to");
+            welcomeLabel->setFont(welcomeFont);
+            hbox->addWidget(welcomeLabel, 0);
+
+            hbox->addSpacing(8);
+
+            auto ideNameLabel = new QLabel(Core::Constants::IDE_DISPLAY_NAME);
+            ideNameLabel->setFont(welcomeFont);
+            ideNameLabel->setAlignment(Qt::AlignLeft | Qt::AlignVCenter);
+            QPalette pal = palette();
+            pal.setColor(QPalette::WindowText, themeColor(Theme::Welcome_AccentColor));
+            ideNameLabel->setPalette(pal);
+            hbox->addWidget(ideNameLabel, 1);
         }
 
-        addWeakVerticalSpacerToLayout(vbox, 62);
+        auto mainLayout = new QHBoxLayout(this);
+        mainLayout->setContentsMargins(0, 0, 0, 0);
+        mainLayout->addWidget(m_title);
+    }
+
+    void setCompact(bool compact)
+    {
+        m_title->setVisible(!compact);
+    }
+
+private:
+    QWidget *m_title;
+};
+
+class SideArea : public QScrollArea
+{
+    Q_OBJECT
+
+public:
+    SideArea(QWidget *parent = nullptr)
+        : QScrollArea(parent)
+    {
+        setWidgetResizable(true);
+        setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+        setFrameShape(QFrame::NoFrame);
+        setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Ignored);
+
+        auto mainWidget = new QWidget(this);
+        mainWidget->setAutoFillBackground(true);
+        mainWidget->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
+        mainWidget->setPalette(themeColor(Theme::Welcome_BackgroundPrimaryColor));
+
+        auto vbox = new QVBoxLayout(mainWidget);
+        vbox->setSpacing(0);
+        vbox->setContentsMargins(HSpacing, 0, HSpacing, 0);
 
         {
-            auto l = new QVBoxLayout;
+            auto projectVBox = new QVBoxLayout;
-            l->setContentsMargins(lrPadding, 0, lrPadding, 0);
+            projectVBox->setSpacing(buttonSpacing);
-            l->setSpacing(12);
+            auto newButton = new WelcomePageButton(mainWidget);
+            newButton->setText(tr("Create Project..."));
+            newButton->setWithAccentColor(true);
+            newButton->setOnClicked([] {
+                QAction *openAction = ActionManager::command(Core::Constants::NEW)->action();
+                openAction->trigger();
+            });
+
+            auto openButton = new WelcomePageButton(mainWidget);
+            openButton->setText(tr("Open Project..."));
+            openButton->setWithAccentColor(true);
+            openButton->setOnClicked([] {
+                QAction *openAction = ActionManager::command(Core::Constants::OPEN)->action();
+                openAction->trigger();
+            });
+
+            projectVBox->addWidget(newButton);
+            projectVBox->addWidget(openButton);
+            vbox->addItem(projectVBox);
+        }
+
+        addWeakVerticalSpacerToLayout(vbox, 34);
+
+        {
+            auto newVBox = new QVBoxLayout;
+            newVBox->setSpacing(buttonSpacing / 3);
+            vbox->addItem(newVBox);
 
             auto newLabel = new QLabel(tr("New to Qt?"), this);
-            newLabel->setFont(sizedFont(18, this));
+            newLabel->setFont(brandFont());
-            l->addWidget(newLabel);
+            newLabel->setAlignment(Qt::AlignHCenter);
+            newVBox->addWidget(newLabel);
 
-            auto learnLabel = new QLabel(tr("Learn how to develop your own applications "
+            auto getStartedButton = new WelcomePageButton(mainWidget);
-                                            "and explore %1.")
+            getStartedButton->setText(tr("Get Started"));
-                                         .arg(Core::Constants::IDE_DISPLAY_NAME), this);
-            learnLabel->setMaximumWidth(200);
-            learnLabel->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
-            learnLabel->setWordWrap(true);
-            learnLabel->setFont(sizedFont(12, this));
-            learnLabel->setPalette(lightText());
-            l->addWidget(learnLabel);
-
-            l->addSpacing(8);
-
-            auto getStartedButton = new WelcomePageButton(this);
-            getStartedButton->setText(tr("Get Started Now"));
             getStartedButton->setOnClicked([] {
                 QDesktopServices::openUrl(
                     QString("qthelp://org.qt-project.qtcreator/doc/creator-getting-started.html"));
             });
-            l->addWidget(getStartedButton);
+            newVBox->addWidget(getStartedButton);
+        }
 
+        addWeakVerticalSpacerToLayout(vbox, 56);
+
+        {
+            auto l = m_pluginButtons = new QVBoxLayout;
+            l->setSpacing(buttonSpacing);
             vbox->addItem(l);
         }
 
         vbox->addStretch(1);
 
-        {
+        setWidget(mainWidget);
-            auto l = new QVBoxLayout;
-            l->setContentsMargins(0, 0, 0, 0);
-            l->addWidget(new IconAndLink("download", tr("Get Qt"), "https://www.qt.io/download", this));
-            l->addWidget(new IconAndLink("qtaccount", tr("Qt Account"), "https://account.qt.io", this));
-            l->addWidget(new IconAndLink("community", tr("Online Community"), "https://forum.qt.io", this));
-            l->addWidget(new IconAndLink("blogs", tr("Blogs"), "https://planet.qt.io", this));
-            l->addWidget(new IconAndLink("userguide", tr("User Guide"),
-                                         "qthelp://org.qt-project.qtcreator/doc/index.html", this));
-            vbox->addItem(l);
-        }
-
-        addWeakVerticalSpacerToLayout(vbox, vbox->contentsMargins().top());
     }
 
     QVBoxLayout *m_pluginButtons = nullptr;
 };
 
+class BottomArea : public QWidget
+{
+    Q_OBJECT
+
+public:
+    BottomArea(QWidget *parent = nullptr)
+        : QWidget(parent)
+    {
+        setAutoFillBackground(true);
+        setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
+        setPalette(themeColor(Theme::Welcome_BackgroundPrimaryColor));
+
+        auto hbox = new QHBoxLayout(this);
+        hbox->setSpacing(0);
+        hbox->setContentsMargins(0, 2 * ItemGap, HSpacing, 2 * ItemGap);
+
+        const QList<QPair<QString, QString> > links {
+            { tr("Get Qt"), "https://www.qt.io/download" },
+            { tr("Qt Account"), "https://account.qt.io" },
+            { tr("Online Community"), "https://forum.qt.io" },
+            { tr("Blogs"), "https://planet.qt.io" },
+            { tr("User Guide"), "qthelp://org.qt-project.qtcreator/doc/index.html" },
+        };
+        for (const QPair<QString, QString> &link : links) {
+            auto button = new WelcomePageButton(this);
+            button->setSize(WelcomePageButton::SizeSmall);
+            button->setText(link.first);
+            button->setOnClicked([link]{ QDesktopServices::openUrl(link.second); });
+            button->setWithAccentColor(true);
+            button->setMaximumWidth(220);
+            button->setToolTip(link.second);
+            if (hbox->count() > 0)
+                hbox->addStretch(1);
+            hbox->addWidget(button, 20);
+        }
+    }
+};
+
 WelcomeMode::WelcomeMode()
 {
     setDisplayName(tr("Welcome"));
@@ -321,39 +373,42 @@ WelcomeMode::WelcomeMode()
     setContext(Context(Constants::C_WELCOME_MODE));
 
     QPalette palette = creatorTheme()->palette();
-    palette.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundColor));
+    palette.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundPrimaryColor));
 
-    m_modeWidget = new QWidget;
+    m_modeWidget = new ResizeSignallingWidget;
     m_modeWidget->setPalette(palette);
+    connect(m_modeWidget, &ResizeSignallingWidget::resized,
+            [this](const QSize &size, const QSize &) {
+        const bool hideSideArea = size.width() <= 750;
+        const bool hideBottomArea = size.width() <= 850;
+        const bool compactVertically = size.height() <= 530;
+        QTimer::singleShot(0, [this, hideSideArea, hideBottomArea, compactVertically]() {
+            m_sideArea->setVisible(!hideSideArea);
+            m_bottomArea->setVisible(!(hideBottomArea || compactVertically));
+            m_topArea->setCompact(compactVertically);
+        });
+    });
 
-    m_sideBar = new SideBar(m_modeWidget);
+    m_sideArea = new SideArea(m_modeWidget);
-    auto scrollableSideBar = new QScrollArea(m_modeWidget);
-    scrollableSideBar->setWidget(m_sideBar);
-    scrollableSideBar->setWidgetResizable(true);
-    scrollableSideBar->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
-    scrollableSideBar->setFrameShape(QFrame::NoFrame);
-
-    auto divider = new QWidget(m_modeWidget);
-    divider->setMaximumWidth(1);
-    divider->setMinimumWidth(1);
-    divider->setAutoFillBackground(true);
-    divider->setPalette(themeColor(Theme::Welcome_DividerColor));
 
     m_pageStack = new QStackedWidget(m_modeWidget);
+    palette.setColor(QPalette::Window, themeColor(Theme::Welcome_BackgroundSecondaryColor));
+    m_pageStack->setPalette(palette);
     m_pageStack->setObjectName("WelcomeScreenStackedWidget");
     m_pageStack->setAutoFillBackground(true);
 
-    auto hbox = new QHBoxLayout;
+    m_topArea = new TopArea;
-    hbox->addWidget(scrollableSideBar);
+    m_bottomArea = new BottomArea;
-    hbox->addWidget(divider);
-    hbox->addWidget(m_pageStack);
-    hbox->setStretchFactor(m_pageStack, 10);
 
-    auto layout = new QVBoxLayout(m_modeWidget);
+    auto layout = new QGridLayout(m_modeWidget);
+    layout->addWidget(new StyledBar(m_modeWidget), 0, 0, 1, 2);
+    layout->addWidget(m_topArea, 1, 0, 1, 2);
+    layout->addWidget(m_sideArea, 2, 0, 2, 1);
+    layout->addWidget(m_pageStack, 2, 1, 1, 1);
+    layout->setColumnStretch(1, 10);
+    layout->addWidget(m_bottomArea, 3, 1, 1, 1);
     layout->setContentsMargins(0, 0, 0, 0);
     layout->setSpacing(0);
-    layout->addWidget(new StyledBar(m_modeWidget));
-    layout->addItem(hbox);
 
     setWidget(m_modeWidget);
 }
@@ -388,15 +443,6 @@ void WelcomeMode::initPlugins()
 
 bool WelcomeMode::openDroppedFiles(const QList<QUrl> &urls)
 {
-//    DropArea {
-//        anchors.fill: parent
-//        keys: ["text/uri-list"]
-//        onDropped: {
-//            if ((drop.supportedActions & Qt.CopyAction != 0)
-//                    && welcomeMode.openDroppedFiles(drop.urls))
-//                drop.accept(Qt.CopyAction);
-//        }
-//    }
     const QList<QUrl> localUrls = Utils::filtered(urls, &QUrl::isLocalFile);
     if (!localUrls.isEmpty()) {
         QTimer::singleShot(0, [localUrls]() {
@@ -415,7 +461,7 @@ void WelcomeMode::addPage(IWelcomePage *page)
         if (m_pluginList.at(idx)->priority() >= pagePriority)
             break;
     }
-    auto pageButton = new WelcomePageButton(m_sideBar);
+    auto pageButton = new WelcomePageButton(m_sideArea);
     auto pageId = page->id();
     pageButton->setText(page->title());
     pageButton->setActiveChecker([this, pageId] { return m_activePage == pageId; });
@@ -423,7 +469,7 @@ void WelcomeMode::addPage(IWelcomePage *page)
     m_pluginList.insert(idx, page);
     m_pageButtons.insert(idx, pageButton);
 
-    m_sideBar->m_pluginButtons->insertWidget(idx, pageButton);
+    m_sideArea->m_pluginButtons->insertWidget(idx, pageButton);
 
     QWidget *stackPage = page->createWidget();
     stackPage->setAutoFillBackground(true);

src/tools/icons/qtcreatoricons.svg

@@ -502,7 +502,7 @@
        xlink:href="#linear-gradient-7"
        id="linearGradient2898"
        gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(75,0,0,-75,14430,8326)"
+       gradientTransform="matrix(75,0,0,-75,14430,8329)"
        x1="-190.82001"
        y1="109.69"
        x2="-191.87"
@@ -516,7 +516,8 @@
        fx="548.5"
        fy="91.5"
        r="18.5"
-       gradientUnits="userSpaceOnUse" />
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(112,18)" />
     <linearGradient
        inkscape:collect="always"
        xlink:href="#linearGradient2550"
@@ -672,17 +673,18 @@
      id="layer7"
      inkscape:label="Welcome screen thumbnails">
     <g
-       id="src/plugins/qtsupport/images/icons/videotutorialicon">
+       id="src/plugins/qtsupport/images/icons/videotutorialicon"
+       transform="translate(0,-32)">
       <rect
          id="rect2451"
-         height="110"
+         height="160"
-         width="176"
+         width="214"
          class="cls-1"
          x="0"
          y="0"
          style="fill:#26282a" />
       <path
-         d="M 83.73,67.34 V 56.12 l 9.62,5.61 z m -0.53,-14 a 1,1 0 0 0 -1.06,0 1.05,1.05 0 0 0 -0.54,0.93 V 69.2 a 1,1 0 0 0 0.54,0.92 1,1 0 0 0 0.53,0.15 1,1 0 0 0 0.53,-0.15 L 96,62.65 a 1.06,1.06 0 0 0 0,-1.84 z m 32.53,-11.88 v 38.4 a 1.07,1.07 0 0 1 -2.13,0 V 41.47 A 1.07,1.07 0 0 0 112.53,40.4 H 63.47 a 1.07,1.07 0 0 0 -1.07,1.07 v 41.6 h 52.27 a 1.07,1.07 0 0 1 0,2.13 H 61.33 A 1.06,1.06 0 0 1 60.27,84.13 V 41.47 a 3.2,3.2 0 0 1 3.2,-3.2 h 49.06 a 3.2,3.2 0 0 1 3.2,3.2 z M 76.27,91.6 a 1.07,1.07 0 1 1 1.06,-1.07 1.07,1.07 0 0 1 -1.06,1.07 z m 36.26,-2.13 H 79.27 a 3.18,3.18 0 0 0 -6,0 H 65.6 a 1.07,1.07 0 1 0 0,2.13 h 7.66 a 3.18,3.18 0 0 0 6,0 h 33.26 a 1.07,1.07 0 1 0 0,-2.13 z m 5.34,3.2 a 3.21,3.21 0 0 1 -3.2,3.2 H 61.33 a 3.21,3.21 0 0 1 -3.2,-3.2 V 39.33 a 3.21,3.21 0 0 1 3.2,-3.2 h 53.34 a 3.21,3.21 0 0 1 3.2,3.2 z M 114.67,34 H 61.33 A 5.33,5.33 0 0 0 56,39.33 V 92.67 A 5.33,5.33 0 0 0 61.33,98 h 53.34 A 5.33,5.33 0 0 0 120,92.67 V 39.33 A 5.33,5.33 0 0 0 114.67,34 Z"
+         d="M 102.73,92.34 V 81.12 l 9.62,5.61 z m -0.53,-14 a 1,1 0 0 0 -1.06,0 1.05,1.05 0 0 0 -0.54,0.93 V 94.2 a 1,1 0 0 0 0.54,0.92 1,1 0 0 0 0.53,0.15 1,1 0 0 0 0.53,-0.15 L 115,87.65 a 1.06,1.06 0 0 0 0,-1.84 z m 32.53,-11.88 v 38.4 a 1.07,1.07 0 0 1 -2.13,0 V 66.47 A 1.07,1.07 0 0 0 131.53,65.4 H 82.47 a 1.07,1.07 0 0 0 -1.07,1.07 v 41.6 h 52.27 a 1.07,1.07 0 0 1 0,2.13 H 80.33 a 1.06,1.06 0 0 1 -1.06,-1.07 V 66.47 a 3.2,3.2 0 0 1 3.2,-3.2 h 49.06 a 3.2,3.2 0 0 1 3.2,3.2 z M 95.27,116.6 a 1.07,1.07 0 1 1 1.06,-1.07 1.07,1.07 0 0 1 -1.06,1.07 z m 36.26,-2.13 H 98.27 a 3.18,3.18 0 0 0 -6,0 H 84.6 a 1.07,1.07 0 1 0 0,2.13 h 7.66 a 3.18,3.18 0 0 0 6,0 h 33.26 a 1.07,1.07 0 1 0 0,-2.13 z m 5.34,3.2 a 3.21,3.21 0 0 1 -3.2,3.2 H 80.33 a 3.21,3.21 0 0 1 -3.2,-3.2 V 64.33 a 3.21,3.21 0 0 1 3.2,-3.2 h 53.34 a 3.21,3.21 0 0 1 3.2,3.2 z M 133.67,59 H 80.33 A 5.33,5.33 0 0 0 75,64.33 v 53.34 a 5.33,5.33 0 0 0 5.33,5.33 h 53.34 A 5.33,5.33 0 0 0 139,117.67 V 64.33 A 5.33,5.33 0 0 0 133.67,59 Z"
          class="cls-2"
          id="video-player"
          inkscape:connector-curvature="0"
@@ -690,45 +692,45 @@
       <path
          id="path2480"
          style="fill:#17a81a"
-         d="M 137.7,21.74 V 9 h 2 v 12.74 z m -2.58,-6.22 v 4.1 a 0.91,0.91 0 0 0 0.21,0.58 1,1 0 0 0 0.59,0.25 l -0.06,1.49 a 3.8,3.8 0 0 1 -2.39,-0.66 6.91,6.91 0 0 1 -2.9,0.66 c -1.79,0 -2.68,-1 -2.68,-2.86 a 2.44,2.44 0 0 1 0.73,-2 4,4 0 0 1 2.24,-0.74 l 2.32,-0.2 V 15.5 a 1.33,1.33 0 0 0 -0.31,-1 1.35,1.35 0 0 0 -0.93,-0.29 c -0.77,0 -1.73,0 -2.88,0.14 h -0.58 L 128.41,13 a 15.72,15.72 0 0 1 3.61,-0.46 3.31,3.31 0 0 1 2.38,0.71 3,3 0 0 1 0.72,2.27 z m -4,2.23 a 1.21,1.21 0 0 0 -1.24,1.35 c 0,0.83 0.37,1.24 1.1,1.24 a 7.1,7.1 0 0 0 1.91,-0.29 l 0.32,-0.11 v -2.39 z m -6.99,-6.54 V 9.14 h 2 v 2.07 z m 0,10.53 v -9 h 2 v 9 z m -6.5,0 v -9 h 1.94 v 1.08 a 8.5,8.5 0 0 1 3.06,-1.27 v 2 a 12.57,12.57 0 0 0 -2.64,0.79 l -0.4,0.16 v 6.28 z m -9.05,-8.02 a 4.67,4.67 0 0 1 6.18,0 5.57,5.57 0 0 1 0.92,3.51 5.76,5.76 0 0 1 -0.9,3.52 4.66,4.66 0 0 1 -6.22,0 5.76,5.76 0 0 1 -0.9,-3.52 5.57,5.57 0 0 1 0.92,-3.51 z m 1.47,5.85 a 2.18,2.18 0 0 0 3.24,0 5,5 0 0 0 0.41,-2.36 4.42,4.42 0 0 0 -0.44,-2.32 2.18,2.18 0 0 0 -3.18,0 4.42,4.42 0 0 0 -0.44,2.32 5,5 0 0 0 0.41,2.36 z m -3.56,-5.15 H 104 v 4 a 4.12,4.12 0 0 0 0.17,1.46 c 0.1,0.24 0.38,0.36 0.82,0.36 l 1.48,-0.06 0.09,1.57 a 11.12,11.12 0 0 1 -1.84,0.23 2.55,2.55 0 0 1 -2.09,-0.7 4.41,4.41 0 0 1 -0.57,-2.65 v -4.21 h -1.15 v -1.68 h 1.15 V 10.13 H 104 v 2.61 h 2.49 z m -9.17,-1.68 h 2 v 9 h -2 v -0.55 a 4.93,4.93 0 0 1 -2.43,0.75 2.71,2.71 0 0 1 -2.48,-1 7,7 0 0 1 -0.63,-3.5 v -4.7 h 2 v 4.72 A 5.78,5.78 0 0 0 94,19.64 c 0.18,0.37 0.6,0.56 1.26,0.56 a 4.32,4.32 0 0 0 1.78,-0.36 l 0.27,-0.11 z M 82.67,11.2 V 9.41 h 9 V 11.2 H 88.2 v 10.54 h -2 V 11.2 Z m -12.05,2.52 a 4.65,4.65 0 0 1 6.17,0 5.57,5.57 0 0 1 0.93,3.51 5.76,5.76 0 0 1 -0.9,3.52 3.65,3.65 0 0 1 -3.11,1.19 3.66,3.66 0 0 1 -3.12,-1.19 5.76,5.76 0 0 1 -0.9,-3.52 5.57,5.57 0 0 1 0.93,-3.51 z m 1.47,5.85 a 1.69,1.69 0 0 0 1.62,0.72 1.71,1.71 0 0 0 1.62,-0.72 5.08,5.08 0 0 0 0.41,-2.36 4.42,4.42 0 0 0 -0.44,-2.32 2.18,2.18 0 0 0 -3.18,0 4.41,4.41 0 0 0 -0.45,2.32 4.93,4.93 0 0 0 0.42,2.36 z m -4.7,0.55 0.5,-0.05 v 1.46 a 19.1,19.1 0 0 1 -3.64,0.41 3.44,3.44 0 0 1 -2.87,-1.1 5.65,5.65 0 0 1 -0.87,-3.51 q 0,-4.78 3.91,-4.78 3.91,0 3.78,4.12 l -0.13,1.4 h -5.54 a 2.41,2.41 0 0 0 0.47,1.64 2.27,2.27 0 0 0 1.74,0.52 c 0.87,0 1.75,-0.03 2.65,-0.11 z m -1.08,-3.56 a 3.07,3.07 0 0 0 -0.42,-1.86 1.71,1.71 0 0 0 -1.43,-0.53 1.78,1.78 0 0 0 -1.47,0.55 3,3 0 0 0 -0.48,1.84 z M 58.61,9 v 12.74 h -2 v -0.46 a 5.42,5.42 0 0 1 -2.41,0.66 3,3 0 0 1 -2.58,-1.06 5.92,5.92 0 0 1 -0.82,-3.56 5.81,5.81 0 0 1 0.91,-3.64 3.39,3.39 0 0 1 2.83,-1.13 13.15,13.15 0 0 1 2,0.23 V 9 Z m -2.27,10.87 0.3,-0.12 v -5.33 a 12.14,12.14 0 0 0 -2,-0.18 c -1.22,0 -1.82,1 -1.82,3 a 4.48,4.48 0 0 0 0.42,2.3 1.5,1.5 0 0 0 1.34,0.64 4.66,4.66 0 0 0 1.76,-0.31 z M 46.92,11.21 V 9.14 h 2 v 2.07 z m 0,10.53 v -9 h 2 v 9 z M 43.29,9.41 h 2.09 l -3,12.33 h -3.95 l -3,-12.33 h 2.09 L 39.94,20 h 0.9 z"
+         d="M 157.135,41.74 V 29 h 2 v 12.74 z m -2.58,-6.22 v 4.1 a 0.91,0.91 0 0 0 0.21,0.58 1,1 0 0 0 0.59,0.25 l -0.06,1.49 a 3.8,3.8 0 0 1 -2.39,-0.66 6.91,6.91 0 0 1 -2.9,0.66 c -1.79,0 -2.68,-1 -2.68,-2.86 a 2.44,2.44 0 0 1 0.73,-2 4,4 0 0 1 2.24,-0.74 l 2.32,-0.2 V 35.5 a 1.33,1.33 0 0 0 -0.31,-1 1.35,1.35 0 0 0 -0.93,-0.29 c -0.77,0 -1.73,0 -2.88,0.14 h -0.58 L 147.845,33 a 15.72,15.72 0 0 1 3.61,-0.46 3.31,3.31 0 0 1 2.38,0.71 3,3 0 0 1 0.72,2.27 z m -4,2.23 a 1.21,1.21 0 0 0 -1.24,1.35 c 0,0.83 0.37,1.24 1.1,1.24 a 7.1,7.1 0 0 0 1.91,-0.29 l 0.32,-0.11 v -2.39 z m -6.99,-6.54 v -2.07 h 2 v 2.07 z m 0,10.53 v -9 h 2 v 9 z m -6.5,0 v -9 h 1.94 v 1.08 a 8.5,8.5 0 0 1 3.06,-1.27 v 2 a 12.57,12.57 0 0 0 -2.64,0.79 l -0.4,0.16 v 6.28 z m -9.05,-8.02 a 4.67,4.67 0 0 1 6.18,0 5.57,5.57 0 0 1 0.92,3.51 5.76,5.76 0 0 1 -0.9,3.52 4.66,4.66 0 0 1 -6.22,0 5.76,5.76 0 0 1 -0.9,-3.52 5.57,5.57 0 0 1 0.92,-3.51 z m 1.47,5.85 a 2.18,2.18 0 0 0 3.24,0 5,5 0 0 0 0.41,-2.36 4.42,4.42 0 0 0 -0.44,-2.32 2.18,2.18 0 0 0 -3.18,0 4.42,4.42 0 0 0 -0.44,2.32 5,5 0 0 0 0.41,2.36 z m -3.56,-5.15 h -2.49 v 4 a 4.12,4.12 0 0 0 0.17,1.46 c 0.1,0.24 0.38,0.36 0.82,0.36 l 1.48,-0.06 0.09,1.57 a 11.12,11.12 0 0 1 -1.84,0.23 2.55,2.55 0 0 1 -2.09,-0.7 4.41,4.41 0 0 1 -0.57,-2.65 v -4.21 h -1.15 v -1.68 h 1.15 v -2.61 h 1.94 v 2.61 h 2.49 z m -9.17,-1.68 h 2 v 9 h -2 v -0.55 a 4.93,4.93 0 0 1 -2.43,0.75 2.71,2.71 0 0 1 -2.48,-1 7,7 0 0 1 -0.63,-3.5 v -4.7 h 2 v 4.72 a 5.78,5.78 0 0 0 0.22,2.18 c 0.18,0.37 0.6,0.56 1.26,0.56 a 4.32,4.32 0 0 0 1.78,-0.36 l 0.27,-0.11 z m -14.65,-1.54 v -1.79 h 9 v 1.79 h -3.47 v 10.54 h -2 V 31.2 Z m -12.05,2.52 a 4.65,4.65 0 0 1 6.17,0 5.57,5.57 0 0 1 0.93,3.51 5.76,5.76 0 0 1 -0.9,3.52 3.65,3.65 0 0 1 -3.11,1.19 3.66,3.66 0 0 1 -3.12,-1.19 5.76,5.76 0 0 1 -0.9,-3.52 5.57,5.57 0 0 1 0.93,-3.51 z m 1.47,5.85 a 1.69,1.69 0 0 0 1.62,0.72 1.71,1.71 0 0 0 1.62,-0.72 5.08,5.08 0 0 0 0.41,-2.36 4.42,4.42 0 0 0 -0.44,-2.32 2.18,2.18 0 0 0 -3.18,0 4.41,4.41 0 0 0 -0.45,2.32 4.93,4.93 0 0 0 0.42,2.36 z m -4.7,0.55 0.5,-0.05 v 1.46 a 19.1,19.1 0 0 1 -3.64,0.41 3.44,3.44 0 0 1 -2.87,-1.1 5.65,5.65 0 0 1 -0.87,-3.51 q 0,-4.78 3.91,-4.78 3.91,0 3.78,4.12 l -0.13,1.4 h -5.54 a 2.41,2.41 0 0 0 0.47,1.64 2.27,2.27 0 0 0 1.74,0.52 c 0.87,0 1.75,-0.03 2.65,-0.11 z m -1.08,-3.56 a 3.07,3.07 0 0 0 -0.42,-1.86 1.71,1.71 0 0 0 -1.43,-0.53 1.78,1.78 0 0 0 -1.47,0.55 3,3 0 0 0 -0.48,1.84 z M 78.045,29 v 12.74 h -2 v -0.46 a 5.42,5.42 0 0 1 -2.41,0.66 3,3 0 0 1 -2.58,-1.06 5.92,5.92 0 0 1 -0.82,-3.56 5.81,5.81 0 0 1 0.91,-3.64 3.39,3.39 0 0 1 2.83,-1.13 13.15,13.15 0 0 1 2,0.23 V 29 Z m -2.27,10.87 0.3,-0.12 v -5.33 a 12.14,12.14 0 0 0 -2,-0.18 c -1.22,0 -1.82,1 -1.82,3 a 4.48,4.48 0 0 0 0.42,2.3 1.5,1.5 0 0 0 1.34,0.64 4.66,4.66 0 0 0 1.76,-0.31 z m -9.42,-8.66 v -2.07 h 2 v 2.07 z m 0,10.53 v -9 h 2 v 9 z m -3.63,-12.33 h 2.09 l -3,12.33 h -3.95 l -3,-12.33 h 2.09 L 59.375,40 h 0.9 z"
          inkscape:connector-curvature="0" />
     </g>
     <g
        id="src/plugins/qtsupport/images/icons/tutorialicon"
-       transform="translate(177)">
+       transform="translate(214,-32)">
       <rect
          id="rect2579"
-         height="110"
+         height="160"
-         width="176"
+         width="214"
          class="cls-1"
          x="0"
          y="0"
          style="fill:#ffffff" />
       <path
          style="fill:url(#linear-gradient-7)"
-         d="m 126.67,54 a 1.34,1.34 0 0 0 -1.34,1.33 v 0.44 l -16,6.59 V 60 l 17.85,-7.38 a 1.36,1.36 0 0 0 0.82,-1.24 1.34,1.34 0 0 0 -0.82,-1.23 l -38.67,-16 a 1.38,1.38 0 0 0 -1,0 l -38.67,16 a 1.34,1.34 0 0 0 -0.84,1.18 1.36,1.36 0 0 0 0.82,1.24 l 38.67,16 a 1.24,1.24 0 0 0 1,0 l 14,-5.78 a 1.33,1.33 0 0 0 -1,-2.46 L 88,65.89 52.82,51.33 88,36.78 123.18,51.33 107.87,57.67 93.21,52.19 a 3,3 0 0 0 0.12,-0.86 c 0,-2.24 -2.34,-4 -5.33,-4 -2.99,0 -5.33,1.76 -5.33,4 0,2.24 2.34,4 5.33,4 a 6.41,6.41 0 0 0 3.45,-0.95 l 15.22,5.68 v 4.28 0 28.57 a 4,4 0 1 0 2.66,0 v -7.57 a 16.19,16.19 0 0 0 5.26,-6.9 1.32,1.32 0 0 0 0.08,-0.44 v -9.33 a 1.34,1.34 0 1 0 -2.67,0 v 9.08 a 13.49,13.49 0 0 1 -2.67,4 V 65.24 L 127.17,57.9 A 1.34,1.34 0 0 0 128,56.67 V 55.33 A 1.34,1.34 0 0 0 126.67,54 Z M 85.33,51.33 c 0,-0.54 1,-1.33 2.67,-1.33 1.67,0 2.67,0.79 2.67,1.33 0,0.54 -1,1.34 -2.67,1.34 -1.67,0 -2.67,-0.79 -2.67,-1.34 z M 108,98 A 1.34,1.34 0 1 1 109.33,96.67 1.33,1.33 0 0 1 108,98 Z M 87.49,73.9 48.82,57.9 A 1.34,1.34 0 0 1 48,56.67 v -1.34 a 1.34,1.34 0 0 1 2.67,0 v 0.45 L 88,71.22 102.15,65.36 a 1.36,1.36 0 0 1 1.75,0.73 1.33,1.33 0 0 1 -0.72,1.74 L 88.51,73.9 a 1.35,1.35 0 0 1 -1,0 z m 15.77,15.54 A 34.28,34.28 0 0 1 88,92.67 C 67.33,92.67 61.66,79.07 61.43,78.5 A 1.44,1.44 0 0 1 61.33,78 v -9.33 a 1.34,1.34 0 1 1 2.67,0 v 9 c 0.77,1.67 6.11,11.7 22.67,12.23 V 78 a 1.33,1.33 0 0 1 2.66,0 v 12 a 31,31 0 0 0 12.75,-2.91 1.3327134,1.3327134 0 0 1 1.18,2.39 z m 6.07,13.89 v 4 a 1.33,1.33 0 1 1 -2.66,0 v -4 a 1.33,1.33 0 1 1 2.66,0 z m -4,-1 -1.33,5.33 a 1.33,1.33 0 0 1 -1.29,1 1.86,1.86 0 0 1 -0.33,0 1.34,1.34 0 0 1 -1,-1.62 l 1.34,-5.33 a 1.33,1.33 0 0 1 2.58,0.64 z m 9.34,4.69 a 1.34,1.34 0 0 1 -1,1.62 1.86,1.86 0 0 1 -0.33,0 1.33,1.33 0 0 1 -1.29,-1 l -1.33,-5.34 a 1.33,1.33 0 1 1 2.58,-0.64 l 1.34,5.33 z"
+         d="m 145.67,81.5 a 1.34,1.34 0 0 0 -1.34,1.33 v 0.44 l -16,6.59 V 87.5 l 17.85,-7.38 a 1.36,1.36 0 0 0 0.82,-1.24 1.34,1.34 0 0 0 -0.82,-1.23 l -38.67,-16 a 1.38,1.38 0 0 0 -1,0 l -38.67,16 a 1.34,1.34 0 0 0 -0.84,1.18 1.36,1.36 0 0 0 0.82,1.24 l 38.67,16 a 1.24,1.24 0 0 0 1,0 l 14,-5.78 a 1.33,1.33 0 0 0 -1,-2.46 L 107,93.39 71.82,78.83 107,64.28 l 35.18,14.55 -15.31,6.34 -14.66,-5.48 a 3,3 0 0 0 0.12,-0.86 c 0,-2.24 -2.34,-4 -5.33,-4 -2.99,0 -5.33,1.76 -5.33,4 0,2.24 2.34,4 5.33,4 a 6.41,6.41 0 0 0 3.45,-0.95 l 15.22,5.68 v 4.28 0 28.57 a 4,4 0 1 0 2.66,0 v -7.57 a 16.19,16.19 0 0 0 5.26,-6.9 1.32,1.32 0 0 0 0.08,-0.44 v -9.33 a 1.34,1.34 0 1 0 -2.67,0 v 9.08 a 13.49,13.49 0 0 1 -2.67,4 V 92.74 L 146.17,85.4 A 1.34,1.34 0 0 0 147,84.17 v -1.34 a 1.34,1.34 0 0 0 -1.33,-1.33 z m -41.34,-2.67 c 0,-0.54 1,-1.33 2.67,-1.33 1.67,0 2.67,0.79 2.67,1.33 0,0.54 -1,1.34 -2.67,1.34 -1.67,0 -2.67,-0.79 -2.67,-1.34 z M 127,125.5 a 1.34,1.34 0 1 1 1.33,-1.33 1.33,1.33 0 0 1 -1.33,1.33 z M 106.49,101.4 67.82,85.4 A 1.34,1.34 0 0 1 67,84.17 v -1.34 a 1.34,1.34 0 0 1 2.67,0 v 0.45 L 107,98.72 121.15,92.86 a 1.36,1.36 0 0 1 1.75,0.73 1.33,1.33 0 0 1 -0.72,1.74 l -14.67,6.07 a 1.35,1.35 0 0 1 -1,0 z m 15.77,15.54 A 34.28,34.28 0 0 1 107,120.17 c -20.67,0 -26.34,-13.6 -26.57,-14.17 a 1.44,1.44 0 0 1 -0.1,-0.5 v -9.33 a 1.34,1.34 0 1 1 2.67,0 v 9 c 0.77,1.67 6.11,11.7 22.67,12.23 v -11.9 a 1.33,1.33 0 0 1 2.66,0 v 12 a 31,31 0 0 0 12.75,-2.91 1.3327134,1.3327134 0 0 1 1.18,2.39 z m 6.07,13.89 v 4 a 1.33,1.33 0 1 1 -2.66,0 v -4 a 1.33,1.33 0 1 1 2.66,0 z m -4,-1 -1.33,5.33 a 1.33,1.33 0 0 1 -1.29,1 1.86,1.86 0 0 1 -0.33,0 1.34,1.34 0 0 1 -1,-1.62 l 1.34,-5.33 a 1.33,1.33 0 0 1 2.58,0.64 z m 9.34,4.69 a 1.34,1.34 0 0 1 -1,1.62 1.86,1.86 0 0 1 -0.33,0 1.33,1.33 0 0 1 -1.29,-1 l -1.33,-5.34 a 1.33,1.33 0 1 1 2.58,-0.64 l 1.34,5.33 z"
          class="cls-2"
          id="graduation-hat"
          inkscape:connector-curvature="0" />
       <path
          id="path2598"
          style="fill:#222840"
-         d="M 114,21.74 V 9 h 2 v 12.74 z m -2.57,-6.22 v 4.1 a 0.86,0.86 0 0 0 0.2,0.58 1,1 0 0 0 0.59,0.25 v 1.49 a 3.81,3.81 0 0 1 -2.4,-0.66 6.91,6.91 0 0 1 -2.9,0.66 c -1.79,0 -2.68,-1 -2.68,-2.86 a 2.44,2.44 0 0 1 0.73,-2 4,4 0 0 1 2.24,-0.74 l 2.32,-0.2 V 15.5 a 1.33,1.33 0 0 0 -0.31,-1 1.35,1.35 0 0 0 -0.93,-0.29 c -0.77,0 -1.73,0 -2.88,0.14 h -0.57 L 104.71,13 a 15.72,15.72 0 0 1 3.61,-0.46 3.31,3.31 0 0 1 2.38,0.71 3.05,3.05 0 0 1 0.73,2.27 z m -4,2.23 a 1.21,1.21 0 0 0 -1.25,1.35 c 0,0.83 0.37,1.24 1.1,1.24 a 7,7 0 0 0 1.91,-0.29 l 0.32,-0.11 v -2.39 z m -7,-6.54 V 9.14 h 2 v 2.07 z m 0,10.53 v -9 h 2 v 9 z m -6.5,0 v -9 h 1.95 v 1.08 a 8.42,8.42 0 0 1 3.06,-1.27 v 2 a 12.5,12.5 0 0 0 -2.65,0.79 l -0.4,0.16 v 6.28 z m -9.04,-8.02 a 4.65,4.65 0 0 1 6.17,0 5.57,5.57 0 0 1 0.94,3.51 5.76,5.76 0 0 1 -0.9,3.52 4.67,4.67 0 0 1 -6.23,0 5.76,5.76 0 0 1 -0.9,-3.52 5.57,5.57 0 0 1 0.92,-3.51 z m 1.46,5.85 a 1.71,1.71 0 0 0 1.62,0.72 1.69,1.69 0 0 0 1.62,-0.72 A 4.93,4.93 0 0 0 90,17.21 4.53,4.53 0 0 0 89.56,14.89 1.76,1.76 0 0 0 88,14.2 a 1.74,1.74 0 0 0 -1.59,0.69 4.53,4.53 0 0 0 -0.44,2.32 5.08,5.08 0 0 0 0.38,2.36 z m -3.56,-5.15 h -2.48 v 4 a 4.19,4.19 0 0 0 0.16,1.46 c 0.11,0.24 0.38,0.36 0.83,0.36 l 1.47,-0.06 0.09,1.57 a 10.91,10.91 0 0 1 -1.83,0.23 2.59,2.59 0 0 1 -2.1,-0.7 4.41,4.41 0 0 1 -0.57,-2.65 v -4.21 h -1.15 v -1.68 h 1.15 v -2.61 h 2 v 2.61 h 2.48 z m -9.16,-1.68 h 1.94 v 9 h -1.94 v -0.55 a 5,5 0 0 1 -2.43,0.75 2.72,2.72 0 0 1 -2.49,-1 7,7 0 0 1 -0.63,-3.5 v -4.7 h 2 v 4.72 a 5.78,5.78 0 0 0 0.27,2.18 c 0.18,0.37 0.6,0.56 1.26,0.56 a 4.36,4.36 0 0 0 1.78,-0.36 l 0.27,-0.11 z M 59,11.2 V 9.41 h 9 v 1.79 h -3.5 v 10.54 h -2 V 11.2 Z"
+         d="M 133.5,41.74 V 29 h 2 v 12.74 z m -2.57,-6.22 v 4.1 a 0.86,0.86 0 0 0 0.2,0.58 1,1 0 0 0 0.59,0.25 v 1.49 a 3.81,3.81 0 0 1 -2.4,-0.66 6.91,6.91 0 0 1 -2.9,0.66 c -1.79,0 -2.68,-1 -2.68,-2.86 a 2.44,2.44 0 0 1 0.73,-2 4,4 0 0 1 2.24,-0.74 l 2.32,-0.2 V 35.5 a 1.33,1.33 0 0 0 -0.31,-1 1.35,1.35 0 0 0 -0.93,-0.29 c -0.77,0 -1.73,0 -2.88,0.14 h -0.57 L 124.21,33 a 15.72,15.72 0 0 1 3.61,-0.46 3.31,3.31 0 0 1 2.38,0.71 3.05,3.05 0 0 1 0.73,2.27 z m -4,2.23 a 1.21,1.21 0 0 0 -1.25,1.35 c 0,0.83 0.37,1.24 1.1,1.24 a 7,7 0 0 0 1.91,-0.29 l 0.32,-0.11 v -2.39 z m -7,-6.54 v -2.07 h 2 v 2.07 z m 0,10.53 v -9 h 2 v 9 z m -6.5,0 v -9 h 1.95 v 1.08 a 8.42,8.42 0 0 1 3.06,-1.27 v 2 a 12.5,12.5 0 0 0 -2.65,0.79 l -0.4,0.16 v 6.28 z m -9.04,-8.02 a 4.65,4.65 0 0 1 6.17,0 5.57,5.57 0 0 1 0.94,3.51 5.76,5.76 0 0 1 -0.9,3.52 4.67,4.67 0 0 1 -6.23,0 5.76,5.76 0 0 1 -0.9,-3.52 5.57,5.57 0 0 1 0.92,-3.51 z m 1.46,5.85 a 1.71,1.71 0 0 0 1.62,0.72 1.69,1.69 0 0 0 1.62,-0.72 4.93,4.93 0 0 0 0.41,-2.36 4.53,4.53 0 0 0 -0.44,-2.32 1.76,1.76 0 0 0 -1.56,-0.69 1.74,1.74 0 0 0 -1.59,0.69 4.53,4.53 0 0 0 -0.44,2.32 5.08,5.08 0 0 0 0.38,2.36 z m -3.56,-5.15 h -2.48 v 4 a 4.19,4.19 0 0 0 0.16,1.46 c 0.11,0.24 0.38,0.36 0.83,0.36 l 1.47,-0.06 0.09,1.57 a 10.91,10.91 0 0 1 -1.83,0.23 2.59,2.59 0 0 1 -2.1,-0.7 4.41,4.41 0 0 1 -0.57,-2.65 v -4.21 h -1.15 v -1.68 h 1.15 v -2.61 h 2 v 2.61 h 2.48 z m -9.16,-1.68 h 1.94 v 9 h -1.94 v -0.55 a 5,5 0 0 1 -2.43,0.75 2.72,2.72 0 0 1 -2.49,-1 7,7 0 0 1 -0.63,-3.5 v -4.7 h 2 v 4.72 a 5.78,5.78 0 0 0 0.27,2.18 c 0.18,0.37 0.6,0.56 1.26,0.56 a 4.36,4.36 0 0 0 1.78,-0.36 l 0.27,-0.11 z M 78.5,31.2 v -1.79 h 9 V 31.2 H 84 V 41.74 H 82 V 31.2 Z"
          inkscape:connector-curvature="0" />
     </g>
     <g
        id="src/plugins/qtsupport/images/icons/qteventicon"
-       transform="translate(354)">
+       transform="translate(428,-32)">
       <rect
          id="rect2709"
-         height="110"
+         height="160"
-         width="176"
+         width="214"
          class="cls-1"
          x="0"
          y="0"
          style="fill:#ffffff" />
       <path
-         d="m 120,37.2 v 4.27 a 1.06,1.06 0 0 1 -1.07,1.06 h -1.06 v 24.54 a 1.07,1.07 0 0 1 -2.14,0 v -25.6 a 1.07,1.07 0 0 1 1.07,-1.07 h 1.07 V 38.27 H 58.13 v 2.13 h 54.4 a 1.07,1.07 0 1 1 0,2.13 H 57.07 A 1.06,1.06 0 0 1 56,41.47 V 37.2 a 1.07,1.07 0 0 1 1.07,-1.07 h 29.86 v -1.06 a 1.07,1.07 0 1 1 2.14,0 v 1.06 h 29.86 A 1.07,1.07 0 0 1 120,37.2 Z M 69.87,51.07 h 8.53 a 1.07,1.07 0 0 0 0,-2.14 h -8.53 a 1.07,1.07 0 0 0 0,2.14 z m 0,6.4 h 19.2 a 1.07,1.07 0 0 0 0,-2.14 h -19.2 a 1.07,1.07 0 0 0 0,2.14 z m 17.06,-6.4 a 1.07,1.07 0 0 0 0,-2.14 h -4.26 a 1.07,1.07 0 0 0 0,2.14 z m -17.06,12.8 h 3.2 a 1.07,1.07 0 0 0 0,-2.14 h -3.2 a 1.07,1.07 0 0 0 0,2.14 z m 19.2,-2.14 H 78.4 a 1.07,1.07 0 0 0 0,2.14 h 10.67 a 1.07,1.07 0 0 0 0,-2.14 z m 19.27,6.42 a 1.11,1.11 0 0 0 -1.13,0.92 L 104,92.52 a 1.06,1.06 0 0 0 0.91,1.2 h 0.15 a 1.06,1.06 0 0 0 1.05,-0.92 l 3.08,-22.52 c 3.68,0.09 6.2,0.79 7.49,2.08 a 4.34,4.34 0 0 1 1.18,3.23 v 17.08 a 1.07,1.07 0 0 0 2.13,0 V 75.6 a 6.46,6.46 0 0 0 -1.8,-4.74 c -1.83,-1.82 -5.06,-2.71 -9.86,-2.71 z m -9.68,0.91 3.2,23.46 a 1.07,1.07 0 0 1 -2.12,0.29 L 96.67,70.27 h -17.2 v 4.26 H 91.2 a 1.06,1.06 0 0 1 1.06,1 l 2.13,21.34 a 1.05,1.05 0 0 1 -1,1.16 h -0.11 a 1.07,1.07 0 0 1 -1.06,-1 l -2,-20.37 h -14 c -5,0 -7.47,-4.79 -7.47,-7.47 a 1.07,1.07 0 0 1 1.07,-1.07 H 97.6 a 1.08,1.08 0 0 1 1.06,0.93 z m -21.33,1.21 h -6.21 c 0.52,1.74 2.16,4.26 5.15,4.26 h 1.06 z m 27.74,0 a 2.14,2.14 0 1 0 -4.27,0 2.11,2.11 0 0 0 1.07,1.83 v 7.77 a 1.07,1.07 0 0 0 2.13,0 V 72.1 a 2.14,2.14 0 0 0 1.07,-1.83 z m 6.4,-19.2 v 0.28 a 2.15,2.15 0 0 1 1.06,1.85 v 2.13 a 2.12,2.12 0 0 1 -1.1,1.87 12.85,12.85 0 0 1 -1.14,3.94 c -1,1.94 -2.43,4.86 -7.36,4.86 C 98,66 96.55,63.08 95.58,61.14 A 12.55,12.55 0 0 1 94.44,57.2 2.13,2.13 0 0 1 93.33,55.33 V 53.2 a 2.13,2.13 0 0 1 1.07,-1.85 v -0.28 a 6.41,6.41 0 0 1 6.4,-6.4 h 4.27 a 6.41,6.41 0 0 1 6.4,6.4 z m -1.07,2.13 a 1.07,1.07 0 0 1 -1.07,-1.07 v -1.06 a 4.27,4.27 0 0 0 -4.26,-4.27 h -4.27 a 4.27,4.27 0 0 0 -4.27,4.27 v 1.06 a 1.06,1.06 0 0 1 -1.06,1.07 v 2.13 a 1.06,1.06 0 0 1 1.06,1.07 9.93,9.93 0 0 0 1,3.79 c 1.11,2.22 2.09,3.68 5.44,3.68 3.35,0 4.34,-1.46 5.45,-3.68 a 10,10 0 0 0 1,-3.79 1.07,1.07 0 0 1 1.07,-1.07 V 53.2 Z m -4.27,0 h -1.06 a 1.07,1.07 0 1 0 0,2.13 h 1.06 a 1.07,1.07 0 1 0 0,-2.13 z m -5.33,0 h -1.07 a 1.07,1.07 0 0 0 0,2.13 h 1.07 a 1.07,1.07 0 1 0 0,-2.13 z m 11.73,27.73 A 1.06,1.06 0 0 0 111.47,82 v 14.93 a 1.07,1.07 0 1 0 2.13,0 V 82 a 1.07,1.07 0 0 0 -1.07,-1.07 z M 88,80.93 H 63.47 a 3.12,3.12 0 0 1 -3.2,-3.2 v -32 a 1.07,1.07 0 0 0 -2.14,0 v 32 a 5.29,5.29 0 0 0 5.34,5.34 H 88 a 1.07,1.07 0 0 0 0,-2.14 z"
+         d="m 139,66.2 v 4.27 a 1.06,1.06 0 0 1 -1.07,1.06 h -1.06 v 24.54 a 1.07,1.07 0 0 1 -2.14,0 v -25.6 a 1.07,1.07 0 0 1 1.07,-1.07 h 1.07 V 67.27 H 77.13 v 2.13 h 54.4 a 1.07,1.07 0 1 1 0,2.13 H 76.07 A 1.06,1.06 0 0 1 75,70.47 V 66.2 a 1.07,1.07 0 0 1 1.07,-1.07 h 29.86 v -1.06 a 1.07,1.07 0 1 1 2.14,0 v 1.06 h 29.86 A 1.07,1.07 0 0 1 139,66.2 Z M 88.87,80.07 h 8.53 a 1.07,1.07 0 0 0 0,-2.14 h -8.53 a 1.07,1.07 0 0 0 0,2.14 z m 0,6.4 h 19.2 a 1.07,1.07 0 0 0 0,-2.14 h -19.2 a 1.07,1.07 0 0 0 0,2.14 z m 17.06,-6.4 a 1.07,1.07 0 0 0 0,-2.14 h -4.26 a 1.07,1.07 0 0 0 0,2.14 z m -17.06,12.8 h 3.2 a 1.07,1.07 0 0 0 0,-2.14 h -3.2 a 1.07,1.07 0 0 0 0,2.14 z m 19.2,-2.14 H 97.4 a 1.07,1.07 0 0 0 0,2.14 h 10.67 a 1.07,1.07 0 0 0 0,-2.14 z m 19.27,6.42 a 1.11,1.11 0 0 0 -1.13,0.92 L 123,121.52 a 1.06,1.06 0 0 0 0.91,1.2 h 0.15 a 1.06,1.06 0 0 0 1.05,-0.92 l 3.08,-22.52 c 3.68,0.09 6.2,0.79 7.49,2.08 a 4.34,4.34 0 0 1 1.18,3.23 v 17.08 a 1.07,1.07 0 0 0 2.13,0 V 104.6 a 6.46,6.46 0 0 0 -1.8,-4.74 c -1.83,-1.82 -5.06,-2.71 -9.86,-2.71 z m -9.68,0.91 3.2,23.46 a 1.07,1.07 0 0 1 -2.12,0.29 l -3.07,-22.54 h -17.2 v 4.26 h 11.73 a 1.06,1.06 0 0 1 1.06,1 l 2.13,21.34 a 1.05,1.05 0 0 1 -1,1.16 h -0.11 a 1.07,1.07 0 0 1 -1.06,-1 l -2,-20.37 h -14 c -5,0 -7.47,-4.79 -7.47,-7.47 a 1.07,1.07 0 0 1 1.07,-1.07 h 27.78 a 1.08,1.08 0 0 1 1.06,0.93 z m -21.33,1.21 h -6.21 c 0.52,1.74 2.16,4.26 5.15,4.26 h 1.06 z m 27.74,0 a 2.14,2.14 0 1 0 -4.27,0 2.11,2.11 0 0 0 1.07,1.83 v 7.77 a 1.07,1.07 0 0 0 2.13,0 v -7.77 a 2.14,2.14 0 0 0 1.07,-1.83 z m 6.4,-19.2 v 0.28 a 2.15,2.15 0 0 1 1.06,1.85 v 2.13 a 2.12,2.12 0 0 1 -1.1,1.87 12.85,12.85 0 0 1 -1.14,3.94 c -1,1.94 -2.43,4.86 -7.36,4.86 -4.93,0 -6.38,-2.92 -7.35,-4.86 a 12.55,12.55 0 0 1 -1.14,-3.94 2.13,2.13 0 0 1 -1.11,-1.87 V 82.2 a 2.13,2.13 0 0 1 1.07,-1.85 v -0.28 a 6.41,6.41 0 0 1 6.4,-6.4 h 4.27 a 6.41,6.41 0 0 1 6.4,6.4 z m -1.07,2.13 a 1.07,1.07 0 0 1 -1.07,-1.07 v -1.06 a 4.27,4.27 0 0 0 -4.26,-4.27 h -4.27 a 4.27,4.27 0 0 0 -4.27,4.27 v 1.06 a 1.06,1.06 0 0 1 -1.06,1.07 v 2.13 a 1.06,1.06 0 0 1 1.06,1.07 9.93,9.93 0 0 0 1,3.79 c 1.11,2.22 2.09,3.68 5.44,3.68 3.35,0 4.34,-1.46 5.45,-3.68 a 10,10 0 0 0 1,-3.79 1.07,1.07 0 0 1 1.07,-1.07 V 82.2 Z m -4.27,0 h -1.06 a 1.07,1.07 0 1 0 0,2.13 h 1.06 a 1.07,1.07 0 1 0 0,-2.13 z m -5.33,0 h -1.07 a 1.07,1.07 0 0 0 0,2.13 h 1.07 a 1.07,1.07 0 1 0 0,-2.13 z m 11.73,27.73 a 1.06,1.06 0 0 0 -1.06,1.07 v 14.93 a 1.07,1.07 0 1 0 2.13,0 V 111 a 1.07,1.07 0 0 0 -1.07,-1.07 z m -24.53,0 H 82.47 a 3.12,3.12 0 0 1 -3.2,-3.2 v -32 a 1.07,1.07 0 0 0 -2.14,0 v 32 a 5.29,5.29 0 0 0 5.34,5.34 H 107 a 1.07,1.07 0 0 0 0,-2.14 z"
          class="cls-2"
          id="presentation-man"
          inkscape:connector-curvature="0"
@@ -736,7 +738,7 @@
       <path
          id="path2724"
          style="fill:#17a81a"
-         d="m 108.63,21.74 h -2 V 9 h 2 v 7.36 l 1.11,-0.11 2.13,-3.51 h 2.19 l -2.59,4.26 2.74,4.78 H 112 l -2.2,-3.78 -1.17,0.12 z m -6.41,0 V 9 h 2 v 12.74 z m -2.57,-6.22 v 4.1 a 0.86,0.86 0 0 0 0.2,0.58 1,1 0 0 0 0.59,0.25 l -0.06,1.49 A 3.8,3.8 0 0 1 98,21.28 6.91,6.91 0 0 1 95.1,21.94 c -1.79,0 -2.68,-1 -2.68,-2.86 a 2.44,2.44 0 0 1 0.73,-2 4,4 0 0 1 2.24,-0.74 l 2.32,-0.2 V 15.5 a 1.33,1.33 0 0 0 -0.31,-1 1.35,1.35 0 0 0 -0.93,-0.29 c -0.77,0 -1.73,0 -2.88,0.14 H 93.01 L 92.93,13 a 15.72,15.72 0 0 1 3.61,-0.46 3.31,3.31 0 0 1 2.38,0.71 3.05,3.05 0 0 1 0.73,2.27 z m -4,2.23 a 1.21,1.21 0 0 0 -1.24,1.35 c 0,0.83 0.37,1.24 1.1,1.24 a 7,7 0 0 0 1.91,-0.29 l 0.32,-0.11 V 17.55 Z M 84,11.2 V 9.41 h 9 v 1.79 h -3.49 v 10.54 h -2 V 11.2 Z m -4.62,3.22 h -2.49 v 4 a 4.12,4.12 0 0 0 0.17,1.46 c 0.1,0.24 0.38,0.36 0.82,0.36 l 1.48,-0.06 0.09,1.57 A 11,11 0 0 1 77.61,21.98 2.55,2.55 0 0 1 75.52,21.28 4.41,4.41 0 0 1 75,18.59 V 14.42 H 73.8 V 12.74 H 75 v -2.61 h 1.94 v 2.61 h 2.49 z m -11.94,7.52 c -1.87,0 -3.17,-0.5 -3.91,-1.51 a 8.16,8.16 0 0 1 -1.11,-4.78 8.43,8.43 0 0 1 1.13,-4.85 c 0.75,-1.06 2,-1.58 3.89,-1.58 1.89,0 3.15,0.52 3.89,1.57 a 8.41,8.41 0 0 1 1.12,4.85 11.08,11.08 0 0 1 -0.45,3.49 4,4 0 0 1 -1.5,2 l 1.5,2.47 -1.86,0.86 -1.6,-2.63 a 3.68,3.68 0 0 1 -1.1,0.11 z m -2.34,-2.8 a 3.13,3.13 0 0 0 4.68,0 7.43,7.43 0 0 0 0.6,-3.5 7.78,7.78 0 0 0 -0.62,-3.58 3,3 0 0 0 -4.64,0 7.56,7.56 0 0 0 -0.63,3.56 7.47,7.47 0 0 0 0.61,3.52 z"
+         d="m 127.32716,41.74 h -2 V 29 h 2 v 7.36 l 1.11,-0.11 2.13,-3.51 h 2.19 l -2.59,4.26 2.74,4.78 h -2.21 l -2.2,-3.78 -1.17,0.12 z m -6.41,0 V 29 h 2 v 12.74 z m -2.57,-6.22 v 4.1 a 0.86,0.86 0 0 0 0.2,0.58 1,1 0 0 0 0.59,0.25 l -0.06,1.49 a 3.8,3.8 0 0 1 -2.38,-0.66 6.91,6.91 0 0 1 -2.9,0.66 c -1.79,0 -2.68,-1 -2.68,-2.86 a 2.44,2.44 0 0 1 0.73,-2 4,4 0 0 1 2.24,-0.74 l 2.32,-0.2 V 35.5 a 1.33,1.33 0 0 0 -0.31,-1 1.35,1.35 0 0 0 -0.93,-0.29 c -0.77,0 -1.73,0 -2.88,0.14 h -0.58 l -0.08,-1.35 a 15.72,15.72 0 0 1 3.61,-0.46 3.31,3.31 0 0 1 2.38,0.71 3.05,3.05 0 0 1 0.73,2.27 z m -4,2.23 a 1.21,1.21 0 0 0 -1.24,1.35 c 0,0.83 0.37,1.24 1.1,1.24 a 7,7 0 0 0 1.91,-0.29 l 0.32,-0.11 v -2.39 z m -11.65,-6.55 v -1.79 h 9 v 1.79 h -3.49 v 10.54 h -2 V 31.2 Z m -4.619996,3.22 h -2.49 v 4 a 4.12,4.12 0 0 0 0.17,1.46 c 0.1,0.24 0.38,0.36 0.82,0.36 l 1.48,-0.06 0.09,1.57 a 11,11 0 0 1 -1.84,0.23 2.55,2.55 0 0 1 -2.09,-0.7 4.41,4.41 0 0 1 -0.52,-2.69 v -4.17 h -1.2 v -1.68 h 1.2 v -2.61 h 1.94 v 2.61 h 2.49 z m -11.94,7.52 c -1.87,0 -3.17,-0.5 -3.91,-1.51 a 8.16,8.16 0 0 1 -1.11,-4.78 8.43,8.43 0 0 1 1.13,-4.85 c 0.75,-1.06 2,-1.58 3.89,-1.58 1.89,0 3.15,0.52 3.89,1.57 a 8.41,8.41 0 0 1 1.12,4.85 11.08,11.08 0 0 1 -0.45,3.49 4,4 0 0 1 -1.5,2 l 1.5,2.47 -1.86,0.86 -1.6,-2.63 a 3.68,3.68 0 0 1 -1.1,0.11 z m -2.34,-2.8 a 3.13,3.13 0 0 0 4.68,0 7.43,7.43 0 0 0 0.6,-3.5 7.78,7.78 0 0 0 -0.62,-3.58 3,3 0 0 0 -4.64,0 7.56,7.56 0 0 0 -0.63,3.56 7.47,7.47 0 0 0 0.61,3.52 z"
          inkscape:connector-curvature="0" />
     </g>
     <rect
@@ -744,8 +746,8 @@
        id="src/plugins/welcome/images/border"
        width="37"
        height="37"
-       x="530"
+       x="642"
-       y="73" />
+       y="91" />
   </g>
   <g
      inkscape:groupmode="layer"
@@ -6559,46 +6561,6 @@
          d="m 52,564 c 8,-8 8,-8 8,-8"
          style="fill:none;stroke:#000000;stroke-width:1.42;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     </g>
-    <g
-       transform="translate(-34,374)"
-       id="src/plugins/welcome/images/new">
-      <rect
-         id="rect4886-1-4"
-         height="16"
-         width="16"
-         y="209.99899"
-         x="50"
-         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
-      <rect
-         id="rect4922-3"
-         height="16"
-         width="2"
-         y="210"
-         x="57"
-         style="fill:#000000;fill-opacity:1" />
-      <rect
-         id="rect4924-6"
-         height="2"
-         width="16"
-         y="217"
-         x="50"
-         style="fill:#000000;fill-opacity:1" />
-    </g>
-    <g
-       transform="translate(-68,374)"
-       id="src/plugins/welcome/images/open">
-      <rect
-         id="rect4886-1-5"
-         height="16"
-         width="16"
-         y="210"
-         x="100"
-         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
-      <polygon
-         id="polygon4927-6"
-         points="113,224 116,217 104,217 102.715,220 102,220 102,215 114.637,215 115,213 108,213 106,211 100,211 100,220 100,224 101,224 102,224 104,224 "
-         style="fill:#000000;fill-opacity:1" />
-    </g>
     <g
        transform="translate(-202,374)"
        id="src/plugins/welcome/images/session">
@@ -6646,131 +6608,6 @@
          points="308,215 314,215 314,223 302,223 302,213 306,213 "
          style="fill:#000000;fill-opacity:1" />
     </g>
-    <g
-       transform="translate(46,324)"
-       id="src/plugins/welcome/images/qtaccount">
-      <rect
-         id="rect4886-1"
-         height="16"
-         width="16"
-         y="260"
-         x="50"
-         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
-      <path
-         sodipodi:nodetypes="csscsccscccsc"
-         style="fill:#000000;fill-opacity:1"
-         inkscape:connector-curvature="0"
-         d="m 60.447,269.795 c -0.207,-0.04 -0.431,-0.726 0,-1.363 0.521,-0.77 1.225,-2.879 1.225,-4.146 0,-2.366 -1.645,-4.284 -3.672,-4.285 -2.027,0.001 -3.672,1.919 -3.672,4.285 0,1.268 0.701,3.377 1.225,4.146 0.43,0.638 0.206,1.323 0,1.363 -3.284,0.648 -5.053,1.389 -5.053,3.408 v 1.798 h 7.5 7.5 v -1.798 c 0,-2.019 -1.77,-2.76 -5.053,-3.408 z"
-         id="path4884-6" />
-    </g>
-    <g
-       transform="translate(-38,324)"
-       id="src/plugins/welcome/images/blogs">
-      <rect
-         id="rect4904-3"
-         height="16"
-         width="16"
-         y="260"
-         x="150"
-         style="fill:#ffffff;fill-opacity:1" />
-      <ellipse
-         style="fill:#000000;fill-opacity:1"
-         cx="151.74353"
-         cy="274.25867"
-         id="circle4896-4"
-         rx="1.7435256"
-         ry="1.7418367" />
-      <path
-         id="path4900-5"
-         d="m 150.00001,260.001 v 3.65466 c 7.11422,0.007 12.3428,5.23401 12.3428,12.34434 l 3.6572,10e-4 c 0,-8.83117 -7.16227,-15.993 -16,-16 z"
-         inkscape:connector-curvature="0"
-         style="fill:#000000;fill-opacity:1"
-         sodipodi:nodetypes="ccccc" />
-      <path
-         id="path4902-7"
-         d="m 150.5665,266.32241 c -0.18916,0 -0.37933,0.008 -0.56649,0.02 v 3.38368 c 0.18616,-0.017 0.37532,-0.027 0.56649,-0.027 3.3119,0 5.72701,2.41277 5.72701,5.72146 0,0.19599 -0.011,0.38897 -0.028,0.57995 h 3.38696 c 0.012,-0.19198 0.02,-0.38496 0.02,-0.57995 0,-5.02452 -4.07657,-9.09814 -9.10597,-9.09814 z"
-         inkscape:connector-curvature="0"
-         style="fill:#000000;fill-opacity:1" />
-    </g>
-    <g
-       transform="translate(-72,324)"
-       id="src/plugins/welcome/images/community">
-      <rect
-         id="rect4909-9"
-         height="16"
-         width="16"
-         y="260"
-         x="200"
-         style="fill:#ffffff;fill-opacity:1" />
-      <path
-         id="path4907-4"
-         d="M 211.523,260 H 200 v 13 h 6 v 3 l 4.537,-3 H 216 v -7.331 C 216,262.563 214.5,260 211.523,260 Z"
-         inkscape:connector-curvature="0"
-         style="fill:#000000;fill-opacity:1"
-         sodipodi:nodetypes="sccccccss" />
-    </g>
-    <g
-       id="src/plugins/welcome/images/userguide"
-       transform="translate(16)">
-      <rect
-         style="fill:#ffffff;fill-opacity:1"
-         x="128"
-         y="584"
-         width="16"
-         height="16"
-         id="rect4909-9-8" />
-      <path
-         sodipodi:nodetypes="ssssscssccscsssccscccccsccssscccscsccccscsscccc"
-         inkscape:connector-curvature="0"
-         d="m 136,584 c -4.4176,0 -8,3.5824 -8,8 0,4.4176 3.5824,8 8,8 4.4176,0 8,-3.5824 8,-8 0,-4.4176 -3.5824,-8 -8,-8 z m 0.76817,12.9456 c -0.2192,0.2152 -0.4832,0.3216 -0.7912,0.3216 -0.1496,0 -0.2912,-0.028 -0.4264,-0.084 -0.1352,-0.056 -0.2544,-0.1304 -0.3568,-0.224 -0.1032,-0.0936 -0.184,-0.2056 -0.2456,-0.336 -0.0608,-0.1304 -0.0904,-0.2704 -0.0904,-0.42 0,-0.2984 0.1096,-0.5552 0.3288,-0.7696 0.2184,-0.2144 0.4824,-0.3216 0.7904,-0.3216 0.2992,0 0.56,0.1024 0.784,0.308 0.224,0.2056 0.336,0.4576 0.336,0.756 0,0.2976 -0.1104,0.5544 -0.3288,0.7696 z m 2.1904,-6.384 c -0.0832,0.2336 -0.196,0.448 -0.336,0.644 -0.14,0.196 -0.3008,0.3832 -0.4832,0.56 -0.1824,0.1776 -0.376,0.364 -0.5816,0.56 -0.1304,0.1208 -0.2424,0.2288 -0.336,0.3216 -0.0928,0.0936 -0.1704,0.1888 -0.2304,0.2872 -0.0608,0.0976 -0.1056,0.2096 -0.1336,0.336 -0.0272,0.1256 -0.0416,0.2776 -0.0416,0.4552 v 0.27418 h -1.6808 V 593.488 c 0,-0.2048 0.012,-0.38 0.0352,-0.5248 0.0232,-0.1448 0.0648,-0.2752 0.1256,-0.392 0.0608,-0.1168 0.14,-0.2288 0.2384,-0.336 0.0976,-0.1072 0.2168,-0.236 0.3568,-0.3848 l 1.0784,-1.092 c 0.2328,-0.2336 0.3504,-0.536 0.3504,-0.9096 0,-0.364 -0.1192,-0.66 -0.3568,-0.8888 -0.2384,-0.2288 -0.5392,-0.3432 -0.9032,-0.3432 -0.392,0 -0.7144,0.1328 -0.9664,0.3992 -0.2512,0.2664 -0.396,0.5904 -0.4336,0.9728 l -1.792,-0.14 c 0.056,-0.448 0.1728,-0.8472 0.3504,-1.1968 0.1776,-0.3504 0.4088,-0.6464 0.6928,-0.8888 0.284,-0.2424 0.6144,-0.4272 0.9872,-0.5528 0.3728,-0.1264 0.7832,-0.1888 1.232,-0.1888 0.4192,0 0.8096,0.0608 1.1688,0.1824 0.3592,0.1216 0.672,0.2968 0.9376,0.5248 0.2664,0.2288 0.4744,0.5136 0.6232,0.8536 0.1488,0.3408 0.224,0.7304 0.224,1.1688 8e-4,0.3056 -0.0416,0.5768 -0.1256,0.8104 z"
-         id="path5457-0-5"
-         style="display:inline" />
-    </g>
-    <g
-       id="src/plugins/welcome/images/download"
-       transform="translate(32)">
-      <use
-         style="display:inline"
-         x="0"
-         y="0"
-         xlink:href="#backgroundRect"
-         id="use5933-0-9-4"
-         width="100%"
-         height="100%"
-         transform="translate(144,148)" />
-      <path
-         id="path2540"
-         style="fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round"
-         d="m 128,599 h 16 m -14.5,-9.5 6.5,6.5 6.5,-6.5 M 136,584 v 12"
-         sodipodi:nodetypes="ccccccc" />
-    </g>
-    <g
-       id="src/plugins/welcome/images/settings">
-      <use
-         style="display:inline"
-         x="0"
-         y="0"
-         xlink:href="#backgroundRect"
-         id="use4519"
-         width="100%"
-         height="100%"
-         transform="translate(192,148)" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#gear_small"
-         id="use4295"
-         width="100%"
-         height="100%"
-         style="display:inline"
-         transform="matrix(1.3333313,0,0,1.3333318,-2125.3299,-175.99908)" />
-      <circle
-         style="fill:#ffffff"
-         id="path2610"
-         cx="184"
-         cy="592"
-         r="4" />
-    </g>
     <g
        id="src/libs/utils/images/member"
        transform="translate(-28)">