From d581ff52a4e3e71311a85b5ad00277bff69cd7a3 Mon Sep 17 00:00:00 2001 From: Sultan Khan Date: Mon, 29 Aug 2022 15:27:31 +0300 Subject: [PATCH] MOE design in progress --- Mohem/src/app/app.component.scss | 11 +++--- .../authentication/login/login.component.html | 24 ++++++++----- .../authentication/login/login.component.scss | 32 +++++++++++++----- .../services/common/common.service.ts | 4 +-- .../ui/card-filter/card-filter.component.html | 8 ++--- .../ui/card-filter/card-filter.component.scss | 18 ++++++---- .../services-button.component.scss | 17 +++++----- .../stats-button/stats-button.component.scss | 16 +++++---- Mohem/src/app/home/home.page.html | 14 ++++---- Mohem/src/app/home/home.page.scss | 28 ++++++++------- .../app/notification/home/home.component.html | 3 +- .../app/notification/home/home.component.scss | 26 +++++++++----- .../app/notification/home/home.component.ts | 5 +-- .../font/notokufi/NotoKufiArabic-Black.ttf | Bin 0 -> 124332 bytes .../font/notokufi/NotoKufiArabic-Bold.ttf | Bin 0 -> 122900 bytes .../notokufi/NotoKufiArabic-ExtraBold.ttf | Bin 0 -> 124512 bytes .../notokufi/NotoKufiArabic-ExtraLight.ttf | Bin 0 -> 124184 bytes .../font/notokufi/NotoKufiArabic-Light.ttf | Bin 0 -> 124088 bytes .../font/notokufi/NotoKufiArabic-Medium.ttf | Bin 0 -> 123624 bytes .../font/notokufi/NotoKufiArabic-Regular.ttf | Bin 0 -> 122736 bytes .../font/notokufi/NotoKufiArabic-SemiBold.ttf | Bin 0 -> 123716 bytes .../font/notokufi/NotoKufiArabic-Thin.ttf | Bin 0 -> 123580 bytes Mohem/src/assets/icon/menu icon.svg | 7 ++++ Mohem/src/assets/icon/myteam.svg | 28 +++++++++++++++ Mohem/src/assets/icon/worklist.svg | 9 +++++ Mohem/src/theme/styles.scss | 32 ++++++++++++------ Mohem/src/theme/variables.scss | 21 +++++++++++- 27 files changed, 213 insertions(+), 90 deletions(-) create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-Black.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-Bold.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-ExtraBold.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-ExtraLight.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-Light.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-Medium.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-Regular.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-SemiBold.ttf create mode 100644 Mohem/src/assets/font/notokufi/NotoKufiArabic-Thin.ttf create mode 100644 Mohem/src/assets/icon/menu icon.svg create mode 100644 Mohem/src/assets/icon/myteam.svg create mode 100644 Mohem/src/assets/icon/worklist.svg diff --git a/Mohem/src/app/app.component.scss b/Mohem/src/app/app.component.scss index d7546a03..f10468fa 100644 --- a/Mohem/src/app/app.component.scss +++ b/Mohem/src/app/app.component.scss @@ -222,7 +222,9 @@ header margin-left: 0.2cm; } - +ion-content { + --background: #fff; +} .sidebar-menu .header-div { @@ -232,6 +234,7 @@ header display: block; margin-bottom: -10px; top: 40px; + } .list-en { @@ -289,7 +292,7 @@ button.menu-item.item.item-block.item-ios { padding: 0; text-align: center; font-weight: bolder; - color: black; + color: var(--primary); font-size: 18px; } @@ -369,8 +372,8 @@ ion-thumbnail.menu-thumb { } .profile { - color: black !important; - font-weight: bolder !important; + color: #5C6F79 !important; + } diff --git a/Mohem/src/app/authentication/login/login.component.html b/Mohem/src/app/authentication/login/login.component.html index bbac6512..bc2ff167 100644 --- a/Mohem/src/app/authentication/login/login.component.html +++ b/Mohem/src/app/authentication/login/login.component.html @@ -16,14 +16,14 @@
-
- + @@ -46,7 +46,7 @@ -
+
@@ -60,12 +60,20 @@ {{ts.trPK('login','forgot-password')}} -->
+
- - + \ No newline at end of file diff --git a/Mohem/src/app/authentication/login/login.component.scss b/Mohem/src/app/authentication/login/login.component.scss index d74fd8a4..c7e175fc 100644 --- a/Mohem/src/app/authentication/login/login.component.scss +++ b/Mohem/src/app/authentication/login/login.component.scss @@ -119,6 +119,7 @@ img.centerDiv { .login-input { border: none; margin-right: 5px; + color: var(--grayTextColor); } .item-input { @@ -130,7 +131,8 @@ img.centerDiv { margin-left: 12px; margin-right: 12px; box-shadow: 0px 1px 5px #0000000F; - color: var(--primary); + color: var(--grayTextColor); + font-family: var(--fontFamilyIOSAR); } .button-login { @@ -140,11 +142,12 @@ img.centerDiv { white-space: normal; color: var(--light); text-transform: capitalize; - min-height: 1.0cm; - --border-radius: 33px !important; - border-radius: 33px !important; + min-height: 57px; + border-radius: 12px !important; --min-height: 1.6cm !important; width: 315px; + box-shadow: 0px 1px 6px #0000000F; + font-size: 18px; } .button-digital-id { @@ -169,7 +172,7 @@ img.centerDiv { } .first-circle { - background: var(--newgreen) !important; + background: var(--main-color) !important; border-radius: 50%; height: 292px; width: 288px; @@ -197,10 +200,23 @@ img.centerDiv { margin: -147px 0px 0px 274px; } -.logoFotor { - width: 45px !important; - height: 45px !important; +.footer-container { + position: relative; + width: 100%; + display: flex; + align-items: stretch; +} + +.footer-container .logoFotor { + position: relative; + margin: 20px; + width: 95px; +} +.footer-container .moe-logo { + position: relative; + margin: 10px 20px; + width: 45px; } .welcomeText { diff --git a/Mohem/src/app/hmg-common/services/common/common.service.ts b/Mohem/src/app/hmg-common/services/common/common.service.ts index 5b827761..8e29fca1 100644 --- a/Mohem/src/app/hmg-common/services/common/common.service.ts +++ b/Mohem/src/app/hmg-common/services/common/common.service.ts @@ -1611,7 +1611,7 @@ export class CommonService { value: 0, name: 'HR', active: false, - color: '#18a169', + color: '#43A6A0', key: 'HRSSA', disable: false, total: 0 @@ -1686,7 +1686,7 @@ export class CommonService { { data: [0, 0, 0, 0, 0, 0, 0, 0], backgroundColor: [ - '#18a169', + '#43A6A0', '#3cb9d5', '#114475', '#38c9b3', diff --git a/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.html b/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.html index 94ab6876..319edbac 100644 --- a/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.html +++ b/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.html @@ -1,7 +1,7 @@ -
-
- {{value}} - {{text}} +
+
+ {{value}} + {{text}}
diff --git a/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.scss b/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.scss index 1c67af05..02bb12f9 100644 --- a/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.scss +++ b/Mohem/src/app/hmg-common/ui/card-filter/card-filter.component.scss @@ -1,4 +1,4 @@ -.main-container{ +.main-container { width: 72px; background-color: white; padding: 10px; @@ -7,10 +7,12 @@ text-align: right; font-family: WorkSans-Regular; padding-top: 25px; - box-shadow: 0 0 6px rgba(0,0,0,0.16); + box-shadow: 0px 1px 5px #00000012; position: relative; + border: 1px solid #D0D4D696; } -.main-container-radius{ + +.main-container-radius { // content: ""; position: absolute; width: 30px; @@ -20,14 +22,16 @@ left: 10px; top: 10px; } -.number-span{ + +.number-span { font-size: 19px; display: block; line-height: 18px; + color: #004D71; } -.text-span{ +.text-span { font-size: 14px; - color: #888; + color: #5C6F79; margin: -1px; -} +} \ No newline at end of file diff --git a/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss b/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss index aa13c49f..750fb973 100644 --- a/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss +++ b/Mohem/src/app/hmg-common/ui/services-button/services-button.component.scss @@ -1,12 +1,12 @@ .custom-button { background: #FCFCFC 0% 0% no-repeat padding-box; margin-bottom: 5px; - box-shadow: 2px 2px 6px #00000029; + box-shadow: 0px 1px 5px #0000000F; width: 100%; - max-width: 105px; - height: 100px; + max-width: 115px; + height: 105px; padding: 10px; - min-width: 96px; + min-width: 105px; border: 1px solid #D0D4D6; border-radius: 25px; } @@ -19,9 +19,10 @@ } .iconBox img { - margin: 0px auto 10px; + margin: 7px auto 3px; display: inline-block; - width: 35px; + width: 30px; + height: 30px; // max-width: 35%; } @@ -30,9 +31,9 @@ } .pClass { - font-size: 9px; + font-size: 12px; text-align: center; margin-top: 10px; - color: black; + color: var(--primary); font-weight: bold; } \ No newline at end of file diff --git a/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.scss b/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.scss index 0fd4bb4f..b806e57c 100644 --- a/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.scss +++ b/Mohem/src/app/hmg-common/ui/stats-button/stats-button.component.scss @@ -1,19 +1,22 @@ .custom-button { background: white; - margin-bottom: 5px; + margin-bottom: 10px; border: 1px solid #D0D4D6; border-radius: 20px; - width: 200px; + width: 120px; max-width: 105px; height: 160px; padding: 10px; - box-shadow: 2px 2px 6px #00000029; + max-height: 145px; + box-shadow: 0px 0px 20px #00000029; + } .iconBox { display: block; width: 100%; position: static; + height: 47px; img { // display: block; @@ -24,7 +27,7 @@ max-width: 67%; padding-bottom: 9px; padding-top: 5px; - height: 47px; + height: 44px; } } @@ -34,7 +37,7 @@ span { font-size: 25px; font-weight: bold; - color: black; + color: var(--primary); text-align: center; display: block; } @@ -44,8 +47,9 @@ ion-app[dir="rtl"] .titleBox { text-align: right; } + .pClass { - color: black; + color: var(--primary); width: 100%; margin-top: 5px; font-weight: bold; diff --git a/Mohem/src/app/home/home.page.html b/Mohem/src/app/home/home.page.html index 562c27c4..4af77229 100644 --- a/Mohem/src/app/home/home.page.html +++ b/Mohem/src/app/home/home.page.html @@ -47,18 +47,18 @@ - + - {{ts.trPK('work-list','total')}}
{{ts.trPK('work-list','open-reqest')}}
+ + {{ts.trPK('work-list','open-reqest')}}