chore: replace all svgs with pngs (#1779)

* Revert "chore: replace all pngs with svgs now that we've moved to catalyst (#1750)"

This reverts commit 0e3e38b.

* Install latest `node-gyp` version that fixes issue on Python 3.12.

package.json

@@ -122,7 +122,7 @@
     "karma-webpack": "^5.0.0",
     "minimist": "^1.2.6",
     "node-fetch": "^3.3.0",
-    "node-gyp": "^9.4.0",
+    "node-gyp": "^10.0.1",
     "outline-i18n": "Jigsaw-Code/outline-i18n#v0.0.7",
     "postcss": "^7.0.39",
     "postcss-rtl": "^1.7.3",

src/www/ui_components/about-view.js

@@ -109,7 +109,7 @@ Polymer({
       ></div>
       <div id="footer">
         <a href="https://jigsaw.google.com">
-          <img id="jigsaw-logo" src$="[[rootPath]]assets/jigsaw-logo.svg" />
+          <img id="jigsaw-logo" src$="[[rootPath]]assets/jigsaw-logo.png" />
         </a>
       </div>
     </div>

src/www/ui_components/app-root.js

@@ -105,7 +105,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
           margin-top: 2px;
         }
 
-        app-toolbar paper-icon-button {
+        app-toolbar paper-button {
           /* make the ink color (used for tap animations) actually visible */
           --paper-icon-button-ink-color: #eff;
           padding: var(--app-toolbar-button-gutter);
@@ -133,7 +133,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         }
 
         /* rtl:begin:ignore */
-        #drawer-nav paper-icon-item {
+        #drawer-nav paper-item {
           cursor: pointer;
           font-size: 16px;
           --paper-item-selected: {
@@ -143,8 +143,8 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
           }
         }
 
-        #drawer-nav paper-icon-item:focus::before,
-        #drawer-nav paper-icon-item:focus::after {
+        #drawer-nav paper-item:focus::before,
+        #drawer-nav paper-item:focus::after {
           color: var(--medium-green);
           background-color: var(--light-gray);
         }
@@ -175,16 +175,21 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
           border-width: 0px;
         }
 
-        #drawer-nav paper-icon-item .item-label {
+        #drawer-nav paper-item .item-label {
           float: left;
         }
 
-        #drawer-nav paper-icon-item:not(.iron-selected) {
+        #drawer-nav paper-item:not(.iron-selected) {
           opacity: 0.8;
         }
 
         #drawer-nav paper-item {
           min-height: 32px;
+          text-transform: capitalize;
+        }
+
+        .first-menu-item {
+          margin-top: 12px;
         }
 
         .last-menu-item {
@@ -197,13 +202,25 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         }
 
         paper-item > :first-child {
-          color: rgba(0, 0, 0, 0.54);
-          font-size: 14px;
-          text-decoration: none;
-          width: 100%;
           cursor: pointer;
         }
 
+        paper-item > img {
+          height: 24px;
+          width: 24px;
+          margin-right: 10px;
+        }
+
+        paper-item > a {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        paper-button {
+          min-width: 0;
+          margin: 0;
+        }
+
         paper-toast {
           --paper-toast-background-color: var(--dark-green);
           align-items: center;
@@ -223,7 +240,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
           :host {
             --app-drawer-width: 250px;
           }
-          #drawer-nav paper-icon-item {
+          #drawer-nav paper-item {
             min-height: 42px;
           }
         }
@@ -250,30 +267,33 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         <app-header slot="header" fixed="">
           <app-toolbar>
             <div id="app-toolbar-left">
-              <paper-icon-button
+              <paper-button
                 id="menuBtn"
                 hidden$="[[shouldShowBackButton]]"
-                icon="menu"
                 on-tap="openDrawer"
-              ></paper-icon-button>
-              <paper-icon-button
+              >
+                <img src$="[[rootPath]]assets/icons/menu.png" alt="menu" />
+              </paper-button>
+              <paper-button
                 id="backBtn"
                 hidden$="[[!shouldShowBackButton]]"
-                icon="arrow-back"
                 on-tap="_goBack"
-              ></paper-icon-button>
+              >
+                <img src$="[[rootPath]]assets/icons/back.png" alt="back" />
+              </paper-button>
             </div>
             <div main-title="" class$="[[page]]">
-              <img src$="[[rootPath]]assets/outline-client-logo.svg" hidden$="[[!shouldShowAppLogo]]" />
+              <img src$="[[rootPath]]assets/outline-client-logo.png" hidden$="[[!shouldShowAppLogo]]" />
               <div hidden$="[[shouldShowAppLogo]]">[[localize(pageTitleKey)]]</div>
             </div>
             <div id="app-toolbar-right">
-              <paper-icon-button
+              <paper-button
                 id="addBtn"
-                icon="add"
                 on-tap="promptAddServer"
                 hidden$="[[!shouldShowAddButton]]"
-              ></paper-icon-button>
+              >
+                <img src$="[[rootPath]]assets/icons/add.png" alt="add" />
+              </paper-button>
             </div>
           </app-toolbar>
         </app-header>
@@ -361,39 +381,39 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
           </div>
           <hr class="nav-hr" />
           <paper-listbox id="drawer-nav" selected="{{routeData.page}}" attr-for-selected="name" on-tap="closeDrawer">
-            <paper-icon-item name="servers">
-              <iron-icon icon="outline-icons:outline" slot="item-icon"></iron-icon>
+            <paper-item name="servers" class="first-menu-item">
+              <img src$="[[rootPath]]assets/icons/outline.png" alt="outline"  />
               <span class="item-label">[[localize('servers-menu-item')]]</span>
-            </paper-icon-item>
+            </paper-item>
             <template is="dom-if" if="{{contactViewFeatureFlag}}">
-              <paper-icon-item name="contact">
-                <iron-icon id="feedback-icon" icon="feedback" slot="item-icon"></iron-icon>
+              <paper-item name="contact">
+                <img src$="[[rootPath]]assets/icons/contact.png" alt="contact"  />
                 [[localize('contact-page-title')]]
-              </paper-icon-item>
+              </paper-item>
             </template>
             <template is="dom-if" if="{{!contactViewFeatureFlag}}">
-              <paper-icon-item name="feedback">
-                <iron-icon id="feedback-icon" icon="feedback" slot="item-icon"></iron-icon>
+              <paper-item name="feedback">
+                <img src$="[[rootPath]]assets/icons/feedback.png" alt="feedback"  />
                 [[localize('feedback-page-title')]]
-              </paper-icon-item>
+              </paper-item>
             </template>
-            <paper-icon-item name="about">
-              <iron-icon icon="info" slot="item-icon"></iron-icon>
+            <paper-item name="about">
+              <img src$="[[rootPath]]assets/icons/about.png" alt="about"  />
               [[localize('about-page-title')]]
-            </paper-icon-item>
-            <paper-icon-item name="help">
+            </paper-item>
+            <paper-item name="help">
               <a href="https://support.getoutline.org" id="helpAnchor" hidden=""></a>
-              <iron-icon icon="help" slot="item-icon"></iron-icon>
+              <img src$="[[rootPath]]assets/icons/help.png" alt="help"  />
               [[localize('help-page-title')]]
-            </paper-icon-item>
-            <paper-icon-item name="language" class$="[[_computeIsLastVisibleMenuItem(shouldShowQuitButton)]]">
-              <iron-icon icon="language" slot="item-icon"></iron-icon>
+            </paper-item>
+            <paper-item name="language" class$="[[_computeIsLastVisibleMenuItem(shouldShowQuitButton)]]">
+              <img src$="[[rootPath]]assets/icons/change_language.png" alt="change language"  />
               [[localize('change-language-page-title')]]
-            </paper-icon-item>
-            <paper-icon-item name="quit" class="last-menu-item" hidden$="[[!shouldShowQuitButton]]">
-              <iron-icon icon="cancel" slot="item-icon"></iron-icon>
+            </paper-item>
+            <paper-item name="quit" class="last-menu-item" hidden$="[[!shouldShowQuitButton]]">
+              <img src$="[[rootPath]]assets/icons/quit.png" alt="quit" />
               [[localize('quit')]]
-            </paper-icon-item>
+            </paper-item>
             <paper-item class="border-top">
               <a href="https://www.google.com/policies/privacy/">[[localize('privacy')]]</a>
             </paper-item>