@visns-studio/visns-components 4.10.48 → 5.0.1-8.1

package/src/components/crm/styles/Notification.module.scss

@@ -22,6 +22,7 @@
     box-sizing: border-box;
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
     z-index: 999;
+    font-size: 1rem;
 }
 
 .notibox .notiscrollwrap {

package/src/components/crm/styles/QrCode.module.scss

@@ -69,6 +69,10 @@
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
+
+        p {
+            font-size: 0.85rem;
+        }
     }
 }
 
@@ -85,21 +89,3 @@
         margin: 0 0.15em;
     }
 }
-
-.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;
-}

package/src/components/crm/styles/SwitchAccount.module.scss

@@ -59,7 +59,6 @@
 
     .currentAccount {
         float: right;
-        color: darken(#f0f0f0, 25%);
         line-height: 1.25;
     }
 

package/src/components/crm/styles/TableFilter.module.scss

@@ -2,6 +2,7 @@
     list-style: none;
     padding: 0;
     margin: 0;
+    font-size: 1rem;
 }
 
 .collapsibleMenu {
@@ -34,7 +35,7 @@
     display: block;
     padding: 8px 20px;
     text-decoration: none;
-    background: var(--item-color);
+    background: var(--bg-color);
     color: var(--paragraph-color);
     border-radius: 3px;
     transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);

package/src/components/styles/global.css

@@ -1,53 +1,88 @@
-@import '@fontsource/barlow/index.css';
-@import '@fontsource/barlow/300.css';
-@import '@fontsource/barlow/700.css';
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
 
-/* Apply the crop mixin manually */
-.crop::before {
-    content: '';
-    display: block;
-    height: 0;
-    width: 0;
-    margin-top: calc((1 - 1.25) * 0.5em);
+* {
+    margin: 0;
 }
 
+html,
 body {
-    font-size: 100%;
-    background: var(--tertiary-color-dark, var(--tertiary-color));
-    font-family: 'Barlow', sans-serif;
-    font-weight: 300;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
+    height: 100%;
+    text-rendering: geometricPrecision;
+    font-stretch: 75% 125%;
+}
+
+body {
+    background: var(--bg-color);
+    font-weight: var(--para-weight);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
     font-style: normal;
-    letter-spacing: 0.018em;
+    overflow-x: hidden;
+    overscroll-behavior: none;
+    font-size: 0.85rem;
 }
 
-.loginbg {
-    background: var(--tertiary-color);
+input,
+button,
+textarea,
+select {
+    font: inherit;
 }
 
 h1,
 h2,
 h3,
 h4,
-h5 {
-    font-size: 1.675em;
-    color: var(--primary-color);
-    font-weight: 700;
-    font-style: normal;
+h5,
+h6 {
+    color: var(--header-color);
+    font-weight: var(--title-weight);
+    line-height: var(--title-height);
+    letter-spacing: 0.015rem;
 }
 
 p {
-    font-weight: 300;
-    font-style: normal;
-    margin: 0 0 calc(var(--padding) / 2); /* Replace with actual padding value */
+    font-size: clamp(1rem, 2vw, 1.25rem);
     color: var(--paragraph-color);
+    font-weight: var(--para-weight);
+    line-height: var(--para-height);
+    margin-bottom: 1rem;
+
+    @media (max-width: 1024px) {
+        font-size: clamp(0.85rem, 2vw, 0.95rem);
+    }
+
+    strong {
+        font-weight: var(--title-weight);
+    }
 }
 
-p::before {
-    content: '';
-    display: block;
-    height: 0;
-    width: 0;
-    margin-top: calc((1 - 1.25) * 0.5em);
+ul {
+    font-size: clamp(1rem, 2vw, 1.25rem);
+    color: var(--paragraph-color);
+    font-weight: var(--para-weight);
+    line-height: var(--para-height);
+    margin-bottom: 1rem;
+
+    @media (max-width: 1024px) {
+        font-size: clamp(0.85rem, 2vw, 0.95rem);
+    }
+}
+
+a {
+    outline: none;
+}
+
+.loginbg {
+    background: var(--tertiary-color);
 }
 
 textarea,
@@ -59,15 +94,110 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     ):not(.inovua-react-toolkit-text-input__input):not(
         .inovua-react-toolkit-numeric-input__input
     ) {
-    background: var(--item-color);
+    background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
     box-shadow: none;
     padding: 1rem;
     outline: none;
-    /* width: 100%; */
     box-sizing: border-box;
-    background: rgba(white, 0.5);
     color: var(--paragraph-color);
     transition: border 0.15s linear;
+    width: 100%;
+    line-height: 1;
+    font-size: 0.85rem;
+
+    &:focus {
+        border: 1px solid var(--primary-color);
+    }
+}
+
+.popup-content {
+    border-radius: var(--br);
+    padding: 0 !important;
+}
+
+.popup-overlay {
+    background: rgba(0, 0, 0, 0.65) !important;
+    backdrop-filter: blur(3px);
+}
+
+.AutocompletePlace-results {
+    z-index: 999;
+    width: 500px;
+    position: absolute;
+    background-color: var(--tertiary-color);
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-rgb), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+    font-size: 1rem;
+    max-height: 150px;
+    overflow-y: auto;
+
+    ul {
+        font-size: 1rem;
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.vs-datagrid--row:hover {
+    .InovuaReactDataGrid__row-cell-wrap {
+        background: rgb(240, 240, 240) !important;
+        cursor: pointer;
+    }
+}
+
+.InovuaReactDataGrid {
+    color: var(--paragraph-color) !important;
+}
+
+.InovuaReactDataGrid__header {
+    color: var(--primary-color) !important;
+}
+
+.InovuaReactDataGrid__row-hover-target:hover {
+    color: var(--paragraph-color) !important;
+    background: rgb(240, 240, 240) !important;
+}
+
+.InovuaReactDataGrid__row:hover {
+    cursor: pointer;
+}
+
+/* Async Select */
+
+.visns-select__control {
+    width: 100%;
+    cursor: default;
+    min-height: 50px;
+    outline: 0 !important;
+    position: relative;
+    -webkit-transition: all 100ms;
+    transition: all 100ms;
+    background-color: hsl(0, 0%, 100%);
+    border-color: hsl(0, 0%, 80%);
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    box-shadow: none !important;
+
+    &--is-focused {
+        border-color: var(--primary-color) !important;
+        box-shadow: none !important;
+        border-width: 1px !important;
+    }
+
+    &--menu-is-open {
+        border-color: var(--primary-color) !important;
+        box-shadow: none !important;
+        border-width: 1px !important;
+    }
+}
+
+.visns-select__menu {
+    z-index: 999 !important;
 }

package/src/index.js

@@ -37,7 +37,6 @@ import CmsSort from './components/cms/generic/CmsSort';
 import AuditLog from './components/crm/generic/AuditLog';
 import AuditLogs from './components/crm/generic/AuditLogs';
 import GenericAuth from './components/crm/generic/GenericAuth';
-import GenericDashboard from './components/crm/generic/GenericDashboard';
 import GenericDetail from './components/crm/generic/GenericDetail';
 import GenericDynamic from './components/crm/generic/GenericDynamic';
 import GenericFormBuilder from './components/crm/generic/GenericFormBuilder';
@@ -46,10 +45,6 @@ import GenericMain from './components/crm/generic/GenericMain';
 import GenericSort from './components/crm/generic/GenericSort';
 import NotificationList from './components/crm/generic/NotificationList';
 
-/** Sketching Components */
-import SketchField from './components/crm/sketch/SketchField';
-import Tools from './components/crm/sketch/tools';
-
 export {
     AsyncSelect,
     AuditLog,
@@ -68,7 +63,6 @@ export {
     Field,
     Form,
     GenericAuth,
-    GenericDashboard,
     GenericDetail,
     GenericDynamic,
     GenericFormBuilder,
@@ -85,10 +79,8 @@ export {
     Reset,
     SelectList,
     Select,
-    SketchField,
     SortableList,
     Table,
     TableFilter,
-    Tools,
     Verify,
 };

package/src/components/crm/generic/styles/GenericDashboard.module.scss

@@ -1,325 +0,0 @@
-body {
-    min-height: 100vh;
-    background: var(--bg);
-}
-
-.grid {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    padding: 2rem;
-}
-
-.filterContainer {
-    background: #ffffff; // White background for contrast
-    border: 1px solid #dadce0; // Subtle border for separation
-    border-radius: 8px; // Rounded corners
-    padding: 1.5rem;
-    margin-bottom: 1.5rem; // Spacing below the filter section
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // Subtle shadow for depth
-}
-
-.filterHeader {
-    text-align: left;
-    margin-bottom: 1rem;
-
-    h3 {
-        font-size: 1.25rem;
-        font-weight: 600;
-        color: #333;
-        margin: 0;
-    }
-}
-
-.filterFields {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem; // Gap between fields
-    align-items: flex-end; // Align fields vertically
-}
-
-.filterField {
-    flex: 1; // Ensures equal spacing for each field
-    display: flex;
-    flex-direction: column;
-    min-width: 200px; // Sets a minimum width for smaller screens
-
-    label {
-        font-size: 0.875rem;
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-        color: #555;
-    }
-
-    input,
-    select {
-        border: 1px solid #dadce0;
-        border-radius: 5px;
-        padding: 0.5rem 0.75rem;
-        font-size: 0.875rem;
-        color: #333;
-        outline: none;
-        background-color: #f9f9f9;
-        width: 100%; // Ensures full width within the container
-        height: 51px;
-
-        &:focus {
-            border-color: #007bff;
-            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); // Focus effect
-        }
-    }
-}
-
-.filterActions {
-    display: flex;
-    gap: 0.75rem; // Gap between buttons
-
-    .btn {
-        padding: 0.5rem 1rem;
-        border-radius: 5px;
-        font-size: 0.875rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        cursor: pointer;
-        transition: background-color 0.2s;
-        height: 51px;
-
-        &.btn-primary {
-            background-color: #007bff;
-            color: #fff;
-            border: none;
-
-            &:hover {
-                background-color: #0056b3;
-            }
-        }
-
-        &.btn-secondary {
-            background-color: #f8f9fa;
-            color: #333;
-            border: 1px solid #ccc;
-
-            &:hover {
-                background-color: #e2e6ea;
-            }
-        }
-    }
-}
-
-.widgetTitle {
-    width: 100%;
-    height: auto;
-    padding: 0 0 1em 0;
-    margin-bottom: 1em;
-    border-bottom: 1px dashed #dadce0;
-
-    h2 {
-        font-size: 1.375em;
-        font-weight: 700;
-        margin: 0;
-        padding: 0;
-        line-height: 1;
-        text-transform: capitalize;
-        text-align: left;
-    }
-}
-
-.dashList {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-        width: 100%;
-        padding: 0;
-        margin: 0;
-
-        &:first-child {
-            button {
-                border-top-left-radius: var(--br);
-                border-top-right-radius: var(--br);
-            }
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-
-            button {
-                border-bottom-left-radius: var(--br);
-                border-bottom-right-radius: var(--br);
-                border-bottom: 1px solid #dadce0;
-            }
-        }
-
-        a {
-            text-decoration: none;
-        }
-
-        button {
-            width: 100%;
-            display: block;
-            background: white;
-            border: 1px solid #dadce0;
-            border-bottom: none;
-            outline: none;
-            padding: 0.5rem 1rem;
-            color: var(--paragraph-color);
-            text-align: left;
-            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-            letter-spacing: 0.018em;
-
-            &:hover {
-                background: rgba(var(--secondary-color), 0.05);
-                transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-            }
-
-            strong {
-                color: var(--paragraph-color);
-            }
-
-            span {
-                color: rgba(var(--secondary-color-rgb), 1.1);
-                float: right;
-            }
-        }
-    }
-}
-
-.grid__row {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-    gap: 1rem;
-}
-
-.grid__dashfull {
-    width: 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.tableContainer {
-    margin-top: 20px;
-    border: 1px solid #dadce0;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.tableContainer table {
-    width: 100%;
-    border-collapse: collapse;
-    text-align: left;
-    background-color: #ffffff;
-}
-
-.tableContainer th {
-    background-color: #f6f8fa;
-    color: #333;
-    font-weight: bold;
-    padding: 12px 15px;
-    border-bottom: 1px solid #dadce0;
-    text-transform: capitalize;
-    font-size: 14px;
-}
-
-.tableContainer td {
-    padding: 10px 15px;
-    border-bottom: 1px solid #eaeaea;
-    font-size: 13px;
-    color: #555;
-    text-align: center;
-}
-
-.tableContainer tbody tr:hover {
-    background-color: #f9f9f9;
-}
-
-.tableContainer tbody tr:nth-child(even) {
-    background-color: #f7f7f7;
-}
-
-.tableContainer th:first-child,
-.tableContainer td:first-child {
-    text-align: left;
-    font-weight: bold;
-    padding-left: 20px;
-}
-
-.tableContainer td:last-child {
-    border-right: none;
-}
-
-.tableContainer th:last-child {
-    border-right: none;
-}
-
-.dashwidget {
-    background: var(--primary-color) !important;
-    border-top: 1px solid transparent !important;
-    border-left: 1px solid transparent !important;
-    border-right: 1px solid transparent !important;
-    border-bottom: 4px solid rgba(var(--primary-color-rgb), 0.9) !important;
-
-    h2 {
-        color: var(--highlight-color) !important;
-    }
-
-    .widgetTitle {
-        border-bottom: 1px dashed rgba(#dadce0, 0.15);
-    }
-}
-
-.grid__contentlist {
-    li {
-        position: relative;
-
-        &:hover {
-            .edititem {
-                opacity: 1;
-                transition: opacity 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
-            }
-        }
-
-        .edititem {
-            position: absolute;
-            right: 0;
-            text-decoration: none;
-            opacity: 0;
-            transition: opacity 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
-        }
-    }
-}
-
-.react-datepicker__month-select,
-.react-datepicker__year-select {
-    padding: 0.5em 0.85em;
-}
-
-.react-confirm-alert-overlay {
-    z-index: 999 !important;
-}
-
-.polActions {
-    position: fixed;
-    bottom: 15px;
-    right: 20px;
-    width: auto;
-
-    button {
-        display: block;
-        float: left;
-        padding: 0.35em 1em;
-        margin: 0 0.15em;
-    }
-}