From c53b54b78ad5914d01e7af8900c10319164fdaaa Mon Sep 17 00:00:00 2001
From: Raul Metsma <raul@metsma.ee>
Date: Mon, 16 Mar 2026 13:11:40 +0200
Subject: [PATCH] Update line edit to new UI guidlines

WE2-997

Signed-off-by: Raul Metsma <raul@metsma.ee>
---
 src/ui/dark.qss              |  9 +++--
 src/ui/dialog.ui             | 64 ++++++++----------------------------
 src/ui/images/alert.svg      |  3 ++
 src/ui/images/alert_dark.svg |  3 ++
 src/ui/webeiddialog.cpp      | 11 +++++++
 5 files changed, 34 insertions(+), 56 deletions(-)
 create mode 100644 src/ui/images/alert.svg
 create mode 100644 src/ui/images/alert_dark.svg

diff --git a/src/ui/dark.qss b/src/ui/dark.qss
index 5eb1a4a3..1f3d8b11 100644
--- a/src/ui/dark.qss
+++ b/src/ui/dark.qss
@@ -30,12 +30,11 @@ CertificateButton #warn,  CertificateWidget #warn {
 color: #F54A67;
 }
 QLineEdit {
-background-color: rgba(255,255,255,0.1);
-border-color: #008EEA;
+border-color: #909299;
+color: #FFFFFF;
 }
 QLineEdit[warning="true"] {
-border-color: #F54A67;
-color: #F54A67;
+border-color: #FF5C79;
 }
 QProgressBar {
 background-color: rgba(255,255,255,0.1);
@@ -52,7 +51,7 @@ color: #FFFFFF;
 color: white;
 }
 #pinErrorLabel {
-color: #F54A67;
+color: #FF5C79;
 }
 #aboutContent {
 border-color: #4E4E53;
diff --git a/src/ui/dialog.ui b/src/ui/dialog.ui
index 1d87fa4a..5196f8fd 100644
--- a/src/ui/dialog.ui
+++ b/src/ui/dialog.ui
@@ -88,24 +88,16 @@ CertificateButton #warn,  CertificateWidget #warn {
 color: #CD2541;
 }
 QLineEdit {
-border: 2px solid #113F8E;
-color: #113F8E;
-border-radius: 3px;
-min-width: 200px;
-min-height: 45px;
-max-width: 200px;
-max-height: 45px;
-font-size: 26px;
-font-weight: bold;
-padding-right: 14px;
-padding-left: 14px;
-padding-top: 0px;
-padding-bottom: 0px;
+border: 1px solid #C4CBD8;
+color: #607496;
+border-radius: 8px;
+font-size: 16px;
+padding: 10px 14px;
 lineedit-password-character: 42;
 }
 QLineEdit[warning=&quot;true&quot;] {
-border: 2px solid #CD2541;
-color: #CD2541;
+border: 1px solid #AD2A45;
+color: #07142A;
 }
 QProgressBar {
 height: 30px;
@@ -132,10 +124,12 @@ color: #003168;
 font-weight: bold;
 max-height: 20px;
 }
-#pinTitleLabel, #pinErrorLabel {
-max-height: 20px;
+#pinTitleLabel {
+font-size: 14px;
+color: #07142A;
 }
 #pinErrorLabel {
+font-size: 14px;
 color: #CD2541;
 }
 #fatalError {
@@ -569,29 +563,19 @@ border-radius: 4px;</string>
        <item>
         <layout class="QVBoxLayout" name="pinLayout">
          <property name="spacing">
-          <number>10</number>
+          <number>6</number>
          </property>
          <item>
           <widget class="QLabel" name="pinTitleLabel">
-           <property name="font">
-            <font>
-             <family>Roboto</family>
-             <pointsize>-1</pointsize>
-             <bold>true</bold>
-            </font>
-           </property>
            <property name="text">
             <string notr="true">Enter PIN1 for authentication</string>
            </property>
-           <property name="alignment">
-            <set>Qt::AlignCenter</set>
-           </property>
            <property name="buddy">
             <cstring>pinInput</cstring>
            </property>
           </widget>
          </item>
-         <item alignment="Qt::AlignHCenter">
+         <item>
           <widget class="QLineEdit" name="pinInput">
            <property name="maxLength">
             <number>12</number>
@@ -603,21 +587,12 @@ border-radius: 4px;</string>
          </item>
          <item>
           <widget class="QLabel" name="pinErrorLabel">
-           <property name="minimumSize">
-            <size>
-             <width>0</width>
-             <height>36</height>
-            </size>
-           </property>
            <property name="focusPolicy">
             <enum>Qt::TabFocus</enum>
            </property>
            <property name="text">
             <string notr="true">2 tries left</string>
            </property>
-           <property name="alignment">
-            <set>Qt::AlignCenter</set>
-           </property>
            <property name="wordWrap">
             <bool>true</bool>
            </property>
@@ -640,19 +615,6 @@ border-radius: 4px;</string>
            </property>
           </widget>
          </item>
-         <item>
-          <spacer name="pinSpacer">
-           <property name="orientation">
-            <enum>Qt::Vertical</enum>
-           </property>
-           <property name="sizeHint" stdset="0">
-            <size>
-             <width>20</width>
-             <height>5</height>
-            </size>
-           </property>
-          </spacer>
-         </item>
         </layout>
        </item>
       </layout>
diff --git a/src/ui/images/alert.svg b/src/ui/images/alert.svg
new file mode 100644
index 00000000..02cd30dc
--- /dev/null
+++ b/src/ui/images/alert.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.16675 12.4998H10.8334V14.1665H9.16675V12.4998ZM9.16675 5.83317H10.8334V10.8332H9.16675V5.83317ZM9.99175 1.6665C5.39175 1.6665 1.66675 5.39984 1.66675 9.99984C1.66675 14.5998 5.39175 18.3332 9.99175 18.3332C14.6001 18.3332 18.3334 14.5998 18.3334 9.99984C18.3334 5.39984 14.6001 1.6665 9.99175 1.6665ZM10.0001 16.6665C6.31675 16.6665 3.33341 13.6832 3.33341 9.99984C3.33341 6.3165 6.31675 3.33317 10.0001 3.33317C13.6834 3.33317 16.6667 6.3165 16.6667 9.99984C16.6667 13.6832 13.6834 16.6665 10.0001 16.6665Z" fill="#AD2A45"/>
+</svg>
diff --git a/src/ui/images/alert_dark.svg b/src/ui/images/alert_dark.svg
new file mode 100644
index 00000000..82f693a7
--- /dev/null
+++ b/src/ui/images/alert_dark.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.16675 12.4998H10.8334V14.1665H9.16675V12.4998ZM9.16675 5.83317H10.8334V10.8332H9.16675V5.83317ZM9.99175 1.6665C5.39175 1.6665 1.66675 5.39984 1.66675 9.99984C1.66675 14.5998 5.39175 18.3332 9.99175 18.3332C14.6001 18.3332 18.3334 14.5998 18.3334 9.99984C18.3334 5.39984 14.6001 1.6665 9.99175 1.6665ZM10.0001 16.6665C6.31675 16.6665 3.33341 13.6832 3.33341 9.99984C3.33341 6.3165 6.31675 3.33317 10.0001 3.33317C13.6834 3.33317 16.6667 6.3165 16.6667 9.99984C16.6667 13.6832 13.6834 16.6665 10.0001 16.6665Z" fill="#FF5C79"/>
+</svg>
diff --git a/src/ui/webeiddialog.cpp b/src/ui/webeiddialog.cpp
index 2b3b1fac..b85136a3 100644
--- a/src/ui/webeiddialog.cpp
+++ b/src/ui/webeiddialog.cpp
@@ -62,6 +62,7 @@ using namespace electronic_id;
 class WebEidDialog::Private : public Ui::WebEidDialog
 {
 public:
+    observer_ptr<QSvgWidget> pinInputAlert;
     observer_ptr<QRegularExpressionValidator> pinInputValidator;
     observer_ptr<QTimeLine> pinTimeoutTimer;
     observer_ptr<QButtonGroup> selectionGroup;
@@ -103,6 +104,15 @@ WebEidDialog::WebEidDialog(QWidget* parent) : WebEidUI(parent), ui(new Private)
     auto pinInputFont = ui->pinInput->font();
     pinInputFont.setLetterSpacing(QFont::AbsoluteSpacing, 2);
     ui->pinInput->setFont(pinInputFont);
+    ui->pinInputAlert = new QSvgWidget(ui->pinInput);
+    ui->pinInputAlert->load(Application::isDarkTheme() ? u":/images/alert_dark.svg"_s
+                                                       : u":/images/alert.svg"_s);
+    ui->pinInputAlert->setFixedSize(20, 20);
+    ui->pinInputAlert->hide();
+    auto *pinInputLayout = new QHBoxLayout(ui->pinInput);
+    pinInputLayout->setContentsMargins(10, 10, 10, 10);
+    pinInputLayout->setSpacing(0);
+    pinInputLayout->addWidget(ui->pinInputAlert, 0, Qt::AlignRight);
 
     ui->waitingSpinner->load(Application::isDarkTheme() ? u":/images/wait_dark.svg"_s
                                                         : u":/images/wait.svg"_s);
@@ -701,6 +711,7 @@ void WebEidDialog::showPinInputWarning(bool show)
 {
     style()->unpolish(ui->pinInput);
     ui->pinInput->setProperty("warning", show);
+    ui->pinInputAlert->setVisible(show);
     style()->polish(ui->pinInput);
 }