Fine tuning app icon #690 #587

src/backend/routes/PublicRouter.ts

@@ -141,7 +141,7 @@ export class PublicRouter {
         ],
         start_url:
           Config.Server.publicUrl === '' ? '.' : Config.Server.publicUrl,
-        background_color: '#212529',
+        background_color: '#000000',
         theme_color: '#000000',
       });
     });
@@ -163,27 +163,28 @@ export class PublicRouter {
       vBs[2] = icon_size;
       vBs[3] = icon_size;
 
+      const getCanvasSize = () => Math.max(vBs[2], vBs[3]);
+
       const addPadding = (p: number) => {
         if (p <= 0) {
           return;
         }
-        const size = Math.max(vBs[2], vBs[3]);
+        const size = getCanvasSize();
         vBs[0] -= size * (p / 2);
         vBs[1] -= size * (p / 2);
         vBs[2] += size * (p);
         vBs[3] += size * (p);
       };
 
-      const circle_size = icon_size * 1.38;
       addPadding(0.38);
       addPadding(paddingPercent);
 
 
-      const canvasMid = {
-        x: vBs[2] / 2 + vBs[0],
-        y: vBs[3] / 2 + vBs[1],
+      const canvasSize = getCanvasSize();
+      const canvasStart = {
+        x: vBs[0],
+        y: vBs[1]
       };
-
       return '<svg ' +
         ' xmlns="http://www.w3.org/2000/svg"' +
         ' viewBox="' + vBs.join(' ') + '">' +
@@ -191,14 +192,14 @@ export class PublicRouter {
             '    path, circle {' +
             '      fill: black;' +
             '    }' +
-                  '   circle.bg {' +
+            '   circle.bg,rect.bg {' +
             '    fill: white;' +
             '   }' +
             '    @media (prefers-color-scheme: dark) {' +
             '      path, circle {' +
             '        fill: white;' +
             '      }' +
-                  '   circle.bg {' +
+            '   circle.bg,rect.bg {' +
             '    fill: black;' +
             '   }' +
             '    }' +
@@ -213,11 +214,11 @@ export class PublicRouter {
               '   }' +
               '  </style>')
             : '<style>' +
-                  '   circle.bg {' +
+            '   circle.bg,rect.bg {' +
             '    fill: white;' +
             '   }' +
             '  </style>')) +
-          '<circle class="bg" cy="' + (canvasMid.y) + '" cx="' + (canvasMid.x) + '"  r="' + (circle_size / 2) + '"></circle>' +
+        `<rect class="bg" x="${canvasStart.x}" y="${canvasStart.y}" width="${canvasSize}" height="${canvasSize}" rx="15" />` +
         Config.Server.svgIcon.items + '</svg>';
     };
 
@@ -232,7 +233,7 @@ export class PublicRouter {
       res.set('Cache-control', 'public, max-age=31536000');
       res.header('Content-Type', 'image/svg+xml');
       // Use 40% padding: https://w3c.github.io/manifest/#icon-masks
-      res.send(getIcon('auto', 0.4));
+      res.send(getIcon('auto', 0.3));
     });
 
 

src/frontend/app/ui/frame/frame.component.html

@@ -7,7 +7,7 @@
     <div class="container-fluid">
       <a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']"
          [queryParams]="queryService.getParams()">
-        <app-icon class="d-inline-block align-top" [width]="30" [height]="30"></app-icon>
+        <app-icon class="d-inline-block align-top me-1" [width]="30" [height]="30"></app-icon>
         <strong class="d-none d-lg-inline-block">{{title}}</strong>
       </a>
       <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">