Update main button UI

src/app/main.cpp

@@ -30,8 +30,6 @@
 
 int main(int argc, char* argv[])
 {
-    Q_INIT_RESOURCE(web_eid_resources);
-
     Application app(argc, argv, QStringLiteral("web-eid"));
 
     try {

src/mac/main.mm

@@ -171,8 +171,6 @@ void showSafariSettings() final
 
 int main(int argc, char* argv[])
 {
-    Q_INIT_RESOURCE(web_eid_resources);
-
     SafariApplication app(argc, argv, QStringLiteral("web-eid-safari"));
     auto appPtr = &app;
 

src/ui/CMakeLists.txt

@@ -1,26 +1,26 @@
 add_library(ui STATIC
     certificatewidget.cpp
     certificatewidget.hpp
+    languageselect.cpp
+    languageselect.hpp
+    languageselect.ui
     punycode.hpp
     ui.cpp
     webeiddialog.cpp
     webeiddialog.hpp
-    web-eid-resources.qrc
     dialog.ui
 )
-qt_add_translations(ui TS_FILES
-    translations/en.ts
-    translations/et.ts
-    translations/fi.ts
-    translations/hr.ts
-    translations/ru.ts
-    translations/de.ts
-    translations/fr.ts
-    translations/nl.ts
-    translations/cs.ts
-    translations/sk.ts
-    RESOURCE_PREFIX /translations
+file(GLOB IMAGES images/*.svg)
+file(GLOB FONTS fonts/*.ttf)
+qt_add_resources(ui resources BASE ${CMAKE_CURRENT_SOURCE_DIR} PREFIX / FILES
+    ../../install/appicon_128.png
+    dark.qss
+    languageselect.qss
+    ${IMAGES}
+    ${FONTS}
 )
+file(GLOB TRANSLATIONS translations/*.ts)
+qt_add_translations(ui TS_FILES ${TRANSLATIONS} RESOURCE_PREFIX /translations)
 set_target_properties(ui PROPERTIES
     AUTORCC ON
     AUTOUIC ON

src/ui/dark.qss

@@ -3,36 +3,11 @@ background-color: #232325;
 color: white;
 }
 QPushButton {
-border-color: #4E4E53;
-background-color: #4E4E53;
-}
-QPushButton::disabled {
-border-color: #27272A;
-background-color: #27272A;
-}
-QPushButton::hover {
-background-color: #76767B;
-border-color: #76767B;
-}
-QPushButton::focus {
-background-color: #76767B;
-border-color: #DEDEDE;
+color: #FF5C79;
+border-color: #FF5C79;
 }
-QPushButton:default {
-background-color: #113F8E;
-border-color: #113F8E;
-}
-QPushButton:default::disabled {
-background-color: #15213E;
-border-color: #15213E;
-}
-QPushButton:default::hover {
-background-color: #008EEA;
-border-color: #008EEA;
-}
-QPushButton:default::focus {
-background-color: #008EEA;
-border-color: #DEDEDE;
+QPushButton:hover, QPushButton:pressed {
+background-color: #232325;
 }
 #langButton {
 color: #FFFFFF;
@@ -41,13 +16,6 @@ background-image: url(:images/down_dark.svg);
 #langButton::hover {
 background-color: #4E4E53;
 }
-#langMenu {
-border-color: #4E4E53;
-background-color: #4E4E53;
-}
-#langMenu > QPushButton {
-color: #FFFFFF;
-}
 CertificateButton, CertificateWidget {
 border-color: #4E4E53;
 }

src/ui/dialog.ui

@@ -27,43 +27,32 @@ font-family: "Roboto";
 color: black;
 }
 QPushButton {
-font-size: 17px;
-border: 3px solid #EFEFEF;
-border-radius: 3px;
-height: 39px;
-padding-left: 17px;
-padding-right: 17px;
-min-width: 30px;
-background-color: #EFEFEF;
-}
-QPushButton::disabled {
-background-color: #FAFAFA;
-border-color: #FAFAFA;
+color: #AD2A45;
+border: 1px solid #AD2A45;
+border-radius: 4px;
+padding: 11px 12px;
+font-family: Roboto, Helvetica;
+font-size: 14px;
+font-weight: 700;
 }
-QPushButton::hover {
-background-color: #DEDEDE;
-border-color: #DEDEDE;
+QPushButton:hover {
+background-color: #F5EBED;
 }
-QPushButton::focus {
-background-color: #DEDEDE;
-border-color: #76767B;
+QPushButton:pressed {
+background-color: #E1C1C6;
 }
-QPushButton:default {
+QPushButton::default, #helpButton {
 color: white;
-background-color: #113F8E;
-border-color: #113F8E;
-}
-QPushButton:default::disabled {
-background-color: #B7C5DD;
-border-color: #B7C5DD;
+border-color: #2F70B6;
+background-color: #2F70B6;
 }
-QPushButton:default::hover {
-background-color: #003168;
-border-color: #003168
+QPushButton::default:hover, #helpButton:hover {
+border-color: #2B66A6;
+background-color: #2B66A6;
 }
-QPushButton:default::focus {
-background-color: #003168;
-border-color: #008EEA;
+QPushButton::default:pressed, #helpButton:pressed {
+border-color: #215081;
+background-color: #215081;
 }
 #langButton {
 color: #003168;
@@ -83,23 +72,6 @@ background-image: url(:images/down.svg);
 #langButton::hover {
 background-color: #EFEFEF;
 }
-#langMenu {
-border: 3px solid #EFEFEF;
-border-radius: 3px;
-background-color: #EFEFEF;
-}
-#langMenu > QPushButton {
-color: #003168;
-border: 0px;
-max-height: 22px;
-padding-left: 7px;
-padding-right: 6px;
-font-size: 14px;
-text-align: left;
-}
-#langMenu > QPushButton:checked {
-font-weight: bold;
-}
 CertificateButton, CertificateWidget {
 border: 1px solid rgba(0,49,104,0.1);
 border-radius: 4px;
@@ -183,9 +155,6 @@ border-radius: 3px;
 #fatalErrorLabel, #aboutAlert {
 color: #CD2541;
 } 
-#helpButton {
-color: #003168;
-}
 #aboutVersion {
 color: #76767B;
 }
@@ -891,21 +860,24 @@ height: 24px;
        <property name="cursor">
         <cursorShape>PointingHandCursor</cursorShape>
        </property>
+       <property name="layoutDirection">
+        <enum>Qt::RightToLeft</enum>
+       </property>
        <property name="text">
         <string>Help</string>
        </property>
        <property name="icon">
         <iconset resource="web-eid-resources.qrc">
-         <normaloff>:/images/help.svg</normaloff>:/images/help.svg</iconset>
+         <normaloff>:/images/link.svg</normaloff>:/images/link.svg</iconset>
        </property>
        <property name="iconSize">
         <size>
-         <width>30</width>
-         <height>26</height>
+         <width>16</width>
+         <height>16</height>
         </size>
        </property>
-       <property name="autoDefault">
-        <bool>false</bool>
+       <property name="default">
+        <bool>true</bool>
        </property>
       </widget>
      </item>
@@ -917,16 +889,6 @@ height: 24px;
        <property name="text">
         <string>Confirm</string>
        </property>
-       <property name="icon">
-        <iconset resource="web-eid-resources.qrc">
-         <normaloff>:/images/arrow.svg</normaloff>:/images/arrow.svg</iconset>
-       </property>
-       <property name="iconSize">
-        <size>
-         <width>20</width>
-         <height>16</height>
-        </size>
-       </property>
        <property name="default">
         <bool>true</bool>
        </property>

src/ui/languageselect.cpp

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2020-2024 Estonian Information System Authority
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+#include "languageselect.hpp"
+#include "ui_languageselect.h"
+
+#include "application.hpp"
+
+#include <QFile>
+#include <QSettings>
+#include <QStyle>
+
+LanguageSelect::LanguageSelect(QWidget* parent) : QDialog(parent)
+{
+    Ui::LanguageSelect ui;
+    ui.setupUi(this);
+    if (Application::isDarkTheme()) {
+        if (QFile f(QStringLiteral(":languageselect.qss")); f.open(QFile::ReadOnly | QFile::Text)) {
+            style()->unpolish(this);
+            setStyleSheet(styleSheet() + QTextStream(&f).readAll());
+            style()->polish(this);
+        }
+    }
+    if(auto *btn = findChild<QToolButton*>(QSettings().value(QStringLiteral("lang")).toString()))
+        btn->setChecked(true);
+    connect(ui.select, &QPushButton::clicked, this, &LanguageSelect::accept);
+    connect(ui.cancel, &QPushButton::clicked, this, &LanguageSelect::reject);
+    connect(ui.langGroup, qOverload<QAbstractButton*>(&QButtonGroup::buttonClicked), this,
+            [](QAbstractButton* action) {
+                QSettings().setValue(QStringLiteral("lang"), action->objectName());
+                qApp->loadTranslations();
+            });
+}

src/ui/languageselect.hpp

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2020-2024 Estonian Information System Authority
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+#pragma once
+
+#include <QDialog>
+
+class LanguageSelect : public QDialog
+{
+    Q_OBJECT
+public:
+    explicit LanguageSelect(QWidget* parent = nullptr);
+};

src/ui/languageselect.qss

@@ -0,0 +1,21 @@
+
+#LanguageSelect {
+background-color: #232325;
+}
+#label {
+color: white;
+}
+QPushButton {
+color: #FF5C79;
+border-color: #FF5C79;
+}
+QPushButton:hover, QPushButton:pressed {
+background-color: #232325;
+}
+QToolButton {
+color: white;
+border-color: #92A0B7;
+}
+QToolButton:checked {
+background-color: #415982;
+}