From 2cff9c02d89f6563bc8b95d0b4da19647ef50bbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damla=20K=C3=B6ksal?= <me@damlakoksal.com>
Date: Fri, 16 Apr 2021 19:32:15 +0300
Subject: [PATCH] [#77] refactor: style changes done

---
 .../custom-container.module.scss              | 17 ++--
 pages/contact/contact.module.scss             | 28 +++---
 pages/contact/index.tsx                       | 86 ++++++++++---------
 3 files changed, 69 insertions(+), 62 deletions(-)

diff --git a/components/custom-container/custom-container.module.scss b/components/custom-container/custom-container.module.scss
index 5617462..233335e 100644
--- a/components/custom-container/custom-container.module.scss
+++ b/components/custom-container/custom-container.module.scss
@@ -5,14 +5,13 @@
     flex-direction: column;
     align-items: center;
     min-width: 100%;
-    padding: 2.4rem 0;
+    padding: 6rem 0 10rem;
 
     .h1 {
         font-family: "Zaph Humanist", sans-serif;
         font-size: 3rem;
         text-transform: uppercase;
-        color: variables.$secondary-color;
-        margin-bottom: 2.4rem;
+        color: variables.$quaternary-color;
 
         @media only screen and (max-width: variables.$max-width-middle) {
             font-size: 2.5rem;
@@ -26,6 +25,7 @@
         max-width: 70vw;
         text-align: justify;
         margin-bottom: 1.5rem;
+        margin-top: 1rem;
 
         @media only screen and (max-width: variables.$max-width-middle) {
             font-size: 1rem;
@@ -37,18 +37,19 @@
 
     .h3 {
         font-family: "SuisseInt-Regular", sans-serif;
-        font-size: 1.7rem;
         font-weight: 200;
-        letter-spacing: 0.1rem;
-        font-size: 1.5rem;
-        line-height: 1.5rem;
+        letter-spacing: 0.05em;
+        font-size: 1.375rem;
+        line-height: 1.5em;
         color: variables.$secondary-color;
         max-width: 70vw;
         text-align: center;
-        margin-bottom: 3rem;
+        margin-bottom: 6rem;
+        margin-top: 0.5rem;
 
         @media only screen and (max-width: variables.$max-width-tablet) {
             font-size: 1.3rem;
+            margin-bottom: 1rem;
         }
     }
 
diff --git a/pages/contact/contact.module.scss b/pages/contact/contact.module.scss
index 82b0f89..e9cc968 100644
--- a/pages/contact/contact.module.scss
+++ b/pages/contact/contact.module.scss
@@ -1,16 +1,23 @@
 @use "../../global/variables.scss" as variables;
 
 .item {
+    display: flex;
     flex-basis: 45%;
     min-height: 50vh;
-    display: flex;
+    align-items: center;
     flex-direction: column;
     padding: 0 1rem;
     margin-bottom: 2.5rem;
-    align-items: center;
+    justify-content: space-between;
+
+    .container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
 
     &:first-child {
-        border-right: 1px solid variables.$secondary-color;
+        border-right: 1px solid #6a6f7b6b;
     }
 
     @media only screen and (max-width: variables.$max-width-tablet) {
@@ -27,7 +34,7 @@
         text-decoration: underline;
         font-size: 2rem;
         text-transform: uppercase;
-        color: variables.$quaternary-color;
+        color: variables.$secondary-color;
         margin: 1rem 0;
 
         @media only screen and (max-width: variables.$max-width-middle) {
@@ -42,15 +49,12 @@
 
         .h4 {
             font-family: "SuisseInt-Regular", sans-serif;
-            font-size: 1.5rem;
-            font-weight: 200;
+            font-size: 1rem;
+            font-weight: 600;
             text-transform: uppercase;
-            color: variables.$secondary-color;
+            color: #6a6f7b;
             margin-left: 5px;
-
-            @media only screen and (max-width: variables.$max-width-middle) {
-                font-size: 1.5rem;
-            }
+            letter-spacing: 0.1em;
         }
     }
 
@@ -58,7 +62,7 @@
         font-family: "SuisseInt-Regular", sans-serif;
         text-decoration: none;
         font-weight: 200;
-        letter-spacing: 0.1rem;
+        letter-spacing: 0.05em;
         font-size: 1rem;
         line-height: 1.5rem;
         margin-bottom: 1.5rem;
diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx
index 562670a..447a6f7 100644
--- a/pages/contact/index.tsx
+++ b/pages/contact/index.tsx
@@ -74,55 +74,57 @@ export default function Contact ({
           <CustomContainer page='contact' h1={maintitle} h3={subtitle} justifyContent='center'>
             {
               informations.map((element, index) => (
+
                 <div key={index} className={styles.item}>
-                  <h3 lang={locale} className={styles.boxTitle}>{element.title}</h3>
-                  <div className={styles.boxSubtitle}>
-                    <Image
-                      src="/assets/svgs/map-pin-primary.svg"
-                      width={20}
-                      height={20}
-                      alt="map-pin-icon"
-                    />
-                    <h4 className={styles.h4}>{element.address.field_name}</h4>
-                  </div>
-                  <p className={styles.p}>{element.address.value}</p>
-                  <div className={styles.boxSubtitle}>
-                    <Image
-                      src="/assets/svgs/phone-primary.svg"
-                      width={20}
-                      height={20}
-                      alt="phone-icon"
-                    />
-                    <h4 className={styles.h4}>{element.phone.field_name}</h4>
-                  </div>
-                  <p className={styles.p}><a href={element.phone.link}>{element.phone.value}</a></p>
-                  <div className={styles.boxSubtitle}>
-                    <Image
-                      src="/assets/svgs/envelope-primary.svg"
-                      width={20}
-                      height={20}
-                      alt="envelope-icon"
-                    />
-                    <h4 className={styles.h4}>{element.email.field_name}</h4>
-                  </div>
-                  <p className={styles.p}><a href={element.email.link}>{element.email.value}</a></p>
-                  <div className={styles.boxSubtitle}>
-                    <Image
-                      src="/assets/svgs/fax-primary.svg"
-                      width={20}
-                      height={20}
-                      alt="fax-icon"
-                    />
-                    <h4 className={styles.h4}>{element.fax.field_name}</h4>
+                  <div className={styles.container}>
+                    <h3 lang={locale} className={styles.boxTitle}>{element.title}</h3>
+                    <div className={styles.boxSubtitle}>
+                      <Image
+                        src="/assets/svgs/map-pin-primary.svg"
+                        width={20}
+                        height={20}
+                        alt="map-pin-icon"
+                      />
+                      <h4 className={styles.h4}>{element.address.field_name}</h4>
+                    </div>
+                    <p className={styles.p}>{element.address.value}</p>
+                    <div className={styles.boxSubtitle}>
+                      <Image
+                        src="/assets/svgs/phone-primary.svg"
+                        width={20}
+                        height={20}
+                        alt="phone-icon"
+                      />
+                      <h4 className={styles.h4}>{element.phone.field_name}</h4>
+                    </div>
+                    <p className={styles.p}><a href={element.phone.link}>{element.phone.value}</a></p>
+                    <div className={styles.boxSubtitle}>
+                      <Image
+                        src="/assets/svgs/envelope-primary.svg"
+                        width={20}
+                        height={20}
+                        alt="envelope-icon"
+                      />
+                      <h4 className={styles.h4}>{element.email.field_name}</h4>
+                    </div>
+                    <p className={styles.p}><a href={element.email.link}>{element.email.value}</a></p>
+                    <div className={styles.boxSubtitle}>
+                      <Image
+                        src="/assets/svgs/fax-primary.svg"
+                        width={20}
+                        height={20}
+                        alt="fax-icon"
+                      />
+                      <h4 className={styles.h4}>{element.fax.field_name}</h4>
+                    </div>
+                    <p className={styles.p}><a href={element.fax.link}>{element.fax.value}</a></p>
                   </div>
-                  <p className={styles.p}><a href={element.fax.link}>{element.fax.value}</a></p>
 
+                  <Map mapApi={mapApi} id={element.map.id} coordinate={element.map.coordinate} HTML={element.map.HTML}/>
                 </div>
               ))
             }
           </CustomContainer>
-          <Map mapApi={mapApi} id="hq-map" coordinate={[28.656831, 40.990484]} width={500} height={500} HTML="<h2>Karsal Örme</h2>"/>
-          <Map mapApi={mapApi} id="factory-map" coordinate={[27.649564, 41.272214]} width={500} height={500} HTML="<h2>Fabrika</h2>"/>
         </Section>
       </Layout>
     </>