From db1c00e68356f9479507797b33bf1284ebc1635f Mon Sep 17 00:00:00 2001
From: farhoudshapouran <farhood.shapouran@teleskop.app>
Date: Tue, 31 Oct 2023 15:24:52 +0300
Subject: [PATCH] fix: styling problems in web

---
 src/components/Calendar.tsx      | 3 ++-
 src/components/DaySelector.tsx   | 7 ++++++-
 src/components/MonthSelector.tsx | 1 -
 src/components/YearSelector.tsx  | 2 ++
 src/enums.ts                     | 2 ++
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index fd53923..4952acc 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -8,6 +8,7 @@ import YearSelector from './YearSelector';
 import MonthSelector from './MonthSelector';
 import DaySelector from './DaySelector';
 import TimeSelector from './TimeSelector';
+import { CALENDAR_HEIGHT } from '../enums';
 
 const CalendarView: Record<CalendarViews, ReactNode> = {
   year: <YearSelector />,
@@ -39,7 +40,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   calendarContainer: {
-    height: 300,
+    height: CALENDAR_HEIGHT,
     alignItems: 'center',
   },
 });
diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx
index db59738..19cf5ae 100644
--- a/src/components/DaySelector.tsx
+++ b/src/components/DaySelector.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
+import { CALENDAR_HEIGHT } from '../enums';
 
 const DaySelector = () => {
   const { utils, currentDate, selectedDate, onSelectDate, theme } =
@@ -111,6 +112,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingTop: 5,
+    width: '100%',
   },
   weekDaysContainer: {
     width: '100%',
@@ -128,14 +130,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   daysContainer: {
+    flex: 1,
     width: '100%',
     height: '100%',
     flexWrap: 'wrap',
     flexDirection: 'row',
+    justifyContent: 'center',
+    alignContent: 'flex-start',
   },
   dayCell: {
     width: '14.2%',
-    height: '14.2%',
+    height: CALENDAR_HEIGHT / 7 - 1,
   },
   dayContainer: {
     flex: 1,
diff --git a/src/components/MonthSelector.tsx b/src/components/MonthSelector.tsx
index b44f7d5..f82fe8b 100644
--- a/src/components/MonthSelector.tsx
+++ b/src/components/MonthSelector.tsx
@@ -57,7 +57,6 @@ const styles = StyleSheet.create({
   monthsContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    margin: 5,
   },
   monthCell: {
     width: '33.3%',
diff --git a/src/components/YearSelector.tsx b/src/components/YearSelector.tsx
index 500e1fb..0cafaad 100644
--- a/src/components/YearSelector.tsx
+++ b/src/components/YearSelector.tsx
@@ -65,12 +65,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     margin: 5,
+    width: '100%',
   },
   yearCell: {
     width: '33.3%',
   },
   yearsRow: {
     flexDirection: 'row',
+    width: '100%',
   },
   year: {
     paddingVertical: 15,
diff --git a/src/enums.ts b/src/enums.ts
index e389021..c2712c7 100644
--- a/src/enums.ts
+++ b/src/enums.ts
@@ -10,3 +10,5 @@ export enum CalendarActionKind {
   CHANGE_CURRENT_DATE = 'CHANGE_CURRENT_DATE',
   CHANGE_SELECTED_DATE = 'CHANGE_SELECTED_DATE',
 }
+
+export const CALENDAR_HEIGHT = 300;