donation overlay v2

src/components/common/buttons/Button.tsx

@@ -23,7 +23,7 @@ export type BaseButtonProps = BaseVisualProps & {
 
     target?: React.HTMLAttributeAnchorTarget
     rel?: string
-}
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseVisualProps>
 
 export function BaseButton(props: BaseButtonProps) {
     const {
@@ -38,6 +38,7 @@ export function BaseButton(props: BaseButtonProps) {
         renderContent,
         target,
         rel,
+        ...rest
     } = props
 
     const showNavChevron =
@@ -92,6 +93,7 @@ export function BaseButton(props: BaseButtonProps) {
             disabled={disabled}
             onClick={onClick}
             className={finalClassName}
+            {...rest}
         >
             {content}
         </button>

src/components/common/buttons/button_types/donate_button/DonateButton.module.css

@@ -0,0 +1,178 @@
+.overlayLayer {
+    position: fixed;
+    inset: 0;
+    z-index: 101;
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    overflow: hidden;
+
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 3rem 1rem;
+    box-sizing: border-box;
+
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.content {
+    width: 100%;
+    max-width: 1400px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+}
+
+.topBar {
+    width: 100%;
+    padding-left: 2vw;
+    padding-right: 2vw;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    margin-bottom: 1.25rem;
+}
+
+.backButtonGuard {
+    display: inline-flex;
+}
+
+.cardsWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    gap: 2.5rem;
+
+    padding-left: 2vw;
+    padding-right: 2vw;
+    width: 100%;
+}
+
+@media (min-width: 1280px) {
+    .cardsWrapper {
+        flex-direction: row;
+        align-items: stretch;
+    }
+}
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    width: 100%;
+    min-height: 280px;
+    padding: 2rem 1.5rem 5rem 1.5rem;
+
+    background-color: rgba(9, 34, 58, 0.88);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
+    border-radius: 0.75rem;
+}
+
+.card:hover {
+    transform: translateY(-4px);
+}
+
+@media (min-width: 768px) {
+    .card {
+        height: auto;
+    }
+}
+
+@media (min-width: 1280px) {
+    .card {
+        flex: 1;
+    }
+}
+
+.cardHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.cardTitle {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: white;
+}
+
+.cardDescription {
+    font-size: 1rem;
+    font-weight: 500;
+    color: white;
+}
+
+.cardButton {
+    position: absolute;
+    bottom: 1.5rem;
+    right: 1.5rem;
+}
+
+.preferredText {
+    position: absolute;
+    bottom: 1.2rem;
+    left: 1.5rem;
+
+    height: 2.75rem;
+
+    display: inline-flex;
+    align-items: center;
+
+    font-size: 1.05rem;
+    font-weight: 750;
+    letter-spacing: 0.01em;
+
+    color: rgba(255, 255, 255, 0.92);
+
+    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
+}
+
+@media (max-width: 1279px) {
+    .memberCard {
+        order: -1;
+    }
+
+    .overlayLayer {
+        align-items: flex-start;
+        justify-content: center;
+    }
+
+    .container {
+        padding: calc(env(safe-area-inset-top) + 2.25rem) 1rem
+            calc(env(safe-area-inset-bottom) + 1.5rem);
+        align-items: flex-start;
+    }
+}