@visns-studio/visns-components 6.0.3 → 6.0.5

package/src/components/generic/GenericIndex.jsx

@@ -923,15 +923,25 @@ function GenericIndex({
                             ) &&
                                 setting.page.tableInfo.heading.length > 0 &&
                                 setting.page.tableInfo.heading.map((h) => (
-                                    <span>
-                                        [<strong>{tableInfo[h.id]}</strong>{' '}
-                                        {h.label}]{' '}
+                                    <span key={h.id}>
+                                        <strong>{tableInfo[h.id]}</strong>{' '}
+                                        {h.label}
                                     </span>
                                 ))}
+                            {/* Square brackets round a count is a convention
+                                from a spreadsheet, not an interface — and it
+                                repeated the page title back at you. The count
+                                alone is what anyone actually reads. */}
                             {total > 0 && (
                                 <span>
-                                    [<strong>{total}</strong> Total{' '}
-                                    {parse(setting.page?.title || '')}]
+                                    {/* Grouped, matching the pager's own
+                                        "of 32,134" — the same figure was
+                                        printing two different ways on one
+                                        screen. */}
+                                    <strong>
+                                        {Number(total).toLocaleString()}
+                                    </strong>{' '}
+                                    total
                                 </span>
                             )}
                         </div>

package/src/components/styles/DataGrid.module.scss

@@ -1,25 +1,8 @@
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-rgb), 1.1);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+@use 'controls' as *;
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--secondary-color);
-        border: 1px solid rgba(var(--secondary-rgb), 1.05);
-    }
+.btn {
+    @include button-primary;
 }
-
 /* Clock button styles - Compact version */
 .clockButton {
     display: flex;
@@ -59,8 +42,41 @@
     overflow: hidden !important;
 }
 
-.InovuaReactDataGrid__header {
-    color: var(--primary-color) !important;
+:global {
+    /* The header is a label row, not a heading. It was navy body text at the same
+       size and weight as the data, so it read as another row of values. Smaller,
+       uppercase and recessive puts the emphasis back on the data, and it stays put
+       while the rows scroll under it. */
+    .InovuaReactDataGrid__header {
+        color: var(--muted-color) !important;
+        background: var(--alternate-color) !important;
+        border-bottom: 1px solid var(--border-color) !important;
+        font-size: var(--font-size-xs) !important;
+        font-weight: var(--font-weight-semibold) !important;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+    }
+
+    /* Digits only line up if they are the same width. Applied to the numeric and
+       date columns rather than globally, since tabular figures are wider and
+       would loosen ordinary text. */
+    .InovuaReactDataGrid__cell[data-column-id*='date'],
+    .InovuaReactDataGrid__cell[data-column-id*='Date'],
+    .InovuaReactDataGrid__cell[data-column-id*='count'],
+    .InovuaReactDataGrid__cell[data-column-id*='total'],
+    .InovuaReactDataGrid__cell[data-column-id*='no'],
+    .InovuaReactDataGrid__cell[data-column-id*='number'],
+    .InovuaReactDataGrid__cell[data-column-id*='amount'],
+    .InovuaReactDataGrid__cell[data-column-id*='qty'] {
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* Banding, so the eye can track a row across a wide table. Kept very faint —
+       strong enough to follow, quiet enough not to compete with the hover state
+       or a status colour in the row. */
+    .InovuaReactDataGrid__row--odd .InovuaReactDataGrid__row-cell-wrap {
+        background: var(--alternate-color);
+    }
 }
 
 .InovuaReactDataGrid__row-hover-target:hover {

package/src/components/styles/Form.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .label {
     display: block;
 }
@@ -209,34 +214,50 @@ input[type='file'] {
 
 .modal__header {
     width: 100%;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-bottom: 1px solid var(--border-color);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.75rem;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md) var(--spacing-lg);
 
     h1 {
-        color: var(--secondary-color);
+        /* Was --secondary-color, the same red that means destructive
+           everywhere else in the console — so every edit dialog opened
+           looking like a warning. A dialog title is just a title. */
+        color: var(--heading-color);
         margin: 0;
         padding: 0;
-        font-size: 1.15em;
+        font-size: var(--font-size-lg);
+        font-weight: var(--font-weight-bold);
+        letter-spacing: -0.01em;
     }
 }
 
 .modal__close {
-    width: max-content;
-    background: rgba(var(--paragraph-rgb), 0.05);
+    /* A close control should recede until reached for. It was a permanently
+       tinted box with a navy glyph, which read as another action. */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    flex: none;
+    background: none;
     cursor: pointer;
-    padding: 0.25rem;
+    padding: 0;
     margin: 0;
-    outline: none;
     border: none;
-    border-radius: var(--br);
-    display: block;
+    border-radius: var(--radius-sm);
     line-height: 1;
+    transition: background-color var(--speed) var(--ease);
+
+    &:hover {
+        background: var(--hover-color);
+    }
 
     svg {
-        color: var(--primary-color);
+        color: var(--muted-color);
         display: block;
     }
 }
@@ -272,29 +293,7 @@ input[type='file'] {
     }
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-rgb), 1.05);
-    }
-}
 
 .saveBtn {
     width: max-content;

package/src/components/styles/GenericDetail.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .grid {
     width: 100%;
     display: flex;
@@ -156,14 +161,21 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--primary-rgb), 0.05);
+    background: none;
     box-sizing: border-box;
-    padding: 10px 20px;
-    border-radius: var(--br);
-    margin-bottom: 0;
-    font-weight: 700;
-    text-align: center;
-    color: var(--paragraph-color);
+    /* Was a centred, tinted bar. A section heading is read at the start of
+       the line like everything under it; centring it made the eye jump to the
+       middle and back for every section on the page. */
+    padding: 0 0 var(--spacing-sm);
+    border-bottom: 1px solid var(--border-color);
+    border-radius: 0;
+    margin-bottom: var(--spacing-md);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    text-align: left;
+    color: var(--muted-color);
 }
 
 .gridtxt__header span {
@@ -199,8 +211,14 @@
     flex: 0 0 calc(100% - 10px);
 }
 
+/* No accent. Description and Comments are ordinary fields — the same kind of
+   thing as Label and Source beside them — so they get the same neutral card.
+   The brand red here was decorative, and on a page with no validation it read
+   as an error; a left rule was only a quieter version of the same mistake.
+   Emphasis should mean something, and here there is nothing to emphasise. */
 .gridtxt > ul .notecolor {
-    border: 1px solid var(--secondary-color);
+    border: 1px solid var(--border-color);
+    background: var(--surface-color);
 }
 
 .titleInfo {
@@ -618,29 +636,9 @@
     line-height: 1.475em;
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
-}
 
-.btn:hover {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-rgb), 1.05);
-}
+
+
 
 .crmtitle {
     min-height: auto;

package/src/components/styles/GenericDynamic.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .grid__row {
     width: 100%;
     display: flex;
@@ -397,28 +402,9 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 /* Adding btn class */
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--secondary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-}
 
-.btn:hover {
-    color: var(--tertiary-color);
-    background: var(--secondary-color);
-    border: 1px solid rgba(var(--secondary-color-rgb), 1.1);
-}
+
+
 
 /* Adding polActions style to the module.css */
 .polActions {

package/src/components/styles/GenericEditableTable.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .schedulingTable {
     width: 100%;
     border-collapse: collapse;
@@ -205,29 +210,7 @@
     }
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-rgb), 1.05);
-    }
-}
 
 .btn_compact {
     width: max-content;