diff --git a/.env b/.env index 5160c34..54a8f3c 100755 --- a/.env +++ b/.env @@ -18,4 +18,8 @@ REACT_APP_RESOURCES="Resources" REACT_APP_HISTORY="History" REACT_APP_TRACKING_SHOW=1 -REACT_APP_HISTORY_SHOW=1 \ No newline at end of file +REACT_APP_HISTORY_SHOW=1 + +REACT_APP_RESOURCES_SHOW=1 + +REACT_APP_VERSION_NO="DEF-CONFIG" diff --git a/.env.development b/.env.development index 5160c34..53af7cc 100644 --- a/.env.development +++ b/.env.development @@ -18,4 +18,8 @@ REACT_APP_RESOURCES="Resources" REACT_APP_HISTORY="History" REACT_APP_TRACKING_SHOW=1 -REACT_APP_HISTORY_SHOW=1 \ No newline at end of file +REACT_APP_HISTORY_SHOW=1 + +REACT_APP_RESOURCES_SHOW=1 + +REACT_APP_VERSION_NO="DEV-CONFIG" diff --git a/.env.production b/.env.production index e0d9868..4c04cb4 100644 --- a/.env.production +++ b/.env.production @@ -7,9 +7,9 @@ REACT_APP_APPSITE=" https://myfitapp.mermsemr.com" #REACT_APP_APPSITE="http://localhost:7012" -REACT_APP_AUX_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfit" -REACT_APP_USERS_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser" -# REACT_APP_PASSWORD_ENDPOINT="https://devapi.mermsemr.com/en/desktop/api/v2/myfituser/resetpass" +REACT_APP_AUX_ENDPOINT="https://api.mermsemr.com/en/desktop/api/v2/myfit" +REACT_APP_USERS_ENDPOINT="https://api.mermsemr.com/en/desktop/api/v2/myfituser" +# REACT_APP_PASSWORD_ENDPOINT="https://api.mermsemr.com/en/desktop/api/v2/myfituser/resetpass" REACT_APP_SESSION_EXPIRE_MINUTES=15 @@ -19,3 +19,7 @@ REACT_APP_HISTORY="History" REACT_APP_TRACKING_SHOW=0 REACT_APP_HISTORY_SHOW=0 + +REACT_APP_RESOURCES_SHOW=0 + +REACT_APP_VERSION_NO="PROD-CONFIG" diff --git a/src/components/AuthPages/AuthLayout.jsx b/src/components/AuthPages/AuthLayout.jsx index 5d1672b..533cb06 100755 --- a/src/components/AuthPages/AuthLayout.jsx +++ b/src/components/AuthPages/AuthLayout.jsx @@ -1,28 +1,25 @@ import React from "react"; import loginThumb from "../../assets/images/auth-thumb.svg"; -import logo from "../../assets/images/light-logo.png"; //logo-1.svg"; +import logo from "../../assets/images/light-logo.png"; +/** + * Renders a login layout with a slogan and child components. + * The layout adjusts its height based on the screen height. + * @returns {React.Component} The rendered login layout. + */ export default function LoginLayout({ slogan, children }) { - const checkScreenHeight = window.screen.height; - let screen = ""; - if (checkScreenHeight <= 950) { - screen = "h-screen"; - // screen = "h-[950px]"; - } else { - screen = "h-screen"; - } + const screen = window.screen.height <= 950 ? "h-screen" : "h-screen"; + return (
- {/* -
+ {/*
logo -
- */} +
*/}
- {/* login-thumb*/} + {/* login-thumb */}

@@ -31,10 +28,10 @@ export default function LoginLayout({ slogan, children }) {

- {children && children} + {children}
); -} +} \ No newline at end of file diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index 390f675..56d5188 100755 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -73,7 +73,7 @@ export default function Login() {
-

+

Log In

@@ -170,6 +170,9 @@ export default function Login() {

+
+ {process.env.REACT_APP_VERSION_NO} +
diff --git a/src/components/Calendar/CalendarTable.jsx b/src/components/Calendar/CalendarTable.jsx index 6e77c7a..21ef4c1 100755 --- a/src/components/Calendar/CalendarTable.jsx +++ b/src/components/Calendar/CalendarTable.jsx @@ -21,11 +21,11 @@ export default function CalendarTable({ className }) { const [value, onChange] = useState(new Date()); // value of calendar date and onchange handler for calendar const [remDate, setRemDate] = useState([]) // for holding dates on reminders to display on calendar - const reminderApi = new usersService(); // instantiating the API SERVICE + const calenderApi = new usersService(); // instantiating the API SERVICE const getUserReminders = async () => { try { - const res = await reminderApi.getUserReminders(); + const res = await calenderApi.getUserReminders(); if(res.status == 200 && res.data.status > 0){ setRemDate(res.data.reminders) setIsLoading(false) @@ -117,32 +117,46 @@ export default function CalendarTable({ className }) { ); } -const ReminderThumbnail = ({reminders}) => { +/** + * Renders a list of reminder thumbnails. + * Each thumbnail displays the reminder's category image, description, and start date. + + * Each object should have the following properties: + * - category (string): The category of the reminder. + * - description (string): The description of the reminder. + * - start_date (string): The start date of the reminder. + */ +const ReminderThumbnail = ({ reminders }) => { + const getThumbnailImage = (category) => { + if (!category) { + return dataImage1; + } + return localImgLoad(`images/${category}.png`); + }; + return (
{reminders.map((reminder, index) => (
-
- data -
-
-

- {reminder.description?.substring(0, 20)+ ' ...'} -

- - - Added - {reminder.start_date.split(' ')[0]} +
+ data +
+
+

+ {reminder.description?.substring(0, 20) + ' ...'} +

+ + Added + {reminder.start_date.split(' ')[0]} - + +
-
))} -
- ) -} \ No newline at end of file + ); +}; \ No newline at end of file diff --git a/src/components/Partials/MobileSideBar.jsx b/src/components/Partials/MobileSideBar.jsx index d66f8d9..9413226 100755 --- a/src/components/Partials/MobileSideBar.jsx +++ b/src/components/Partials/MobileSideBar.jsx @@ -1,7 +1,6 @@ import React, { useContext } from "react"; import { NavLink } from "react-router-dom"; -import logo from "../../assets/images/myfit-logo-2.png"; //logo-2.svg"; -import logo3 from "../../assets/images/myfit-logo-2.png"; //logo-3.svg"; +import { default as logo, default as logo3 } from "../../assets/images/myfit-logo-2.png"; //logo-2.svg"; import DarkModeContext from "../Contexts/DarkModeContext"; import Icons from "../Helpers/Icons"; @@ -102,7 +101,8 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) { -
  • + {(process.env.REACT_APP_TRACKING_SHOW == true) ? + (
  • -
    • + ) + : ''}
    • -
  • - - - - - - {process.env.REACT_APP_RESOURCES} - - -
    • + {(process.env.REACT_APP_HISTORY_SHOW == true) ? (
    • -
  • + {(process.env.REACT_APP_TRACKING_SHOW == true) ? + (
  • -
    • + ) + : ''}
    • -
  • - (navData.isActive ? "active" : ""), - sidebar ? "justify-start space-x-3.5" : "justify-center") - }`} - > - - - - + (navData.isActive ? "active" : ""), + sidebar ? "justify-start space-x-3.5" : "justify-center") }`} > - {process.env.REACT_APP_RESOURCES} - - -
    • - {(process.env.REACT_APP_HISTORY_SHOW == true) ? - (
  • + + + + + {process.env.REACT_APP_RESOURCES} + + +
    • + : + <> + } + +
  • -
    • ) - : ''} + diff --git a/src/index.css b/src/index.css index 8882336..8e6755e 100755 --- a/src/index.css +++ b/src/index.css @@ -15,11 +15,13 @@ font-family: "Product Sans"; src: url("./assets/fonts/Product Sans Italic.ttf"); } + /* regular Weight */ @font-face { font-family: "Product Sans"; src: url("./assets/fonts/Product Sans Regular.ttf"); } + @tailwind base; @tailwind components; @tailwind utilities; @@ -28,6 +30,7 @@ min-height: 0; min-width: 0; } + :root { --toastify-color-success: #f539f8; } @@ -38,18 +41,20 @@ body { background-repeat: no-repeat; background-size: cover; } + html { font-family: "Product Sans"; } + .primary-gradient { background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); - /* background-image: url("./assets/images/left-myft.jpg"); + /* background-image: url("./assets/images/left-myft.jpg"); background-repeat: no-repeat; background-size: cover; */ } .dark .dark-primary-gradient { - background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(188,73,190,1) 100%); + background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(188, 73, 190, 1) 100%); } .primary-home { @@ -57,12 +62,25 @@ html { background-image: url("./assets/images/left-myft.jpg"); background-repeat: no-repeat; background-size: cover; + position: relative; +} + +.primary-home::before { + content: ""; + position: absolute; + width: 55px; + height: 100%; + top: 0; + right: -30px; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); } .btn-shine { position: relative; overflow: hidden; } + .btn-shine:after { content: ""; z-index: 1; @@ -78,6 +96,7 @@ html { transition: transform 0.45s ease-in-out; transform: translate3d(500%, 0, 0) rotate(35deg); } + .secondary-gradient::before { content: ""; display: block; @@ -89,40 +108,52 @@ html { background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%); opacity: 30%; } + /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } + /* Firefox */ input[type="number"] { -moz-appearance: textfield; } + .default-border-bottom { border-bottom: 1px solid #d3d2fe; } + .overflow-style-none::-webkit-scrollbar { display: none; } + /* Hide scrollbar for IE, Edge and Firefox */ .overflow-style-none { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ } + .btn-gradient { background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); } + .btn-gradient:hover { background: linear-gradient(134.38deg, #5356fb 0%, #c342f9 43.55%, #f539f8 104.51%); } + .text-26 { font-size: 26px; line-height: 31.54px; } + .text-18 { font-size: 18px; } + .section-shadow { box-shadow: 0px 9px 95px 0px #0000000d; } @@ -132,6 +163,7 @@ input[type="number"] { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } + .border-gradient { border: 1px solid transparent; background: linear-gradient(to right, white, white), @@ -139,6 +171,7 @@ input[type="number"] { background-clip: padding-box, border-box; background-origin: padding-box, border-box; } + .signup.btn-loader { border: 3px solid hsla(180, 4%, 82%, 0.2); border-top-color: #ffffff; @@ -153,6 +186,7 @@ input[type="number"] { transform: rotate(360deg); } } + /* TODO: =================================default end================================ */ /* TODO: =================================update password================================ */ .content-wrapper.thankyou-section { @@ -162,11 +196,13 @@ input[type="number"] { transform: scale(0); visibility: hidden; } + .content-wrapper.thankyou-section.active { transition: all 0.5s ease-in-out; transform: scale(1); visibility: visible; } + /* #otp { caret-color: transparent; } @@ -187,11 +223,13 @@ input[type="number"] { transform: scale(1); width: 100%; } + .sidebar-logo { transform: scale(0); width: 0; transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79); } + .menu-setting-items .items .item .item-content { transform: scale(0); transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79); @@ -201,30 +239,35 @@ input[type="number"] { transform: scale(1); transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79); } + .menu-setting-items .heading.active { opacity: 100; transform: scale(1); width: 100%; transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79); } + .menu-setting-items .heading { opacity: 0; transform: scale(0); width: 0; transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79); } + .signout-btn .signout-btn-content.active { opacity: 100; transform: scale(1); width: 100%; transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79); } + .signout-btn .signout-btn-content { opacity: 0; transform: scale(0); width: 0; transition: all 0.5s cubic-bezier(0.48, 0.3, 0.37, 0.79); } + .balance-dropdown::before { content: ""; display: block; @@ -237,6 +280,7 @@ input[type="number"] { top: -28px; left: 50%; } + .notification-dropdown::before { content: ""; display: block; @@ -249,6 +293,7 @@ input[type="number"] { top: -28px; left: 74%; } + .profile-dropdown::before { content: ""; display: block; @@ -261,6 +306,7 @@ input[type="number"] { top: -28px; left: 57%; } + .dark .profile-dropdown::before, .dark .notification-dropdown::before, .dark .balance-dropdown::before { @@ -273,58 +319,71 @@ input[type="number"] { visibility: hidden; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s; } + .balance-dropdown.active { top: 6rem; opacity: 100; visibility: visible; } + .notification-dropdown { top: 16rem; opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s; } + .notification-dropdown.active { top: 6rem; opacity: 100; visibility: visible; } + .profile-dropdown { top: 16rem; opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0s; } + .profile-dropdown.active { top: 6rem; opacity: 100; visibility: visible; } + .profile-dropdown, .notification-dropdown, .balance-dropdown { box-shadow: 19px 11px 127px 0px #00000030; } + .miniLineChart canvas { height: 122px; } + .menu-setting-items .nav-item.active span.item-icon { @apply bg-purple text-white; } + .menu-setting-items .nav-item.active span.item-content { @apply text-purple; } + .dark .menu-setting-items .nav-item.active span.item-content { @apply text-white } + /* TODO: =================================layout end================================ */ /* TODO: =================================HomePage ================================ */ .home-page-wrapper .hero-slider .slick-slider .slick-dots li { margin: 0; } + .home-page-wrapper .hero-slider .slick-slider .slick-dots li.slick-active button { background: white; } + .home-page-wrapper .hero-slider .slick-slider .slick-dots li button { background: none; border: 1px solid white; @@ -332,11 +391,13 @@ input[type="number"] { width: 8px; height: 8px; } + .home-page-wrapper .hero-slider .slick-slider .slick-dots li button:before { content: ""; width: 100%; height: 100%; } + .trending-slider-left-btn::before { content: ""; display: block; @@ -349,15 +410,17 @@ input[type="number"] { z-index: -1; opacity: 30%; } + .card-style-one .content .thumbnail { background-repeat: no-repeat; background-size: cover; } + .card-style-one { box-shadow: 0px 9px 95px 0px #0000000d; } -.trending-products .slick-slide > div { +.trending-products .slick-slide>div { margin: 0 16px; } @@ -423,6 +486,7 @@ input[type="number"] { .circle-count:nth-child(2) svg circle:last-of-type { stroke: rgba(242, 153, 74, 1); } + .circle-count:nth-child(3) svg circle:last-of-type { stroke: rgba(235, 87, 87, 1); } @@ -431,9 +495,11 @@ input[type="number"] { stroke-dasharray: 156px; stroke-dashoffset: calc(156px - (156px * var(--percent)) / 100); } + .recent-transaction-widget .content ul li:last-child { border-bottom: none; } + /* TODO: =================================my wallet end================================ */ /* TODO: =================================upload product end================================ */ .drop-product-upload { @@ -444,23 +510,29 @@ input[type="number"] { .drop-product-upload.highlight { border: 2px dashed #5356fb; } + .field-title { @apply text-xl font-bold tracking-wide text-dark-gray dark:text-white; } + .switch-btn { transition: all 0.5s ease-in-out; background-color: #878f9a; } + .switch-btn.active { background-color: #27ae60; } + .switch-btn .inner-circle { transition: all 0.5s ease-in-out; transform: translate(1.5px, 1.5px); } + .switch-btn.active .inner-circle { transform: translate(24.5px, 1.5px); } + .preview-upload-product { background-image: url("./assets/images/background-2.svg"); background-repeat: no-repeat; @@ -472,18 +544,23 @@ input[type="number"] { .notification-page .content-item .notifications { @apply flex space-x-4 items-center; } + .notification-page .content-item .notifications .notification-page .content-item .notifications { @apply mb-0; } + .notification-setting-tab .notification-settings-items li:last-child { border-bottom: none; } + .faq-tab .accordion-items .accordion-item:first-child .accordion-title-bar { padding-top: 0; } + .faq-tab .accordion-items .accordion-item:last-child .accordion-body .accordion-body-content { padding-bottom: 20px; } + .faq-tab .accordion-title-bar { background: #ffffff; position: relative; @@ -495,11 +572,13 @@ input[type="number"] { transform: rotate(0deg); visibility: hidden; } + .faq-tab .accordion-title-bar .accordion-title-icon .vertical.active { transition: all 0.5s ease-in-out; transform: rotate(90deg); visibility: visible; } + .faq-tab .accordion-body { transition: all 0.2s ease-in-out; max-height: 0; @@ -507,12 +586,14 @@ input[type="number"] { transform: translateY(-220px); overflow: hidden; } + .faq-tab .accordion-body.active { transition: all 0.5s ease-in-out; max-height: 1444px; transform: translateY(0); opacity: 100; } + /* TODO: =================================setting end================================= */ /* TODO: =================================modal================================= */ .children-element { @@ -520,9 +601,11 @@ input[type="number"] { top: 175px; transform: translate(-50%, 0px); } + .modal-com { transition: all 0.1s ease-in-out; } + /* TODO: =================================modal end================================= */ /* TODO: =================================login ================================= */ .btn-login { @@ -530,6 +613,7 @@ input[type="number"] { height: 58px; @apply bg-purple; } + .btn-login.active { transition: all 0.5s ease-in-out; width: 58px; @@ -558,11 +642,13 @@ TODO: components =========================== visibility: hidden; top: 150px; } + .drop-down-com .drop-down-content.active { opacity: 100; visibility: visible; top: 100%; } + .product-options .drop-down-content { transition: all 0.5s ease-in-out; opacity: 0; @@ -570,11 +656,13 @@ TODO: components =========================== top: 150px; right: 40px; } + .product-options .drop-down-content.active { opacity: 100; visibility: visible; top: 0; } + .product-two-options .drop-down-content { transition: all 0.5s ease-in-out; opacity: 0; @@ -582,11 +670,13 @@ TODO: components =========================== top: 150px; right: 0; } + .product-two-options .drop-down-content.active { opacity: 100; visibility: visible; top: calc(100% + 10px); } + .rate-statics-dropdown { transition: all 0.5s ease-in-out; opacity: 0; @@ -594,11 +684,13 @@ TODO: components =========================== top: 150px; left: 0; } + .rate-statics-dropdown.active { opacity: 100; visibility: visible; top: calc(100% + 10px); } + .Update-table-dropdown :is(.text-sm) { @apply text-base; } @@ -607,47 +699,57 @@ TODO: components =========================== .dark .drop-product-upload { background-color: #1d1f2f; } + html.dark body { background-image: url("./assets/images/background-dark.svg"); background-repeat: no-repeat; background-size: cover; } + .dark .preview-upload-product { background: none; } + .dark .faq-tab .accordion-title-bar { background: none; } + .dark .content-wrapper.thankyou-section { background-image: none; } + /* TODO: Responsive =========================== */ @media (prefers-color-scheme: dark) { + /* defaults to dark theme */ html.dark body { background-image: url("./assets/images/background-dark.svg"); } } + @media (max-width: 1536px) { - .trending-products .slick-slide > div { + .trending-products .slick-slide>div { margin: 0 10px; } } -@media (max-width: 1280px) { -} + +@media (max-width: 1280px) {} + @media (max-width: 1024px) { .content-wrapper.thankyou-section { background-image: none; } + .children-element { left: 50%; top: 65px; transform: translate(-50%, 0px); } } + @media (max-width: 768px) { .profile-dropdown::before { content: ""; @@ -661,6 +763,7 @@ TODO: Responsive =========================== top: -28px; left: 78%; } + .children-element { left: 0; top: 0; @@ -668,19 +771,26 @@ TODO: Responsive =========================== transform: none; } } -@media (max-width: 640px) { -} + +@media (max-width: 640px) {} + @media (max-width: 426px) { + .nft-authprofile-wrapper .content-wrapper-profile-only .auth, .nft-userprofile-wrapper .content-wrapper-profile-only .auth { margin-top: -70px; } - .react-date-picker__calendar {width: 290px;} + + .react-date-picker__calendar { + width: 290px; + } } + @media (max-width: 376px) { .notification-page .content-item .notifications { @apply block space-x-0; } + .notification-page .content-item .notifications .icon { @apply mb-2; } @@ -688,52 +798,60 @@ TODO: Responsive =========================== } /* Calendar */ -.react-calendar{ +.react-calendar { width: 100%; min-height: 23.2rem; border-radius: 7px !important; @apply border border-pink !important; } -.dark .react-calendar{ +.dark .react-calendar { background: #11131F; color: #7B818D; - border: 1px solid #25284F; + border: 1px solid #25284F; } -.dark .react-calendar__navigation button:enabled:hover, + +.dark .react-calendar__navigation button:enabled:hover, .dark .react-calendar__navigation button:enabled:focus, .dark .react-calendar__tile:disabled, -.dark .react-calendar__navigation button:disabled{background: #1D1F2F;} +.dark .react-calendar__navigation button:disabled { + background: #1D1F2F; +} -.react-calendar__navigation{ +.react-calendar__navigation { margin-top: 2px; margin-inline: 2px; @apply text-pink !important; } -.react-calendar__tile--active{color: #fff; font-weight: bold; +.react-calendar__tile--active { + color: #fff; + font-weight: bold; /* background-color: #006edc; */ @apply bg-pink; } -.dark .react-calendar__tile--active{color: #fff;} + +.dark .react-calendar__tile--active { + color: #fff; +} .react-calendar__navigation button:enabled:hover, -.react-calendar__navigation button:enabled:focus{ +.react-calendar__navigation button:enabled:focus { @apply rounded-full transition duration-500 } -.react-calendar__month-view__days{ +.react-calendar__month-view__days { display: grid !important; grid-template-columns: repeat(7, 1fr); } -.react-calendar__month-view__weekdays__weekday abbr:where([title]){ +.react-calendar__month-view__weekdays__weekday abbr:where([title]) { text-decoration: none !important; cursor: default; @apply text-pink !important; } -.react-calendar__tile{ +.react-calendar__tile { border: 1px solid #cfd7e3 !important; border-left: 0; text-align: right; @@ -742,9 +860,11 @@ TODO: Responsive =========================== /* @apply border border-pink !important; */ } -.dark .react-calendar__tile{background: #11131F;} +.dark .react-calendar__tile { + background: #11131F; +} -.reminder-select select{ +.reminder-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -754,32 +874,33 @@ TODO: Responsive =========================== } .dark .reminder-select select { - border: 0.5px solid #25284F; + border: 0.5px solid #25284F; } .reminder-select select::-ms-expand { - display: none; /* Remove default arrow in Internet Explorer 10 and 11 */ + display: none; + /* Remove default arrow in Internet Explorer 10 and 11 */ } -.reminder-select select option{ +.reminder-select select option { color: inherit; } /* Target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { .reminder-select select { - background: none\9; - padding: 5px\9; + background: none\9; + padding: 5px\9; } } /* Date Picker */ -.react-date-picker{ +.react-date-picker { display: flex !important; flex: 1; } -.react-date-picker__wrapper{ +.react-date-picker__wrapper { border: 0.5px solid #E3E4FE; padding: 1.25rem; background: #fafafa; @@ -787,29 +908,38 @@ TODO: Responsive =========================== @apply border border-pink; } -.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;} +.dark .react-date-picker__wrapper { + border: 0.5px solid #25284F; +} -.dark .react-date-picker__wrapper{ +.dark .react-date-picker__wrapper { background: #11131F; color: #7B818D; } -.dark .react-date-picker__button svg{stroke: #7B818D;} +.dark .react-date-picker__button svg { + stroke: #7B818D; +} -.react-date-picker__calendar {inset: 100% 25px auto auto !important;} -.react-date-picker__calendar .react-calendar{ +.react-date-picker__calendar { + inset: 100% 25px auto auto !important; +} + +.react-date-picker__calendar .react-calendar { min-height: 18.4rem; } -.react-date-picker__calendar .react-calendar__tile{ +.react-date-picker__calendar .react-calendar__tile { height: 40px !important; } .react-date-picker__inputGroup__input, -.react-date-picker__inputGroup__divider, -.react-date-picker__inputGroup__leadingZero{ +.react-date-picker__inputGroup__divider, +.react-date-picker__inputGroup__leadingZero { cursor: pointer; color: #374151; } -.animate-fadeIn {@apply transition duration-300} \ No newline at end of file +.animate-fadeIn { + @apply transition duration-300 +} \ No newline at end of file diff --git a/src/views/CalendarPage.jsx b/src/views/CalendarPage.jsx index c09279d..0211214 100755 --- a/src/views/CalendarPage.jsx +++ b/src/views/CalendarPage.jsx @@ -2,9 +2,9 @@ import React from "react"; import Calendar from "../components/Calendar"; export default function CalendarPage() { - return ( - <> - - - ); + return ( + <> + + + ); }