AO-874: changing the logo, background color and name (#149)

* AO-874: Changed names siglofa to sigeca and login background and header color for test enviroment * AO-874: Changed logos and auth modal body position
OpenLMIS-Angola · Jul 12, 2024 · ae9b1d5 · ae9b1d5
1 parent f47a8c7
commit ae9b1d5
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 4 deletions.
diff --git a/config.json b/config.json
@@ -11,8 +11,8 @@
     "/openlmis-offline-ui"
   ],
   "REPORTING_SERVICES": "angola",
-  "applicationLoadingMessage": "Iniciando SIGLOFA",
-  "applicationTitle": "SIGLOFA",
+  "applicationLoadingMessage": "Iniciando SIGECA",
+  "applicationTitle": "SIGECA",
   "defaultLanguage": "pt",
   "showRequisitionLessOrder": "true"
 }
diff --git a/src/branding-angola/logo-header.png b/src/branding-angola/logo-header.png
diff --git a/src/branding-angola/logo.png b/src/branding-angola/logo.png
diff --git a/src/openlmis-auth/_auth-modal.scss b/src/openlmis-auth/_auth-modal.scss
@@ -0,0 +1,95 @@
+.auth-modal {
+    background-color: $dark-gray;
+
+    .modal-content {
+        background-image: linear-gradient(to bottom, $white 0%, $white 48%, $light-gray 100%);
+    }
+
+    .modal-dialog {
+        margin-top: 15%;
+        @media screen and (min-width: $res-md) {
+            width: 700px;
+        }
+        @media screen and (max-width: $res-md) {
+            margin-right: 3%;
+            margin-left: 3%;
+        }
+        max-width: 700px;
+    }
+
+    .modal-header {
+        align-items: center;
+        background-image: linear-gradient(to bottom, $white 30%, $light-gray 100%);
+        border-bottom: 1px solid $light-gray;
+        border-radius: $border-radius $border-radius 0 0;
+        display: flex;
+        padding: 0.5em 1em !important;
+        overflow: hidden;
+
+        & > h1 {
+            margin-right: auto;
+            word-break: normal !important;
+        }
+
+        button {
+            margin: 0px 1em;
+            min-width: 92px;
+            @media screen and (max-width: $res-xs) {
+                display: flex;
+                min-width: 12px;
+            }
+        }
+    }
+
+    .modal-body {
+        background-image: url("../assets/common/openlmis-logo-stacked.svg");
+        background-size: 40% auto;
+        background-position: 2em 45%;
+        background-repeat: no-repeat;
+        @media screen and (max-width: $res-sm) {
+            background-size: 30% auto;
+        }
+        // AO-874: Changed auth modal body position
+        padding: 20% 25% 1em 25% !important;
+        // AO-874: ends here
+        & > .form-desc,
+        & > form > fieldset {
+            width: 100%;
+        }
+
+        & > form > .alert {
+            flex: initial;
+        }
+        & > form > .input-control{
+            width: 100%;
+        }
+        .form-group .input-control{
+            @media screen and (max-width: $res-sm) {
+                width: 100%;
+            }
+        }
+
+        .button-group {
+            @media screen and (max-width: $res-sm) {
+                overflow: hidden;
+                display: grid;
+            }
+            @media screen and (max-width: $res-xs) {
+                position: relative;
+                right: 0px;
+                bottom: 0px;
+            }
+        }
+    }
+
+    .modal-footer {
+        border-top: none;
+        text-align: right;
+        padding: 0 !important;
+        margin: 0;
+        display: flex;
+        justify-content: flex-end;
+
+        color: $gray;
+    }
+}
diff --git a/src/openlmis-header/header.html b/src/openlmis-header/header.html
@@ -1,7 +1,7 @@
 <!-- ANGOLASUP-686: Visually distinguish between Test and Production Servers -->
 <div ng-controller="HeaderController as vm" 
     class="openlmis-header" ng-class="{'is-offline':isOffline}" 
-    ng-style="{'background': vm.isProdDomain ? 'linear-gradient(to top, #e4e4e4 0%, white 80%, #ffffff 100%)' : 'linear-gradient(to top, #33bb33 0%, #fff 80%, #fff 100%)'}" offline>
+    ng-style="{'background': vm.isProdDomain ? 'linear-gradient(to top, #e4e4e4 0%, white 80%, #ffffff 100%)' : 'linear-gradient(to top, #012853 0%, #fff 80%, #fff 100%)'}" offline>
 <!-- ANGOLASUP-686: ends here -->
     <h1 class="title">{{'openlmisHeader.appHeader' | message}}</h1>
     <div class="openlmis-header-actions">

diff --git a/src/openlmis-header/user.html b/src/openlmis-header/user.html
@@ -0,0 +1,11 @@
+<div class="user-info">
+    <span>{{ 'openlmisHeader.loggedAs' | message }}</span>&nbsp;
+    <a ui-sref="openlmis.profile.basicInformation" ng-style="{'color': vm.isProdDomain ? '#3a95bc' : '#ffffff'}">
+        {{user}}
+    </a>
+    <span ng-show="hasPermission('VIEW_HELP')">|
+        <a href="/pages/help/helpContent/index.html#/viewDashboard">
+            {{ 'openlmisHeader.help' | message }}
+        </a>
+    </span>
+</div>
diff --git a/src/openlmis-login/login-form.html b/src/openlmis-login/login-form.html
@@ -1,7 +1,7 @@
 <!-- ANGOLASUP-686: Visually distinguish between Test and Production Servers -->
 <div class="modal auth-modal" tabindex="-1" 
     role="dialog" aria-hidden="true" 
-    ng-style="{'background-color': vm.isProdDomain ? '#333333' : '#33bb33'}">
+    ng-style="{'background-color': vm.isProdDomain ? '#333333' : '#012853'}">
 <!-- ANGOLASUP-686: ends here -->
     <div class="modal-dialog">
         <div class="modal-content">