Constants: remove dependency on Theme attached type

storybook/pages/ConfirmAddingNewMasterKeyPage.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls
+
+import shared.popups.addaccount.states
+
+Item {
+    id: root
+
+    ConfirmAddingNewMasterKey {
+        id: confirmAddingNewMasterKey
+        anchors.fill: parent
+    }
+
+    Label {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: 10
+
+        text: "All accepted: " + confirmAddingNewMasterKey.allAccepted
+    }
+}
+
+// category: Controls
+// status: good

storybook/pages/StatusStepperPage.qml

@@ -1,15 +1,16 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 
-import StatusQ.Core
 import StatusQ.Components
-import StatusQ.Core.Theme
 
 Item {
     id: root
 
-    Column {
-        anchors.centerIn: parent
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: 50
+
         spacing: 30
 
         Grid {
@@ -43,10 +44,21 @@ Item {
 
         StatusStepper {
             id: stepper
-            width: 400
+
+            Layout.fillWidth: true
             title: "Account %1 of %2".arg(completedSteps).arg(totalSteps)
             totalSteps: ctrlTotalSteps.value
             completedSteps: ctrlCompletedSteps.value
+
+            Rectangle {
+                anchors.fill: parent
+                color: "transparent"
+                border.color: "lightgray"
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
         }
     }
 }

ui/StatusQ/src/StatusQ/Components/StatusStepper.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 
 import StatusQ.Core
 import StatusQ.Core.Theme
@@ -9,8 +10,8 @@ import StatusQ.Core.Theme
    \inherits Item
    \inqmlmodule StatusQ.Components
    \since StatusQ.Components 0.1
-   \brief Displays total number of steps which need to be passed, marking each completed step
-          based on `completedSteps` property
+   \brief Displays total number of steps which need to be passed, marking each
+          completed step based on `completedSteps` property
 
    Example:
 
@@ -28,57 +29,52 @@ import StatusQ.Core.Theme
    For a list of components available see StatusQ.
 */
 
-Item {
+Control {
     id: root
 
     property alias title: title.text
-    property int titleFontSize: Theme.tertiaryTextFontSize
-    property color titleColor: Theme.palette.baseColor1
     property int totalSteps: 1
     property int completedSteps: 1
-    property color completedStepColor: Theme.palette.primaryColor1
-    property color uncompletedStepColor: Theme.palette.baseColor2
-    property int leftPadding: 24
-    property int rightPadding: 24
 
-    implicitHeight: 52
+    horizontalPadding: Theme.bigPadding
+    verticalPadding: Theme.padding
 
     QtObject {
         id: d
 
         readonly property int stepHeight: 4
-        readonly property int stepRadius: 4
         readonly property int spaceBetweenSteps: 2
     }
 
-    Column {
-        anchors.fill: parent
-        anchors.leftMargin: root.leftPadding
-        anchors.rightMargin: root.rightPadding
+    contentItem: ColumnLayout {
         spacing: 8
 
         StatusBaseText {
             id: title
-            width: parent.width
+
+            Layout.fillWidth: true
             horizontalAlignment: Qt.AlignHCenter
-            color: root.titleColor
-            font.pixelSize: root.titleFontSize
+            color: Theme.palette.baseColor1
+            wrapMode: Text.Wrap
         }
 
-        Row {
-            width: parent.width
+        RowLayout {
             spacing: d.spaceBetweenSteps
+            uniformCellSizes: true
 
             Repeater {
                 id: repeater
                 model: root.totalSteps
 
                 delegate: Rectangle {
-                    readonly property int stepIndex: index
-                    width: (parent.width - (root.totalSteps - 1) * d.spaceBetweenSteps) / root.totalSteps
-                    height: d.stepHeight
-                    radius: d.stepRadius
-                    color: stepIndex < root.completedSteps? root.completedStepColor : root.uncompletedStepColor
+                    required property int index
+
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: d.stepHeight
+
+                    radius: d.stepHeight / 2
+                    color: index < root.completedSteps ? root.Theme.palette.primaryColor1
+                                                       : root.Theme.palette.baseColor2
                 }
             }
         }

ui/app/AppLayouts/Communities/panels/SharedAddressesSigningPanel.qml

@@ -85,7 +85,6 @@ ColumnLayout {
         StatusBaseText {
             Layout.preferredWidth: parent.width
             elide: Text.ElideRight
-            font.pixelSize: Constants.keycard.general.fontSize2
             text: qsTr("To share %n address(s) with <b>%1</b>, authenticate the associated key pairs...", "", d.selectedSharedAddressesCount).arg(root.communityName)
         }
 
@@ -97,8 +96,6 @@ ColumnLayout {
             StatusBaseText {
                 Layout.fillWidth: true
                 text: qsTr("Stored on device")
-                font.pixelSize: Constants.keycard.general.fontSize2
-                color: Theme.palette.baseColor1
                 wrapMode: Text.WordWrap
             }
         }
@@ -191,7 +188,6 @@ ColumnLayout {
 
             StatusBaseText {
                 text: qsTr("Stored on keycard")
-                font.pixelSize: Constants.keycard.general.fontSize2
                 color: Theme.palette.baseColor1
                 wrapMode: Text.WordWrap
             }
@@ -294,7 +290,6 @@ ColumnLayout {
                       d.thereAreMoreThanOneNonProfileRegularKeypairs?
                           qsTr("Authenticate via “%1” key pair").arg(userProfile.name)
                         : qsTr("The following key pairs will be authenticated via “%1” key pair").arg(userProfile.name)
-                font.pixelSize: Constants.keycard.general.fontSize2
                 color: Theme.palette.baseColor1
                 wrapMode: Text.WrapAnywhere
             }

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -201,8 +201,8 @@ StatusSectionLayout {
         readonly property var currentItem: (currentIndex >= 0 && currentIndex < children.length) ? children[currentIndex].item : null
 
         anchors.fill: parent
-        anchors.leftMargin: Constants.settingsSection.leftMargin
-        anchors.rightMargin: Constants.settingsSection.rightMargin
+        anchors.leftMargin: root.Theme.xlPadding * 2
+        anchors.rightMargin: root.Theme.xlPadding * 2
 
         currentIndex: leftPanel.settingsSubsection
         onCurrentIndexChanged: {
@@ -694,7 +694,6 @@ StatusSectionLayout {
 
             StatusBaseText {
                 anchors.fill: parent
-                font.pixelSize: Constants.keycard.general.fontSize2
                 color: Theme.palette.directColor1
                 text: qsTr("The Keycard module is still busy, please try again")
             }

ui/app/AppLayouts/Profile/views/NotificationsView.qml

@@ -27,6 +27,10 @@ SettingsContentBase {
     QtObject {
         id: d
 
+        readonly property int infoFontSize: root.Theme.primaryTextFontSize
+        readonly property int infoLineHeight: 22
+        readonly property int infoSpacing: 5
+
         readonly property var notificationsSettings: root.notificationsStore.notificationsSettings
     }
 
@@ -166,22 +170,22 @@ SettingsContentBase {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: Constants.settingsSection.infoSpacing
+                spacing: d.infoSpacing
 
                 StatusBaseText {
                     Layout.preferredWidth: parent.width
                     text: qsTr("Enable Notifications in macOS Settings")
-                    font.pixelSize: Constants.settingsSection.infoFontSize
-                    lineHeight: Constants.settingsSection.infoLineHeight
+                    font.pixelSize: d.infoFontSize
+                    lineHeight: d.infoLineHeight
                     lineHeightMode: Text.FixedHeight
                     color: Theme.palette.primaryColor1
                 }
 
                 StatusBaseText {
                     Layout.preferredWidth: parent.width
                     text: qsTr("To receive Status notifications, make sure you've enabled them in your computer's settings under <b>System Preferences > Notifications</b>")
-                    font.pixelSize: Constants.settingsSection.infoFontSize
-                    lineHeight: Constants.settingsSection.infoLineHeight
+                    font.pixelSize: d.infoFontSize
+                    lineHeight: d.infoLineHeight
                     lineHeightMode: Text.FixedHeight
                     color: Theme.palette.baseColor1
                     wrapMode: Text.WordWrap
@@ -210,7 +214,6 @@ SettingsContentBase {
             Layout.preferredWidth: root.contentWidth
             Layout.leftMargin: Theme.padding
             text: qsTr("Messages")
-            font.pixelSize: Constants.settingsSection.subHeaderFontSize
             color: Theme.palette.baseColor1
         }
 
@@ -285,7 +288,6 @@ SettingsContentBase {
             Layout.preferredWidth: root.contentWidth
             Layout.leftMargin: Theme.padding
             text: qsTr("Others")
-            font.pixelSize: Constants.settingsSection.subHeaderFontSize
             color: Theme.palette.baseColor1
         }
 
@@ -331,7 +333,6 @@ SettingsContentBase {
             Layout.preferredWidth: root.contentWidth
             Layout.leftMargin: Theme.padding
             text: qsTr("Notification Content")
-            font.pixelSize: Constants.settingsSection.subHeaderFontSize
             color: Theme.palette.directColor1
         }
 
@@ -409,7 +410,6 @@ SettingsContentBase {
             Layout.preferredWidth: root.contentWidth
             Layout.leftMargin: Theme.padding
             text: qsTr("Volume")
-            font.pixelSize: Constants.settingsSection.subHeaderFontSize
             color: Theme.palette.directColor1
         }
 
@@ -482,7 +482,6 @@ SettingsContentBase {
             Layout.preferredWidth: root.contentWidth
             Layout.leftMargin: Theme.padding
             text: qsTr("Exemptions")
-            font.pixelSize: Constants.settingsSection.subHeaderFontSize
             color: Theme.palette.directColor1
         }
 
@@ -498,7 +497,6 @@ SettingsContentBase {
             Layout.preferredWidth: root.contentWidth
             Layout.leftMargin: Theme.padding
             text: qsTr("Most recent")
-            font.pixelSize: Constants.settingsSection.subHeaderFontSize
             color: Theme.palette.baseColor1
         }
 

ui/app/AppLayouts/Profile/views/SettingsContentBase.qml

@@ -99,7 +99,7 @@ FocusScope {
                 Layout.fillWidth: !root.stickTitleRowComponentLoader
                 text: root.sectionTitle
                 font.weight: Font.Bold
-                font.pixelSize: Constants.settingsSection.mainHeaderFontSize
+                font.pixelSize: root.Theme.fontSize(28) // Keep as is - special case for main header
                 color: Theme.palette.directColor1
 
                 elide: Text.ElideRight
@@ -182,16 +182,10 @@ FocusScope {
 
     SettingsDirtyToastMessage {
         id: settingsDirtyToastMessage
+
         anchors.bottom: scrollView.bottom
         anchors.bottomMargin: d.bottomDirtyToastMargin
-
-        // Left anchors and margin added bc of the implementation of the `SettingsContentBase` parent margin and to avoid
-        // this toast to be wrongly centered
-        // Constants.settingsSection.leftMargin is the margin set up to the parent when using `SettingsContentBase` inside central
-        // panel property of `StatusSectionLayout` and needs to be taken into account to counteract it
-        // when trying to align horizontally the save toast component
-        anchors.left: root.left
-        anchors.leftMargin: -Constants.settingsSection.leftMargin / 2 + (root.width / 2 - width / 2)
+        anchors.horizontalCenter: parent.horizontalCenter
 
         active: root.dirty
         flickable: root.autoscrollWhenDirty ? scrollView.flickable : null

ui/app/AppLayouts/Profile/views/SyncingView.qml

@@ -84,7 +84,6 @@ SettingsContentBase {
             Layout.leftMargin: Theme.padding
             Layout.rightMargin: Theme.padding
             text: qsTr("Devices")
-            font.pixelSize: Constants.settingsSection.subHeaderFontSize
             color: Theme.palette.baseColor1
         }
 

ui/app/AppLayouts/Profile/views/keycard/MainView.qml

@@ -53,7 +53,7 @@ ColumnLayout {
     StyledText {
         visible: d.noKeycardsSet
         Layout.alignment: Qt.AlignCenter
-        font.pixelSize: Constants.settingsSection.importantInfoFontSize
+        font.pixelSize: Theme.fontSize(18)
         color: Theme.palette.directColor1
         text: qsTr("Secure your funds. Keep your profile safe.")
     }
@@ -236,7 +236,6 @@ ColumnLayout {
 
             StatusBaseText {
                 anchors.fill: parent
-                font.pixelSize: Constants.keycard.general.fontSize2
                 color: Theme.palette.directColor1
                 text: dialog.accountsWarning? Constants.walletConstants.maxNumberOfAccountsContent : Constants.walletConstants.maxNumberOfKeypairsContent
             }

ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml

@@ -524,7 +524,6 @@ StatusDialog {
                 anchors.horizontalCenter: parent.horizontalCenter
                 model: Theme.palette.customisationColorsArray
                 title.color: Theme.palette.directColor1
-                title.font.pixelSize: Constants.addAccountPopup.labelFontSize1
                 title.text: qsTr("Colour")
                 selectedColorIndex: -1
 

ui/imports/shared/popups/addaccount/AddAccountPopup.qml

@@ -164,8 +164,14 @@ StatusModal {
             Component {
                 id: confirmAddingNewMasterKeyComponent
                 ConfirmAddingNewMasterKey {
-                    height: Constants.addAccountPopup.contentHeight1
-                    store: root.store
+                    onAllAcceptedChanged: {
+                        root.store.addingNewMasterKeyConfirmed = allAccepted
+                    }
+
+                    Component.onCompleted: {
+                        if (root.store.addingNewMasterKeyConfirmed)
+                            setAllAccepted()
+                    }
                 }
             }