update App.js, src/components/ReligiousTimes/index.js and src/components/Sidebar/SidebarDesign2/index.js

src/App.js

@@ -107,7 +107,7 @@ function App() {
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        <ProductTab />
+        {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
@@ -116,7 +116,7 @@ function App() {
         {/* <SidebarMenu /> */}
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
-        {/* <Design1 /> */}
+        <Design1 />
         {/* <Design2 /> */}
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}

src/components/ReligiousTimes/index.js

@@ -11,15 +11,18 @@ const time = {
 
 const ReligiousTimes = ({hours}) => {
   return (
-    <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">
+    <div className="flex flex-row items-center justify-center 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}>
+            <div className="flex flex-row items-center justify-around" key={index}>
                 <span className="text-xs text-[#0F0543] font-bold">
                     {time[hour]}
                 </span>
                 <span className="text-xs text-[#2483E1] mr-1 font-bold">
                     {hours[hour]}
                 </span>
+                {Number(index) !== hours.length -1 && (
+                 <div className="w-0.5 bg-[#9DACD355] mx-1" style={{height: "20px"}}></div>
+                 )}
             </div>
         ))}
     </div>