Fixed bug in timer text alignment.

j8ahmed · Apr 29, 2021 · 328e5fb · 328e5fb
1 parent e87d1ae
commit 328e5fb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/components/QuestionTimer.tsx b/src/components/QuestionTimer.tsx
@@ -25,20 +25,19 @@ const QuestionTimer = ({id, unanswered, selectAnswer}:Props) => {
     const percent_countDown = (1 - (count / initialTime)) * circum
 
     if(unanswered) return (
-        <>
+        <div className='timer-container'>
+            <h3 id="time">{count}</h3>
             <svg id="svg" width="200" height="200" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/   svg">
                 <circle r={radius} cx="50" cy="50" 
                     fill="transparent" 
                 />
-
-                <text x="50" y="50" fill="white" textAnchor='middle' alignmentBaseline="middle">{count}</text>
                 <circle id='bar' r={radius} cx="50" cy="50" 
                     fill="transparent" 
                     strokeDasharray={circum} 
                     strokeDashoffset={percent_countDown}
                 />
             </svg>
-        </>
+        </div>
     )
     else return <div></div>
 }

diff --git a/src/index.css b/src/index.css
@@ -143,9 +143,23 @@ footer{
 }
 
 /* Countdown Timer */
+.timer-container{
+  width: 100px;
+  height: 100px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#time, #svg{
+  position: absolute;
+}
 #svg{
   width: 100px;
   height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 #svg circle {
   transition: stroke-dashoffset 1s linear;
@@ -156,6 +170,12 @@ footer{
   stroke: #fff;
 }
 
+#time{
+ text-align: center; 
+ justify-self: center;
+ align-self: center;
+}
+
 #bar{
   transform-origin: center;
   transform: rotate(-90deg);