@genesislcap/pbc-reconciliation-ui 0.0.46 → 14.339.0

package/src/components/reconciliations-panel/reconciliations-panel.styles.ts

@@ -0,0 +1,328 @@
+import { css } from '@genesislcap/web-core';
+import { scrollbarStyles } from '../../styles/scrollbar.styles';
+import {
+  buttonTag,
+  progressRingTag,
+  radioGroupTag,
+  radioTag,
+  segmentedControlTag,
+  segmentedItemTag,
+  selectTag,
+  tabPanelTag,
+  textFieldTag,
+} from '../../tags';
+
+const PERC_RECON_LIST = '20';
+
+const PERC_RECON_CONF_AND_RESULT = '80';
+const PERC_RECON_CONF = '30';
+const PERC_RECON_RESULT = '70';
+
+const reconciliationsSide = css`
+  .reconciliations-side {
+    display: flex;
+    flex-direction: column;
+    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    flex: 1 1 ${PERC_RECON_LIST}%;
+    max-width: ${PERC_RECON_LIST}%;
+    min-height: 0;
+  }
+
+  .reconciliation-side-list-header {
+    display: flex;
+    background-color: var(--neutral-layer-2);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-minus-1-font-size);
+    gap: calc(var(--design-unit) * 2px);
+    cursor: pointer;
+    align-items: center;
+    font-weight: 500;
+  }
+
+  .add-icon {
+    color: var(--success-color);
+  }
+
+  .reconciliations-side-list {
+    overflow: hidden auto;
+  }
+
+  .reconciliations-in-progress-label,
+  .historical-reconciliations-label {
+    padding: calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-plus-4-font-size);
+  }
+
+  .flex-row {
+    display: flex;
+    gap: calc(var(--design-unit) * 3px);
+    align-items: center;
+  }
+
+  .stop-recon-btn {
+    cursor: pointer;
+    color: var(--error-color);
+  }
+
+  .recon-in-progress,
+  .historical-recon {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--neutral-fill-strong-hover);
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    font-weight: 700;
+  }
+
+  .recon-in-progress:hover,
+  .historical-recon:hover {
+    background-color: var(--neutral-layer-3);
+    cursor: pointer;
+  }
+
+  .historic-recon-date {
+    color: var(--neutral-foreground-hint);
+    font-weight: 400;
+  }
+
+  .recon-in-progress-selected,
+  .historical-recon-selected {
+    border-left: calc(var(--stroke-width) * 3px) solid var(--accent-fill-rest);
+    color: var(--neutral-foreground-rest);
+    background: var(--neutral-layer-3);
+  }
+
+  .toggle-recon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(var(--design-unit) * 4px);
+    width: calc(var(--design-unit) * 4px);
+    cursor: pointer;
+    border-radius: calc(var(--design-unit) * 1px);
+    background-color: var(--neutral-layer-1);
+  }
+
+  .toggle-recon:hover {
+    background-color: var(--neutral-fill-rest);
+  }
+
+  .chevron {
+    display: flex;
+  }
+
+  ${progressRingTag} {
+    margin: 0;
+    height: calc((var(--base-height-multiplier) * 3px) - (var(--design-unit) * 1px));
+    width: calc((var(--base-height-multiplier) * 3px) - (var(--design-unit) * 1px));
+  }
+
+  .recon-list-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .icon-container {
+    height: calc((var(--base-height-multiplier) * 3px) - ((var(--design-unit) - 1) * 2px));
+    width: calc((var(--base-height-multiplier) * 3px) - ((var(--design-unit) - 1) * 2px));
+    border-radius: 50%;
+    border: calc(var(--stroke-width) * 1px) solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .completed-status {
+    color: var(--success-color);
+    border-color: var(--success-color);
+  }
+
+  .cancelled-status {
+    color: var(--warning-color);
+    border-color: var(--warning-color);
+  }
+
+  .failed-status {
+    color: var(--error-color);
+    border-color: var(--error-color);
+  }
+`;
+
+const reconciliationConfigurationAndResult = css`
+  .configuration {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 ${PERC_RECON_CONF}%;
+    max-width: ${PERC_RECON_CONF}%;
+    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  .configuration-select-configuration {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .configuration-label,
+  .input-parameters-label {
+    font-weight: bold;
+  }
+
+  .input-parameters-label {
+    padding: 0 calc(var(--design-unit) * 4px);
+  }
+
+  .configuration-input-parameters {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+    min-height: 0;
+    height: 100%;
+  }
+
+  .reconciliation-result {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 ${PERC_RECON_RESULT}%;
+    max-width: ${PERC_RECON_RESULT}%;
+    padding: calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 3px);
+  }
+
+  .run-reconciliation {
+    background-color: rgb(122 204 121 / 50%);
+  }
+
+  .reconciliation-report {
+    background-color: rgb(135 155 166 / 50%);
+  }
+
+  .reconciliation-result-label {
+    font-weight: bold;
+  }
+
+  .input-parameters-fields {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden auto;
+    height: 100%;
+  }
+
+  .reconciliation-result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .error-message {
+    color: var(--error-color);
+    font-size: var(--type-ramp-base-font-size);
+    width: 80%;
+    text-align: right;
+  }
+
+  .view-datasource-pair {
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--design-unit) * 2px) 0;
+  }
+`;
+
+const fields = css`
+  ${buttonTag} {
+    display: flex;
+    margin: 0;
+    width: fit-content;
+  }
+
+  ${buttonTag}.add::part(control) {
+    padding: 0;
+  }
+
+  ${selectTag} {
+    min-width: 0;
+  }
+
+  ${textFieldTag} {
+    margin: 0;
+  }
+
+  ${radioGroupTag} {
+    margin: 0;
+  }
+
+  ${radioGroupTag}::part(positioning-region) {
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  ${radioTag} {
+    margin: 0;
+  }
+
+  ${radioTag}::part(label) {
+    margin-inline-end: 0;
+  }
+`;
+
+const filters = css`
+  .filters {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 3px);
+    padding: calc(var(--design-unit) * 4px);
+    padding-top: 0;
+  }
+
+  .filter-label {
+    font-weight: bold;
+    color: var(--neutral-foreground-hint);
+  }
+
+  ${segmentedControlTag} {
+    margin: 0;
+    align-items: stretch;
+  }
+
+  ${segmentedItemTag} {
+    margin: 0;
+    flex: auto;
+    place-content: center;
+  }
+`;
+
+export const ReconciliationsPanelStyles = css`
+  ${scrollbarStyles}
+
+  .reconciliations-panel {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+  }
+
+  ${tabPanelTag} {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .configuration-and-reconciliation-result {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 ${PERC_RECON_CONF_AND_RESULT}%;
+    width: 100%;
+  }
+
+  .configuration-fields {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 4px);
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  ${reconciliationsSide}
+  ${reconciliationConfigurationAndResult}
+  ${fields}
+  ${filters}
+`;