improvement.

lib/classes/colors.dart

@@ -1,23 +1,23 @@
 import 'package:flutter/cupertino.dart';
 
 class ColorConsts {
-  static Color primaryBlack = Color(0xff1C2238);
-  static Color primaryBlue = Color(0xff374061);
+  static const Color primaryBlack = Color(0xff1C2238);
+  static const Color primaryBlue = Color(0xff374061);
 
-  static Color secondaryPink = Color(0xffE4697B);
-  static Color secondaryOrange = Color(0xffFF8C67);
-  static Color secondaryWhite = Color(0xffF2F2F2);
+  static const Color secondaryPink = Color(0xffE4697B);
+  static const Color secondaryOrange = Color(0xffFF8C67);
+  static const Color secondaryWhite = Color(0xffF2F2F2);
 
-  static Color tertiaryPurple = Color(0xff5A3C60);
-  static Color secondaryCyan = Color(0xff94D5F0);
+  static const Color tertiaryPurple = Color(0xff5A3C60);
+  static const Color secondaryCyan = Color(0xff94D5F0);
 
-  static Color gradientOrange = Color(0xffFF8C67);
-  static Color gradientPink = Color(0xffE4697B);
+  static const Color gradientOrange = Color(0xffFF8C67);
+  static const Color gradientPink = Color(0xffE4697B);
 
-  static Color textGrey = Color(0xff787F95);
-  static Color textGrey1 = Color(0xffA6A8BA);
-  static Color textGrey2 = Color(0xff868787);
-  static Color textHintGrey = Color(0xffcccccc);
+  static const Color textGrey = Color(0xff787F95);
+  static const Color textGrey1 = Color(0xffA6A8BA);
+  static const Color textGrey2 = Color(0xff868787);
+  static const Color textHintGrey = Color(0xffcccccc);
 
-  static Color sliderBackground = Color(0xffdfdfdf);
+  static const Color sliderBackground = Color(0xffdfdfdf);
 }

lib/models/aya_tangheem_type_mapped.dart

@@ -107,6 +107,13 @@ class AyatTangheemTypeMappedData {
     }
     return data;
   }
+
+  String reverseAyatNumber() {
+    String _ayaTemp = ayahText.substring(0, ayahText.length - ayatNumberInSurah.toString().length);
+    String _ayaNum = ayahText.substring(ayahText.length - ayatNumberInSurah.toString().length, ayahText.length);
+    _ayaNum = _ayaNum.split('').reversed.join('');
+    return "$_ayaTemp$_ayaNum";
+  }
 }
 
 class TangheemProperty {

lib/ui/screens/quran_screen.dart

@@ -328,6 +328,7 @@ class _QuranScreenState extends State<QuranScreen> {
                                       TextHighLightWidget(
                                     text: _surahAya,
                                     valueColor: ColorConsts.primaryBlue,
+                                    highLightColor: ColorConsts.primaryBlue,
                                     highlights: _tangheemWords,
                                     onTap: (value) {
                                       List<AyatTangheemTypeMappedData> _ayatList = _ayatTangheemTypeMapped.data?.where((element) => element.highlightText == value)?.toList() ?? [];

lib/ui/screens/tangheem_detail_screen.dart

@@ -105,7 +105,7 @@ class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
                                   padding: EdgeInsets.all(4),
                                   children: [
                                     TextHighLightWidget(
-                                      text: _ayatTangheemTypeMappedData.ayahText ?? "",
+                                      text: _ayatTangheemTypeMappedData.reverseAyatNumber() ?? "",
                                       valueColor: ColorConsts.primaryBlue,
                                       highlights: _tangheemWords,
                                       style: TextStyle(

lib/ui/screens/tangheem_screen.dart

@@ -95,7 +95,7 @@ class _TangheemScreenState extends State<TangheemScreen> {
                             ],
                           ),
                           TextHighLightWidget(
-                            text: _dataList[index].ayahText,
+                            text: _dataList[index].reverseAyatNumber(),
                             valueColor: ColorConsts.secondaryOrange,
                             highlights: [_dataList[index].highlightText],
                             textAlign: TextAlign.start,

lib/widgets/text_highlight_widget.dart

@@ -10,10 +10,19 @@ class TextHighLightWidget extends StatelessWidget {
   final List<String> highlights;
   final TextStyle style;
   final TextAlign textAlign;
-  final Color highLightColor = ColorConsts.secondaryOrange;
+  final Color highLightColor;
   final Function(String) onTap;
 
-  TextHighLightWidget({Key key, this.text, this.textAlign = TextAlign.center, this.valueText, this.valueColor, this.highlights, this.style = const TextStyle(), this.onTap});
+  TextHighLightWidget(
+      {Key key,
+      this.text,
+      this.textAlign = TextAlign.center,
+      this.valueText,
+      this.valueColor,
+      this.highlights,
+      this.highLightColor = ColorConsts.secondaryOrange,
+      this.style = const TextStyle(),
+      this.onTap});
 
   @override
   Widget build(BuildContext context) {