MyFit/users-myfit
2
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
Olusesan Ameye
2023-10-04 10:52:19 +00:00
committed by Gogs
parent d8c7a6d71b 0967dd2939
commit c4b41a6557
3 changed files with 185 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/AuthLayout.jsx
+13 -16
View File
@@ -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>
);
}
}
src/components/AuthPages/Login/index.jsx
+1 -1
View File
@@ -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
+171 -41
View File
@@ -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
}