chore: Refactor FullButton component styles for responsiveness

ppokrovskii · Jun 23, 2024 · 8e62e98 · 8e62e98
1 parent c07e58a
commit 8e62e98
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/ResumeMatchPro.code-workspace b/ResumeMatchPro.code-workspace
@@ -0,0 +1,7 @@
+{
+    "folders": [
+        {
+            "path": "."
+        }
+    ]
+}
diff --git a/landing/src/components/Buttons/FullButton.jsx b/landing/src/components/Buttons/FullButton.jsx
@@ -1,15 +1,15 @@
 import React from "react";
 import styled from "styled-components";
 
-export default function FullButton({ title, action, border, borderWidth = "1px", color="#fff", backgroundColor = "#580cd2" }) {
+export default function FullButton({ title, action, border, borderWidth = "1px", color = "#fff", backgroundColor = "#580cd2" }) {
   return (
     <Wrapper
-      className="animate pointer radius8"
+      className="animate pointer"
       onClick={action ? () => action() : null}
       $border={border}
       $borderWidth={borderWidth}
       $color={color}
-      style={{ backgroundColor: backgroundColor }}
+      $backgroundColor={backgroundColor}
     >
       {title}
     </Wrapper>
@@ -19,14 +19,28 @@ export default function FullButton({ title, action, border, borderWidth = "1px",
 const Wrapper = styled.button`
   border: ${(props) => (props.$border ? props.$border : "none")};
   background-color: ${(props) => (props.$backgroundColor ? props.$backgroundColor : "transparent")};
-  max-width: 220px;
-  width: 100%;  
-  padding: 15px;
+  border-radius: 12px;
+  max-width: 50vw;
+  width: 100%;
+  padding: 1vw 2vw;
   outline: none;
   color: ${(props) => (props.$color ? props.$color : "#fff")};
+  font-size: 16px;
+  
   :hover {
     background-color: ${(props) => (props.$border ? "transparent" : "#580cd2")};
     border: 1px solid #7620ff;
     color: ${(props) => (props.$color ? props.$color : "#fff")};
   }
+
+  @media (max-width: 768px) {
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 12px;
+    padding: 10px;
+    max-width: 180px;
+  }
 `;
diff --git a/landing/src/components/CookieConsent/CookieConsent.module.css b/landing/src/components/CookieConsent/CookieConsent.module.css
@@ -1,7 +1,7 @@
 .modal {
     display: flex;
     position: fixed;
-    min-width: 500px;
+    /* min-width: 500px; */
     z-index: 99;
     left: 0;
     bottom: 0;
@@ -27,7 +27,22 @@
 
   .buttonContainer {
     display: flex;
-    justify-content: space-between;
+    flex: 1 1 auto;
+    gap: 2vw;
+    /* hug content */
+    /* justify-content: flex-end; */
     margin-top: 20px;
   }
-
+
+  @media screen and (max-width: 600px){
+    .modal {
+      padding: 10vw;
+      min-width: reset;
+      justify-content: center;
+    }
+    .modalContent {
+      width: 100%;
+      /* border-radius: 0; */
+    }
+
+  }