style adjustments

HackIllinois · Feb 8, 2025 · 207ba22 · 207ba22
1 parent 13b2c5c
commit 207ba22
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 17 deletions.
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -133,7 +133,9 @@ const Profile: React.FC = () => {
                                 windowSizeHook?.width < 768
                                     ? "10px"
                                     : "40px",
-                            padding: 0
+                            padding: 0,
+                            background:
+                                "linear-gradient(0deg, #98c8d3 0%, #5ea6b7 41%, #0a3147 100%)"
                         }
                     }}
                     isOpen={modalOpen}
@@ -246,7 +248,7 @@ const Profile: React.FC = () => {
                                     <OlympianButton
                                         text={getButtonText()}
                                         onClick={() => setModalOpen(true)}
-                                        medium
+                                        small
                                     />
                                 )}
                         </div>
@@ -261,7 +263,7 @@ const QR: React.FC<{ qrUrl: string | null }> = ({ qrUrl }) => {
     return (
         <>
             <h2>Your QR Code</h2>
-            {qrUrl && <QRCodeSVG value={qrUrl} />}
+            {qrUrl && <QRCodeSVG value={qrUrl} className={styles.qr} />}
         </>
     );
 };

diff --git a/app/profile/styles.module.scss b/app/profile/styles.module.scss
@@ -106,21 +106,20 @@
     width: 100%;
     min-height: 100%;
     padding: 2rem;
-    background: linear-gradient(0deg, #98c8d3 0%, #5ea6b7 41%, #0a3147 100%);
 }
 
 .modalContent p {
     color: black;
 }
 
-// .modalContent svg {
-//     width: 100%;
-//     max-width: 400px;
-//     height: auto;
-// }
+.qr {
+    width: 100%;
+    max-width: 600px;
+    height: auto;
+}
 
 .modalContent h2 {
-    color: black;
+    color: white;
     margin-bottom: 10px;
     font-size: 30px;
 }

diff --git a/components/CloseButton/CloseButton.module.scss b/components/CloseButton/CloseButton.module.scss
@@ -3,9 +3,7 @@
     justify-content: center;
     align-items: center;
     padding: 5px;
-    margin-left: -5px; // To align the button with the other content
-}
-
-.button:hover {
+    margin-left: 15px; // To align the button with the other content
+    margin-top: 15px;
     cursor: pointer;
 }
diff --git a/components/CloseButton/CloseButton.tsx b/components/CloseButton/CloseButton.tsx
@@ -10,7 +10,7 @@ const CloseButton = ({ handleClose }: { handleClose: () => void }) => {
                 height="24px"
             >
                 <path
-                    fill="#000000"
+                    fill="#ffffff"
                     d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
                 ></path>
             </svg>

diff --git a/components/OlympianButton/OlympianButton.module.scss b/components/OlympianButton/OlympianButton.module.scss
@@ -207,3 +207,42 @@
         }
     }
 }
+
+.olympianButtonWrapper.small .olympianButton {
+    width: 14vw;
+    height: 4vw;
+    font-size: 1.5vw;
+    border-radius: 2vw;
+
+    &::after {
+        width: 14vw;
+        height: 4vw;
+        border-radius: 2vw;
+    }
+
+    @media screen and (max-width: 960px) {
+        width: 30vw;
+        height: 10vw;
+        font-size: 3vw;
+
+        &::after {
+            width: 30vw;
+            height: 10vw;
+        }
+    }
+
+    @media screen and (max-width: 468px) {
+        width: 45vw;
+        height: 15vw;
+        font-size: 4vw;
+        border-radius: 20px;
+        border-width: 1vw;
+
+        &::after {
+            width: 45vw;
+            height: 15vw;
+            border-radius: 20px;
+            left: -1vw;
+        }
+    }
+}
diff --git a/components/OlympianButton/OlympianButton.tsx b/components/OlympianButton/OlympianButton.tsx
@@ -10,6 +10,7 @@ interface OlympianButtonProps {
     blue?: boolean;
     gold?: boolean;
     medium?: boolean;
+    small?: boolean;
 }
 
 const OlympianButton: React.FC<OlympianButtonProps> = ({
@@ -19,7 +20,8 @@ const OlympianButton: React.FC<OlympianButtonProps> = ({
     bottomPadding,
     blue,
     gold,
-    medium
+    medium,
+    small
 }) => {
     return (
         <div
@@ -28,7 +30,8 @@ const OlympianButton: React.FC<OlympianButtonProps> = ({
                 bottomPadding && styles.bottomPadding,
                 blue && styles.blue,
                 gold && styles.gold,
-                medium && styles.medium
+                medium && styles.medium,
+                small && styles.small
             )}
         >
             {link ? (