#50 optimize page header for mobile

Paneon · Jan 14, 2024 · e1b51c0 · e1b51c0
1 parent 8ef8e82
commit e1b51c0
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/apps/client/src/app/pages/plan/plan-earnings/plan-earnings.component.scss b/apps/client/src/app/pages/plan/plan-earnings/plan-earnings.component.scss
@@ -12,10 +12,10 @@
 }
 
 .chore-icon {
-  margin-left: 10px;
-  margin-right: 10px;
-  width: 30px;
-  height: 30px;
+  margin-left: 15px;
+  margin-right: 15px;
+  width: 50px;
+  height: 50px;
 }
 
 .chore-name {

diff --git a/apps/client/src/shared/page-header/page-header.component.html b/apps/client/src/shared/page-header/page-header.component.html
@@ -52,7 +52,9 @@
         </div>
 
         <div class="d-flex justify-content-end align-items-center">
-            <money-sprouts-multilanguage></money-sprouts-multilanguage>
+            <div>
+                <money-sprouts-multilanguage></money-sprouts-multilanguage>
+            </div>
             <a
                 href="/logout"
                 (click)="onLogout($event)"

diff --git a/apps/client/src/shared/page-header/page-header.component.scss b/apps/client/src/shared/page-header/page-header.component.scss
@@ -30,6 +30,11 @@
 .image-50x50 {
   width: 50px;
   height: 50px;
+
+  @media (max-width: 450px) {
+    width: 40px;
+    height: 40px;
+  }
 }
 
 .navbar-text {

diff --git a/apps/client/src/shared/page-header/page-header.component.ts b/apps/client/src/shared/page-header/page-header.component.ts
@@ -102,7 +102,7 @@ export class PageHeaderComponent implements OnInit, OnDestroy {
     }
 
     get welcomeTitle(): string {
-        return 'Select your Account';
+        return 'PAGE_HEADER.PAGE_NAME.ACCOUNT-SELECTION';
     }
 
     onLogout(event: Event) {

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
@@ -24,7 +24,7 @@ body {
       rgba(219, 230, 219, 0.5),
       rgba(223, 235, 223, 0.5)
     ),
-    url('./assets/images/background.jpg') center/cover no-repeat;
+    url('./assets/images/background.jpg') center/cover repeat;
 
   display: flex;
   flex-direction: column;