Merge branch 'dev' into Angie

annamar26 · Jan 25, 2022 · 95d7e65 · 95d7e65
2 parents e298c3d + 943e660
commit 95d7e65
Show file tree

Hide file tree

Showing 11 changed files with 331 additions and 117 deletions.
diff --git a/blackrock/src/app/components/fifth-question/fifth-question.component.scss b/blackrock/src/app/components/fifth-question/fifth-question.component.scss
@@ -1,17 +1,18 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap");
 $yellow: #ffce00;
+$pink: #FC9BB3;
 
 div {
-  background-color: $yellow;
+  background-color: $pink;
   height: 100%;
   padding: 83px;
   h1 {
     margin: 0rem 0rem 2rem 2rem;
     font-weight: bold;
     font-family: "Noto Sans", sans-serif;
     font-size: 36px;
-    
+
   }
   section {
     display: grid;
@@ -71,12 +72,14 @@ div {
     overflow: visible !important;
   }
   div {
-    background-color: $yellow;
+    background-color: $pink;
     justify-content: center;
     overflow-y: scroll;
+		padding: 1rem;
     h1 {
       margin: 1rem 0rem 2rem 2rem;
       padding-top: 1rem;
+			font-size: 24px;
     }
     section {
       display: grid;

diff --git a/blackrock/src/app/components/first-question/first-question.component.scss b/blackrock/src/app/components/first-question/first-question.component.scss
@@ -1,47 +1,75 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
 $bg-color: #ffce00;
 
-
 .firstQuestion {
-	padding-top: 2rem;
+  padding-top: 2rem;
   background-color: $bg-color;
   height: 70vh;
   h1 {
-		margin-left: 3rem;
-		width: 70vw;
+    margin-left: 3rem;
+    width: 70vw;
     padding: 2rem;
     font-family: "Noto Sans", sans-serif;
     font-weight: bold;
     font-size: 36px;
     line-height: 110%;
   }
 
-
   .optionscontainer {
     width: 100%;
     display: flex;
     justify-content: center;
 
-		align-items: center;
+    align-items: center;
+
+    align-items: center;
+  }
+  ::ng-deep .mat-chip-list-wrapper {
+    justify-content: center;
+    margin-bottom: 3rem;
+    margin-right: 5rem;
+  }
+  ::ng-deep .mat-chip.mat-standard-chip {
+    padding: 1.6rem;
+    font-size: 2vw;
+    font-family: "Noto Sans", sans-serif;
+    background-color: black;
+    color: white;
+    margin: 1em;
+    border-radius: 100px;
+  }
+  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
+    background-color: #ff4713 !important;
+  }
+}
+
+@media (max-height: 420px), screen and (orientation: portrait) {
+  .firstQuestion {
+    padding-top: 1rem;
+    background-color: $bg-color;
+    height: 70vh;
+    h1 {
+      margin-left: 1rem;
+      width: 70vw;
+      font-family: "Noto Sans", sans-serif;
+      font-weight: bold;
+      font-size: 24px;
+      line-height: 110%;
+    }
 
+    .optionscontainer {
+      width: 100%;
+			margin-left: 3rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    align-items: center;}
+      align-items: center;
+    }
     ::ng-deep .mat-chip-list-wrapper {
       justify-content: center;
       margin-bottom: 3rem;
       margin-right: 5rem;
     }
-    ::ng-deep .mat-chip.mat-standard-chip {
-      padding: 1.6rem;
-      font-size: 2vw;
-      font-family: "Noto Sans", sans-serif;
-      background-color: black;
-      color: white;
-      margin: 1em;
-      border-radius: 100px;
-
-    }
-    .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
-      background-color: #ff4713 !important;
-    }
   }
+}
diff --git a/blackrock/src/app/components/fourthquestion/fourthquestion.component.scss b/blackrock/src/app/components/fourthquestion/fourthquestion.component.scss
@@ -9,7 +9,7 @@ $bg-color: #ffce00;
   justify-content: flex-start;
   align-items: center;
  min-height: 100%;
-  
+
   h1 {
     font-family: "Noto Sans", sans-serif;
     margin-top: 60px;
@@ -25,7 +25,7 @@ $bg-color: #ffce00;
     width: 100%;
     flex-wrap: wrap;
    height: 100%;
-   
+
   }
   .example-container {
     width: 33.3%;
@@ -76,7 +76,7 @@ padding-bottom: 0.5rem;
     background-color: #fece00;
     font-size: 14px;
     app-chip {
-      font-size: 24px;   
+      font-size: 24px;
     }
   }
   .cdk-drag-preview {
@@ -111,6 +111,9 @@ padding-bottom: 0.5rem;
 @media (max-width: 600px)and (orientation: portrait){
 .formulario{
   overflow-y: scroll;
+	h1{
+		width: 75%;
+	}
 }
 .example-list {
   border: none;

diff --git a/blackrock/src/app/components/modal-login/modal-login.component.html b/blackrock/src/app/components/modal-login/modal-login.component.html
@@ -68,16 +68,17 @@ <h2 mat-dialog-title>Regístrate</h2>
         </mat-error>
       </mat-form-field>
     </div>
+
       <div class="login"  *ngIf="valorModal; else elseBlock2"> 
-        <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit">
-        <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Inicia sesión</button>
+        <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit" class="loginbutton">
+                  <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Inicia sesión</button> <hr>
         <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="button" (click)="google()">
-          <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Inicia sesión con Google</button></div>
+          <mat-icon class='arrow'>Google</mat-icon>Inicia sesión con Google</button></div>
           <ng-template #elseBlock2 >
-            <div class="login"><button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit">
-              <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Registrarse</button>
+            <div class="login"><button class="loginbutton" mat-button  [mat-dialog-close]="true" cdkFocusInitial type="submit">
+              <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Registrarse</button><hr>
               <button mat-button  [mat-dialog-close]="true" cdkFocusInitial type="button" (click)="google2()">
-                <mat-icon class='arrow'>keyboard_arrow_right</mat-icon>Registrarse con Google</button></div>
+                <mat-icon class='arrow'>Google_rounded</mat-icon>Registrarse con Google</button></div>
 
           </ng-template>
 

diff --git a/blackrock/src/app/components/modal-login/modal-login.component.scss b/blackrock/src/app/components/modal-login/modal-login.component.scss
@@ -46,18 +46,75 @@
         margin-top: 20px;
         width: 100%;
         display: flex;
+        flex-direction: column;
         justify-content: flex-end;
-        align-items: center;
+
+        hr {
+          align-self: center;
+          color: black;
+          width: 98%;
+          margin: 3%;
+          background-color: black;
+          height: 0.5px;
+          border-bottom: 0.3 black solid;
+        }
+        .loginbutton {
+          align-self: flex-end;
+        }
         button {
+          align-self: center;
           background-color: black;
           color: white;
           display: flex;
           justify-content: center;
           align-items: center;
           font-size: 18px;
           margin-left: 10px;
+          width: 30%;
           .arrow {
             color: #ff4713;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+@media (max-width: 600px) and (orientation: portrait) {
+  ::ng-deep .my-custom-dialog-login {
+    mat-dialog-container {
+      height: 90vh;
+      width: 100vw;
+
+      h2 {
+        margin-top: 6%;
+        font-size: 40px;
+        line-height: 45px;
+      }
+      p {
+        text-align: left;
+        font-size: 22px;
+      }
+      form {
+        width: 100%;
+        .inputs {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          .mat-form-field {
+            width: 90%;
+            font-size: 18px;
+          }
+        }
+        .login {
+          width: 100%;
+
+          .loginbutton {
+            align-self: center;
+          }
+          button {
+            flex-wrap: wrap;
+            width: 87%;
           }
         }
       }