diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml b/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml
new file mode 100644
index 0000000000..c7e873509f
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml
@@ -0,0 +1,62 @@
+import QtQuick 2.15
+
+import StatusQ.Core.Theme 0.1
+
+/*!
+ \qmltype StatusColorAnimation
+ \inherits SequentialAnimation
+ \inqmlmodule StatusQ.Controls
+ \since StatusQ.Controls 0.1
+ \brief Animates target property (that shold be a color property) from/to color to target component within set duration.
+
+ Example of how to use it:
+
+ \qml
+ StatusBaseText {
+ id: animatedText
+
+ onTextChanged: {
+ if (text === "") {
+ return
+ }
+ animate.restart()
+ }
+
+ StatusColorAnimation {
+ id: animate
+ target: animatedText
+ }
+ }
+ \endqml
+
+ For a list of components available see StatusQ.
+ */
+
+SequentialAnimation {
+ id: root
+
+ required property var target
+ property string targetProperty: "color"
+ property color fromColor: Theme.palette.directColor1
+ property color toColor: Theme.palette.getColor(fromColor, 0.1)
+ property int duration: 500 // in milliseconds
+
+ loops: 3
+ alwaysRunToEnd: true
+
+ ColorAnimation {
+ target: root.target
+ property: root.targetProperty
+ from: root.fromColor
+ to: root.toColor
+ duration: root.duration
+ }
+
+ ColorAnimation {
+ target: root.target
+ property: root.targetProperty
+ from: root.toColor
+ to: root.fromColor
+ duration: root.duration
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index 0d5757d341..8016825308 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -14,6 +14,7 @@ StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
StatusCheckBox 0.1 StatusCheckBox.qml
StatusCircularProgressBar 0.1 StatusCircularProgressBar.qml
StatusClearButton 0.1 StatusClearButton.qml
+StatusColorAnimation 0.1 StatusColorAnimation.qml
StatusColorRadioButton 0.1 StatusColorRadioButton.qml
StatusColorSelector 0.1 StatusColorSelector.qml
StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc
index ec70ab52ad..90367c0fcd 100644
--- a/ui/StatusQ/src/statusq.qrc
+++ b/ui/StatusQ/src/statusq.qrc
@@ -105,6 +105,7 @@
StatusQ/Controls/StatusCheckBox.qml
StatusQ/Controls/StatusCircularProgressBar.qml
StatusQ/Controls/StatusClearButton.qml
+ StatusQ/Controls/StatusColorAnimation.qml
StatusQ/Controls/StatusColorRadioButton.qml
StatusQ/Controls/StatusColorSelector.qml
StatusQ/Controls/StatusColorSelectorGrid.qml
diff --git a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
index 50f59f897a..258f9aa5a2 100644
--- a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml
@@ -505,7 +505,7 @@ StatusDialog {
font.weight: Font.Medium
loading: root.swapAdaptor.swapProposalLoading
- AnimatedText {
+ StatusColorAnimation {
id: animation
target: fees
}
diff --git a/ui/imports/shared/panels/AnimatedText.qml b/ui/imports/shared/panels/AnimatedText.qml
deleted file mode 100644
index 00e5b41cb4..0000000000
--- a/ui/imports/shared/panels/AnimatedText.qml
+++ /dev/null
@@ -1,31 +0,0 @@
-import QtQuick 2.15
-
-import StatusQ.Core.Theme 0.1
-
-SequentialAnimation {
- id: root
-
- property var target: null
- property string targetProperty: "color"
- property color fromColor: Theme.palette.directColor1
- property color toColor: Theme.palette.getColor(fromColor, 0.1)
- property int duration: 500 // in milliseconds
-
- loops: 3
-
- ColorAnimation {
- target: root.target
- property: root.targetProperty
- from: root.fromColor
- to: root.toColor
- duration: root.duration
- }
-
- ColorAnimation {
- target: root.target
- property: root.targetProperty
- from: root.toColor
- to: root.fromColor
- duration: root.duration
- }
-}
diff --git a/ui/imports/shared/panels/qmldir b/ui/imports/shared/panels/qmldir
index 34dc96c854..ac9137b100 100644
--- a/ui/imports/shared/panels/qmldir
+++ b/ui/imports/shared/panels/qmldir
@@ -18,4 +18,3 @@ Separator 1.0 Separator.qml
SequenceColumnLayout 1.0 SequenceColumnLayout.qml
StatusAssetSelector 1.0 StatusAssetSelector.qml
StyledText 1.0 StyledText.qml
-AnimatedText 1.0 AnimatedText.qml
diff --git a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml
index 50282ceac2..73787d7e47 100644
--- a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml
+++ b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml
@@ -52,7 +52,7 @@ StatusDialogFooter {
estimatedTimeAnimation.restart()
}
- AnimatedText {
+ StatusColorAnimation {
id: estimatedTimeAnimation
target: estimatedTime
}
@@ -80,7 +80,7 @@ StatusDialogFooter {
feesAnimation.restart()
}
- AnimatedText {
+ StatusColorAnimation {
id: feesAnimation
target: fees
}
diff --git a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml
index b9670a6fb8..17fb93dd32 100644
--- a/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml
+++ b/ui/imports/shared/popups/walletconnect/DAppSignRequestModal.qml
@@ -118,7 +118,7 @@ SignTransactionModalBase {
maxFeesAnimation.restart()
}
- AnimatedText {
+ StatusColorAnimation {
id: maxFeesAnimation
target: maxFees
targetProperty: "customColor"
@@ -148,7 +148,7 @@ SignTransactionModalBase {
estimatedTimeAnimation.restart()
}
- AnimatedText {
+ StatusColorAnimation {
id: estimatedTimeAnimation
target: estimatedTime
targetProperty: "customColor"
@@ -224,7 +224,7 @@ SignTransactionModalBase {
fiatFeesAnimation.restart()
}
- AnimatedText {
+ StatusColorAnimation {
id: fiatFeesAnimation
target: fiatFees
targetProperty: "customColor"
@@ -250,7 +250,7 @@ SignTransactionModalBase {
cryptoFeesAnimation.restart()
}
- AnimatedText {
+ StatusColorAnimation {
id: cryptoFeesAnimation
target: cryptoFees
fromColor: cryptoFees.customColor