chore(client): update server card to use @material/web

.storybook/preview-head.html

@@ -16,25 +16,6 @@
 
 <link href="../client/src/www/style.css" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
-
-
 <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Rounded" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Sharp" rel="stylesheet">
-
-<style>
-  :root {
-    /* TODO(daniellacosse): unified system for managing css variables */
-    --primary-green: #00bfa5;
-    --background-color: #263238;
-    --background-contrast-color: #2e3a3f;
-    --light-gray: rgba(255, 255, 255, 0.87);
-    --medium-gray: rgba(255, 255, 255, 0.54);
-    --dark-gray: rgba(0, 0, 0, 0.87);
-    --border-color: rgba(255, 255, 255, 0.12);
-
-    --server-stat-card-background: var(--background-contrast-color);
-    --server-stat-card-foreground: var(--medium-gray);
-    --server-stat-card-highlight: #ffffff;
-  }
-</style>

.storybook/preview.js

@@ -1,4 +1,4 @@
 /**
  * Copyright 2024 The Outline Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import '@material/web/all.js';
+
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
   parameters: {

client/src/www/ui_components/app-root.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */
 
+import '@material/web/all.js';
 import '@polymer/polymer/polymer-legacy.js';
 import '@polymer/polymer/lib/legacy/polymer.dom.js';
 import '@polymer/app-layout/app-drawer/app-drawer.js';

client/src/www/views/language_view/index.ts

@@ -17,7 +17,6 @@
 import {LitElement, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import '@material/web/all.js';
 
 @customElement('language-view')
 export class LanguageView extends LitElement {

client/src/www/views/servers_view/server_list/index.ts

@@ -31,12 +31,11 @@ export class ServerList extends LitElement {
         width: 100%;
       }
 
-      /* TODO(daniellacosse): Remove the hard-coded heights. */
       server-row-card {
         margin: 0 auto 8px auto;
-        height: 130px;
       }
 
+      /* TODO(daniellacosse): Remove the hard-coded heights. */
       server-hero-card {
         height: 400px;
       }
@@ -48,11 +47,18 @@ export class ServerList extends LitElement {
 
   render() {
     if (this.hasSingleServer) {
-      return html`<server-hero-card .localize=${this.localize} .server=${this.servers[0]}></server-hero-card>`;
+      return html`<server-hero-card
+        .localize=${this.localize}
+        .server=${this.servers[0]}
+      ></server-hero-card>`;
     } else {
       return html`
         ${this.servers.map(
-          server => html`<server-row-card .localize=${this.localize} .server=${server}></server-row-card>`
+          server =>
+            html`<server-row-card
+              .localize=${this.localize}
+              .server=${server}
+            ></server-row-card>`
         )}
       `;
     }

client/src/www/views/servers_view/server_list_item/index.ts

@@ -11,7 +11,7 @@
   limitations under the License.
 */
 
-import {Menu} from '@material/mwc-menu';
+import type {Menu} from '@material/web/menu/menu';
 
 import {type Localizer} from '@outline/infrastructure/i18n';
 import {Ref} from 'lit/directives/ref';

client/src/www/views/servers_view/server_list_item/server_card/index.ts

@@ -11,10 +11,7 @@
   limitations under the License.
 */
 
-import {Menu} from '@material/mwc-menu';
-import '@material/mwc-button';
-import '@material/mwc-icon-button';
-import '@material/mwc-menu';
+import type {Menu} from '@material/web/menu/menu';
 
 import {Localizer} from '@outline/infrastructure/i18n';
 import {css, html, LitElement} from 'lit';
@@ -59,7 +56,6 @@ const sharedCSS = css`
     display: grid;
     gap: var(--outline-slim-gutter);
     grid-gap: var(--outline-slim-gutter);
-    height: 100%;
     overflow: hidden;
     width: 100%;
   }
@@ -69,7 +65,6 @@ const sharedCSS = css`
     color: var(--outline-text-color);
     gap: var(--outline-slim-gutter);
     grid-area: metadata;
-    height: 100%;
     display: flex;
     align-items: center;
   }
@@ -109,6 +104,10 @@ const sharedCSS = css`
     word-break: break-all;
   }
 
+  .card-menu {
+    --md-menu-container-color: var(--outline-card-background);
+  }
+
   .card-menu-button {
     align-self: start;
     grid-area: menu;
@@ -128,6 +127,12 @@ const sharedCSS = css`
     color: var(--outline-error);
     margin: 0 var(--outline-slim-gutter);
   }
+
+  .card-footer-button {
+    --md-sys-color-primary: var(--outline-primary);
+
+    text-transform: uppercase;
+  }
 `;
 
 // TODO(daniellacosse): wrap components in a closure to avoid unnecessary work
@@ -143,7 +148,9 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
   const messages = {
     serverName: server.name,
     error: hasErrorMessage ? localize(server.errorMessageId) : '',
-    connectButton: localize(isConnectedState ? 'disconnect-button-label' : 'connect-button-label'),
+    connectButton: localize(
+      isConnectedState ? 'disconnect-button-label' : 'connect-button-label'
+    ),
   };
 
   const dispatchers = {
@@ -157,16 +164,25 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
       ),
     forget: () =>
       element.dispatchEvent(
-        new CustomEvent(ServerListItemEvent.FORGET, {detail: {serverId: server.id}, bubbles: true, composed: true})
-      ),
-    connectToggle: () =>
-      element.dispatchEvent(
-        new CustomEvent(isConnectedState ? ServerListItemEvent.DISCONNECT : ServerListItemEvent.CONNECT, {
+        new CustomEvent(ServerListItemEvent.FORGET, {
           detail: {serverId: server.id},
           bubbles: true,
           composed: true,
         })
       ),
+    connectToggle: () =>
+      element.dispatchEvent(
+        new CustomEvent(
+          isConnectedState
+            ? ServerListItemEvent.DISCONNECT
+            : ServerListItemEvent.CONNECT,
+          {
+            detail: {serverId: server.id},
+            bubbles: true,
+            composed: true,
+          }
+        )
+      ),
   };
 
   const handleMenuOpen = () => {
@@ -177,8 +193,8 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
       return;
     }
 
-    if (!menuElement.anchor) {
-      menuElement.anchor = menuButtonElement;
+    if (!menuElement.anchorElement) {
+      menuElement.anchorElement = menuButtonElement;
     }
 
     menuElement.show();
@@ -190,33 +206,41 @@ const getSharedComponents = (element: ServerListItemElement & LitElement) => {
     elements: {
       metadataText: html`
         <div class="card-metadata-text">
-          <h2 class="card-metadata-server-name" id="server-name">${messages.serverName}</h2>
+          <h2 class="card-metadata-server-name" id="server-name">
+            ${messages.serverName}
+          </h2>
           <label class="card-metadata-server-address">${server.address}</label>
         </div>
       `,
       menu: html`
-        <mwc-menu ${ref(menu)} menuCorner="END">
-          <mwc-list-item @click="${dispatchers.beginRename}">${localize('server-rename')}</mwc-list-item>
-          <mwc-list-item @click="${dispatchers.forget}">${localize('server-forget')}</mwc-list-item>
-        </mwc-menu>
+        <md-menu ${ref(menu)} class="card-menu" menuCorner="END">
+          <md-menu-item @click="${dispatchers.beginRename}">
+            ${localize('server-rename')}
+          </md-menu-item>
+          <md-menu-item @click="${dispatchers.forget}">
+            ${localize('server-forget')}
+          </md-list-item>
+        </md-menu>
       `,
       menuButton: html`
-        <mwc-icon-button
+        <md-icon-button
           ${ref(menuButton)}
           class="card-menu-button"
-          icon="more_vert"
           @click=${handleMenuOpen}
-        ></mwc-icon-button>
+        >
+          <md-icon>more_vert</md-icon>
+        </md-icon-button>
       `,
       footer: html`
         <footer class="card-footer">
           <span class="card-error">${messages.error}</span>
-          <mwc-button
-            label="${messages.connectButton}"
+          <md-text-button
+            class="card-footer-button"
             @click="${dispatchers.connectToggle}"
             ?disabled=${hasErrorMessage}
           >
-          </mwc-button>
+            ${messages.connectButton}
+          </md-text-button>
         </footer>
       `,
     },
@@ -238,9 +262,13 @@ export class ServerRowCard extends LitElement implements ServerListItemElement {
     sharedCSS,
     css`
       .card {
-        --min-indicator-size: calc(var(--server-name-size) + var(--outline-mini-gutter) + var(--server-address-size));
+        --min-indicator-size: calc(
+          var(--server-name-size) + var(--outline-mini-gutter) +
+            var(--server-address-size)
+        );
         --max-indicator-size: calc(
-          var(--outline-slim-gutter) + var(--server-name-size) + var(--outline-mini-gutter) + var(--server-address-size) +
+          var(--outline-slim-gutter) + var(--server-name-size) +
+            var(--outline-mini-gutter) + var(--server-address-size) +
             var(--outline-slim-gutter)
         );
 
@@ -264,7 +292,9 @@ export class ServerRowCard extends LitElement implements ServerListItemElement {
     return html`
       <div class="card">
         <div class="card-metadata" aria-labelledby="server-name">
-          <server-connection-indicator connection-state="${this.server.connectionState}"></server-connection-indicator>
+          <server-connection-indicator
+            connection-state="${this.server.connectionState}"
+          ></server-connection-indicator>
           ${elements.metadataText}
         </div>
         ${elements.menuButton} ${elements.footer}
@@ -278,7 +308,10 @@ export class ServerRowCard extends LitElement implements ServerListItemElement {
  * Display a featured Server in a showcase.
  */
 @customElement('server-hero-card')
-export class ServerHeroCard extends LitElement implements ServerListItemElement {
+export class ServerHeroCard
+  extends LitElement
+  implements ServerListItemElement
+{
   @property() server: ServerListItem;
   @property() localize: Localizer;
 
@@ -334,7 +367,9 @@ export class ServerHeroCard extends LitElement implements ServerListItemElement
   render() {
     const {elements, dispatchers, messages} = getSharedComponents(this);
 
-    const connectionStatusText = this.localize(`${this.server.connectionState}-server-state`);
+    const connectionStatusText = this.localize(
+      `${this.server.connectionState}-server-state`
+    );
     const connectToggleKeyboardDispatcher = (event: KeyboardEvent) => {
       event.preventDefault();
       event.stopImmediatePropagation();
@@ -346,7 +381,9 @@ export class ServerHeroCard extends LitElement implements ServerListItemElement
 
     return html`
       <div class="card">
-        <div class="card-metadata" aria-labelledby="server-name">${elements.metadataText}</div>
+        <div class="card-metadata" aria-labelledby="server-name">
+          ${elements.metadataText}
+        </div>
         ${elements.menuButton}
         <div class="card-connection-button-container">
           <server-connection-indicator
@@ -358,7 +395,9 @@ export class ServerHeroCard extends LitElement implements ServerListItemElement
             tabindex="0"
             title="${connectionStatusText}"
           ></server-connection-indicator>
-          <label class="card-connection-label" for="${messages.connectButton}">${connectionStatusText}</label>
+          <label class="card-connection-label" for="${messages.connectButton}">
+            ${connectionStatusText}
+          </label>
         </div>
         ${elements.footer}
       </div>