Merge pull request #53 from xeptagondev/score_ring_issues

update score ring hover issue

Author: janithr1

ui/components/score-ring.tsx

@@ -365,11 +365,17 @@ export const ScoreRing = ({
                     outerRingR[1] + r * 0.1
                   );
                   const placement =
-                    Math.abs(endPoint[0]) < 180
-                      ? "middle"
+                    Math.abs(endPoint[0]) < 40
+                      ? "end"
                       : endPoint[0] < 0
                       ? "end"
                       : "start";
+                   const placementMobile =
+                   Math.abs(endPoint[0]) < 50
+                   ? "start"
+                   : endPoint[0] < 20
+                   ? "end"
+                   : "start";
                   const offset = {
                     start: [10, 0],
                     middle: [0, -10],
@@ -436,8 +442,8 @@ export const ScoreRing = ({
                           {/* mobile */}
                           <g
                             className="transition-all md:hidden"
-                            transform={`translate(${starPosition[0] - 5} ${
-                              starPosition[1] - 32
+                            transform={`translate(${starPosition[0] - 15} ${
+                              starPosition[1] - 20
                             })`}
                           >
                             <use
@@ -495,7 +501,7 @@ export const ScoreRing = ({
                           dominantBaseline="middle"
                         >
                           <text 
-                             y= {index == 2 ? -30: 0}
+                             y= {index == 2 ? -10: -8}
                             className={`font-semibold ${
                               isHovered ? "text-indigo-500" : ""
                             } text-xs md:text-base`}
@@ -526,14 +532,13 @@ export const ScoreRing = ({
                           transform={`translate(${endPoint[0] + offset[0]},${
                             endPoint[1] + offset[1]
                           })`}
-                          textAnchor={placement}
+                          textAnchor={placementMobile}
                           dominantBaseline="middle"
                         >
                           {isHovered && (
                             <>
                               <text
-                                // x=""
-                                // y="-8"
+                                y= {index == 2 ? -20: -30}
                                 className={`font-semibold ${
                                   isHovered ? "text-indigo-500" : ""
                                 } text-xs md:text-base `}
@@ -544,7 +549,7 @@ export const ScoreRing = ({
                           )}
 
                           {
-                            <text y="15" className="font-light">
+                            <text y="-5" className="text-xs">
                               {value}
                             </text>
                           }