Change button styles in person and source view

lang/en.json

@@ -224,5 +224,6 @@
   "Given Name First": "Given Name First",
   "Toggle person outlines": "Toggle person outlines",
   "Log out": "Log out",
-  "in": "in"
-}
+  "in": "in",
+  "DNA matches": "DNA matches"
+}

src/components/GrampsjsObject.js

@@ -199,6 +199,12 @@ export class GrampsjsObject extends GrampsjsAppStateMixin(LitElement) {
             margin-right: 0px;
           }
         }
+
+        p.button-list {
+          display: flex;
+          gap: 12px;
+          justify-content: flex-start;
+        }
       `,
     ]
   }

src/components/GrampsjsPerson.js

@@ -1,12 +1,15 @@
 import {html, css} from 'lit'
 
-import '@material/mwc-icon'
+import '@material/web/button/outlined-button'
+
+import {mdiFamilyTree, mdiDna} from '@mdi/js'
 
 import {GrampsjsObject} from './GrampsjsObject.js'
 import {asteriskIcon, crossIcon} from '../icons.js'
 import './GrampsJsImage.js'
 import './GrampsjsEditGender.js'
 import './GrampsjsPersonRelationship.js'
+import {fireEvent} from '../util.js'
 
 export class GrampsjsPerson extends GrampsjsObject {
   static get styles() {
@@ -39,7 +42,9 @@ export class GrampsjsPerson extends GrampsjsObject {
         ${this._displayName()}
       </h2>
       ${this._renderBirth()} ${this._renderDeath()} ${this._renderRelation()}
-      ${this._renderTreeBtn()}
+      <p class="button-list">
+        ${this._renderTreeBtn()} ${this._renderDnaBtn()}
+      </p>
     `
   }
 
@@ -113,17 +118,40 @@ export class GrampsjsPerson extends GrampsjsObject {
   }
 
   _renderTreeBtn() {
-    return html` <p>
-      <mwc-button
-        outlined
-        label="${this._('Show in tree')}"
-        @click="${this._handleButtonClick}"
-      >
-      </mwc-button>
-    </p>`
+    return html`
+      <md-outlined-button @click="${this._handleTreeButtonClick}">
+        ${this._('Show in tree')}
+        <grampsjs-icon
+          path="${mdiFamilyTree}"
+          color="var(--mdc-theme-primary)"
+          slot="icon"
+        >
+        </grampsjs-icon>
+      </md-outlined-button>
+    `
   }
 
-  _handleButtonClick() {
+  _renderDnaBtn() {
+    if (!this.data?.person_ref_list?.filter(ref => ref.rel === 'DNA').length) {
+      // no DNA data
+      return ''
+    }
+    return html`
+      <md-outlined-button
+        @click="${this._handleDnaButtonClick}"
+        class="dna-btn"
+      >
+        ${this._('DNA matches')}
+        <grampsjs-icon
+          path="${mdiDna}"
+          color="var(--mdc-theme-primary)"
+          slot="icon"
+        ></grampsjs-icon>
+      </md-outlined-button>
+    `
+  }
+
+  _handleTreeButtonClick() {
     this.dispatchEvent(
       new CustomEvent('pedigree:person-selected', {
         bubbles: true,
@@ -131,13 +159,11 @@ export class GrampsjsPerson extends GrampsjsObject {
         detail: {grampsId: this.data.gramps_id},
       })
     )
-    this.dispatchEvent(
-      new CustomEvent('nav', {
-        bubbles: true,
-        composed: true,
-        detail: {path: 'tree'},
-      })
-    )
+    fireEvent(this, 'nav', {path: 'tree'})
+  }
+
+  _handleDnaButtonClick() {
+    fireEvent(this, 'nav', {path: `dna-matches/${this.data.gramps_id}`})
   }
 }
 

src/components/GrampsjsRelationships.js

@@ -1,10 +1,11 @@
 import {LitElement, css, html} from 'lit'
-import '@material/mwc-button'
-import '@material/mwc-icon'
+import '@material/web/button/outlined-button'
+import {mdiAccountMultiple} from '@mdi/js'
 
 import {sharedStyles} from '../SharedStyles.js'
 import {renderPerson} from '../util.js'
 import './GrampsjsChildren.js'
+import './GrampsjsIcon.js'
 import {GrampsjsAppStateMixin} from '../mixins/GrampsjsAppStateMixin.js'
 
 export class GrampsjsRelationships extends GrampsjsAppStateMixin(LitElement) {
@@ -14,6 +15,13 @@ export class GrampsjsRelationships extends GrampsjsAppStateMixin(LitElement) {
       css`
         .familybtn {
           margin-left: 1.5em;
+          margin-bottom: 0.25em;
+          vertical-align: middle;
+        }
+
+        h4 {
+          display: flex;
+          align-items: center;
         }
 
         .number {
@@ -95,13 +103,17 @@ export class GrampsjsRelationships extends GrampsjsAppStateMixin(LitElement) {
   }
 
   _renderFamilyBtn(grampsId) {
-    return html` <mwc-button
+    return html` <md-outlined-button
       class="familybtn"
-      outlined
-      label="${this._('Family')}"
       @click="${() => this._handleButtonClick(grampsId)}"
     >
-    </mwc-button>`
+      <grampsjs-icon
+        path="${mdiAccountMultiple}"
+        color="var(--mdc-theme-primary)"
+        slot="icon"
+      ></grampsjs-icon>
+      ${this._('Family')}
+    </md-outlined-button>`
   }
 
   _handleButtonClick(grampsId) {

src/components/GrampsjsSource.js

@@ -1,23 +1,13 @@
-import {html, css} from 'lit'
+import {html} from 'lit'
 
 import '@material/mwc-icon'
-import '@material/mwc-button'
+import '@material/web/button/outlined-button'
 
 import {GrampsjsObject} from './GrampsjsObject.js'
 import './GrampsjsFormEditTitle.js'
 import {fireEvent} from '../util.js'
 
 export class GrampsjsSource extends GrampsjsObject {
-  static get styles() {
-    return [
-      super.styles,
-      css`
-        :host {
-        }
-      `,
-    ]
-  }
-
   constructor() {
     super()
     this._showReferences = false
@@ -81,13 +71,10 @@ export class GrampsjsSource extends GrampsjsObject {
     if (!tags.filter(tag => tag.name === 'Blog').length > 0) {
       return ''
     }
-    return html` <p style="clear: both; margin-top: 1em;">
-      <mwc-button
-        outlined
-        label="${this._('Show in blog')}"
-        @click="${this._handleButtonClick}"
-      >
-      </mwc-button>
+    return html` <p style="clear: both; padding-top: 1em;">
+      <md-outlined-button @click="${this._handleButtonClick}">
+        ${this._('Show in blog')}
+      </md-outlined-button>
     </p>`
   }
 

src/components/GrampsjsTags.js

@@ -14,23 +14,32 @@ export class GrampsjsTags extends GrampsjsAppStateMixin(LitElement) {
     return [
       sharedStyles,
       css`
+        h4 {
+          font-weight: 400;
+          font-size: 14px;
+          font-family: var(--grampsjs-heading-font-family);
+          color: rgba(0, 0, 0, 0.5);
+          margin-top: 15px;
+          margin-bottom: 7px;
+        }
+
         .chip {
           font-size: 14px;
           font-weight: 400;
           font-family: var(--grampsjs-body-font-family);
-          padding: 6px 12px;
-          border-radius: 9999px;
-          margin: 5px 5px;
+          padding: 8px 12px;
+          border-radius: 8px;
+          margin: 5px 10px 5px 0px;
           border-width: 1px;
           border-style: solid;
         }
 
         .tags {
           clear: left;
-          margin: 15px 0px;
+          margin-bottom: 15px;
           align-items: center;
           display: inline-flex;
-          padding: 5px;
+          padding: 5px 0px;
         }
 
         .chip mwc-icon-button {
@@ -65,6 +74,7 @@ export class GrampsjsTags extends GrampsjsAppStateMixin(LitElement) {
       return html``
     }
     return html`
+      <h4>${this._('Tags')}</h4>
       <div class="tags">
         ${this.data
           .filter(obj => !this.hideTags.includes(obj.name))