fix: responsive

lfglabs-dev · Jun 13, 2024 · cc36aa5 · cc36aa5
1 parent 6b22e04
commit cc36aa5
Show file tree

Hide file tree

Showing 6 changed files with 460 additions and 52 deletions.
diff --git a/app/components/connection/connectModal.tsx b/app/components/connection/connectModal.tsx
@@ -2,6 +2,7 @@
 
 import React, { FunctionComponent, useState } from "react";
 import { Modal } from "@mui/material";
+import modalStyles from "../../styles/components/modal.module.css";
 import styles from "../../styles/components/walletConnect.module.css";
 import { NetworkType } from "@/constants/types";
 import StarknetWalletConnect from "./starknetConnect";
@@ -59,9 +60,9 @@ const ConnectModal: FunctionComponent<StarknetWalletConnectProps> = ({
           },
         }}
       >
-        <div className={styles.menu_wrapper}>
-          <div className={styles.menu}>
-            <div className={styles.modalContent}>
+        <div className={modalStyles.menu_wrapper}>
+          <div className={modalStyles.menu}>
+            <div className={modalStyles.modal_content}>
               <div className={styles.selectNetworkTitle}>
                 <span>Choose</span> your{" "}
                 <span className={styles.titleBlue}>network</span>

diff --git a/app/components/connection/starknetConnect.tsx b/app/components/connection/starknetConnect.tsx
@@ -4,6 +4,7 @@ import React, { FunctionComponent } from "react";
 import { Modal, useMediaQuery } from "@mui/material";
 import { Connector } from "starknetkit";
 import styles from "../../styles/components/walletConnect.module.css";
+import modalStyles from "../../styles/components/modal.module.css";
 import {
   getConnectorDiscovery,
   getConnectorIcon,
@@ -65,9 +66,9 @@ const StarknetWalletConnect: FunctionComponent<StarknetWalletConnectProps> = ({
         },
       }}
     >
-      <div className={styles.menu_wrapper}>
-        <div className={styles.menu}>
-          <div className={styles.modalContent}>
+      <div className={modalStyles.menu_wrapper}>
+        <div className={modalStyles.menu}>
+          <div className={modalStyles.modal_content}>
             <div className={styles.modalTitle}>
               Connect <span>to</span>
             </div>

diff --git a/app/styles/components/countdown.module.css b/app/styles/components/countdown.module.css
@@ -24,3 +24,43 @@
   text-align: center;
   box-shadow: 0px 2.06px 30.91px rgba(29, 94, 123, 0.24);
 }
+
+@media (max-width: 920px) {
+  .countdown {
+    height: 120px;
+    width: 120px;
+    padding: 40px 20px;
+  }
+}
+
+@media (max-width: 720px) {
+  .countdown {
+    height: 100px;
+    width: 100px;
+    padding: 30px 20px;
+  }
+}
+
+@media (max-width: 620px) {
+  .countdown {
+    height: 80px;
+    width: 80px;
+    padding: 18px 20px;
+  }
+}
+
+@media (max-width: 520px) {
+  .countdown {
+    height: 60px;
+    width: 60px;
+    padding: 10px 15px;
+  }
+}
+
+@media (max-width: 420px) {
+  .countdown {
+    height: 40px;
+    width: 40px;
+    padding: 3px 5px;
+  }
+}
diff --git a/app/styles/components/ethButton.module.css b/app/styles/components/ethButton.module.css
@@ -60,8 +60,42 @@
   color: var(--content);
   text-align: center;
   font-family: "Airstrike";
-  font-family: Airstrike;
   font-size: 16px;
   font-weight: 400;
   line-height: 16px;
 }
+
+.content img {
+  width: 58px;
+}
+
+@media (max-width: 620px) {
+  .content img {
+    width: 40px;
+    margin: auto;
+  }
+}
+
+@media (max-width: 520px) {
+  .content {
+    font-size: 14px;
+  }
+  .content img {
+    width: 30px;
+    margin: auto;
+  }
+}
+
+@media (max-width: 420px) {
+  .content {
+    font-size: 11px;
+  }
+  .content img {
+    width: 25px;
+    margin: auto;
+  }
+  .innerCircle {
+    width: calc(100% - 17px);
+    height: calc(100% - 17px);
+  }
+}
diff --git a/app/styles/components/walletConnect.module.css b/app/styles/components/walletConnect.module.css
@@ -1,44 +1,9 @@
-.menu_wrapper {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 20px;
-  padding: 1px;
-  background: var(--gradient-color);
-  overflow: hidden;
-  z-index: 999;
-}
-
-.menu {
-  position: relative;
-  background-color: var(--background);
-  align-self: center;
-  border-radius: 20px;
-  padding: 45px;
-  max-width: 600px;
-  width: 400px;
-  display: flex;
-  flex-direction: column;
-  z-index: 1000;
-  color: var(--content);
-}
-
-.modalContent {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
 .wallet {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
   border-radius: 0.375rem;
   --tw-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
   --tw-shadow-colored: 0px 2px 12px var(--tw-shadow-color);
@@ -166,11 +131,6 @@
 }
 
 @media (max-width: 1024px) {
-  .menu {
-    width: 340px;
-    padding: 30px 10px;
-  }
-
   .modalTitle {
     margin: -7px -2px 2px;
   }