change mini calendar view

SecurityQQ · Jun 7, 2024 · 8d7f6d5 · 8d7f6d5
1 parent 8a8a0a2
commit 8d7f6d5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 42 deletions.
diff --git a/src/components/MiniCalendar.tsx b/src/components/MiniCalendar.tsx
@@ -23,7 +23,7 @@ const MiniCalendar: React.FC<MiniCalendarProps> = ({ lastMenstruationDate, cycle
 
   const dates = generateNext7Days();
 
-  const dayNames = ['П', 'Вт', 'Ср', 'Че', 'П', 'Сб', 'Во'];
+  const dayNames = ['П', 'В', 'С', 'Ч', 'П', 'С', 'В'];
 
   const getOrderedDayNames = () => {
     const startIndex = (today.getDay() + 6) % 7; // getDay() returns 0 for Sunday, so adjust
@@ -34,55 +34,46 @@ const MiniCalendar: React.FC<MiniCalendarProps> = ({ lastMenstruationDate, cycle
   const orderedDayNames = getOrderedDayNames();
 
   return (
-    <div className="mt-4 flex flex-col items-center gap-4">
-      <div className="flex w-full justify-between px-4">
-        {orderedDayNames.map((day, index) => {
-          const daysFromStartOfCycle = (daysSinceLastPeriod + index) % cycleLength;
-          const isPeriod = daysFromStartOfCycle >= 0 && daysFromStartOfCycle < 5;
-          const isToday = index === 0; // First element corresponds to today
+    <div className="flex w-full items-center justify-between px-4">
+      {orderedDayNames.map((day, index) => {
+        const daysFromStartOfCycle = (daysSinceLastPeriod + index) % cycleLength;
+        const isPeriod = daysFromStartOfCycle >= 0 && daysFromStartOfCycle < 5;
+        const isOvulation = daysFromStartOfCycle >= 12 && daysFromStartOfCycle < 17;
+        const date = dates[index];
+        const isToday = date.toDateString() === today.toDateString();
 
-          return (
+        return (
+          <div className="mt-7 flex flex-col gap-2" key={index}>
             <span
               key={index}
               className={`w-10 text-center text-sm ${
                 isPeriod
                   ? isToday
-                    ? 'text-[#F76F45]'
-                    : 'text-[#F76F45]'
+                    ? 'text-bright-orange'
+                    : 'text-bright-orange opacity-60'
                   : isToday
-                  ? 'text-[#007AFF]'
-                  : 'text-[#65C7FF]'
+                  ? 'text-blue-bright'
+                  : 'text-blue-bright opacity-60'
               }`}>
               {isToday ? 'СЕГОДНЯ' : day}
             </span>
-          );
-        })}
-      </div>
-      <div className="grid w-full grid-cols-7 gap-6 px-4">
-        {dates.map((date, index) => {
-          const daysFromStartOfCycle = (daysSinceLastPeriod + index) % cycleLength;
-          const isPeriod = daysFromStartOfCycle >= 0 && daysFromStartOfCycle < 5;
-          const isOvulation = daysFromStartOfCycle >= 12 && daysFromStartOfCycle < 17;
-          const isToday = date.toDateString() === today.toDateString();
-
-          return (
-            <div key={index} className="flex flex-col items-center">
+            <div className={`${isToday ? 'pl-3' : ''}`}>
               <div
-                className={`flex size-10 items-center justify-center rounded-full ${
+                className={`pad flex size-10 items-center justify-center rounded-full ${
                   isPeriod
-                    ? 'bg-[#FFD3C6]'
+                    ? 'border border-dashed border-bright-orange bg-transparent'
                     : isOvulation
-                    ? 'bg-gradient-to-b from-[#A3CFFF] to-[#3290F8]'
-                    : isToday
-                    ? 'bg-[#DCF2FF] font-bold text-[#007AFF]'
+                    ? 'border border-dashed border-blue-bright bg-transparent'
                     : 'bg-transparent'
-                } ${!isPeriod && !isOvulation && !isToday ? 'text-[#65C7FF]' : 'text-black'}`}>
+                } ${
+                  isPeriod ? 'text-bright-orange' : isOvulation ? 'text-blue-bright' : 'text-black'
+                }`}>
                 {date.getDate()}
               </div>
             </div>
-          );
-        })}
-      </div>
+          </div>
+        );
+      })}
     </div>
   );
 };

diff --git a/src/components/PeriodTracking.tsx b/src/components/PeriodTracking.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import MiniCalendar from './MiniCalendar';
 import recommendationsData from '../assets/recommendations.json';
@@ -71,14 +71,6 @@ const PeriodTracking: React.FC<PeriodTrackingProps> = ({
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-white px-4 text-center">
-      <header className="relative flex h-24 w-full items-center justify-between bg-white px-4 shadow-sm">
-        <div className="flex items-center gap-4">
-          <button className="text-blue-500">Cancel</button>
-          <h1 className="pl-8 text-xl text-blue-500">Female TON</h1>
-        </div>
-        <button className="text-blue-500">...</button>
-      </header>
-
       <main className="flex w-full flex-1 flex-col items-center">
         <MiniCalendar lastMenstruationDate={lastMenstruationDate} cycleLength={cycleLength} />
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -19,6 +19,8 @@ module.exports = {
         'telegram-primary': 'var(--telegram-button-color)',
         'telegram-primary-text': 'var(--telegram-button-text-color)',
         'telegram-secondary-white': 'var(--telegram-secondary-bg-color)',
+        'blue-bright': '#007AFF',
+        'bright-orange': '#F77047',
       },
     },
   },