added start & login mobile design

Kakar21 · May 9, 2024 · eabf38d · eabf38d
1 parent 0ddcf55
commit eabf38d
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 22 deletions.
diff --git a/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.scss b/src/app/dialog-add-channel-add-member/dialog-add-channel-add-member.component.scss
@@ -41,6 +41,7 @@ mat-radio-button {
         color: var(--Black, #000);
         font-size: 1.125rem;
         line-height: normal;
+        letter-spacing: normal;
     }
 
     &:hover:not(.mat-mdc-radio-checked) {
@@ -116,6 +117,7 @@ mat-chip-row {
             white-space: break-spaces;
             text-align: start;
             max-width: 11vw;
+            letter-spacing: normal;
         }
     }
 

diff --git a/src/app/dialog-add-channel/dialog-add-channel.component.scss b/src/app/dialog-add-channel/dialog-add-channel.component.scss
@@ -127,6 +127,7 @@ Mat-dialog-actions {
       font-style: normal;
       font-weight: 700;
       line-height: normal;
+      letter-spacing: normal;
     }
 
     &:hover {

diff --git a/src/app/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.scss b/src/app/dialog-add-member-to-chnl/dialog-add-member-to-chnl.component.scss
@@ -72,6 +72,7 @@ mat-chip-row {
       white-space: break-spaces;
       text-align: start;
       max-width: 11vw;
+      letter-spacing: normal;
     }
   }
 

diff --git a/src/app/start/login/login.component.scss b/src/app/start/login/login.component.scss
@@ -98,6 +98,7 @@ form {
     padding: 0.3125rem 0.9375rem;
     border-radius: 1.875rem;
     transition: 100ms ease-out;
+    height: unset;
 
 
     ::ng-deep::ng-deep .mdc-button__label {
@@ -107,6 +108,7 @@ form {
         font-weight: 400;
         line-height: 120%;
         transition: 100ms ease-out;
+        letter-spacing: normal;
 
         /* 1.35rem */
     }
@@ -219,6 +221,7 @@ form {
         font-size: 1.125rem;
         font-weight: 400;
         transition: 100ms ease-out;
+        letter-spacing: normal;
     }
 
     &:hover {
@@ -311,7 +314,7 @@ form {
         transition: 100ms ease-out;
         letter-spacing: normal;
     }
-    
+
     &:hover {
         border-color: var(--purple-3);
 
@@ -337,4 +340,79 @@ form {
     to {
         opacity: 1;
     }
+}
+
+// Media Queries
+
+@media (max-width: 431px) {
+    app-start {
+        ::ng-deep::ng-deep .content {
+            width: calc(92.5vw - 1.25rem - 1.25rem);
+            height: unset;
+            padding: 2.1875rem 1.25rem;
+            gap: 1.25rem;
+        }
+    }
+
+    .description {
+        gap: 0.9375rem;
+
+        >h1 {
+            font-size: 2rem;
+        }
+
+        >p {
+            font-size: 1.0625rem;
+        }
+    }
+
+    .upper-container {
+        gap: 1.25rem;
+
+        >div:first-child {
+            margin-bottom: 0.625rem;
+        }
+
+        >div {
+            >input {
+                padding: 0.8125rem 2rem 0.8125rem 5.375rem;
+            }
+        }
+    }
+
+    .forgot-pw {
+        ::ng-deep::ng-deep .mdc-button__label {
+            font-size: 1.0625rem;
+            letter-spacing: normal;
+        }
+    }
+
+    form {
+        gap: 1.25rem;
+    }
+
+    .middle-container {
+        margin-bottom: unset;
+
+        >span {
+            font-size: 1.0625rem;
+        }
+    }
+
+    .google {
+        height: 3.125rem;
+
+        ::ng-deep::ng-deep .mdc-button__label {
+            font-size: 1.0625rem;
+            letter-spacing: normal;
+        }
+    }
+
+    .lower-container {
+        gap: 1.25rem;
+
+        >div {
+            gap: 1.25rem;
+        }
+    }
 }
diff --git a/src/app/start/reset-password/reset-password.component.scss b/src/app/start/reset-password/reset-password.component.scss
@@ -139,5 +139,6 @@ form {
 
     ::ng-deep::ng-deep .mdc-button__label {
         font-weight: 400;
+        letter-spacing: normal;
     }
 }
diff --git a/src/app/start/signup/signup.component.scss b/src/app/start/signup/signup.component.scss
@@ -153,6 +153,7 @@ mat-checkbox {
     font-style: normal;
     font-weight: 400;
     line-height: 120%;
+    letter-spacing: normal;
     /* 1.2rem */
 }
 

diff --git a/src/app/start/start.component.scss b/src/app/start/start.component.scss
@@ -46,7 +46,8 @@
 .animation-logo {
   z-index: 99;
   position: absolute;
-  top: 40%;
+  top: auto;
+  bottom: auto;
   animation: 500ms slideUpLeft 2500ms ease-out forwards;
   display: flex;
   opacity: 1;
@@ -121,6 +122,41 @@
   }
 }
 
+@keyframes slideInRightMobile {
+  from {
+    transform: translateX(calc((16.36313rem - 4.41588rem) / 2));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideUpMobile {
+  0% {
+    /* Start in der Mitte des Bildschirms */
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    z-index: 2;
+  }
+
+  75% {
+    z-index: 2;
+  }
+
+  100% {
+    transform: translate(calc(16.36313rem / 4), calc((-50% + (4.34556rem / 2)) + 3vh)) scale(0.5);
+    opacity: 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 0;
+  }
+}
+
 main {
   display: flex;
   flex-direction: column;
@@ -158,11 +194,12 @@ main {
   transition: 100ms ease-out;
 
   ::ng-deep::ng-deep .mdc-button__label {
-    color: var(--Purple-2, #797EF3);
+    color: var(--purple-2);
     font-family: Figtree;
     font-size: 1.125rem;
     font-weight: 400;
     line-height: 120%;
+    letter-spacing: normal;
     transition: 100ms ease-out;
     /* 1.35rem */
   }
@@ -179,17 +216,17 @@ main {
     border-color: var(--light-purple-line) !important;
 
     ::ng-deep::ng-deep .mdc-button__label {
-        color: var(--purple-1);
-        font-weight: 500;
+      color: var(--purple-1);
+      font-weight: 500;
     }
 
     ::ng-deep::ng-deep .mat-mdc-button-persistent-ripple {
 
-        &::before {
-            opacity: 0;
-        }
+      &::before {
+        opacity: 0;
+      }
     }
-}
+  }
 }
 
 .footer {
@@ -208,22 +245,90 @@ main {
 
 .content {
   position: relative;
-  width: calc(37.875rem - 3.3125rem - 3.3125rem);
-  height: calc(41.8125rem - 2.5rem - 2.5rem);
-  padding: 2.5rem 3.3125rem;
-  flex-shrink: 0;
-  border-radius: 1.875rem;
-  background: var(--white);
-  position: relative;
-  width: calc(37.875rem - 3.3125rem - 3.3125rem);
-  height: calc(41.8125rem - 2.5rem - 2.5rem);
-  padding: 2.5rem 3.3125rem;
   flex-shrink: 0;
   border-radius: 1.875rem;
   background: var(--white);
-
-  /* header */
-  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
   /* header */
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
+}
+
+// Media Queries
+
+@media (max-width: 431px) {
+  .animation-logo {
+    gap: 0.8rem;
+    animation: 500ms slideUpMobile 2500ms ease-out forwards;
+
+
+    >img:first-child {
+      width: 4.41588rem;
+      height: 4.34556rem;
+      animation: 300ms slideInRightMobile 500ms ease-out forwards;
+      transform: translateX(calc((16.36313rem - 4.41588rem) / 2));
+    }
+
+    >div {
+      >img {
+        width: 11.14725rem;
+        height: 1.70044rem;
+      }
+    }
+  }
+
+  .content {
+    width: unset;
+  }
+
+  .header {
+    z-index: unset;
+    inset: 5vh auto;
+    flex-direction: column;
+    align-items: center;
+
+    >div:not(.logo) {
+      align-items: center;
+      gap: 1.25rem;
+    }
+  }
+
+  .logo {
+    gap: 0.8rem;
+
+    >img:first-child {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    >img:last-child {
+      width: 8.45575rem;
+      height: 1.3rem;
+    }
+  }
+
+  .footer {
+    display: none;
+  }
+
+  .secondary-button {
+    border: 1px solid var(--purple-2) !important;
+
+    ::ng-deep::ng-deep .mdc-button__label {
+      font-weight: 700;
+      color: var(--purple-1);
+      font-family: Nunito;
+      line-height: normal;
+      letter-spacing: normal;
+    }
+
+    &:hover,
+    &:active {
+      border-color: var(--purple-1) !important;
+      background-color: var(--purple-1);
+
+      ::ng-deep::ng-deep .mdc-button__label {
+        font-weight: 700;
+        color: var(--white);
+      }
+    }
+  }
 }