Mobile settings: stylize switches

Signed-off-by: Rick Walsh <rickmwalsh@gmail.com>

1 files changed, 21 insertions, 0 deletions

diff --git a/mobile-widgets/qml/CloudCredentials.qml b/mobile-widgets/qml/CloudCredentials.qml
index 476e5e29b..352c4ecf4 100644
--- a/mobile-widgets/qml/CloudCredentials.qml
+++ b/mobile-widgets/qml/CloudCredentials.qml
@@ -97,6 +97,27 @@ Item {
 				onCheckedChanged: {
 					password.echoMode = checked ? TextInput.Normal : TextInput.Password
 				}
+				indicator: Rectangle {
+					implicitWidth: Kirigami.Units.largeSpacing * 3
+					implicitHeight: Kirigami.Units.largeSpacing
+					x: showPassword.leftPadding
+					y: parent.height / 2 - height / 2
+					radius: Kirigami.Units.largeSpacing * 0.5
+					color: showPassword.checked ?
+						subsurfaceTheme.lightPrimaryColor : subsurfaceTheme.backgroundColor
+					border.color: subsurfaceTheme.darkerPrimaryColor
+
+					Rectangle {
+						x: showPassword.checked ? parent.width - width : 0
+						y: parent.height / 2 - height / 2
+						width: Kirigami.Units.largeSpacing * 1.5
+						height: Kirigami.Units.largeSpacing * 1.5
+						radius: height / 2
+						color: showPassword.down || showPassword.checked ?
+							subsurfaceTheme.primaryColor : subsurfaceTheme.lightPrimaryColor
+						border.color: subsurfaceTheme.darkerPrimaryColor
+					}
+				}
 			}
 		}