fix(chat): Connected font sizes to Theme properties

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml

@@ -41,6 +41,7 @@ Item {
             Layout.bottomMargin: 2 // offset for the underline to stay vertically centered
             font.weight: Font.Medium
             font.underline: mouseArea.containsMouse
+            font.pixelSize: Theme.primaryTextFontSize
             wrapMode: Text.WordWrap
             color: Theme.palette.primaryColor1
             text: root.amISender ? qsTr("You") : root.sender.displayName
@@ -61,7 +62,7 @@ Item {
             verticalAlignment: Text.AlignVCenter
             visible: text
             color: Theme.palette.baseColor1
-            font.pixelSize: 10
+            font.pixelSize: Theme.asideTextFontSize
             text: root.messageOriginInfo
         }
         StatusContactVerificationIcons {
@@ -75,13 +76,13 @@ Item {
             verticalAlignment: Text.AlignVCenter
             visible: !root.amISender && !!root.sender.secondaryName
             color: Theme.palette.baseColor1
-            font.pixelSize: 10
+            font.pixelSize: Theme.asideTextFontSize
             text: `(${root.sender.secondaryName})`
         }
         StatusBaseText {
             verticalAlignment: Text.AlignVCenter
             visible: secondaryDisplayName.visible && tertiaryDetailText.visible
-            font.pixelSize: 10
+            font.pixelSize: Theme.asideTextFontSize
             color: Theme.palette.baseColor1
             text: "•"
         }
@@ -89,7 +90,7 @@ Item {
             id: tertiaryDetailText
             verticalAlignment: Text.AlignVCenter
             visible: !root.amISender && root.messageOriginInfo === "" && text
-            font.pixelSize: 10
+            font.pixelSize: Theme.asideTextFontSize
             elide: Text.ElideMiddle
             color: Theme.palette.baseColor1
             text: root.tertiaryDetail ? Utils.elideText(root.tertiaryDetail, 5, 3) : ""
@@ -97,7 +98,7 @@ Item {
         StatusBaseText {
             verticalAlignment: Text.AlignVCenter
             visible: verificationIcons.width <= 0 || secondaryDisplayName.visible || root.amISender || tertiaryDetailText.visible
-            font.pixelSize: 10
+            font.pixelSize: Theme.asideTextFontSize
             color: Theme.palette.baseColor1
             text: "•"
         }
@@ -108,7 +109,7 @@ Item {
         StatusBaseText {
             verticalAlignment: Text.AlignVCenter
             color: Theme.palette.dangerColor1
-            font.pixelSize: 12
+            font.pixelSize: Theme.tertiaryTextFontSize
             text: root.resendText
             visible: showResendButton && !!timestampText.text
             MouseArea {

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml

@@ -74,7 +74,7 @@ Item {
                     color: Theme.palette.baseColor1
                     selectionColor: Theme.palette.primaryColor3
                     selectedTextColor: Theme.palette.directColor1
-                    font.pixelSize: 13
+                    font.pixelSize: Theme.secondaryTextFontSize
                     font.weight: Font.Medium
                     selectByMouse: true
                     readOnly: true
@@ -84,7 +84,7 @@ Item {
             StatusTextMessage {
                 Layout.fillWidth: true
                 textField.text: replyDetails.messageText
-                textField.font.pixelSize: 13
+                textField.font.pixelSize: Theme.secondaryTextFontSize
                 textField.color: Theme.palette.baseColor1
                 textField.height: 18
                 clip: true

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml

@@ -52,13 +52,13 @@ Loader {
                 Layout.alignment: Qt.AlignVCenter
                 Layout.leftMargin: -4
                 color: Theme.palette.directColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.secondaryTextFontSize
                 text: pinnedMsgInfoText
             }
             StatusBaseText {
                 Layout.alignment: Qt.AlignVCenter
                 color: Theme.palette.directColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.secondaryTextFontSize
                 font.weight: Font.Medium
                 text: pinnedBy
             }

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml

@@ -38,7 +38,7 @@ Item {
         selectionColor: Theme.palette.primaryColor3
         color: Theme.palette.directColor1
         font.family: Theme.palette.baseFont.name
-        font.pixelSize: 15
+        font.pixelSize: Theme.primaryTextFontSize
         textFormat: Text.RichText
         wrapMode: Text.Wrap
         readOnly: true

ui/StatusQ/src/StatusQ/Controls/StatusLabeledSlider.qml

@@ -10,14 +10,25 @@ StatusSlider {
     id: root
 
     property var model: []
+    property string textRole: ""
+    property string valueRole: ""
+
     property int fontSize: 12
     property int labelMargin: 2
 
+    readonly property string currentText: Array.isArray(root.model)
+                                          ? root.model[value]
+                                          : root.model.get(value)[root.textRole]
+
+    readonly property var currentValue: Array.isArray(root.model)
+                                        ? root.model[value]
+                                        : root.model.get(value)[root.valueRole]
+
     fillColor: bgColor
     handleColor: Theme.palette.primaryColor1
     handleSize: 14
     from: 0
-    to: model.length - 1
+    to: (Array.isArray(model) ? model.length : model.count) - 1
     stepSize: 1
     snapMode: Slider.SnapAlways
 
@@ -45,7 +56,11 @@ StatusSlider {
                     horizontalAlignment: Qt.AlignHCenter
                     color: Theme.palette.baseColor1
                     font.pixelSize: root.fontSize
-                    text: modelData
+
+                    text: root.textRole ? (Array.isArray(root.model)
+                                              ? modelData[root.textRole]
+                                              : model[root.textRole])
+                                           : modelData
                 }
             }
         }

ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml

@@ -4,9 +4,70 @@ import QtQuick 2.13
 
 QtObject {
     id: appTheme
+
+    enum FontSize {
+        FontSizeXS,
+        FontSizeS,
+        FontSizeM,
+        FontSizeL,
+        FontSizeXL,
+        FontSizeXXL
+    }
+
     property QtObject palette: StatusLightTheme {}
 
+    property int primaryTextFontSize: 15
+    property int secondaryTextFontSize: 14
+    property int tertiaryTextFontSize: 12
+    property int asideTextFontSize: 10
+
     function setTheme(theme) {
         palette = theme
     }
+
+    function updateFontSize(fontSize) {
+        switch (fontSize) {
+            case Theme.FontSizeXS:
+                primaryTextFontSize = 13
+                secondaryTextFontSize = 12
+                tertiaryTextFontSize = 10
+                asideTextFontSize = 8
+                break;
+
+            case Theme.FontSizeS:
+                primaryTextFontSize = 14
+                secondaryTextFontSize = 13
+                tertiaryTextFontSize = 11
+                asideTextFontSize = 9
+                break;
+
+            case Theme.FontSizeM:
+                primaryTextFontSize = 15
+                secondaryTextFontSize = 14
+                tertiaryTextFontSize = 12
+                asideTextFontSize = 10
+                break;
+
+            case Theme.FontSizeL:
+                primaryTextFontSize = 16
+                secondaryTextFontSize = 15
+                tertiaryTextFontSize = 13
+                asideTextFontSize = 11
+                break;
+
+            case Theme.FontSizeXL:
+                primaryTextFontSize = 17
+                secondaryTextFontSize = 16
+                tertiaryTextFontSize = 14
+                asideTextFontSize = 12
+                break;
+
+            case Theme.FontSizeXXL:
+                primaryTextFontSize = 18
+                secondaryTextFontSize = 17
+                tertiaryTextFontSize = 15
+                asideTextFontSize = 13
+                break;
+        }
+    }
 }

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

@@ -30,6 +30,7 @@ SettingsContentBase {
 
     function updateFontSize(fontSize) {
         Style.changeFontSize(fontSize)
+        Theme.updateFontSize(fontSize)
     }
 
     Component.onCompleted: {
@@ -94,12 +95,25 @@ SettingsContentBase {
             anchors.top: sectionHeadlineFontSize.bottom
             anchors.topMargin: Style.current.padding
             width: parent.width
-            model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL") ]
+
+            textRole: "name"
+            valueRole: "value"
+            model: ListModel {
+                ListElement { name: qsTr("XS"); value: Theme.FontSizeXS }
+                ListElement { name: qsTr("S"); value: Theme.FontSizeS }
+                ListElement { name: qsTr("M"); value: Theme.FontSizeM }
+                ListElement { name: qsTr("L"); value: Theme.FontSizeL }
+                ListElement { name: qsTr("XL"); value: Theme.FontSizeXL }
+                ListElement { name: qsTr("XXL"); value: Theme.FontSizeXXL }
+            }
+
             value: localAccountSensitiveSettings.fontSize
-            onValueChanged: {
+
-                if (localAccountSensitiveSettings.fontSize !== value) {
+            onCurrentValueChanged: {
-                    localAccountSensitiveSettings.fontSize = value
+                const fontSize = currentValue
-                    appearanceView.updateFontSize(value)
+                if (localAccountSensitiveSettings.fontSize !== fontSize) {
+                    localAccountSensitiveSettings.fontSize = fontSize
+                    appearanceView.updateFontSize(fontSize)
                 }
             }
         }