Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/users-myfit into capability-to-hide-history
This commit was merged in pull request #78.
This commit is contained in:
Ebube
@@ -18,4 +18,8 @@ REACT_APP_RESOURCES="Resources"
|
||||
REACT_APP_HISTORY="History"
|
||||
|
||||
REACT_APP_TRACKING_SHOW=1
|
||||
REACT_APP_HISTORY_SHOW=1
|
||||
REACT_APP_HISTORY_SHOW=1
|
||||
|
||||
REACT_APP_RESOURCES_SHOW=1
|
||||
|
||||
REACT_APP_VERSION_NO="DEF-CONFIG"
|
||||
|
||||
+5
-1
@@ -18,4 +18,8 @@ REACT_APP_RESOURCES="Resources"
|
||||
REACT_APP_HISTORY="History"
|
||||
|
||||
REACT_APP_TRACKING_SHOW=1
|
||||
REACT_APP_HISTORY_SHOW=1
|
||||
REACT_APP_HISTORY_SHOW=1
|
||||
|
||||
REACT_APP_RESOURCES_SHOW=1
|
||||
|
||||
REACT_APP_VERSION_NO="DEV-CONFIG"
|
||||
|
||||
+7
-3
@@ -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"
|
||||
|
||||
@@ -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 (
|
||||
<div className="layout-wrapper">
|
||||
<div className={`main-wrapper w-full ${screen}`}>
|
||||
<div className="flex w-full h-full">
|
||||
<div className="xl:flex hidden w-1/2 h-full p-[70px] flex-col justify-between primary-home">
|
||||
{/*
|
||||
<div className="logo">
|
||||
{/* <div className="logo">
|
||||
<img src={logo} alt="logo" />
|
||||
</div>
|
||||
*/}
|
||||
</div> */}
|
||||
<div className="thumbnail flex justify-center">
|
||||
{/* <img src={loginThumb} alt="login-thumb" />*/}
|
||||
{/* <img src={loginThumb} alt="login-thumb" /> */}
|
||||
</div>
|
||||
<div className="article w-[600px]">
|
||||
<p className="text-[60px] font-bold leading-[72px] text-white">
|
||||
@@ -31,10 +28,10 @@ export default function LoginLayout({ slogan, children }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex justify-center items-center">
|
||||
{children && children}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@ export default function Login() {
|
||||
<div className="content-wrapper w-full flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] xl:w-[500px] 2xl:h-[818px] xl:h-[600px] rounded-xl 2xl:px-[164px] xl:px-[56px] sm:px-7 px-5 ">
|
||||
<div className="w-full">
|
||||
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
||||
<h1 className="text-5xl font-bold leading-[74px] text-dark-gray dark:text-white">
|
||||
<h1 className="text-5xl font-bold leading-[74px] text-dark-gray dark:text-white">
|
||||
Log In
|
||||
</h1>
|
||||
<div className="shape mb-[10px]">
|
||||
@@ -170,6 +170,9 @@ export default function Login() {
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{process.env.REACT_APP_VERSION_NO}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 (
|
||||
<div className="w-full h-full overflow-y-auto overflow-x-hidden pb-1">
|
||||
{reminders.map((reminder, index) => (
|
||||
<div key={index} className="flex space-x-2 items-center bg-slate-300 hover:bg-white mb-1 p-1 transition-all duration-500">
|
||||
<div className="w-[30px] h-[30px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start">
|
||||
<h1 className="font-bold text-[10px] text-dark-gray dark:text-white whitespace-nowrap">
|
||||
{reminder.description?.substring(0, 20)+ ' ...'}
|
||||
</h1>
|
||||
<span className="text-[8px] text-thin-light-gray">
|
||||
|
||||
Added <span className="text-purple">
|
||||
{reminder.start_date.split(' ')[0]}
|
||||
<div className="w-[30px] h-[30px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={getThumbnailImage(reminder.category)}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-start items-start">
|
||||
<h1 className="font-bold text-[10px] text-dark-gray dark:text-white whitespace-nowrap">
|
||||
{reminder.description?.substring(0, 20) + ' ...'}
|
||||
</h1>
|
||||
<span className="text-[8px] text-thin-light-gray">
|
||||
Added <span className="text-purple">
|
||||
{reminder.start_date.split(' ')[0]}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
@@ -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 }) {
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
{(process.env.REACT_APP_TRACKING_SHOW == true) ?
|
||||
(<li className="item group">
|
||||
<NavLink
|
||||
to="/tracking"
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
@@ -114,7 +114,8 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
|
||||
{process.env.REACT_APP_TRACKING}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</li>)
|
||||
: ''}
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/calendar"
|
||||
@@ -128,19 +129,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/resources"
|
||||
className="nav-item flex items-center justify-start space-x-3.5"
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
|
||||
<Icons name="star" />
|
||||
</span>
|
||||
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
|
||||
{process.env.REACT_APP_RESOURCES}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
{(process.env.REACT_APP_HISTORY_SHOW == true) ?
|
||||
(<li className="item group">
|
||||
<NavLink
|
||||
|
||||
@@ -151,7 +151,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
{(process.env.REACT_APP_TRACKING_SHOW == true) ?
|
||||
(<li className="item group">
|
||||
<NavLink
|
||||
to="/tracking"
|
||||
className={`nav-item flex items-center ${
|
||||
@@ -170,7 +171,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
{process.env.REACT_APP_TRACKING}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</li>)
|
||||
: ''}
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/calendar"
|
||||
@@ -191,28 +193,33 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/resources"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
|
||||
<Icons name="resources" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
|
||||
{process.env.REACT_APP_RESOURCES_SHOW == true ?
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/resources"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
}`}
|
||||
>
|
||||
{process.env.REACT_APP_RESOURCES}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{(process.env.REACT_APP_HISTORY_SHOW == true) ?
|
||||
(<li className="item group">
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
|
||||
<Icons name="resources" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
}`}
|
||||
>
|
||||
{process.env.REACT_APP_RESOURCES}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/history"
|
||||
className={`nav-item flex items-center ${
|
||||
@@ -231,8 +238,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
{process.env.REACT_APP_HISTORY}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>)
|
||||
: ''}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+171
-41
@@ -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}
|
||||
.animate-fadeIn {
|
||||
@apply transition duration-300
|
||||
}
|
||||
@@ -2,9 +2,9 @@ import React from "react";
|
||||
import Calendar from "../components/Calendar";
|
||||
|
||||
export default function CalendarPage() {
|
||||
return (
|
||||
<>
|
||||
<Calendar />
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Calendar />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user