update src/components/ReligiousTimes/index.js

src/components/ReligiousTimes/index.js

@@ -1,24 +1,23 @@
 import React from 'react'
 
 const time = {
-    morning: "صبح",
-    sunrise: "طلوع",
-    noon: "ظهر",
-    sunset: "غروب",
-    maghrib: "مغرب",
-    midnight: "نیمه شب",
-
+    morningTime: "صبح",
+    sunriseTime: "طلوع",
+    noonTime: "ظهر",
+    sunsetTime: "غروب",
+    maghribTime: "مغرب",
+    midnightTime: "نیمه شب",
 }
 
 const ReligiousTimes = ({hours}) => {
   return (
-    <div className="flex flex-row items-center justify-around bg-white shadow rounded-md max-w-[420px] w-1/3">
-        {Object.keys(hours).map((hour,index) => (
-            <div className="flex flex-row items-center bg-pink-200" key={index}>
-                <span className="bg-red-400">
+    <div className="flex flex-row items-center justify-around bg-white shadow-sm rounded-lg max-w-[444px] w-1/3 py-3.5 px-0.5 mr-10">
+        {Object.keys(hours).map((hour, index) => (
+            <div className="flex flex-row items-center" key={index}>
+                <span className="text-xs text-[#0F0543] font-bold">
                 {time[hour]}
                 </span>
-                <span className="bg-blue-400">
+                <span className="text-xs text-[#2483E1] mr-1 font-bold">
             {hours[hour]}
                 </span>
             </div>