feat: allow users to change font size for chat messages

Closes #737

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -119,7 +119,7 @@ Item {
             StyledText {
                 id: fetchMoreButton
                 font.weight: Font.Medium
-                font.pixelSize: 15
+                font.pixelSize: Style.current.primaryTextFontSize
                 color: Style.current.blue
                 //% "↓ Fetch more messages"
                 text: qsTrId("load-more-messages")

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml

@@ -42,7 +42,7 @@ Item {
         textFormat: Text.RichText
         horizontalAlignment: Text.AlignLeft
         wrapMode: Text.Wrap
-        font.pixelSize: 15
+        font.pixelSize: Style.current.primaryTextFontSize
         readOnly: true
         selectByMouse: true
         color: Style.current.textColor

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatTime.qml

@@ -7,7 +7,7 @@ StyledTextEdit {
     visible: isMessage
     color: Style.current.darkGrey
     text: Utils.formatTime(timestamp)
-    font.pixelSize: 10
+    font.pixelSize: Style.current.asideTextFontSize
     readOnly: true
     selectByMouse: true
 }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/Retry.qml

@@ -8,7 +8,7 @@ StyledText {
     color: Style.current.red
     //% "Resend"
     text: qsTrId("resend-message")
-    font.pixelSize: 12
+    font.pixelSize: Style.current.tertiaryTextFontSize
     visible: isCurrentUser && (timeout || isExpired)
     MouseArea {
         cursorShape: Qt.PointingHandCursor

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml

@@ -10,7 +10,7 @@ StyledTextEdit {
     text: !isCurrentUser ? Utils.removeStatusEns(userName) : qsTrId("You")
     color: (userName.startsWith("@") || isCurrentUser) ? Style.current.blue : Style.current.textColor
     font.bold: true
-    font.pixelSize: 14
+    font.pixelSize: Style.current.secondaryTextFontSize
     readOnly: true
     wrapMode: Text.WordWrap
     selectByMouse: true

ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls.Universal 2.12
 import "../../../../imports"
 import "../../../../shared"
 import "../../../../shared/status"
+import "../../Chat/ChatColumn"
 
 ScrollView {
     height: parent.height
@@ -30,6 +31,10 @@ ScrollView {
         Style.changeTheme(themeStr)
     }
 
+    function updateFontSize(fontSize) {
+        Style.changeFontSize(fontSize)
+    }
+
     Item {
         id: appearanceContainer
         anchors.right: parent.right
@@ -46,10 +51,128 @@ ScrollView {
             id: appearanceSetting
         }
 
+        StatusSectionHeadline {
+            id: sectionHeadlinePreview
+            text: qsTr("Preview")
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+        }
+
+        Rectangle {
+            id: preview
+            anchors.top: sectionHeadlinePreview.bottom
+            anchors.topMargin: Style.current.smallPadding
+            anchors.left: parent.left
+            anchors.leftMargin: -Style.current.padding
+            anchors.right: parent.right
+            anchors.rightMargin: -Style.current.padding
+            height: 220
+            radius: Style.current.radius
+            border.color: Style.current.border
+            color: Style.current.transparent
+
+            Message {
+                anchors.top: parent.top
+                anchors.topMargin: Style.current.padding*2
+                anchors.left: parent.left
+                anchors.leftMargin: Style.current.smallPadding
+                userName: "@vitalik"
+                identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVR4Ae3UQQqAIBRF0Wj9ba9Bq6l5JBQqfn/ngDMH3YS3AAB/tO3H+XRG3b9bR/+gVoREI2RapVXpfd5+X5oXERKNkHS+rk3tOpWkeREh0QiZVu91ql2zNC8iJBoh0yqtSqt1slpCghICANDPBc0ESPh0bHkHAAAAAElFTkSuQmCC"
+                message: qsTr("Blockchains will drop search costs, causing a kind of decomposition that allows you to have markets of entities that are horizontally segregated and vertically segregated.")
+                contentType: Constants.messageType
+
+            }
+        }
+
+        StatusSectionHeadline {
+            id: sectionHeadlineFontSize
+            text: qsTr("Size")
+            anchors.top: preview.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.left: parent.left
+            anchors.right: parent.right
+        }
+
+        StyledText {
+            id: labelFontSize
+            anchors.top: sectionHeadlineFontSize.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.left: parent.left
+            font.pixelSize: 15
+            text: qsTr("Change font size")
+        }
+
+        StatusSlider {
+            id: fontSizeSlider
+            anchors.top: labelFontSize.bottom
+            anchors.topMargin: Style.current.padding
+            width: parent.width
+            minimumValue: 0
+            maximumValue: 5
+            stepSize: 1
+            value: appSettings.fontSize
+            onValueChanged: {
+                appSettings.fontSize = value
+                root.updateFontSize(value)
+            }
+        }
+
+        RowLayout {
+            id: fontSizeSliderLegend
+            anchors.top: fontSizeSlider.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.left: parent.left
+            anchors.right: parent.right
+            spacing: Style.current.smallPadding
+
+            StyledText {
+                font.pixelSize: 15
+                text: qsTr("XS")
+                Layout.preferredWidth: fontSizeSlider.width/6
+            }
+
+            StyledText {
+                font.pixelSize: 15
+                text: qsTr("S")
+                Layout.preferredWidth: fontSizeSlider.width/6
+                Layout.leftMargin: 2
+            }
+
+            StyledText {
+                font.pixelSize: 15
+                text: qsTr("M")
+                Layout.preferredWidth: fontSizeSlider.width/6
+                Layout.leftMargin: 2
+            }
+
+            StyledText {
+                font.pixelSize: 15
+                text: qsTr("L")
+                Layout.preferredWidth: fontSizeSlider.width/6
+                Layout.leftMargin: 2
+            }
+
+            StyledText {
+                font.pixelSize: 15
+                text: qsTr("XL")
+                Layout.preferredWidth: fontSizeSlider.width/6
+                Layout.leftMargin: 0
+            }
+
+            StyledText {
+                font.pixelSize: 15
+                text: qsTr("XXL")
+                Layout.alignment: Qt.AlignRight
+                Layout.leftMargin: -Style.current.smallPadding
+            }
+        }
+
         StatusSectionHeadline {
             id: sectionHeadlineChatMode
             text: qsTr("Chat mode")
-            anchors.top: parent.top
+            anchors.top: fontSizeSliderLegend.bottom
+            anchors.topMargin: Style.current.padding*2
             anchors.left: parent.left
             anchors.right: parent.right
         }

ui/imports/Constants.qml

@@ -22,6 +22,13 @@ QtObject {
     readonly property string node: "node"
     readonly property string ui: "ui"
 
+    readonly property int fontSizeXS: 0
+    readonly property int fontSizeS: 1
+    readonly property int fontSizeM: 2
+    readonly property int fontSizeL: 3
+    readonly property int fontSizeXL: 4
+    readonly property int fontSizeXXL: 5
+
     readonly property int notifyAllMessages: 0
     readonly property int notifyJustMentions: 1
     readonly property int notifyNone: 2

ui/imports/Style.qml

@@ -16,4 +16,8 @@ QtObject {
         }
 
     }
+
+    property var changeFontSize: function (fontSize) {
+        current.updateFontSize(fontSize)
+    }
 }

ui/imports/Themes/Theme.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import "../"
 
 QtObject {
     property QtObject fontMedium: FontLoader { id: _fontMedium; source: "../../fonts/Inter/Inter-Medium.otf"; }
@@ -54,4 +55,55 @@ QtObject {
     property int leftTabPrefferedSize: 340
     property int leftTabMinimumWidth: 300
     property int leftTabMaximumWidth: 500
+
+    property int primaryTextFontSize: 15
+    property int secondaryTextFontSize: 14
+    property int tertiaryTextFontSize: 12
+    property int asideTextFontSize: 10
+
+    function updateFontSize(fontSize) {
+        switch (fontSize) {
+            case Constants.fontSizeXS:
+                primaryTextFontSize = 13
+                secondaryTextFontSize = 12
+                tertiaryTextFontSize = 10
+                asideTextFontSize = 8
+                break;
+
+            case Constants.fontSizeS:
+                primaryTextFontSize = 14
+                secondaryTextFontSize = 13
+                tertiaryTextFontSize = 11
+                asideTextFontSize = 9
+                break;
+
+            case Constants.fontSizeM:
+                primaryTextFontSize = 15
+                secondaryTextFontSize = 14
+                tertiaryTextFontSize = 12
+                asideTextFontSize = 10
+                break;
+
+            case Constants.fontSizeL:
+                primaryTextFontSize = 16
+                secondaryTextFontSize = 15
+                tertiaryTextFontSize = 13
+                asideTextFontSize = 11
+                break;
+
+            case Constants.fontSizeXL:
+                primaryTextFontSize = 17
+                secondaryTextFontSize = 16
+                tertiaryTextFontSize = 14
+                asideTextFontSize = 12
+                break;
+
+            case Constants.fontSizeXXL:
+                primaryTextFontSize = 18
+                secondaryTextFontSize = 17
+                tertiaryTextFontSize = 15
+                asideTextFontSize = 13
+                break;
+        }
+    }
 }

ui/main.qml

@@ -85,6 +85,8 @@ ApplicationWindow {
         property var whitelistedUnfurlingSites: ({})
         property bool neverAskAboutUnfurlingAgain: false
 
+        property int fontSize: Constants.fontSizeM
+
         // Browser settings
         property bool autoLoadImages: true
         property bool javaScriptEnabled: true
@@ -118,6 +120,8 @@ ApplicationWindow {
         property var whitelistedUnfurlingSites: defaultAppSettings.whitelistedUnfurlingSites
         property bool neverAskAboutUnfurlingAgain: defaultAppSettings.neverAskAboutUnfurlingAgain
 
+        property int fontSize: defaultAppSettings.fontSize
+
         // Browser settings
         property bool autoLoadImages: defaultAppSettings.autoLoadImages
         property bool javaScriptEnabled: defaultAppSettings.javaScriptEnabled