Merge pull request #149 from AhmedAbdelhak1/my-changesUi

Make changes on UI contact-us page

Author: ZibanPirate

frontend/src/apps/main/components/footer/index.tsx

@@ -13,7 +13,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     background: theme.palette.background.paper,
     borderTop: `1px solid ${theme.palette.background.paper}`,
     padding: "30px",
-    marginTop: "auto",
   },
   copyright: {
     fontSize: "14px",
@@ -86,6 +85,16 @@ export const Footer: React.FC = () => {
               : null}
           </Grid>
           <Grid item xs={12} md={3}>
+            <Grid item>
+              <h1>dzCode.io</h1>
+              <h5>dzCode, Algeria</h5>
+              <Grid item>
+                <a href="tel:+21367-626-1157">+213 06-76-26-11-57</a>
+              </Grid>
+              <Grid item>
+                <a href="mailto:[email protected]">[email protected]</a>
+              </Grid>
+            </Grid>
             <Typography variant="h6" className={classes.copyright}>
               Copyright © 2020{" "}
               <LinkV2

frontend/src/apps/main/scenes/contact/index.tsx

@@ -15,15 +15,6 @@ const Contact = () => {
         </p>
         <ContactForm />
       </div>
-
-      <header className="contact-info">
-        <h1>dzCode.io</h1>
-        <h2>dzCode, Algeria</h2>
-        <a href="tel:+21367-626-1157">+213 06-76-26-11-57</a>
-        <a href="mailto:[email protected]">[email protected]</a>
-      </header>
-
-      <div className="right"></div>
     </section>
   );
 };

frontend/src/apps/main/scenes/contact/style.scss

@@ -22,6 +22,7 @@
     margin: 0;
   }
   a {
+    
     font-size: 1rem;
     display: block;
     color: #000;
@@ -69,14 +70,17 @@
         color: rgba($color: #000, $alpha: 0.9);
         padding: 0.9rem;
         margin: 0.5rem 0;
-        background-color: rgba($color: #000, $alpha: 0.05);
-        border: none;
+        background-color: rgba($color: #fff, $alpha: 0.9);
+        border: 1px solid #1d1d1d;
         margin-top: 0.6rem;
 
         &:focus {
-          background-color: rgba($color: #000, $alpha: 0.2);
+          background-color: rgba($color:white, $alpha: 0.9);
+          border: 1px solid #1d1d1d;
+          border-left: 2px solid red;
+          
 
-          border: none;
+          
           color: #000;
           outline: none;
         }
@@ -95,6 +99,7 @@
       &:hover {
         background-color: rgba($color: $primary, $alpha: 1);
         color: #fff;
+        transition: .5s;
       }
     }
   }
@@ -104,41 +109,17 @@
   .contact {
     flex-direction: row;
     justify-content: center;
-    padding: 5% 0;
+    padding: 5% 3px;
+    background-color: rgba($color: #fff, $alpha: 0.1);
+    margin-bottom: 5%;
+    
+    
 
     header {
       display: block;
     }
 
-    .contact-info {
-      background-color: rgba($color: #000, $alpha: 0.1);
-      padding: 1rem;
-      padding-left: 2rem;
-      width: 300px;
-      margin: 1rem 0;
-      position: absolute;
-      top: 5%;
-      right: 1%;
-
-      h1 {
-        font-size: 1rem;
-        margin: 0.4rem 0;
-      }
-      h2 {
-        font-size: 1.3rem;
-        margin: 0.4rem 0;
-        font-weight: bold;
-      }
-      a {
-        font-size: 1.3rem;
-        display: block;
-        color: #1d1d1d;
-        margin: 0.4rem 0;
-        font-weight: bold;
-
-        text-decoration: none;
-      }
-    }
+    
 
     .left {
       max-width: 40%;
@@ -161,9 +142,11 @@
 
         input,
         textarea {
+          
           padding: 0.8rem;
         }
       }
     }
   }
 }
+