feat: add resposive mobile

ctrlmais · Apr 4, 2022 · 68815e3 · 68815e3
1 parent e03e0eb
commit 68815e3
Show file tree

Hide file tree

Showing 14 changed files with 883 additions and 41 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -1,5 +1,5 @@
 .button {
-  width: 340px;
+  width: 300px;
   height: 56px;
 
   background: var(--orange);
@@ -17,3 +17,25 @@
     transition: 0.4s;
   }
 }
+
+@media screen and (min-width: 839px) {
+  .button {
+    width: 340px;
+    height: 56px;
+
+    background: var(--orange);
+    border-radius: 10px;
+    border: 0;
+    outline: none;
+
+    font-weight: bold;
+    font-size: 18px;
+
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(0.8);
+      transition: 0.4s;
+    }
+  }
+}
diff --git a/src/components/CardBarbeiro/CardBarbeiro.module.scss b/src/components/CardBarbeiro/CardBarbeiro.module.scss
@@ -34,3 +34,13 @@
   font-weight: bold;
   color: var(--white);
 }
+
+.info {
+  display: flex;
+  font-weight: 400;
+  margin-top: 8px;
+  width: 90%;
+  align-items: center;
+  color: var(--gray);
+  font-size: 14px;
+}
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -1,18 +1,17 @@
 .header {
   display: flex;
   width: 100%;
-  height: 144px;
+  height: 70px;
   align-items: center;
 
   background: var(--black-medium);
-  top: 0;
-  position: sticky;
 }
 
 .logo {
-  width: 137px;
-  height: 80px;
-  margin-left: 160px;
+  width: 90px;
+  height: 60px;
+  margin-left: 10px;
+  display: none;
 }
 
 .avatar {
@@ -24,12 +23,13 @@
   justify-content: center;
   align-items: center;
   user-select: none;
+  object-fit: cover;
 }
 
 .user {
   display: flex;
   align-items: center;
-  margin-left: 40px;
+  margin-left: 10px;
   height: 100px;
   width: 80%;
 }
@@ -62,3 +62,70 @@
     transition: 0.4s;
   }
 }
+
+@media screen and (min-width: 839px) {
+  .header {
+    display: flex;
+    width: 100%;
+    height: 120px;
+    align-items: center;
+
+    background: var(--black-medium);
+  }
+
+  .logo {
+    width: 137px;
+    height: 80px;
+    margin-left: 160px;
+    display: flex;
+  }
+
+  .avatar {
+    width: 42px;
+    height: 42px;
+    border-radius: 42px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    object-fit: cover;
+  }
+
+  .user {
+    display: flex;
+    align-items: center;
+    margin-left: 40px;
+    height: 100px;
+    width: 80%;
+  }
+
+  .bemVindo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 1rem;
+    color: var(--gray);
+    font-size: 16px;
+
+    p {
+      margin-top: 0;
+      color: var(--orange);
+      font-size: 16px;
+
+      cursor: pointer;
+    }
+  }
+
+  .icon {
+    color: var(--gray);
+    cursor: pointer;
+    margin-right: 40px;
+
+    &:hover {
+      color: var(--orange);
+      filter: brightness(0.8);
+      transition: 0.4s;
+    }
+  }
+}
diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
@@ -3,7 +3,7 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  width: 100%;
+  width: 90%;
 }
 
 .input {
@@ -46,3 +46,54 @@
   align-items: center;
   justify-content: center;
 }
+
+@media screen and (min-width: 839px) {
+  .global {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .input {
+    width: 340px;
+    height: 56px;
+    background: var(--input);
+    color: var(--gray-hard);
+    border: none;
+    outline: 0;
+
+    border: 1px solid var(--input);
+
+    border-radius: 10px;
+
+    font-size: 16px;
+
+    text-indent: 42px;
+
+    &::placeholder {
+      color: var(--gray);
+    }
+
+    &:invalid {
+      border: 1px solid #ff0000;
+    }
+
+    &:focus {
+      color: var(--white);
+      border: 1px solid var(--orange);
+    }
+  }
+
+  .icon {
+    position: absolute;
+    left: 2px;
+    top: 12px;
+    font-size: 25px;
+    width: 40px;
+    height: 70%;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/src/components/Ocupacao/Ocupacao.module.scss b/src/components/Ocupacao/Ocupacao.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   width: 100%;
   height: 30px;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
   text-align: center;
 
@@ -17,3 +17,25 @@
   color: var(--orange) !important;
   text-decoration: underline;
 }
+
+@media screen and (min-width: 839px) {
+  .ocupacao {
+    display: flex;
+    width: 100%;
+    height: 30px;
+    justify-content: space-around;
+    align-items: center;
+    text-align: center;
+
+    p {
+      color: var(--gray);
+      cursor: pointer;
+      margin-top: 0;
+    }
+  }
+
+  .active {
+    color: var(--orange) !important;
+    text-decoration: underline;
+  }
+}
diff --git a/src/components/Overlay/Overlay.module.scss b/src/components/Overlay/Overlay.module.scss
@@ -18,18 +18,59 @@
   h1 {
     color: var(--white);
     text-align: center;
+    width: 70%;
   }
 
   p {
+    margin-top: 0px;
     color: var(--gray);
     font-weight: 400;
+    width: 70%;
   }
 }
 
 .containerOverlay {
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 30%;
+  height: 50%;
   justify-content: space-around;
 }
+
+@media screen and (min-width: 839px) {
+  .overlay {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--background);
+    z-index: 1001;
+
+    animation: fade 0.3s;
+
+    h1 {
+      color: var(--white);
+      text-align: center;
+    }
+
+    p {
+      color: var(--gray);
+      font-weight: 400;
+    }
+  }
+
+  .containerOverlay {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 30%;
+    justify-content: space-around;
+  }
+}