From 77d7303a90199baae51e694143b1482af64c8250 Mon Sep 17 00:00:00 2001 From: Raul Metsma Date: Tue, 21 May 2024 09:33:15 +0300 Subject: [PATCH] Update Smart/Mobile dialogs with new UI guidlines IB-7965 Signed-off-by: Raul Metsma --- client/dialogs/MobileDialog.cpp | 26 +- client/dialogs/MobileDialog.ui | 460 +++++++++++------- client/dialogs/SmartIDDialog.cpp | 21 +- client/dialogs/SmartIDDialog.ui | 449 +++++++++-------- client/images/icon_checkbox.svg | 4 + client/images/icon_checkbox_active.svg | 4 + client/images/icon_checkbox_check.svg | 5 + client/images/icon_checkbox_check_active.svg | 5 + .../images/icon_checkbox_check_disabled.svg | 5 + client/images/icon_checkbox_check_hover.svg | 18 + client/images/icon_checkbox_disabled.svg | 4 + client/images/icon_checkbox_hover.svg | 17 + client/images/images.qrc | 8 + client/translations/en.ts | 20 - client/translations/et.ts | 20 - client/translations/ru.ts | 20 - 16 files changed, 623 insertions(+), 463 deletions(-) create mode 100644 client/images/icon_checkbox.svg create mode 100644 client/images/icon_checkbox_active.svg create mode 100644 client/images/icon_checkbox_check.svg create mode 100644 client/images/icon_checkbox_check_active.svg create mode 100644 client/images/icon_checkbox_check_disabled.svg create mode 100644 client/images/icon_checkbox_check_hover.svg create mode 100644 client/images/icon_checkbox_disabled.svg create mode 100644 client/images/icon_checkbox_hover.svg diff --git a/client/dialogs/MobileDialog.cpp b/client/dialogs/MobileDialog.cpp index 00dc68c6a..4dbb7d958 100644 --- a/client/dialogs/MobileDialog.cpp +++ b/client/dialogs/MobileDialog.cpp @@ -22,43 +22,31 @@ #include "IKValidator.h" #include "Settings.h" -#include "Styles.h" #include "effects/Overlay.h" -MobileDialog::MobileDialog(QWidget *parent) : - QDialog(parent), - ui(new Ui::MobileDialog) +MobileDialog::MobileDialog(QWidget *parent) + : QDialog(parent) + , ui(new Ui::MobileDialog) { static const QStringList countryCodes {QStringLiteral("372"), QStringLiteral("370")}; new Overlay(this); + ui->setupUi(this); setWindowFlags(Qt::Dialog | Qt::CustomizeWindowHint); - setFixedSize(size()); #ifdef Q_OS_WIN ui->buttonLayout->setDirection(QBoxLayout::RightToLeft); #endif - QFont condensed = Styles::font(Styles::Condensed, 14); - QFont regularFont = Styles::font(Styles::Regular, 14); - ui->labelNameId->setFont(Styles::font(Styles::Regular, 16, QFont::DemiBold)); - ui->labelPhone->setFont(regularFont); - ui->labelCode->setFont(regularFont); - ui->errorCode->setFont(regularFont); - ui->errorPhone->setFont(regularFont); - ui->phoneNo->setFont(regularFont); - ui->idCode->setFont(regularFont); - ui->cbRemember->setFont(regularFont); - ui->sign->setFont(condensed); - ui->cancel->setFont(condensed); - // Mobile ui->idCode->setValidator(new NumberValidator(ui->idCode)); ui->idCode->setText(Settings::MOBILEID_CODE); ui->idCode->setAttribute(Qt::WA_MacShowFocusRect, false); + ui->errorCode->hide(); ui->phoneNo->setValidator(new NumberValidator(ui->phoneNo)); ui->phoneNo->setText(Settings::MOBILEID_NUMBER.value(countryCodes[0])); ui->phoneNo->setAttribute(Qt::WA_MacShowFocusRect, false); ui->phoneNo->setFocus(); + ui->errorPhone->hide(); ui->cbRemember->setChecked(Settings::MOBILEID_REMEMBER); ui->cbRemember->setAttribute(Qt::WA_MacShowFocusRect, false); auto saveSettings = [this] { @@ -69,8 +57,8 @@ MobileDialog::MobileDialog(QWidget *parent) : }; auto setError = [](QLineEdit *input, QLabel *error, const QString &msg) { input->setStyleSheet(msg.isEmpty() ? QString() :QStringLiteral("border-color: #c53e3e")); - error->setFocusPolicy(msg.isEmpty() ? Qt::NoFocus : Qt::TabFocus); error->setText(msg); + error->setHidden(msg.isEmpty()); }; connect(ui->idCode, &QLineEdit::returnPressed, ui->sign, &QPushButton::click); connect(ui->idCode, &QLineEdit::textEdited, this, saveSettings); diff --git a/client/dialogs/MobileDialog.ui b/client/dialogs/MobileDialog.ui index 16f252047..7417b9e78 100644 --- a/client/dialogs/MobileDialog.ui +++ b/client/dialogs/MobileDialog.ui @@ -9,102 +9,167 @@ 0 0 - 382 - 301 + 430 + 477 Mobile-ID - QWidget { + #MobileDialog { background-color: #FFFFFF; -color: #000000; -border-radius: 2px; +border-radius: 4px; +} +#label { +color: #003168; } #labelCode, #labelPhone { -color: #353739 +color: #607496; } #errorCode, #errorPhone { -color: #c53e3e +color: #AD2A45; +} +QLineEdit, QComboBox { +padding: 10px 14px; +border: 1px solid #C4CBD8; +border-radius: 4px; +color: #07142A; +} +QComboBox QWidget#popup { +background-color: transparent; +} +QComboBox QWidget#content { +border: 1px solid #C4CBD8; +border-radius: 4px; +background-color: #FFFFFF; +} +QComboBox QPushButton { +margin: 3px; +padding: 0px 12px 0px 4px; +border: 0px; +color: #07142A; +text-align: left; +qproperty-iconSize: 14px 9px; +qproperty-layoutDirection: RightToLeft; +} +QComboBox QPushButton#selected { +qproperty-icon: url(:/images/arrow_up.svg); +} +QComboBox QPushButton:hover { +background-color: #2B66A6; +color: #FFFFFF; } -QLineEdit { -padding: 0px 10px; -border: 1px solid #8E969D; -border-radius: 2px; +QComboBox QPushButton:pressed { +background-color: #215081; +color: #FFFFFF; +} +QComboBox QPushButton:hover#selected { +qproperty-icon: url(:/images/arrow_up_white.svg); +} +QComboBox::drop-down { +background-color: #FFFFFF; +width: 25px; +} +QComboBox::down-arrow { +image: url(:/images/arrow_down.svg); +} +QComboBox::down-arrow:on { +top: 1px; +left: 1px; } QCheckBox { -color: #353739; -min-height: 31px; -spacing: 5px; +spacing: 8px; +color: #07142A; } QCheckBox:disabled { -color: #727679; +color: #C4CBD8; } QCheckBox::indicator { -width: 14px; -height: 14px; +width: 16px; +height: 16px; } QCheckBox::indicator:unchecked { -image: url(:/images/icon_checkbox.png); +image: url(:/images/icon_checkbox.svg); +} +QCheckBox::indicator:unchecked:hover { +image: url(:/images/icon_checkbox_active.svg); +} +QCheckBox::indicator:unchecked:disabled { +image: url(:/images/icon_checkbox_disabled.svg); } QCheckBox::indicator:checked { -image: url(:/images/icon_checkbox_check.png); +image: url(:/images/icon_checkbox_check.svg); +} +QCheckBox::indicator:checked:hover { +image: url(:/images/icon_checkbox_check_active.svg); +} +QCheckBox::indicator:checked:disabled { +image: url(:/images/icon_checkbox_check_disabled.svg); } QPushButton { -border-radius: 2px; -border: none; -color: #ffffff; -background-color: #981E32; +padding: 0px 12px; +border-radius: 4px; +border: 1px solid #AD2A45; +color: #AD2A45; } -QPushButton:pressed { -background-color: #F24A66; +QPushButton:hover { +background-color: #F5EBED; } -QPushButton:hover:!pressed { -background-color: #CD2541; +QPushButton:pressed { +background-color: #E1C1C6; } -QPushButton::default { -background-color: #006EB5; +QPushButton:default { +color: #ffffff; +background-color: #2F70B6; } -QPushButton::default:pressed { -background-color: #41B6E6; +QPushButton:default:hover { +background-color: #2B66A6; } -QPushButton::default:hover:!pressed { -background-color: #008DCF; +QPushButton:default:pressed { +background-color: #215081; } -QPushButton::default:disabled { -background-color: #BEDBED; +QPushButton:default:disabled { +background-color: #2F70B6; } - + - 0 + 40 + + + QLayout::SetFixedSize - 30 + 40 - 30 + 32 - 30 + 40 - 30 + 32 - + + + + 350 + 0 + + - 14 + Helvetica + 20 + true Qt::TabFocus - - color: #041E42; - Enter your phone number to sign with mobile-ID @@ -117,167 +182,225 @@ background-color: #BEDBED; - - - Qt::Vertical - - - - 20 - 8 - - - - - - - - - Roboto Condensed - 12 - - - - Country code and phone number - - - phoneNo - - - - - - - - 0 - 34 - - - - 37254321 - - - - - - - - 12 - - - - - - - - - Roboto Condensed - 12 - - - - Personal code - - - idCode - - - - - - - - 0 - 34 - - - - 47101010033 - - - - - - - - 12 - - - - - - - - Remember me - - - - - - - Qt::Vertical - - - - 20 - 8 - + + + 24 - + + + + 6 + + + + + + 0 + 20 + + + + + Helvetica + 14 + Medium + + + + Country code and phone number + + + phoneNo + + + + + + + + 0 + 40 + + + + + Helvetica + 16 + + + + 37254321 + + + + + + + + 0 + 20 + + + + + Helvetica + 14 + + + + + + + + + + 6 + + + + + + 0 + 20 + + + + + Helvetica + 14 + Medium + + + + Personal code + + + idCode + + + + + + + + 0 + 40 + + + + + Helvetica + 16 + + + + 47101010033 + + + + + + + + 0 + 20 + + + + + Helvetica + 14 + + + + + + + + + + + 0 + 17 + + + + + Helvetica + 14 + + + + Remember me + + + + - + - 40 + 0 - 0 - 30 + 100 + 40 + Helvetica 14 + true PointingHandCursor - - Cancel - - CANCEL + Cancel false + + + + Qt::Horizontal + + + + 40 + 20 + + + + - 0 - 30 + 100 + 40 + Helvetica 14 + true PointingHandCursor - - Sign - - SIGN + Sign true @@ -289,11 +412,6 @@ background-color: #BEDBED; - - CheckBox - QCheckBox -
widgets/CheckBox.h
- LineEdit QLineEdit diff --git a/client/dialogs/SmartIDDialog.cpp b/client/dialogs/SmartIDDialog.cpp index 8ea8aec9a..9fa232326 100644 --- a/client/dialogs/SmartIDDialog.cpp +++ b/client/dialogs/SmartIDDialog.cpp @@ -22,7 +22,6 @@ #include "IKValidator.h" #include "Settings.h" -#include "Styles.h" #include "effects/Overlay.h" SmartIDDialog::SmartIDDialog(QWidget *parent) @@ -34,26 +33,14 @@ SmartIDDialog::SmartIDDialog(QWidget *parent) ui->setupUi(this); setWindowFlags(Qt::Dialog | Qt::CustomizeWindowHint); - setFixedSize(size()); #ifdef Q_OS_WIN ui->buttonLayout->setDirection(QBoxLayout::RightToLeft); #endif - QFont condensed = Styles::font(Styles::Condensed, 14); - QFont regularFont = Styles::font(Styles::Regular, 14); - ui->labelNameId->setFont(Styles::font(Styles::Regular, 16, QFont::DemiBold)); - ui->labelCode->setFont(regularFont); - ui->labelCountry->setFont(regularFont); - ui->errorCode->setFont(regularFont); - ui->errorCountry->setFont(regularFont); - ui->idCode->setFont(regularFont); ui->idCode->setAttribute(Qt::WA_MacShowFocusRect, false); ui->idCode->setFocus(); - ui->idCountry->setFont(regularFont); - ui->cbRemember->setFont(regularFont); ui->cbRemember->setAttribute(Qt::WA_MacShowFocusRect, false); - ui->sign->setFont(condensed); - ui->cancel->setFont(condensed); + ui->errorCode->hide(); auto *ik = new NumberValidator(ui->idCode); ui->idCode->setValidator(Settings::SMARTID_COUNTRY == EE ? ik : nullptr); @@ -68,10 +55,10 @@ SmartIDDialog::SmartIDDialog(QWidget *parent) Settings::SMARTID_CODE = checked ? idCode() : QString(); Settings::SMARTID_COUNTRY = checked ? country() : EE; }; - auto setError = [](QLineEdit *input, QLabel *error, const QString &msg) { - input->setStyleSheet(msg.isEmpty() ? QString() :QStringLiteral("border-color: #c53e3e")); - error->setFocusPolicy(msg.isEmpty() ? Qt::NoFocus : Qt::TabFocus); + auto setError = [this](QLineEdit *input, QLabel *error, const QString &msg) { + input->setStyleSheet(msg.isEmpty() ? QString() :QStringLiteral("border-color: #BE7884")); error->setText(msg); + error->setHidden(msg.isEmpty()); }; connect(ui->idCode, &QLineEdit::returnPressed, ui->sign, &QPushButton::click); connect(ui->idCode, &QLineEdit::textEdited, this, saveSettings); diff --git a/client/dialogs/SmartIDDialog.ui b/client/dialogs/SmartIDDialog.ui index 2d8ed51c0..df21dd56c 100644 --- a/client/dialogs/SmartIDDialog.ui +++ b/client/dialogs/SmartIDDialog.ui @@ -9,43 +9,46 @@ 0 0 - 382 - 301 + 430 + 451 Smart-ID - QWidget { + #SmartIDDialog { background-color: #FFFFFF; -color: #000000; -border-radius: 2px; +border-radius: 4px; } -QLineEdit, QComboBox { -padding: 0px 10px; -border: 1px solid #8E969D; -border-radius: 2px; +#label { +color: #003168; } #labelCode, #labelCountry { -color: #353739 +color: #607496; } #errorCode, #errorCountry { -color: #c53e3e +color: #AD2A45; +} +QLineEdit, QComboBox { +padding: 10px 14px; +border: 1px solid #C4CBD8; +border-radius: 4px; +color: #07142A; } QComboBox QWidget#popup { background-color: transparent; } QComboBox QWidget#content { -border: 1px solid #8E969D; -border-radius: 2px; +border: 1px solid #C4CBD8; +border-radius: 4px; background-color: #FFFFFF; } QComboBox QPushButton { margin: 3px; -padding: 0px 8px 0px 4px; +padding: 0px 12px 0px 4px; border: 0px; -color: #353739; +color: #07142A; text-align: left; qproperty-iconSize: 14px 9px; qproperty-layoutDirection: RightToLeft; @@ -54,7 +57,11 @@ QComboBox QPushButton#selected { qproperty-icon: url(:/images/arrow_up.svg); } QComboBox QPushButton:hover { -background-color: #006EB5; +background-color: #2B66A6; +color: #FFFFFF; +} +QComboBox QPushButton:pressed { +background-color: #215081; color: #FFFFFF; } QComboBox QPushButton:hover#selected { @@ -72,52 +79,97 @@ top: 1px; left: 1px; } QCheckBox { -min-height: 31px; -spacing: 5px; +spacing: 8px; +color: #07142A; } QCheckBox:disabled { -color: #727679; +color: #C4CBD8; } QCheckBox::indicator { -width: 14px; -height: 14px; +width: 16px; +height: 16px; } QCheckBox::indicator:unchecked { -image: url(:/images/icon_checkbox.png); +image: url(:/images/icon_checkbox.svg); +} +QCheckBox::indicator:unchecked:hover { +image: url(:/images/icon_checkbox_active.svg); +} +QCheckBox::indicator:unchecked:disabled { +image: url(:/images/icon_checkbox_disabled.svg); } QCheckBox::indicator:checked { -image: url(:/images/icon_checkbox_check.png); +image: url(:/images/icon_checkbox_check.svg); +} +QCheckBox::indicator:checked:hover { +image: url(:/images/icon_checkbox_check_active.svg); +} +QCheckBox::indicator:checked:disabled { +image: url(:/images/icon_checkbox_check_disabled.svg); +} +QPushButton { +padding: 0px 12px; +border-radius: 4px; +border: 1px solid #AD2A45; +color: #AD2A45; +} +QPushButton:hover { +background-color: #F5EBED; +} +QPushButton:pressed { +background-color: #E1C1C6; +} +QPushButton:default { +color: #ffffff; +background-color: #2F70B6; +} +QPushButton:default:hover { +background-color: #2B66A6; +} +QPushButton:default:pressed { +background-color: #215081; +} +QPushButton:default:disabled { +background-color: #2F70B6; } - 0 + 40 + + + QLayout::SetFixedSize - 30 + 40 - 30 + 32 - 30 + 40 - 30 + 32 - + + + + 350 + 0 + + - 14 + Helvetica + 20 + true Qt::TabFocus - - color: #041E42; - Enter your personal code to sign with Smart-ID @@ -130,211 +182,221 @@ image: url(:/images/icon_checkbox_check.png); - - - Qt::Vertical - - - - 0 - 8 - - - - - - - - - 12 - - - - Country - - - idCountry - - - - - - - - 0 - 34 - + + + 24 - - Estonia - + + + 6 + + + + + + 0 + 20 + + + + + Helvetica + 14 + Medium + + + + Country + + + idCountry + + + + + + + + 0 + 40 + + + + + Helvetica + 16 + + + + + Estonia + + + + + Lithuania + + + + + Latvia + + + + + - - Lithuania - + + + 6 + + + + + + 0 + 20 + + + + + Helvetica + 14 + Medium + + + + Personal code + + + idCode + + + + + + + + 0 + 40 + + + + + Helvetica + 16 + + + + 47101010033 + + + + + + + + 0 + 20 + + + + + Helvetica + 14 + + + + + - - Latvia - + + + + 0 + 17 + + + + + Helvetica + 14 + + + + Remember me + + - - - - - - - 12 - - - - - - - - - 12 - - - - Personal code - - - idCode - - - - - - - - 0 - 34 - - - - 47101010033 - - - - - - - - 12 - - - - - - - - color: #353739; - - - Remember me - - - - - - - Qt::Vertical - - - - 0 - 8 - - - + - + - 40 + 0 - 0 - 30 + 100 + 40 + Helvetica 14 + true PointingHandCursor - - Cancel - - - QPushButton { - border-radius: 2px; - border: none; - color: #ffffff; - background-color: #981E32; -} -QPushButton:pressed { - background-color: #F24A66; -} -QPushButton:hover:!pressed { - background-color: #CD2541; -} - - CANCEL + Cancel false + + + + Qt::Horizontal + + + + 40 + 20 + + + + - 0 - 30 + 100 + 40 + Helvetica 14 + true PointingHandCursor - - Sign - - - QPushButton { - border-radius: 2px; - border: none; - color: #ffffff; - background-color: #006EB5; -} -QPushButton:pressed { - background-color: #41B6E6; -} -QPushButton:hover:!pressed { - background-color: #008DCF; -} -QPushButton:disabled { - background-color: #BEDBED; -} - - SIGN + Sign true @@ -346,11 +408,6 @@ QPushButton:disabled { - - CheckBox - QCheckBox -
widgets/CheckBox.h
- ComboBox QComboBox diff --git a/client/images/icon_checkbox.svg b/client/images/icon_checkbox.svg new file mode 100644 index 000000000..088f31987 --- /dev/null +++ b/client/images/icon_checkbox.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/images/icon_checkbox_active.svg b/client/images/icon_checkbox_active.svg new file mode 100644 index 000000000..516706d62 --- /dev/null +++ b/client/images/icon_checkbox_active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/images/icon_checkbox_check.svg b/client/images/icon_checkbox_check.svg new file mode 100644 index 000000000..335d68293 --- /dev/null +++ b/client/images/icon_checkbox_check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/images/icon_checkbox_check_active.svg b/client/images/icon_checkbox_check_active.svg new file mode 100644 index 000000000..43f1611a8 --- /dev/null +++ b/client/images/icon_checkbox_check_active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/images/icon_checkbox_check_disabled.svg b/client/images/icon_checkbox_check_disabled.svg new file mode 100644 index 000000000..8df404e41 --- /dev/null +++ b/client/images/icon_checkbox_check_disabled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/images/icon_checkbox_check_hover.svg b/client/images/icon_checkbox_check_hover.svg new file mode 100644 index 000000000..06bc690a1 --- /dev/null +++ b/client/images/icon_checkbox_check_hover.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/client/images/icon_checkbox_disabled.svg b/client/images/icon_checkbox_disabled.svg new file mode 100644 index 000000000..20ec252cf --- /dev/null +++ b/client/images/icon_checkbox_disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/images/icon_checkbox_hover.svg b/client/images/icon_checkbox_hover.svg new file mode 100644 index 000000000..1dd1846b6 --- /dev/null +++ b/client/images/icon_checkbox_hover.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/client/images/images.qrc b/client/images/images.qrc index 74cb9b6bb..7b0ae0b06 100644 --- a/client/images/images.qrc +++ b/client/images/images.qrc @@ -22,7 +22,15 @@ icon_Allkiri.svg icon_check.svg icon_checkbox.png + icon_checkbox.svg + icon_checkbox_active.svg + icon_checkbox_disabled.svg + icon_checkbox_hover.svg icon_checkbox_check.png + icon_checkbox_check.svg + icon_checkbox_check_active.svg + icon_checkbox_check_disabled.svg + icon_checkbox_check_hover.svg icon_digitempel.svg icon_download_hover.svg icon_download.svg diff --git a/client/translations/en.ts b/client/translations/en.ts index 529ea2902..7ea79dc3a 100644 --- a/client/translations/en.ts +++ b/client/translations/en.ts @@ -1670,14 +1670,6 @@ ID-CARD Remember me Remember me - - CANCEL - CANCEL - - - SIGN - SIGN - Personal code is not valid Personal code is not valid @@ -1688,12 +1680,10 @@ ID-CARD Cancel - accessible Cancel Sign - accessible Sign @@ -2924,14 +2914,6 @@ Additional licenses and components SmartIDDialog - - SIGN - SIGN - - - CANCEL - CANCEL - Personal code Personal code @@ -2966,12 +2948,10 @@ Additional licenses and components Cancel - accessible Cancel Sign - accessible Sign diff --git a/client/translations/et.ts b/client/translations/et.ts index 542c9dfef..21d42e281 100644 --- a/client/translations/et.ts +++ b/client/translations/et.ts @@ -1670,14 +1670,6 @@ ID-KAARDIGA Remember me Pea mind meeles - - CANCEL - KATKESTA - - - SIGN - ALLKIRJASTA - Personal code is not valid Isikukood pole kehtiv @@ -1688,12 +1680,10 @@ ID-KAARDIGA Cancel - accessible Katkesta Sign - accessible Allkirjastan @@ -2924,14 +2914,6 @@ Täiendavad litsentsid ja komponendid SmartIDDialog - - SIGN - ALLKIRJASTA - - - CANCEL - KATKESTA - Personal code Isikukood @@ -2966,12 +2948,10 @@ Täiendavad litsentsid ja komponendid Cancel - accessible Katkesta Sign - accessible Allkirjastan diff --git a/client/translations/ru.ts b/client/translations/ru.ts index 93c9afc45..e5f41ec17 100644 --- a/client/translations/ru.ts +++ b/client/translations/ru.ts @@ -1671,14 +1671,6 @@ ID-КАРТОЙ Remember me Запомнить меня - - CANCEL - ОТМЕНА - - - SIGN - ПОДПИСЬ - Personal code is not valid Личный код недействителен @@ -1689,12 +1681,10 @@ ID-КАРТОЙ Cancel - accessible Отмена Sign - accessible Подписать @@ -2925,14 +2915,6 @@ Additional licenses and components SmartIDDialog - - SIGN - ПОДПИСАТЬ - - - CANCEL - ОТМЕНА - Personal code Личный код @@ -2967,12 +2949,10 @@ Additional licenses and components Cancel - accessible Отмена Sign - accessible Подписать