@visns-studio/visns-components 4.4.0 → 4.4.1

package/components/crm/auth/Profile.jsx

@@ -1,4 +1,5 @@
 // src/components/Profile.jsx
+import '../../styles/global.css';
 
 import React, { useState, useEffect, useRef } from 'react';
 import PasswordStrengthBar from 'react-password-strength-bar';
@@ -129,7 +130,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         type="text"
                                         name="name"
                                         onChange={handleChangeProfile}
-                                        className={inputClasses.name}
+                                        className={`${styles.input} ${inputClasses.name}`}
                                         value={profile.name}
                                     />
                                     <span className={styles.fi__span}>
@@ -143,7 +144,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         type="text"
                                         name="email"
                                         readOnly
-                                        className={inputClasses.email}
+                                        className={`${styles.input} ${inputClasses.email}`}
                                         value={profile.email}
                                     />
                                     <span className={styles.fi__span}>
@@ -163,7 +164,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         name="password"
                                         onChange={handleChangeProfile}
                                         value={profile.password}
-                                        className={inputClasses.password}
+                                        className={`${styles.input} ${inputClasses.password}`}
                                     />
                                     <PasswordStrengthBar
                                         password={profile.password}
@@ -182,9 +183,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         name="password_confirmation"
                                         onChange={handleChangeProfile}
                                         value={profile.password_confirmation}
-                                        className={
-                                            inputClasses.password_confirmation
-                                        }
+                                        className={`${styles.input} ${inputClasses.password_confirmation}`}
                                     />
                                 </label>
                             </div>

package/components/crm/auth/styles/Profile.module.css

@@ -1,5 +1,16 @@
 /* Profile.module.css */
 
+input:not(:placeholder-shown) + .fi__span,
+textarea:not(:placeholder-shown) + .fi__span,
+select:not(:placeholder-shown) + .fi__span {
+    transform: translateY(-40%) translateX(10px) scale(0.75);
+    opacity: 1;
+    padding: 0 4px;
+    background: var(--tertiary-color);
+    font-weight: 300;
+    border-radius: var(--br);
+}
+
 .grid {
     width: 100%;
     display: flex;
@@ -136,8 +147,9 @@
     z-index: 500;
 }
 
-input[type='text'],
-input[type='password'] {
+.input,
+.textarea,
+.select {
     background: var(--item-color);
     border-radius: var(--br);
     border: 1px solid transparent;
@@ -149,28 +161,19 @@ input[type='password'] {
     transition: box-shadow 0.15s linear;
 }
 
-input[type='text']:hover,
-input[type='password']:hover {
+.input:hover,
+.textarea:hover,
+.select:hover {
     border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
     transition: border 0.15s linear;
 }
 
-input[type='text']:focus,
-input[type='password']:focus {
+.input:focus,
+.textarea:focus,
+.select:focus {
     border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
 }
 
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
-    opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-    border-radius: var(--br);
-}
-
 .sigcanvas {
     border: 2px solid #ccc;
     border-radius: 10px;

package/components/crm/styles/AsyncSelect.module.css

@@ -0,0 +1,12 @@
+.visns__ms {
+    input {
+        &:hover {
+            box-shadow: none !important;
+            transition: box-shadow 0.15s linear !important;
+        }
+
+        &:focus {
+            box-shadow: none !important;
+        }
+    }
+}

package/components/crm/styles/Autocomplete.module.css

@@ -0,0 +1,44 @@
+.AutocompletePlace-results {
+    z-index: 999;
+}
+
+.AutocompletePlace {
+    position: relative;
+
+    > svg {
+        position: absolute;
+        right: 0.5em;
+        top: 0.5em;
+        color: var(--primary-color);
+        cursor: pointer;
+    }
+}
+
+.AutocompletePlace.toggleActive {
+    color: var(--highlight-color);
+}
+
+.AutocompletePlace-input {
+    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
+}
+
+.AutocompletePlace-results {
+    position: absolute;
+    background-color: white;
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+}
+
+.AutocompletePlace-items {
+    list-style: none;
+    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
+    cursor: pointer;
+    padding: 10px 10px;
+
+    &:hover {
+        background-color: rgba(var(--primary-color-rgb), 0.065);
+    }
+}

package/components/crm/styles/DataGrid.module.css

@@ -0,0 +1,215 @@
+.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-color-rgb), 1.05);
+    }
+}
+.vs-datagrid--row {
+    &:hover {
+        .InovuaReactDataGrid__row-cell-wrap {
+            background: rgb(240, 240, 240) !important;
+            cursor: pointer;
+        }
+    }
+}
+
+.InovuaReactDataGrid {
+    letter-spacing: 0.015rem !important;
+    color: black !important;
+}
+
+.InovuaReactDataGrid__header {
+    color: var(--primary-color) !important;
+}
+
+.InovuaReactDataGrid__row-hover-target {
+    &:hover {
+        color: black !important;
+        background: rgb(240, 240, 240) !important;
+    }
+}
+
+.InovuaReactDataGrid__row {
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+#smartTableSearchInput {
+    background: #eeeeee;
+    border: 1px solid rgba(var(--table-color-rgb), 1.1);
+    border-radius: var(--br);
+    color: var(--paragraph-color);
+    padding: 10px 10px 10px 35px;
+
+    &:focus {
+        border: 1px solid lighten(#474747, 10%);
+        box-shadow: none;
+        transform: translateY(0);
+    }
+
+    &:hover {
+        box-shadow: none;
+        transform: translateY(0);
+    }
+}
+
+.filterInput--alt {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    input {
+        padding-left: 3rem !important;
+    }
+}
+
+.icon-search {
+    width: max-content;
+    height: auto;
+    position: absolute;
+    z-index: 500;
+    padding-top: 4px;
+    padding-left: 20px;
+}
+
+.filterAction--alt {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    gap: 5px;
+    display: flex;
+
+    > .btn {
+        padding: 10px 70px;
+    }
+}
+
+.icon-search {
+    width: max-content;
+    height: auto;
+    position: absolute;
+    z-index: 500;
+    padding-top: 4px;
+    padding-left: 20px;
+}
+
+.tdactions {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.1rem;
+
+    span {
+        display: flex;
+        align-items: center;
+        position: relative;
+        width: 18px;
+        height: 18px;
+
+        svg {
+            width: 18px;
+            height: 18px;
+        }
+    }
+}
+
+.formcontainer {
+    width: 100%;
+}
+
+.modalwrap {
+    background: var(--tertiary-color);
+    border-radius: 3px;
+    overflow: visible;
+    border-top-left-radius: var(--br);
+    border-top-right-radius: var(--br);
+
+    .modal {
+        width: 100%;
+        position: relative;
+
+        &__header {
+            width: 100%;
+            background: var(--primary-color);
+            border: 2px solid rgba(var(--primary-color-rgb), 1.05);
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+            box-sizing: border-box;
+
+            h1 {
+                color: var(--tertiary-color);
+                margin: 0;
+                padding: 0.75em 0.75em;
+                font-size: 1.15em;
+            }
+
+            .modal__close {
+                width: max-content;
+                position: absolute;
+                right: 5px;
+                top: 5px;
+                box-sizing: border-box;
+                background: rgba(var(--primary-color-rgb), 1.08);
+                cursor: pointer;
+                padding: 8px 8px;
+                margin: 0;
+                outline: none;
+                border: none;
+                border-radius: var(--br);
+                display: block;
+                line-height: 1;
+
+                svg {
+                    color: white;
+                    display: block;
+                }
+            }
+        }
+
+        &__content {
+            width: 100%;
+            position: relative;
+            padding: 0.25rem;
+            box-sizing: border-box;
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+
+            .btn {
+                background: var(--primary-color);
+                border: 1px solid rgba(var(--primary-color-rgb), 1.05);
+
+                &:hover {
+                    background: var(--highlight-color);
+                    color: var(--primary-color);
+                }
+            }
+        }
+    }
+}
+
+.top--modal {
+    width: 100%;
+    max-width: 1000px !important;
+    height: auto;
+    padding: 0 !important;
+}