Updated the UI

upayanmazumder · Nov 4, 2024 · 7be24be · 7be24be
1 parent a65c27b
commit 7be24be
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 22 deletions.
diff --git a/qwik/src/components/carousel/carousel.module.css b/qwik/src/components/carousel/carousel.module.css
@@ -7,6 +7,7 @@
     background-color: #1a1a1a6d;
     border-radius: var(--border-radius-large);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    margin-top: 20px;
 }
 
 .card {

diff --git a/qwik/src/components/contact/contact.module.css b/qwik/src/components/contact/contact.module.css
@@ -7,13 +7,22 @@
     width: 90%;
     max-width: 500px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-    transition: background-color 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
+    transition: background-color 0.5s ease, transform 0.3s ease, max-height 0.3s ease, border-color 0.4s ease-in-out;
     overflow: hidden;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
+    border: 1px solid black;
+}
+
+.container:hover {
+    border-color: #17a2e0;
+    background-color: #4040408e;
+}
+
+.container p {
+    font-size: 0.7rem;
 }
 
 summary {
-    font-size: 1em;
     cursor: pointer;
     padding: 10px;
     border-bottom: 2px solid #444444;
@@ -38,26 +47,24 @@ input,
 textarea {
     width: 100%;
     padding: 10px;
-    border: 1px solid #3a3a4d;
-    border-radius: var(--border-radius-small);
-    background-color: #353535;
+    border: 1px solid #3535357d;
+    border-radius: var(--border-radius-small) var(--border-radius-small) 0 var(--border-radius-small);
+    background-color: #393939;
     color: #e0e0e0;
-    font-size: 1em;
-    transition: border-color 0.3s ease, background-color 0.3s ease;
+    transition: border-color 0.3s ease;
 }
 
 textarea {
     margin-top: 15px;
     max-width: 90%;
     max-height: 60px;
     min-width: 90%;
-    min-height: 48px;
+    min-height: min-content !important;
 }
 
 input:focus,
 textarea:focus {
     border-color: #1f8ef1;
-    background-color: #62626275;
     outline: none;
 }
 
@@ -67,10 +74,10 @@ textarea:focus {
     border: none;
     border-radius: var(--border-radius-small);
     padding: 10px 20px;
-    font-size: 1em;
     cursor: pointer;
     transition: background-color 0.3s ease, transform 0.2s ease;
     display: inline-block;
+    font-size: 0.7rem;
 }
 
 .button:hover {

diff --git a/qwik/src/components/contact/contact.tsx b/qwik/src/components/contact/contact.tsx
@@ -76,7 +76,7 @@ export default component$(() => {
 
             {form.loading && <p class={contactStyles.loading}>Sending message...</p>}
             {form.error && (
-                <p class={contactStyles.error} aria-live="assertive">Error: {form.error}</p>
+                <p class={contactStyles.error} aria-live="assertive">An error occured! <br /> {form.error}</p>
             )}
             {form.successMessage && (
                 <p class={contactStyles.success} aria-live="polite">{form.successMessage}</p>

diff --git a/qwik/src/components/details/details.module.css b/qwik/src/components/details/details.module.css
@@ -20,12 +20,15 @@
     width: 100%;
     max-width: 600px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid black;
+    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.4s ease-in-out;
+
 }
 
 .card:hover {
-    transform: translateY(-10px);
+    transform: translateY(-4px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+    border-color: #3b3b3b;
 }
 
 .card p {

diff --git a/qwik/src/components/footer/footer.css b/qwik/src/components/footer/footer.css
@@ -19,6 +19,8 @@
 }
 
 .footer-links {
+    margin-top: 5px;
+    margin-bottom: 10px;
     color: gray;
 }
 

diff --git a/qwik/src/components/social-media/personal/personal.module.css b/qwik/src/components/social-media/personal/personal.module.css
@@ -1,4 +1,4 @@
-.hero {
+.container {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -38,7 +38,7 @@
 }
 
 @media (max-width: 768px) {
-    .hero {
+    .container {
         padding: 20px;
     }
 
@@ -49,7 +49,7 @@
 }
 
 @media (max-width: 480px) {
-    .hero {
+    .container {
         padding: 15px;
     }
 

diff --git a/qwik/src/components/social-media/personal/personal.tsx b/qwik/src/components/social-media/personal/personal.tsx
@@ -16,7 +16,7 @@ const permittedLinks = {
 export default component$(() => {
 
   return (
-    <div class={[socialMediaPersonalStyles.hero]}>
+    <div class={[socialMediaPersonalStyles.container]}>
       <div class={socialMediaPersonalStyles["button-group"]}>
         {buttonDetails
           .filter((button) => Object.prototype.hasOwnProperty.call(permittedLinks, button.name))

diff --git a/qwik/src/components/social-media/work/work.module.css b/qwik/src/components/social-media/work/work.module.css
@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap');
 
-.hero {
+.container {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -89,7 +89,7 @@ button.devfolio-button {
 }
 
 @media (max-width: 768px) {
-    .hero {
+    .container {
         flex-direction: column;
         padding: 20px;
     }
@@ -105,7 +105,7 @@ button.devfolio-button {
 }
 
 @media (max-width: 576px) {
-    .hero {
+    .container {
         padding: 15px;
     }
 

diff --git a/qwik/src/components/social-media/work/work.tsx b/qwik/src/components/social-media/work/work.tsx
@@ -65,7 +65,7 @@ export default component$(() => {
   );
 
   return (
-    <div class={[socialMediaWorkStyles.hero]}>
+    <div class={[socialMediaWorkStyles.container]}>
       <div class={socialMediaWorkStyles["button-group"]}></div>
         {filteredButtonDetails.map((button, index) => (
           <button