@visns-studio/visns-components 5.0.2 → 5.0.3

package/package.json

@@ -75,7 +75,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.0.2",
+    "version": "5.0.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Navigation.jsx

@@ -9,6 +9,7 @@ import {
     Calendar,
     ChatDots,
     Clipboard,
+    CloudUpload,
     DoubleSword,
     Draft,
     Envelope,
@@ -294,6 +295,48 @@ function Navigation({
     };
 
     const renderNav = (n) => {
+        const iconComponents = {
+            arrowCycle: ArrowCycle,
+            bookClose: BookClose,
+            bookOpen: BookOpen,
+            briefcase: Briefcase,
+            calendar: Calendar,
+            chatDots: ChatDots,
+            clipboard: Clipboard,
+            cloudUpload: CloudUpload,
+            doubleSword: DoubleSword,
+            draft: Draft,
+            envelope: Envelope,
+            file: File,
+            folder: Folder,
+            folderAdd: FolderAdd,
+            gear: Gear,
+            grid: Grid,
+            home: Home,
+            homeAlt1: HomeAlt1,
+            inbox: Inbox,
+            info: Info,
+            lightBulb: LightBulb,
+            microphone: Microphone,
+            money: Money,
+            newspaper: Newspaper,
+            paper: Paper,
+            peopleGroup: PeopleGroup,
+            peopleMultiple: PeopleMultiple,
+            question: Question,
+            questionFill: QuestionFill,
+            search: Search,
+            settingsVertical: SettingsVertical,
+            signOut: SignOut,
+            shippingBoxV1: ShippingBoxV1,
+            statisticUp: StatisticUp,
+            textAlignLeft: TextAlignLeft,
+            ticket: Ticket,
+            utensils: Utensils,
+        };
+
+        const IconComponent = iconComponents[n.icon];
+
         let navItemClasses;
 
         if (n.class.includes('active')) {

package/src/components/crm/auth/styles/Profile.module.scss

@@ -163,7 +163,7 @@ select:not(:placeholder-shown) + .fi__span {
 .fi__span {
     position: absolute;
     transition: all 200ms;
-    opacity: 0.8;
+    opacity: 1;
     left: 0;
     padding: 19px 20px;
     transform-origin: top left;

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

@@ -305,9 +305,9 @@ input[type='file']:hover {
 .fi__span {
     position: absolute;
     transition: all 200ms;
-    opacity: 0.8;
+    opacity: 1;
     left: 0;
-    padding: 19px 20px;
+    padding: 0 1rem;
     transform-origin: top left;
     cursor: text;
 }
@@ -369,7 +369,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -378,7 +378,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -434,49 +434,6 @@ select:not(:placeholder-shown) + .fi__span {
     border-color: red !important;
 }
 
-.AutocompletePlace {
-    position: relative;
-}
-
-.AutocompletePlace svg {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-    color: var(--paragraph-color);
-    cursor: pointer;
-}
-
-.AutocompletePlace .toggleActive {
-    color: var(--highlight-color);
-}
-
-.AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-    height: 51.5px;
-}
-
-.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;
-    z-index: 999;
-}
-
-.AutocompletePlace-items {
-    list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
-    cursor: pointer;
-    padding: 10px 10px;
-}
-
-.AutocompletePlace-items:hover {
-    background-color: rgba(var(--paragraph-color-rgb), 0.065);
-}
-
 .react-datepicker-wrapper {
     width: 100% !important;
 }

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

@@ -506,49 +506,6 @@ select:not(:placeholder-shown) + .fi__span {
     border-color: red !important;
 }
 
-.AutocompletePlace {
-    position: relative;
-}
-
-.AutocompletePlace svg {
-    position: absolute;
-    right: 0.5em;
-    top: 0.5em;
-    color: var(--paragraph-color);
-    cursor: pointer;
-}
-
-.AutocompletePlace .toggleActive {
-    color: var(--highlight-color);
-}
-
-.AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-    height: 51.5px;
-}
-
-.AutocompletePlace-results {
-    position: absolute;
-    background-color: white;
-    padding: 0;
-    margin: 0;
-    border: 1px solid rgba(var(--primary-color), 0.25);
-    border-radius: var(--br);
-    overflow: hidden;
-    z-index: 999;
-}
-
-.AutocompletePlace-items {
-    list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
-    cursor: pointer;
-    padding: 10px 10px;
-}
-
-.AutocompletePlace-items:hover {
-    background-color: rgba(var(--paragraph-color-rgb), 0.065);
-}
-
 .react-datepicker-wrapper {
     width: 100% !important;
 }

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

@@ -4,41 +4,33 @@
 
 .AutocompletePlace {
     position: relative;
+    width: 100%;
 
     > svg {
         position: absolute;
         right: 0.5em;
-        top: 0.5em;
-        color: var(--primary-color);
+        top: 0.95rem;
+        color: var(--paragraph-color);
         cursor: pointer;
     }
-}
 
-.AutocompletePlace.toggleActive {
-    color: var(--highlight-color);
+    .toggleActive {
+        color: var(--secondary-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;
+    height: 38px;
 }
 
 .AutocompletePlace-items {
     list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
+    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
     cursor: pointer;
-    padding: 10px 10px;
-}
+    padding: 5px;
 
-.AutocompletePlace-items:hover {
-    background-color: rgba(var(--primary-color-rgb), 0.065);
+    &:hover {
+        background-color: rgba(var(--paragraph-rgb), 0.065);
+    }
 }

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

@@ -52,7 +52,7 @@
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 0.8;
+        opacity: 1;
         left: 0;
         transform-origin: top left;
         cursor: text;
@@ -131,7 +131,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -140,7 +140,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
     z-index: 999;

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

@@ -27,7 +27,7 @@
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 0.8;
+        opacity: 1;
         left: 0;
         transform-origin: top left;
         cursor: text;
@@ -105,7 +105,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
 }
@@ -114,7 +114,7 @@ select:not(:placeholder-shown) + .fi__span {
     transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
     padding: 0;
-    background: var(--bg-color);
+    background: var(--tertiary-color);
     font-weight: 300;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
     z-index: 999;
@@ -265,4 +265,4 @@ input[type='file'] {
             border-radius: var(--br);
         }
     }
-}
+}

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

@@ -828,56 +828,4 @@
             max-width: 20px;
         }
     }
-}
-
-.AutocompletePlace-results {
-    z-index: 999;
-}
-
-.AutocompletePlace {
-    position: relative;
-
-    > svg {
-        position: absolute;
-        right: 0.5em;
-        top: 0.5em;
-        color: var(--paragraph-color);
-        cursor: pointer;
-    }
-
-    .toggleActive {
-        color: var(--secondary-color);
-    }
-}
-
-.AutocompletePlace-input {
-    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
-    height: 38px;
-}
-
-.AutocompletePlace-results {
-    width: 400px;
-    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;
-
-    ul {
-        padding: 0;
-        margin: 0;
-    }
-}
-
-.AutocompletePlace-items {
-    list-style: none;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
-    cursor: pointer;
-    padding: 10px 10px;
-
-    &:hover {
-        background-color: rgba(var(--paragraph-rgb), 0.065);
-    }
-}
+}

package/src/components/styles/global.css

@@ -110,4 +110,26 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 .popup-content {
     border-radius: var(--br);
     padding: 0 !important;
+}
+
+.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;
+    }
 }