Update connector icons to support dark theme

openchargemap · Jul 30, 2024 · e6ac06a · e6ac06a
1 parent 2549241
commit e6ac06a
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 160 deletions.
diff --git a/src/app/components/equipment-details/equipment-details.css b/src/app/components/equipment-details/equipment-details.css
@@ -0,0 +1,10 @@
+.connector-icon {
+    mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    width: 64px;
+    height: 64px;
+    background-color: currentColor;
+    mask-image: none;
+}
diff --git a/src/app/components/equipment-details/equipment-details.html b/src/app/components/equipment-details/equipment-details.html
@@ -5,7 +5,7 @@
       <ion-row>
         <ion-col size="3">
 
-          <img [src]="getConnectorTypeIcon(i.ConnectionTypeID)" style="max-width: 64px;background-color:#ffffffad">
+          <div class="connector-icon" [style.mask-image]="'url(' + getConnectorTypeIcon(i.ConnectionTypeID) +')'"></div>
           <ion-badge color="primary" *ngIf="i.Quantity">{{i.Quantity}} x</ion-badge>
           <div class="info">{{i.StatusType?.Title}}</div>
         </ion-col>

diff --git a/src/assets/images/icons/connectors/Type1_CCS.svg b/src/assets/images/icons/connectors/Type1_CCS.svg