@genesislcap/pbc-notify-ui 1.0.2 → 1.0.4

package/dist/dts/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rule-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,iDAgE5B,CAAC"}
+{"version":3,"file":"rule-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,iDAoF5B,CAAC"}

package/dist/dts/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rule-dialog.template.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAO1E,eAAO,MAAM,kBAAkB,EAAE,YAyIhC,CAAC"}
+{"version":3,"file":"rule-dialog.template.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAO1E,eAAO,MAAM,kBAAkB,EAAE,YA+IhC,CAAC"}

package/dist/dts/components/foundation-notification-dashboard/components/template-dialog/template-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/template-dialog/template-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAwGhC,CAAC"}
+{"version":3,"file":"template-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/template-dialog/template-dialog.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,iDA2FhC,CAAC"}

package/dist/dts/components/foundation-notification-dashboard/components/template-dialog/template-dialog.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-dialog.template.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/template-dialog/template-dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAM1E,eAAO,MAAM,sBAAsB,EAAE,YAiMpC,CAAC"}
+{"version":3,"file":"template-dialog.template.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/template-dialog/template-dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAM1E,eAAO,MAAM,sBAAsB,EAAE,YAkMpC,CAAC"}

package/dist/dts/components/foundation-notification-dashboard/components/template-dialog/template-dialog.types.d.ts

@@ -2,6 +2,12 @@ export declare enum TemplateDialogMode {
     CREATE = 0,
     EDIT = 1
 }
+export type TemplateDialogParams = {
+    mode: typeof TemplateDialogMode.CREATE;
+} | {
+    mode: typeof TemplateDialogMode.EDIT;
+    data: RuleTemplateEntity;
+};
 export type RuleTemplateEntity = {
     DYNAMIC_RULE_ID?: string;
     RULE_NAME: string;

package/dist/dts/components/foundation-notification-dashboard/components/template-dialog/template-dialog.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-dialog.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/template-dialog/template-dialog.types.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,MAAM,IAAA;IACN,IAAI,IAAA;CACL;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,uBAAuB,EAAE,MAAM,CAAC;IAChC,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE;QAClB,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;KACxB,CAAC;IACF,iBAAiB,EAAE,GAAG,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAA"}
+{"version":3,"file":"template-dialog.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/foundation-notification-dashboard/components/template-dialog/template-dialog.types.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,MAAM,IAAA;IACN,IAAI,IAAA;CACL;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,OAAO,kBAAkB,CAAC,MAAM,CAAC;CACxC,GAAG;IACF,IAAI,EAAE,OAAO,kBAAkB,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE,kBAAkB,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,uBAAuB,EAAE,MAAM,CAAC;IAChC,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE;QAClB,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;KACxB,CAAC;IACF,iBAAiB,EAAE,GAAG,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAA"}

package/dist/dts/components/foundation-notification-dashboard/management/management.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"management.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/management.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iDAoBnC,CAAC"}
+{"version":3,"file":"management.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/management.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iDA0BnC,CAAC"}

package/dist/dts/components/foundation-notification-dashboard/management/rule-template-management.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rule-template-management.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/rule-template-management.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAuC,MAAM,yBAAyB,CAAC;AAC/G,OAAO,EAAuB,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAK5G,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAuD/E,qBAkCa,sBAAuB,SAAQ,WAAW;IAEhC,mBAAmB,EAAE,4BAA4B,CAAC;IACvE,cAAc,EAAE,cAAc,CAAC;IAE/B,kBAAkB;IAIZ,YAAY,CAAC,GAAG,KAAA;IAKtB,cAAc,CAAC,GAAG,KAAA;CAmBnB"}
+{"version":3,"file":"rule-template-management.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-notification-dashboard/management/rule-template-management.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAqB,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAuB,4BAA4B,EAAE,MAAM,yCAAyC,CAAC;AAK5G,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAuD/E,qBAkCa,sBAAuB,SAAQ,WAAW;IAEhC,mBAAmB,EAAE,4BAA4B,CAAC;IACvE,cAAc,EAAE,cAAc,CAAC;IAE/B,kBAAkB;IAIZ,YAAY,CAAC,GAAG,KAAA;IAKtB,cAAc,CAAC,GAAG,KAAA;CAmBnB"}

package/dist/dts/components/foundation-notification-dashboard/notification-dashboard.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-dashboard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-notification-dashboard/notification-dashboard.styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,qCAAqC,iDAQjD,CAAC"}
+{"version":3,"file":"notification-dashboard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-notification-dashboard/notification-dashboard.styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,qCAAqC,iDA4BjD,CAAC"}

package/dist/dts/components/foundation-notification-dashboard/notification-dashboard.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-dashboard.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-notification-dashboard/notification-dashboard.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,eAAO,MAAM,uCAAuC,sFAwCnD,CAAC"}
+{"version":3,"file":"notification-dashboard.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-notification-dashboard/notification-dashboard.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,eAAO,MAAM,uCAAuC,sFAgCnD,CAAC"}

package/dist/esm/components/foundation-notification-dashboard/components/condition-builder/condition-builder.styles.js

@@ -2,8 +2,8 @@ import { css } from '@microsoft/fast-element';
 export const ConditionBuilderStyles = css `
   .condition-builder {
     display: flex;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
 
   zero-button {
@@ -12,11 +12,11 @@ export const ConditionBuilderStyles = css `
 
   .delete {
     margin: 0px;
-    background-color: rgba(242, 242, 242, 0.05);
+    background-color: var(--neutral-layer-1);
   }
 
   .delete:hover {
-    background-color: rgba(255, 255, 255, 0.11);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);
   }
 
   zero-text-field {

package/dist/esm/components/foundation-notification-dashboard/components/parameter-builder/parameter-builder.styles.js

@@ -3,8 +3,8 @@ const PARAM_SOURCE_WIDTH = '200';
 export const ParameterBuilderStyles = css `
   .parameter-builder {
     display: flex;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
   
   zero-button {
@@ -13,11 +13,11 @@ export const ParameterBuilderStyles = css `
   
   .delete {
     margin: 0px;
-    background-color: rgba(242, 242, 242, 0.05);
+    background-color: var(--neutral-layer-1);
   }
 
   .delete:hover {
-    background-color: rgba(255, 255, 255, 0.11);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);
   }
 
   zero-text-field {

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.styles.js

@@ -2,8 +2,8 @@ import { css } from '@microsoft/fast-element';
 export const ConditionBuilderStyles = css `
   .condition-builder {
     display: flex;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
 
   zero-button {
@@ -12,11 +12,11 @@ export const ConditionBuilderStyles = css `
 
   .delete {
     margin: 0px;
-    background-color: rgba(242, 242, 242, 0.05);
+    background-color: var(--neutral-layer-1);
   }
 
   .delete:hover {
-    background-color: rgba(255, 255, 255, 0.11);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);
   }
 
   zero-text-field {

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.styles.js

@@ -16,43 +16,52 @@ export const ruleDialogStyles = css `
     flex-direction: column;
     width: ${String(modalWidthPx)}px;
     max-height: 800px;
-    gap: 8px;
+    gap: calc(var(--design-unit) * 3px);
+    padding: 0 calc(var(--design-unit) * 4px);
   }
 
   .content-row {
     display: flex;
-    gap: 8px;
+    gap: calc(var(--design-unit) * 3px);
   }
 
   .col-4 {
     display: grid;
-    grid-template-columns: repeat(4, calc(${String(modalWidthPx - 8 * 3)}px / 4));
-    gap: 8px;
+    grid-template-columns: repeat(2, calc(${String(modalWidthPx - 4 * 3)}px / 2));
+    gap: calc(var(--design-unit) * 3px);
   }
 
   .control {
     display: flex;
     flex-direction: column;
     width: 100%;
-    gap: 4px;
+    gap: calc(var(--design-unit) * 2px);
   }
-
   .conditions {
-    min-height: 150px;
-    border: 1px solid #2e3339;
-    border-radius: 4px;
+    height: 150px;
+    max-height: 200px;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
     display: flex;
     flex-direction: column;
-    padding: 8px;
+    padding: calc(var(--design-unit) * 2px);
+    flex-direction: column;
+    overflow-y: scroll;
   }
 
   .template-dialog-footer {
-    margin-top: 8px;
+    margin-top: calc(var(--design-unit) * 2px);
     display: flex;
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .template-dialog-footer .content-row {
+    margin-left: auto;
+    margin-bottom: 0px;
   }
 
   .condition {
-    gap: 0px;
+    gap: 0;
     flex-direction: column;
   }
 
@@ -60,6 +69,17 @@ export const ruleDialogStyles = css `
     min-width: auto;
   }
 
+  zero-modal::part(dialog) {
+    padding: 0;
+    background: var(--neutral-layer-4);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  zero-modal::part(top) {
+    padding: calc(var(--design-unit) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
   zero-select::part(control) {
     display: flex;
     width: 100%;

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.template.js

@@ -28,35 +28,40 @@ export const ruleDialogTemplate = html `
       </div>
 
       <div class="col-4">
-        <div class="control">
-          <label>Resource</label>
-          <zero-select
-            :value=${sync(x => x.resource)}
-            position="below"
-          >
-            ${repeat(x => x.resources, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
-          </zero-select>
-        </div>
+        <div class="content-row">
+          <div class="control">
+            <label>Resource</label>
+            <zero-select
+              :value=${sync(x => x.resource)}
+              position="below"
+            >
+              ${repeat(x => x.resources, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+            </zero-select>
+          </div>
 
-        <div class="control">
-          <label>Table ID</label>
-          <zero-select :value=${sync(x => x.tableId)}>
-            ${repeat(x => x.resourceFields, html `<zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>`)}
-          </zero-select>
+          <div class="control">
+            <label>Table ID</label>
+            <zero-select :value=${sync(x => x.tableId)}>
+              ${repeat(x => x.resourceFields, html `<zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>`)}
+            </zero-select>
+          </div>
         </div>
 
-        <div class="control">
-          <label>Topic</label>
-          <zero-select :value=${sync(x => x.topic)}>
-            ${repeat(x => x.topics, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
-          </zero-select>
-        </div>
+        <div class="content-row">
 
-        <div class="control">
-          <label>Execution Strategy</label>
-          <zero-select :value=${sync(x => x.executionStrategy)}>
-            ${repeat(x => ALL_RULE_EXECUTION_STRATEGIES, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
-          </zero-select>
+          <div class="control">
+            <label>Topic</label>
+            <zero-select :value=${sync(x => x.topic)}>
+              ${repeat(x => x.topics, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+            </zero-select>
+          </div>
+
+          <div class="control">
+            <label>Execution Strategy</label>
+            <zero-select :value=${sync(x => x.executionStrategy)}>
+              ${repeat(x => ALL_RULE_EXECUTION_STRATEGIES, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+            </zero-select>
+          </div>
         </div>
       </div>
 
@@ -113,8 +118,9 @@ export const ruleDialogTemplate = html `
     </div>
 
     <div class="template-dialog-footer">
-      <div class="content-row" style="margin-left: auto; margin-bottom: 0px;">
+      <div class="content-row">
         <zero-button
+          appearance="accent"
           @click=${x => x.submit()}
         >
           Submit

package/dist/esm/components/foundation-notification-dashboard/components/template-dialog/template-dialog.styles.js

@@ -1,55 +1,26 @@
 import { css } from '@microsoft/fast-element';
+const modalWidthPx = 940;
 export const TemplateDialogStyles = css `
-  fast-dialog.template-dialog::part(control) {
-    background-color: #1f2126;
-    --dialog-height: none;
-    --dialog-width: none;
-    border: 1px solid #2e3339;
-    border-radius: 4px;
-    position: relative;
-  }
-
-  .template-dialog-header {
-    display: flex;
-    border-bottom: 1px solid rgb(46, 51, 57);
-    padding: 8px;
-  }
-
-  .template-dialog-header-title {
-    font-weight: bold;
-    align-self: center;
-  }
-
   label {
-    margin-bottom: 6px;
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
 
   zero-button {
     margin: 0px;
   }
 
-  .closing-icon {
-    text-align: center;
-    height: 30px;
-    width: 30px;
-    min-width: 30px;
-    margin-left: auto;
-  }
-
-  .closing-icon::part(control) {
-    padding: 0px;
-  }
-
   .template-dialog-content {
     display: flex;
     justify-content: center;
     flex-direction: column;
+    width: ${String(modalWidthPx)}px;
+    gap: calc(var(--design-unit) * 3px);
+    padding: 0 calc(var(--design-unit) * 4px);
   }
 
   .content-row {
     display: flex;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: calc(var(--design-unit) * 3px);
   }
 
   .control {
@@ -61,20 +32,26 @@ export const TemplateDialogStyles = css `
 
   .conditions,
   .parameters {
-    height: 100px;
-    width: 940px;
-    max-height: 150px;
-    border: 1px solid #2e3339;
-    border-radius: 4px;
+    height: 150px;
+    max-height: 200px;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
     display: flex;
     flex-direction: column;
+    padding: calc(var(--design-unit) * 2px);
+    flex-direction: column;
     overflow-y: scroll;
-    padding: 8px;
   }
 
   .template-dialog-footer {
+    margin-top: calc(var(--design-unit) * 2px);
     display: flex;
-    flex-direction: row;
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .template-dialog-footer .content-row {
+    margin-left: auto;
+    margin-bottom: 0px;
   }
 
   .complete {
@@ -103,4 +80,15 @@ export const TemplateDialogStyles = css `
 
   zero-select::part(selected-value) {
   }
+
+  zero-modal::part(dialog) {
+    padding: 0;
+    background: var(--neutral-layer-4);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  zero-modal::part(top) {
+    padding: calc(var(--design-unit) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
 `;

package/dist/esm/components/foundation-notification-dashboard/components/template-dialog/template-dialog.template.js

@@ -112,7 +112,7 @@ export const TemplateDialogTemplate = html `
         </div>
       </div>
         
-      <div class="content-row" style="margin-bottom: 0px">
+      <div class="content-row">
         <label>Parameter(s)</label>
       </div>
       
@@ -137,11 +137,11 @@ export const TemplateDialogTemplate = html `
         </div>
       </div>
 
-      <div class="content-row" style="margin-bottom: 0px; margin-top: 8px">
+      <div class="content-row">
         <label>Condition(s)</label>
       </div>
       
-      <div class="conditions" style="margin-bottom: 8px;">
+      <div class="conditions">
         <div class="content-row condition">
           ${repeat(x => x.conditions, html `
               <condition-builder
@@ -166,8 +166,9 @@ export const TemplateDialogTemplate = html `
     </div>
 
     <div class="template-dialog-footer">
-      <div class="content-row" style="margin-left: auto; margin-bottom: 0px;">
+      <div class="content-row">
         <zero-button
+          appearance="accent"
           @click=${x => x.complete()}
         >
           Complete

package/dist/esm/components/foundation-notification-dashboard/management/management.styles.js

@@ -20,8 +20,14 @@ export const rulesAndTemplatesStyles = css `
   }
 
   zero-button.add {
-    margin: 0px;
-    margin-left: auto;
-    margin-bottom: 6px;
+    margin-bottom: calc(var(--design-unit) * 3px);
+  }
+
+  zero-button {
+    margin: 0;
+  }
+
+  entity-management::part(header) {
+    display: none;
   }
 `;

package/dist/esm/components/foundation-notification-dashboard/notification-dashboard.styles.js

@@ -8,6 +8,26 @@ export const FoundationNotificationDashboardStyles = css `
   }
 
   zero-tab-panel {
-    padding: 16px;
+    //padding: calc(var(--design-unit) * 4px);
   }
+
+  /* Tabs */
+  zero-tabs {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  zero-tabs::part(tablist) {
+    grid-template-columns: none;
+    flex: 0;
+  }
+  
+  zero-tabs::part(tabpanel) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+  /***/
 `;

package/dist/esm/components/foundation-notification-dashboard/notification-dashboard.template.js

@@ -1,42 +1,34 @@
 import { html } from '@microsoft/fast-element';
 export const FoundationNotificationDashboardTemplate = html `
-  <div
-    class="notification-dashboard"
-    data-test-id="notification-dashboard"
-  >
-    <zero-tabs class="tabs">
-      <zero-tab slot="rules-tab">Rules</zero-tab>
-      <zero-tab slot="templates-tab">Templates</zero-tab>
-      <zero-tab slot="screen-routes-tab">Screen Routes</zero-tab>
-      <zero-tab slot="email-distribution-routes-tab">Email Distribution Routes</zero-tab>
-      <zero-tab slot="email-user-routes-tab">Email User Routes</zero-tab>
-      <zero-tab slot="log-routes-tab">Log Routes</zero-tab>
-      <zero-tab slot="ms-teams-routes-tab">MS Teams Routes</zero-tab>
-      <zero-tab slot="notify-audit-tab">Notify Audit</zero-tab>
-      <zero-tab-panel slot="rules-tab" id="rules-tab-panel">
-        <rule-management></rule-management>
-      </zero-tab-panel>
-      <zero-tab-panel slot="templates-tab" id="templates-tab-panel">
-        <rule-template-management></rule-template-management>
-      </zero-tab-panel>
-      <zero-tab-panel slot="screen-routes-tab" id="routes-tab-panel">  
-        <screen-route-management></screen-route-management>
-      </zero-tab-panel>
-      <zero-tab-panel slot="email-distribution-tab" id="email-distribution-routes-tab-panel">
-        <email-distribution-route-management></email-distribution-route-management>
-      </zero-tab-panel>
-      <zero-tab-panel slot="email-user-routes-tab" id="email-user-routes-tab-panel"> 
-        <email-user-route-management></email-user-route-management>
-      </zero-tab-panel>
-      <zero-tab-panel slot="log-routes-tab" id="log-routes-tab-panel">
-        <log-route-management></log-route-management>
-      </zero-tab-panel>
-      <zero-tab-panel slot="ms-teams-routes-tab" id="ms-teams-routes-tab-panel">
-        <ms-teams-route-management></ms-teams-route-management>
-      </zero-tab-panel>
-      <zero-tab-panel slot="notify-audit-tab" id="notify-audit-tab-panel">
-        <notify-audit-management></notify-audit-management>
-      </zero-tab-panel>
+<div class="notification-dashboard" data-test-id="notification-dashboard">
+<zero-tabs class="tabs">
+  <zero-tab>Rules</zero-tab>
+  <zero-tab>Templates</zero-tab>
+  <zero-tab>Routes</zero-tab>
+  <zero-tab>Notify Audit</zero-tab>
+  <zero-tab-panel>
+    <rule-management></rule-management>
+  </zero-tab-panel>
+  <zero-tab-panel>
+    <rule-template-management></rule-template-management>
+  </zero-tab-panel>
+  <zero-tab-panel>
+    <zero-tabs appearance="secondary">
+      <zero-tab appearance="secondary">Screen Routes</zero-tab>
+      <zero-tab appearance="secondary">Email Distribution Routes</zero-tab>
+      <zero-tab appearance="secondary">Email User Routes</zero-tab>
+      <zero-tab appearance="secondary">Log Routes</zero-tab>
+      <zero-tab appearance="secondary">MS Teams Routes</zero-tab>
+      <zero-tab-panel><screen-route-management></screen-route-management></zero-tab-panel>
+      <zero-tab-panel><email-distribution-route-management></email-distribution-route-management></zero-tab-panel>
+      <zero-tab-panel><email-user-route-management></email-user-route-management></zero-tab-panel>
+      <zero-tab-panel><log-route-management></log-route-management></zero-tab-panel>
+      <zero-tab-panel><ms-teams-route-management></ms-teams-route-management></zero-tab-panel>
     </zero-tabs>
-  </div>
+  </zero-tab-panel>
+  <zero-tab-panel>
+    <notify-audit-management></notify-audit-management>
+  </zero-tab-panel>
+</zero-tabs>
+</div>
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/pbc-notify-ui",
   "description": "Genesis PBC Notify UI",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-notify.d.ts",