Merge branch 'Blur-the-sign-on-page-image' of MyFit/users-myfit into master

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;
+  const screen = window.screen.height <= 950 ? "h-screen" : "h-screen";
-  let screen = "";
+
-  if (checkScreenHeight <= 950) {
-    screen = "h-screen";
-    // screen = "h-[950px]";
-  } else {
-    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,7 +28,7 @@ export default function LoginLayout({ slogan, children }) {
             </div>
           </div>
           <div className="flex-1 flex justify-center items-center">
-            {children && children}
+            {children}
           </div>
         </div>
       </div>

src/components/AuthPages/Login/index.jsx

@@ -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]">

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 */
+  -ms-overflow-style: none;
-  scrollbar-width: none; /* Firefox */
+  /* 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;
 }
+
 .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;
@@ -758,28 +878,29 @@ TODO: Responsive ===========================
 }
 
 .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;
+    background: none\9;
-      padding: 5px\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-date-picker__calendar .react-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__leadingZero {
   cursor: pointer;
   color: #374151;
 }
 
-.animate-fadeIn {@apply transition duration-300}
+.animate-fadeIn {
+  @apply transition duration-300
+}