#449972 - Changing styles

Author: ppelgmv

src/app/shared/components/footer/footer.component.scss

@@ -1,19 +1,24 @@
 /* Custom FOOTER component styles */
 
 .footer {
-  background-color: #303030;
   padding: 10px 20px;
-  border-top: solid 1px rgba(255, 255, 255, 0.12);
+  border-width: 1px 0px 1px 0px;
+  border-style: solid;
+  border-color: var(--Grey-500, #E6E6E6);
 
   &__company {
-    border-top: solid 1px rgba(255, 255, 255, 0.12);
+    border-top: 2px solid#E6E6E6;
     padding: 10px 0;
     font-family: "Open Sans", sans-serif;
+    color: var(--secondary-600);
+    text-align: center;
     font-size: 12px;
-    color: white;
-    font-weight: 500;
+    font-weight: 600;
+    line-height: 16.34px;
     text-align: center;
-    background-color: #303030;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+
     p {
       margin: 0;
     }
@@ -48,6 +53,7 @@
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 15px;
     }
+
     img {
       max-width: 150px;
     }
@@ -57,6 +63,7 @@
 @media (max-width: 1400px) {
   .footer {
     padding: 15px;
+
     &__logos {
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 10px;
@@ -67,6 +74,7 @@
 @media (max-width: 1200px) {
   .footer {
     padding: 10px;
+
     &__logos {
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 10px;

src/app/shared/components/navigation/navigation.component.html

@@ -36,7 +36,7 @@
         <span>{{ titleService.getTitle() }}</span>
         <div class="logout">
           <span (click)="logout()">
-            <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
+            <mat-icon aria-label="Side nav toggle icon">logout</mat-icon>
             <div>Log out</div>
           </span>
         </div>

src/app/shared/components/navigation/navigation.component.scss

@@ -6,18 +6,24 @@
 
 .sidenav {
   width: 300px;
-  background-color: #202020;
+  box-shadow: 0.2em 0em 0.5em rgba(0, 0, 0, 0.1);
 }
 
 .sidenav .mat-toolbar {
   background: inherit;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 27.24px;
+  color: var(--secondary-600);
 }
 
 .mat-toolbar.mat-primary {
   position: sticky;
   top: 0;
   z-index: 2;
+  background: var(--brand-500);
 }
+
 .logout {
   width: 100%;
   text-align: right;
@@ -28,19 +34,25 @@
 
 .logout span {
   display: flex;
-  align-items: center; /* Alinea verticalmente el ícono y el texto */
-  cursor: pointer; /* Cursor tipo pointer solo para el span contenedor */
-  transition: color 0.3s; /* Transición suave para el cambio de color */
+  align-items: center;
+  /* Alinea verticalmente el ícono y el texto */
+  cursor: pointer;
+  /* Cursor tipo pointer solo para el span contenedor */
+  transition: color 0.3s;
+  /* Transición suave para el cambio de color */
 }
 
 .logout span:hover {
-  color: #ffab40; /* Cambia el color de ambos al hacer hover */
+  color: #ffab40;
+  /* Cambia el color de ambos al hacer hover */
 }
 
 .logout mat-icon {
-  font-size: 24px;
-  margin-right: 3px;
+  font-size: 18px;
+  margin-right: 10px;
+  align-content: center;
 }
+
 .container {
   display: flex;
   flex-direction: column;
@@ -61,4 +73,18 @@ mat-sidenav-content {
 
 mat-toolbar {
   min-height: 64px;
+  font-size: 16px;
+}
+
+:host ::ng-deep .mdc-list-item__primary-text,
+:host ::ng-deep mat-nav-list mat-icon{
+  color: var(--secondary-600) !important;
+}
+
+:host ::ng-deep .mdc-list-item:focus::before {
+  background-color: unset;
+}
+
+:host ::ng-deep .mdc-list-item:focus {
+  background-color: var(--grey-400);
 }

src/app/shared/components/spinner/spinner.component.scss

@@ -14,7 +14,7 @@
 
 .spinner {
   border: 8px solid #f3f3f3;
-  border-top: 8px solid #03a9f4;
+  border-top: 8px solid #EF7011;
   border-radius: 50%;
   width: 60px;
   height: 60px;

src/assets/config/app.config.json

@@ -5,7 +5,7 @@
   "participantId": "connector-c1",
   "storageAccount": "company2assets",
   "storageExplorerLinkTemplate": "storageexplorer://v=1",
-  "theme": "theme-2",
+  "theme": "",
   "service": {
     "asset": {
       "baseUrl": "/v3/assets",

src/assets/config/app.config.template.json

@@ -5,7 +5,7 @@
   "participantId": "$PARTICIPANT_ID",
   "storageAccount": "$STORAGE_ACCOUNT",
   "storageExplorerLinkTemplate": "$STORAGE_LINK_TEMPLATE",
-  "theme": "$APP_THEME",
+  "theme": "",
   "service": {
     "asset": {
       "baseUrl": "/v3/assets",

src/environments/environment.ts

@@ -17,7 +17,7 @@ export const environment = {
     participantId: "connector-c1",
     storageAccount: "company2assets",
     storageExplorerLinkTemplate: "storageexplorer://v=1",
-    theme: "theme-2",
+    theme: "",
     service: {
       asset: {
         baseUrl: '/v3/assets',

src/styles.scss

@@ -1,5 +1,22 @@
 @import "./theme.scss";
 
+:root {
+  /* Mode 1 */
+  /* color */
+  --white: #ffffff;
+  --brand-500: #ef7011;
+  --grey-400: #eeeeee;
+  --grey-500: #e6e6e6;
+  --grey-600: #d9d8d8;
+  --grey-700: #b3b3b3;
+  --grey-800: #a3a3a3;
+  --secondary-500: #3c6b85;
+  --secondary-600: #203f57;
+  --secondary-700: #212529;
+  --secondary-red-500: #f44336;
+  --tertiary-500: #4dafba;
+}
+
 /* global styles */
 
 html,
@@ -131,9 +148,6 @@ mat-card:not(.dialog-card) {
   font-size: 14px;
   letter-spacing: 0.04em;
 }
-.items-center {
-  align-items: center;
-}
 
 .gap-4 {
   gap: 1rem;
@@ -155,9 +169,6 @@ mat-card:not(.dialog-card) {
 .border-solid {
   border-style: solid;
 }
-.border-l-2 {
-  border-left-width: 2px;
-}
 .border-0 {
   border-width: 0px;
 }
@@ -193,6 +204,13 @@ mat-card:not(.dialog-card) {
 .w-2 {
   width: 0.5rem;
 }
+.border-l-2 {
+  border-left-width: 2px;
+}
+.items-center {
+  align-items: center;
+}
+
 
 app-json-dialog {
   display: block;

src/theme.scss

@@ -13,7 +13,7 @@ $theming-material-components-typography: mat.define-typography-config(
   $font-family: "Open Sans",
 );
 
-$theme1: mat-dark-theme(
+$theme1: mat-light-theme(
   (
     color: (
       primary: mat-palette($mat-teal),
@@ -38,7 +38,7 @@ $grey-700: #707070;
 $grey-800: #808080;
 $grey-900: #909090;
 
-$theme2: mat-dark-theme(
+$theme2: mat-light-theme(
   (
     color: (
       primary: mat-palette($mat-light-blue),
@@ -50,7 +50,7 @@ $theme2: mat-dark-theme(
   )
 );
 
-$theme3: mat-dark-theme(
+$theme3: mat-light-theme(
   (
     color: (
       primary: mat-palette($mat-light-green),
@@ -122,7 +122,6 @@ $theme3: mat-dark-theme(
   .mat-expansion-panel-header[_ngcontent-ng-c808659378]:hover:not(
     [aria-disabled="true"]
   ) {
-  background: rgb(255 171 64 / 20%);
   transition: 0.2s background;
 }