diff --git a/Mohem/src/app/app.component.html b/Mohem/src/app/app.component.html index eda3347e..eade9f78 100644 --- a/Mohem/src/app/app.component.html +++ b/Mohem/src/app/app.component.html @@ -1,4 +1,4 @@ - + diff --git a/Mohem/src/app/app.component.ts b/Mohem/src/app/app.component.ts index be4978f6..d8a1cdab 100644 --- a/Mohem/src/app/app.component.ts +++ b/Mohem/src/app/app.component.ts @@ -37,6 +37,7 @@ export class AppComponent implements OnInit { deviceToken: string; TeamFlag: string = 'false'; isIOS = false; + lang: string = 'en'; userInfo; public requestGetLoginInfo: { DeviceType: string; @@ -103,10 +104,12 @@ export class AppComponent implements OnInit { private monitUrlChange() { this.router.events.subscribe((val) => { + this.lang = TranslatorService.getCurrentLanguageName(); if (this.router.isActive('/authentication/login', true)) { this.direction = 'ltr'; } else { this.direction = TranslatorService.getCurrentDirection(); + } }); } diff --git a/Mohem/src/app/authentication/login/login.component.scss b/Mohem/src/app/authentication/login/login.component.scss index e2af4992..d74fd8a4 100644 --- a/Mohem/src/app/authentication/login/login.component.scss +++ b/Mohem/src/app/authentication/login/login.component.scss @@ -17,12 +17,13 @@ } .pageTitle { - color: var(--dark); - font-size: 23px; + color: var(--primary); + font-size: 20px; width: 100%; text-align: center; padding: 0px; margin: 0px; + font-weight: 600; } .TxtPlace { @@ -121,17 +122,15 @@ img.centerDiv { } .item-input { - --min-height: 1.0cm !important; + --min-height: 57px !important; --border-radius: 12px; --ion-color-base: white !important; - // --background: color: var(--darkgray) !important; - // background: #7f8c8d !important; - border-radius: 33px; - --border: solid #9999992b !important; - border: solid #9999992b !important; + border-radius: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px; + box-shadow: 0px 1px 5px #0000000F; + color: var(--primary); } .button-login { @@ -191,7 +190,7 @@ img.centerDiv { .last-circle { position: inherit; - background: #65C399 !important; + background: #D5E2E8 !important; border-radius: 50%; height: 166px; width: 140px; diff --git a/Mohem/src/app/authentication/login/login.component.ts b/Mohem/src/app/authentication/login/login.component.ts index a3c7beac..5094a198 100644 --- a/Mohem/src/app/authentication/login/login.component.ts +++ b/Mohem/src/app/authentication/login/login.component.ts @@ -157,7 +157,7 @@ export class LoginComponent implements OnInit, OnDestroy { this.currentLang = TranslatorService.getCurrentLanguageCode(); } this.currentLang = langNumber; - + document.getElementById('lang').lang = this.currentLang == 1 ? 'ar' : 'en'; } public forgetPasswordPage() { diff --git a/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.scss b/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.scss index 4695e731..2c76b3a9 100644 --- a/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.scss +++ b/Mohem/src/app/hmg-common/ui/generic-header/generic-header.component.scss @@ -11,8 +11,8 @@ display: block; margin: 0 auto; max-width: 100%; - width: 50px; - height: 50px; + width: 40px; + height: 40px; position: absolute; border-radius: 50%; } @@ -22,7 +22,7 @@ color: white; font-size: 0.5cm; font-weight: bold; - font-family: WorkSans-Regular; + // font-family: WorkSans-Regular; display: block; text-align: center; line-height: 46px; 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 9c7aef9f..aa13c49f 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 @@ -15,11 +15,12 @@ display: block; width: 100%; position: static; + text-align: center; } .iconBox img { margin: 0px auto 10px; - display: block; + display: inline-block; width: 35px; // max-width: 35%; } 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 c30131db..0fd4bb4f 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 @@ -20,7 +20,7 @@ // max-width: 45%; // padding-bottom: 5px; // padding-top: 5px; - display: block; + display: inline-block; max-width: 67%; padding-bottom: 9px; padding-top: 5px; @@ -35,7 +35,7 @@ font-size: 25px; font-weight: bold; color: black; - text-align: -webkit-auto; + text-align: center; display: block; } } @@ -46,10 +46,10 @@ ion-app[dir="rtl"] .titleBox { .pClass { color: black; - width: 85%; + width: 100%; margin-top: 5px; font-weight: bold; - text-align: -webkit-auto; + text-align: center; display: block; font-size: 14px !important; } diff --git a/Mohem/src/app/home/home.page.ts b/Mohem/src/app/home/home.page.ts index 2a55384d..e4b5374f 100644 --- a/Mohem/src/app/home/home.page.ts +++ b/Mohem/src/app/home/home.page.ts @@ -196,8 +196,8 @@ export class HomePage implements OnInit { spaceBetween: 10 }; this.slideOptsTwo = { - slidesPerView: width > 320 ? 3.5 : 3, - spaceBetween: width > 320 ? 20 : 15 + slidesPerView: width > 320 ? 3.2 : 2.6, + spaceBetween: width > 320 ? 10 : 10 }; this.showStaticServices = true; } diff --git a/Mohem/src/assets/font/Inter-V.ttf b/Mohem/src/assets/font/Inter-V.ttf new file mode 100644 index 00000000..be66f25d Binary files /dev/null and b/Mohem/src/assets/font/Inter-V.ttf differ diff --git a/Mohem/src/assets/font/NotoKufiArabic-Regular-1.ttf b/Mohem/src/assets/font/NotoKufiArabic-Regular-1.ttf new file mode 100644 index 00000000..3c9947bc Binary files /dev/null and b/Mohem/src/assets/font/NotoKufiArabic-Regular-1.ttf differ diff --git a/Mohem/src/assets/font/NotoKufiArabic-Regular.ttf b/Mohem/src/assets/font/NotoKufiArabic-Regular.ttf new file mode 100644 index 00000000..6a2bacbc Binary files /dev/null and b/Mohem/src/assets/font/NotoKufiArabic-Regular.ttf differ diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss index 3ee3ee3d..5d9fc4be 100644 --- a/Mohem/src/theme/styles.scss +++ b/Mohem/src/theme/styles.scss @@ -1,27 +1,48 @@ // $font-family-base: "WorkSans-Regular" !default; body { - :root[dir="rtl"] { + ion-app[lang="en"] { + font-family: var(--fontFamilyBoldEN) !important; + + } + + ion-app[lang="ar"] { font-family: var(--fontFamilyIOSAR) !important; + } - :root[dir="ltr"] { - font-family: var(--fontFamilyMediumEN) !important; +} + +ion-app[lang="en"] { + + input, + textarea, + p, + label, + div, + h1, + h2, + h3, + button, + ion-button { + font-size: 16px; + font-family: var(--fontFamilyBoldEN) !important; } } -input, -textarea, -p, -label, -div { - font-size: 16px; +ion-app[lang="ar"] { - :root[dir="rtl"] { + input, + textarea, + p, + label, + div, + h1, + h2, + h3, + button, + ion-button { font-family: var(--fontFamilyIOSAR) !important; - } - :root[dir="ltr"] { - font-family: var(--fontFamilyLightEN) !important; } } @@ -29,13 +50,14 @@ h1, h2, h3, button { - :root[dir="rtl"] { - font-family: var(--fontFamilyIOSAR) !important; - } + // ion-app[lang="en"] { + // font-family: var(--fontFamilyBoldEN) !important; + // } - :root[dir="ltr"] { - font-family: var(--fontFamilyMediumEN) !important; - } + // ion-app[lang="ar"] { + // font-family: var(--fontFamilyIOSAR) !important; + + // } } @@ -272,44 +294,57 @@ p.text-caps { text-transform: uppercase; } -.boldTxt, -p.boldTxt, -.boldTxt>label { - :root[dir="ltr"] { +ion-app[lang="en"] { + + .boldTxt, + p.boldTxt, + .boldTxt>label { + font-family: var(--fontFamilyBoldEN) !important; } +} - :root[dir="rtl"] { +ion-app[lang="ar"] { + + .boldTxt, + p.boldTxt, + .boldTxt>label { font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } -.boldTxtNav, -p.boldTxtNav, -.boldTxtNav>label { - color: var(--dark) !important; +// .boldTxtNav, +// p.boldTxtNav, +// .boldTxtNav>label { +// color: var(--dark) !important; - :root[dir="ltr"] { - font-family: var(--fontFamilyBoldEN) !important; - } +// ion-app[lang="en"] { +// font-family: var(--fontFamilyBoldEN) !important; +// } - :root[dir="rtl"] { - font-family: var(--fontFamilyIOSAR) !important; - font-weight: bold; - } -} +// ion-app[lang="ar"] { +// font-family: var(--fontFamilyIOSAR) !important; +// font-weight: bold; +// } -ion-label.boldTxtNav.label.label-md, -ion-label.boldTxtNav.label.label-ios { - // font-weight: bold; - color: var(--dark); +// } +ion-app[lang="en"] { - :root[dir="ltr"] { - font-family: var(--fontFamilySemiBoldEN) !important; + ion-label.boldTxtNav.label.label-md, + ion-label.boldTxtNav.label.label-ios { + // font-weight: bold; + color: var(--dark); + + + font-family: var(--fontFamilyBoldEN) !important; } +} - :root[dir="rtl"] { +ion-app[lang="ar"] { + + ion-label.boldTxtNav.label.label-md, + ion-label.boldTxtNav.label.label-ios { font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } @@ -656,14 +691,15 @@ ion-col.colBold>label { padding-left: 10px !important; margin: 10px auto; - :root[dir="ltr"] { - font-family: var(--fontFamilySemiBoldEN) !important; - } + // ion-app[lang="en"] { + // font-family: var(--fontFamilyBoldEN) !important; + // } + + // ion-app[lang="ar"] { + // font-family: var(--fontFamilyIOSAR) !important; + // font-weight: bold; + // } - :root[dir="rtl"] { - font-family: var(--fontFamilyIOSAR) !important; - font-weight: bold; - } } @@ -688,15 +724,16 @@ ion-col.colBold>label { margin: 10px auto; margin-right: 12px !important; - :root[dir="ltr"] { - font-family: var(--fontFamilySemiBoldEN) !important; + ion-app[lang="en"] { + font-family: var(--fontFamilyBoldEN) !important; } - :root[dir="rtl"] { + ion-app[lang="ar"] { font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } + } img.flipImg { @@ -954,7 +991,7 @@ div.daynamicForm-DateTime.disabled { /************footer****************/ ion-footer { padding: 15px 0px; - background-color: var(--light) !important; + background-color: var(--ion-background) !important; border: 0px !important; box-shadow: none !important; -webkit-box-shadow: none; @@ -1001,14 +1038,15 @@ ion-footer { text-align: center; color: var(--darkgray); - :root[dir="ltr"] { - font-family: var(--fontFamilySemiBoldEN); + ion-app[lang="en"] { + font-family: var(--fontFamilyBoldEN) !important; } - :root[dir="rtl"] { - font-family: var(--fontFamilyIOSAR); + ion-app[lang="ar"] { + font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } + } .cusprogressbar li:before { @@ -1850,4 +1888,8 @@ ion-app[dir="rtl"] { ion-menu-button { display: none !important; +} + +ion-content { + --background: var(--ion-background); } \ No newline at end of file diff --git a/Mohem/src/theme/variables.scss b/Mohem/src/theme/variables.scss index f21a8bb8..355697a8 100644 --- a/Mohem/src/theme/variables.scss +++ b/Mohem/src/theme/variables.scss @@ -68,24 +68,34 @@ src: url('../assets/font/Poppins/Poppins-Regular.ttf'); } +@font-face { + font-family: Inter; + src: url('../assets/font/Inter-V.ttf'); +} + +@font-face { + font-family: Kufi; + src: url('../assets/font/NotoKufiArabic-Regular-1.ttf'); +} + :root { - --ion-font-family: 'Poppins'; + --ion-font-family: 'Inter'; --break-small: 450px; --break-big: 565px; //$break-large: 1200px; - --fontFamilyLightEN: 'Poppins'; - --ontFamilyLightAR: 'GE_SS_Two_Light'; - --fontFamilyRegularEN: 'Poppins'; - --fontFamilyRegularAR: 'GE_SS_TWO_MEDIUM'; - --fontFamilyMediumEN: 'Poppins-Regular'; - --fontFamilyMediumAR: 'GE_SS_TWO_MEDIUM'; - --fontFamilyBoldEN: 'Poppins-Bold'; - --fontFamilyBoldAR: 'GE_SS_Two_Bold'; - --fontFamilySemiBoldEN: 'Poppins-Bold'; - --fontFamilySemiBoldAR: 'GE_SS_Two_Bold'; - --fontFamilyIOSAR: -apple-system, "Helvetica Neue", "Roboto", sans-serif; - --fontFamilyAndroidAR: "Roboto", "Helvetica Neue", sans-serif; - --primary: #3ac1f1; + --fontFamilyLightEN: 'Inter'; + --ontFamilyLightAR: 'Kufi'; + --fontFamilyRegularEN: 'Inter'; + --fontFamilyRegularAR: 'Kufi'; + --fontFamilyMediumEN: 'Inter'; + --fontFamilyMediumAR: 'Kufi'; + --fontFamilyBoldEN: 'Inter'; + --fontFamilyBoldAR: 'Kufi'; + --fontFamilySemiBoldEN: 'Inter'; + --fontFamilySemiBoldAR: 'Kufi'; + --fontFamilyIOSAR: 'Kufi'; + --fontFamilyAndroidAR: 'Kufi'; + --primary: #004D71; --secondary: #19a163; --danger: #f53d3d; --customnavy: #44A7A1; @@ -108,6 +118,7 @@ --newred: #cb3232; --fontFamilyPoppins-SemiBold: 'Poppins-SemiBold'; --fontFamilyPoppins-Medium: 'Poppins-Medium'; + --ion-background: #F6F6F7; // $font-family-base: $fontFamilyMediumEN !default; // $font-family-ios-base: $fontFamilyMediumEN !default; // $font-family-md-base:$fontFamilyMediumEN !default;