Skip to content

Commit

Permalink
Merge pull request #1519 from gtech-mulearn/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
viraka authored May 19, 2024
2 parents dd94de0 + 360e69f commit 56445ee
Show file tree
Hide file tree
Showing 7 changed files with 621 additions and 637 deletions.
6 changes: 0 additions & 6 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,8 @@ import DiscordModeration from "./modules/Dashboard/modules/DiscordModeration/Dis
import Test from "./modules/Dashboard/modules/Test/Test";
import Analytics from "./modules/Dashboard/modules/UrlShortener/Pages/Analytics";
import Donation from "./modules/Public/Donation/Donation";
import DonationTest from "./modules/Public/Donation/pages/Donate";
import Refund from "./modules/Public/Donation/pages/Refund";


const Profile = lazy(
() => import("./modules/Dashboard/modules/Profile/pages/Profile")
);
Expand Down Expand Up @@ -270,10 +268,6 @@ function App() {
path: "donation",
element: <Donation />
},
{
path: "donation-test",
element: <DonationTest />
},
{
path: "donation/refund",
element: <Refund />
Expand Down
355 changes: 344 additions & 11 deletions src/modules/Public/Donation/Donation.module.css
Original file line number Diff line number Diff line change
@@ -1,16 +1,349 @@
.fieldsContainer{
.LClandingPage {
position: relative;
overflow-x: hidden;
}

.joinCircle {
background: var(--blue);
border-radius: var(--borderRadius);
padding: 0.5rem 1rem;
font-size: 0.8rem;
margin-top: 1rem;
width: 6rem;
color: #fff;
}

.backgroundImage {
top: 0;
position: absolute;

z-index: -2;
}

.backgroundImage img {
width: 100vw;
height: 110vh;
}

.LClandingPageHero {
/* background-image: url(https://i.ibb.co/cCvB4r6/Learning-BG.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center; */
position: relative;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
gap: 1rem;
padding-top: 5rem;
}

.LClandingPageHero span {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 3.5rem;
color: #000;
}

.LClandingPageHero span img {
position: relative;
top: 0.75rem;
height: 3rem;
}

.LClandingPageHero .dash {
position: absolute;
top: -50%;
width: 120%;
height: 100%;
border: 5px solid #accaf6;
border-style: dashed;
border-radius: 45%;
}

.LClandingPageHero .heroTitle b:nth-child(2) {
font-size: 4rem;
color: var(--blue);
position: relative;
top: -1rem;
background-image: linear-gradient(to right, #ddecff, #eaf3ff);
border-radius: 10%;
height: -1rem;
padding: 0rem 0.5rem;
}

.LClandingPageHero p {
width: 75%;
font-weight: 600;
font-size: 1.1rem;
}

.DonationSection {
position: relative;
max-width: 100vw;
display: flex;
justify-content: center;
margin-bottom: 6rem;
}

.DonationFormElement {
background: #fff;
box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
width: 80%;
top: -25%;
padding: 1.5rem 3rem;
display: flex;
gap: 2rem;
}

.DetailsContainer {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
padding: 1rem 0;
gap: 0.2rem;
}

.DetailsContainer h1,
.DonationInputStyles {
margin-bottom: 0.7rem;
}

.DetailsContainer label {
margin: 0.2rem 0.5rem;
}

.DetailsContainer h1 {
font-weight: 600;
font-size: 1.7rem;
}

.inputStyles{
padding: 10px;
border-radius: 4px;
outline: none;
background-color: #f3f3f4;
font-size: 14px;
.DonateButtonContainer {
display: flex;
justify-content: center;
gap: 1rem;
}

.DonateButtonContainer button {
background-color: #fff;
width: 100%;
color: var(--blue);
border: 2px solid var(--blue);
border-radius: 0.5rem;
padding: 0.9rem 1.4rem;
margin-bottom: 1rem;
}

.DonateButtonContainer button:hover {
background-color: var(--blue);
color: #fff;
}

.DonateButtonContainer button.selectedButton {
background-color: var(--blue);
color: #fff;
}

.DonationInputStyles {
border-radius: 0.4rem;
border: 1.12px solid rgba(45, 191, 252, 0.25);
box-shadow: 0px 1.6px 6.4px 0px rgba(0, 0, 0, 0.1);
padding: 0.4rem 1rem;
width: 100%;
box-sizing: border-box;
}
}

.AmountField {
font-size: 1.8rem;
font-weight: 500;
padding: 0.5rem 1rem;
}

.CurrencyContainer {
position: relative;
}

.CurrencyContainer p {
position: absolute;
cursor: default;
font-weight: 200;
color: rgba(0, 0, 0, 0.5);
right: 1rem;
top: 20%;
}

.TermsContainer {
display: flex;
align-items: center;
}

.TermsContainer input {
width: 1rem;
}

.TermsContainer label {
cursor: default;
font-size: 0.7rem;
color: rgba(0, 0, 0, 0.8);
}

.SubmitButton {
margin-top: 1rem;
font-size: 1.4rem;
width: 60%;
align-self: center;
}

.SubmitButton button {
padding: 0.7rem 1rem;
}

/* Refund Page */

.refundSection {
display: flex;
margin-top: 30vh;
justify-content: center;
margin-bottom: 5rem;
}

.textContainer {
width: 95%;
box-shadow: -1.6px 6.4px 32px 3.2px rgba(0, 0, 0, 0.15);
background-color: #fff;
padding: 2rem 10rem;
}

@media (width<=955px) {
.LClandingPageHero .dash {
top: -46%;
border-radius: 38%;
}

.textContainer {
padding: 2rem 6rem;
}
}

@media (width <=820px) {
.LClandingPageHero span {
font-size: 1.7rem;
gap: 0.5rem;
}

.LClandingPageHero span img {
top: 0.5rem;
height: 2.2rem;
}

.LClandingPageHero .heroTitle b:nth-child(2) {
font-size: 2.5rem;
top: 0rem;
}

.LClandingPageHero p {
width: 90%;
font-size: 0.8rem;
}

.LClandingPageHero button {
padding: 0.5rem 1rem;
}

.DonationFormElement {
flex-direction: column;
gap: 1rem;
}

.SubmitButton {
width: 100%;
align-items: center;
}
}

@media (width<=550px) {
.LClandingPageHero .dash {
top: -48%;
border-radius: 35%;
}

.LClandingPageHero .heroTitle b:nth-child(2) {
font-size: 1.75rem;
top: 0rem;
}

.LClandingPageHero span {
font-size: 1.8rem;
gap: 0.7rem;
}
.LClandingPageHero span img {
top: 0.18rem;
height: 1.7rem;
}

.DonationFormElement {
top: -10%;
width: 96%;
}

.DonateButtonContainer {
/* flex-direction: column; */
align-items: center;
gap: 0.3rem;
}
.DonateButtonContainer button {
width: 100%;
padding: 0.4rem 0.8rem;
margin-bottom: 0.6rem;
font-size: 0.8rem;
}

.CurrencyContainer p,
.DetailsContainer label {
font-size: 0.9rem;
}

.DonationInputStyles {
font-size: 0.9rem;
padding: 0.6rem 0.9rem;
}

.DetailsContainer h1 {
font-size: 1.5rem;
}

.AmountField {
font-size: 1.4rem;
}

.TermsContainer label {
font-size: 0.6rem;
}

.SubmitButton {
font-size: 1rem;
}

.textContainer {
padding: 2rem;
width: 100%;
box-shadow: -1.6px -6.4px 62px 3.2px rgba(0, 0, 0, 0.15);
}
}

@media (width<=380px) {
.LClandingPageHero .dash {
top: -47%;
border-radius: 35%;
}

.LClandingPageHero span {
font-size: 1.7rem;
padding: 0;
}
}
Loading

0 comments on commit 56445ee

Please sign in to comment.