@naniteninja/dashboard-components-lib 1.0.0

package/src/assets/scheduler/accept.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.26525 0.21847C9.37332 0.152409 9.50241 0.131394 9.62542 0.159834C9.74843 0.188275 9.85581 0.26396 9.92503 0.371012L10.4082 1.11886C10.4713 1.21661 10.4983 1.33385 10.4844 1.44986C10.4706 1.56587 10.4168 1.67318 10.3325 1.75281L10.331 1.75479L10.3242 1.76123L10.2964 1.78747L10.1866 1.89396C9.57903 2.49204 8.98989 3.10911 8.42003 3.74427C7.34788 4.94084 6.07468 6.50687 5.21775 8.02635C4.97863 8.4503 4.39449 8.54143 4.04801 8.17543L0.883308 4.83832C0.837956 4.79048 0.802544 4.73387 0.779177 4.67186C0.755809 4.60985 0.744965 4.54371 0.747286 4.47737C0.749608 4.41102 0.765049 4.34582 0.792692 4.28566C0.820334 4.22549 0.859614 4.17157 0.908197 4.12711L1.86468 3.25148C1.94874 3.17457 2.05652 3.1297 2.16958 3.12455C2.28263 3.1194 2.39394 3.15429 2.48445 3.22325L4.09925 4.45201C6.62125 1.92763 8.05207 0.958893 9.26525 0.21847Z" fill="#EBEBF5" fill-opacity="0.2"/>
+</svg>

package/src/assets/scheduler/accept_active.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.26525 0.876673C9.37332 0.810612 9.50241 0.789597 9.62542 0.818038C9.74843 0.846478 9.85581 0.922164 9.92503 1.02921L10.4082 1.77707C10.4713 1.87481 10.4983 1.99205 10.4844 2.10806C10.4706 2.22407 10.4168 2.33138 10.3325 2.41101L10.331 2.41299L10.3242 2.41943L10.2964 2.44568L10.1866 2.55216C9.57903 3.15024 8.98989 3.76731 8.42003 4.40248C7.34788 5.59904 6.07468 7.16508 5.21775 8.68455C4.97863 9.1085 4.39449 9.19963 4.04801 8.83363L0.883308 5.49652C0.837956 5.44868 0.802544 5.39207 0.779177 5.33006C0.755809 5.26806 0.744965 5.20191 0.747286 5.13557C0.749608 5.06922 0.765049 5.00403 0.792692 4.94386C0.820334 4.88369 0.859614 4.82977 0.908197 4.78532L1.86468 3.90969C1.94874 3.83278 2.05652 3.78791 2.16958 3.78276C2.28263 3.77761 2.39394 3.8125 2.48445 3.88146L4.09925 5.11021C6.62125 2.58584 8.05207 1.6171 9.26525 0.876673Z" fill="#FE3C72"/>
+</svg>

package/src/assets/scheduler/arrow.svg

@@ -0,0 +1,13 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.44344 0.936192C1.72488 0.65427 2.18119 0.65427 2.46263 0.936192L6.99777 5.47907L11.5329 0.936191C11.8144 0.654269 12.2707 0.654269 12.5521 0.936191C12.8335 1.21811 12.8335 1.6752 12.5521 1.95712L7.50737 7.01047C7.22593 7.29239 6.76962 7.29239 6.48818 7.01047L1.44344 1.95712C1.162 1.6752 1.162 1.21811 1.44344 0.936192Z" fill="url(#paint0_linear_1414_489)" fill-opacity="0.6" stroke="url(#paint1_linear_1414_489)" stroke-opacity="0.6" stroke-width="0.721906" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1414_489" x1="1.95304" y1="3.97333" x2="12.0425" y2="3.97333" gradientUnits="userSpaceOnUse">
+<stop offset="0.574653" stop-color="#FE3C72"/>
+<stop offset="1" stop-color="#DEA9FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1414_489" x1="1.23236" y1="3.97333" x2="12.7632" y2="3.97333" gradientUnits="userSpaceOnUse">
+<stop offset="0.574653" stop-color="#FE3C72"/>
+<stop offset="1" stop-color="#DEA9FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/scheduler/cancel.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.358 8.6128L8.71702 3.24464M8.81786 8.71513L3.25788 3.14566" stroke="#EBEBF5" stroke-opacity="0.2" stroke-width="1.47229" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/scheduler/cancel_active.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.358 8.6128L8.71702 3.24464M8.81786 8.71513L3.25788 3.14566" stroke="#FE3C72" stroke-width="1.47229" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/scheduler/heart.svg

@@ -0,0 +1,18 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_484_10774)">
+<path d="M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.85122 1.65614C10.2912 1.07614 10.9412 0.656136 11.7212 0.656136C12.9662 0.656136 13.9712 1.66114 13.9712 2.90614C13.9712 3.37114 13.8312 3.80114 13.5912 4.15614C13.1862 4.76114 9.47122 8.65614 9.47122 8.65614C9.47122 8.65614 5.75622 4.76114 5.35122 4.15614C5.11122 3.80114 4.97122 3.37114 4.97122 2.90614C4.97122 1.66114 5.97622 0.656136 7.22122 0.656136C8.00122 0.656136 8.65622 1.07614 9.09122 1.65614C9.47122 2.15614 9.47122 2.15614 9.47122 2.15614Z" fill="#F95D84"/>
+<path d="M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.09122 1.65614C8.65122 1.07614 8.00122 0.656136 7.22122 0.656136C5.97622 0.656136 4.97122 1.66114 4.97122 2.90614C4.97122 3.37114 5.11122 3.80114 5.35122 4.15614C5.75622 4.76114 9.47122 8.65614 9.47122 8.65614M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.85122 1.65614C10.2912 1.07614 10.9412 0.656136 11.7212 0.656136C12.9662 0.656136 13.9712 1.66114 13.9712 2.90614C13.9712 3.37114 13.8312 3.80114 13.5912 4.15614C13.1862 4.76114 9.47122 8.65614 9.47122 8.65614" stroke="#F95D84" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_484_10774" x="0.471222" y="0.156136" width="18" height="17" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_484_10774"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_484_10774" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/lib/shared-styles/common/_colors.scss

@@ -0,0 +1,30 @@
+$ns-blue: #45899b;
+$ns-orange: #d4863d;
+$ns-neutral-1: #333333;
+$ns-neutral-2: #666666;
+$ns-neutral-3: #868686;
+$ns-neutral-4: #a6a6a6;
+$ns-neutral-5: #cccccc;
+$ns-neutral-6: #dfe0e3;
+$ns-neutral-7: #eeeef0;
+$ns-neutral-8: #f4f6f7;
+$ns-error-primary: #c7472e;
+$ns-error-secondary: #f0dbd6;
+$ns-success-green: #599b4e;
+$ns-warn-orange: #f8a91d;
+$ns-teal: #10365a;
+
+$ns-dark-blue-800: #10365a;
+$ns-blue-900: #1350a4;
+$ns-grey-800: #464a4c;
+$ns-grey-900: #24282a;
+$ns-background-grey: #eff2f3;
+$ns-red-700: #d32f2f;
+$ns-orange-400: #f4a947;
+$ns-green-600: #2db231;
+$ns-blue-800: #1e6ec3;
+
+$background-color: var(--ion-background-color);
+$data-table-border: #212121;
+$cyrano-background: #28242d;
+$cyrano-primary: #e15561;

package/src/lib/shared-styles/common/animations.scss

@@ -0,0 +1,48 @@
+// --------------- zoom-in & out --------------
+.zoom-in {
+  animation: fadeZoomIn 0.5s ease-in-out;
+}
+
+.zoom-out {
+  animation: fadeZoomOut 0.5s ease-in-out;
+  &.collapse {
+    display: none !important;
+  }
+}
+
+@keyframes fadeZoomOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+@keyframes fadeZoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+
+// --------------- hide & show --------------
+.hide {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
+}
+
+.show {
+  max-height: 200px; /* Adjust this value based on content */
+  opacity: 1;
+  transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
+}

package/src/lib/shared-styles/common/base-input-field.scss

@@ -0,0 +1,132 @@
+:host {
+  --border-radius: 100px;
+  --input-field-margin: 0;
+  --label-font-size-floated: 11.0084px;
+  --label-color: rgba(255, 255, 255, 0.5);
+  --label-position-left: 7px;
+  --label-position-top: 19px;
+  --label-float-position-top: -3px;
+  --label-padding: 0px 7px;
+  --label-font-family: 'Gilroy-Regular', serif;
+  --label-font-style: normal;
+  --label-font-weight: 400;
+  --label-font-size: 14px;
+  --label-line-height: 160%;
+  --input-font-color: rgba(255, 255, 255, 0.5);
+  --input-font-family: 'Gilroy-Regular', serif;
+  --input-font-size: 16px;
+  --input-icon-color: #fe3c72;
+  --input-height: 48px;
+  --input-width: 100%;
+  --input-border: none;
+  --input-padding: 11px 15px;
+  --input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5);
+  --border: 3px solid #fe3c72;
+  --input-number-filed-font: 'Open Sans', sans-serif;
+  --dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);
+  --input-field-color: #fff;
+}
+
+:host {
+  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .error-outline {
+    display: block;
+  }
+  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .p-float-label {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.content-wrapper {
+  position: relative;
+  display: flex;
+  overflow: unset;
+  margin: var(--input-field-margin);
+  border-radius: var(--border-radius);
+  height: var(--input-height);
+  &.isDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.input-field-label {
+  color: var(--label-color);
+  position: absolute;
+  pointer-events: none;
+  left: var(--label-position-left, 7px);
+  top: var(--label-position-top, 24px);
+  padding: var(--label-padding, 0px 7px);
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+  font-family: var(--label-font-family, 'Gilroy-Regular', serif);
+  font-style: var(--label-font-style);
+  font-weight: var(--label-font-weight);
+  font-size: var(--label-font-size);
+  line-height: var(--label-line-height);
+  z-index: 2;
+}
+
+.p-float-label,
+.input-field,
+.input-field-readonly {
+  position: relative;
+  color: var(--input-field-color);
+  box-sizing: border-box;
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  height: var(--input-height);
+  width: var(--input-width);
+  border: var(--input-border);
+  border-radius: var(--border-radius);
+  padding: var(--input-padding);
+  margin: unset;
+  appearance: none;
+  -webkit-appearance: none;
+  box-shadow: var(--input-field-box-shadow);
+  -webkit-box-shadow: var(--input-field-box-shadow);
+}
+
+.input-field,
+.p-calendar .p-inputtext,
+.p-autocomplete .p-inputtext {
+  &:focus {
+    outline: none;
+    ~ .input-field-label {
+      top: var(--label-float-position-top);
+      font-size: var(--label-font-size-floated);
+    }
+  }
+}
+
+.error-outline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  transform: matrix(1, 0, 0, -1, 0, 0);
+  display: none;
+}
+
+.input-field-label-float {
+  top: var(--label-float-position-top);
+  font-size: var(--label-font-size-floated);
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+  top: -0.1rem;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

package/src/lib/shared-styles/common/buttons.scss

@@ -0,0 +1,152 @@
+:root {
+  --lib-button-width: 100px;
+  --lib-button-font-color: #fff;
+  --lib-button-border-radius: 30.582px;
+  --lib-button-border: 1px solid rgba(10, 9, 9, 0.45);
+  --lib-button-background: linear-gradient(180deg, rgba(62, 64, 69, 0.5) 0%, rgba(62, 64, 69, 0) 8.33%),
+    radial-gradient(170.95% 118.01% at 8.39% 32.81%, rgba(67, 64, 70, 0.5) 0%, rgba(41, 37, 45, 0.5) 28.24%, rgba(10, 10, 11, 0.5) 100%);
+  --lib-button-container-background: linear-gradient(90deg, #353039 0.68%, #29252d 99.45%);
+  --lib-button-box-shadow: 6.11634px 6.11634px 12.23267px 0px rgba(0, 0, 0, 0.25);
+  --lib-button-icon-color: #f7416e;
+  --lib-button-padding: 0 20px;
+  --lib-button-container-hover-outline-color: rgba(0, 0, 0, 0.87);
+  --lib-button-hover-outline-color: #fe638e;
+
+  --lib-button-container-height: 50px;
+  --lib-button-height: 48.5px;
+  --lib-button-font-family: 'Calistoga', serif;
+  --lib-button-font-size: 14px;
+  --lib-primary-button-text-shadow: 0px 0px 20.000049591064453px #fe3c72, 0px 0px 20.000049591064453px #fe3c72, 0px 0px 4.000010013580322px #fff;
+  --lib-secondary-button-text-shadow: 0px 0px 47.31624221801758px #fe3c72, 0px 0px 16px #fe3c72;
+  --lib-secondary-button-font-color: #fe638e;
+
+  --lib-list-button-container-height: 43px;
+  --lib-list-button-height: 40px;
+  --lib-list-button-icon-color: #f7416e;
+  --lib-list-button-padding: 7.189px 34.251px 10.018px 18.349px;
+  --lib-list-button-font-size: 12.872px;
+  --lib-list-button-font-family: 'Gilroy-Regular', serif;
+
+  --lib-icon-button-container-height: 33px;
+  --lib-icon-button-container-width: 33px;
+  --lib-icon-button-height: 30px;
+  --lib-icon-button-width: 30px;
+  --lib-icon-button-border-radius: 50%;
+
+  --lib-hover-button-height: 40px;
+  --lib-hover-button-width: 160px;
+  --lib-hover-icon-button-height: 25px;
+  --lib-hover-icon-button-width: 25px;
+  --lib-hover-icon-left-margin: 6px;
+  --lib-hover-button-font-size: 14px;
+  --lib-hover-button-font-color: #fe3c72;
+  --lib-hover-button-font-family: 'Gilroy-Regular', serif;
+
+  --lib-menu-button-container-height: 38px;
+  --lib-menu-button-container-width: 38px;
+  --lib-menu-button-height: 35px;
+  --lib-menu-button-width: 35px;
+  --lib-menu-button-border-radius: 50%;
+  --lib-menu-button-panel-background: linear-gradient(180deg, #403d46 0%, #3e3b44 100%);
+  --lib-menu-button-panel-shadow: 0px -2px 8px 0px rgba(255, 255, 255, 0.2) inset, 2px -2px 3px 0px rgba(0, 0, 0, 0.4) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  --lib-menu-button-active-color: #fe3c72;
+  --lib-menu-button-font-size: 12px;
+  --lib-menu--button-font-family: 'Gilroy-Regular', serif;
+
+  --primary-button-background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%) !important;
+  --black-button-background: #27242c;
+}
+
+.button {
+  text-align: center;
+  height: 46px;
+  --border-radius: 100px;
+  width: 300px;
+  text-transform: none !important;
+  font-family: 'Calistoga', serif;
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.button-sm {
+  width: 200px !important;
+}
+
+.button-lg {
+  width: 600px !important;
+}
+
+.box-shadow-button {
+  --box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25) !important;
+}
+
+.app-outline-button {
+  @extend .button;
+  --border-color: rgba(255, 255, 255, 0.5);
+  --border-style: solid;
+  --border-width: 2px;
+  --color: rgba(255, 255, 255, 0.5);
+  --background: transparent;
+  font-family: 'Calistoga', serif;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.app-black-button {
+  --lib-button-background: var(--black-button-background);
+  --lib-button-font-color: white;
+}
+
+.app-primary-button {
+  @extend .button;
+  @extend .box-shadow-button;
+  --background: var(--primary-button-background) !important;
+  --color: white;
+}
+
+.app-round-button {
+  width: 48px;
+  height: 48px;
+  --border-radius: 50%;
+  --background: var(--black-button-background);
+  --color: white;
+}
+
+.primary-button,
+.mat-raised-button.primary-button {
+  background: var(--button-background);
+  box-shadow: var(--box-shadow);
+  border-radius: 100px;
+  padding: 10px 25px;
+  font-family: 'Calistoga', serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 160%;
+  text-align: center;
+  text-transform: capitalize;
+  color: var(--cyrano-pink-shade-1);
+  text-shadow: 0 0 16px var(--cyrano-pink-shade-1);
+  display: flex;
+  min-width: auto;
+  border: none;
+  cursor: pointer;
+  img {
+    margin: 5px 5px 0 0;
+    width: 18px;
+  }
+  &.normal-text {
+    font-size: 16px;
+  }
+  &.disable {
+    background: #adadad;
+    opacity: 0.6;
+  }
+  &:active {
+    box-shadow:
+      0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+}

package/src/lib/shared-styles/common/cards.scss

@@ -0,0 +1,163 @@
+.message-box {
+  padding: 1px;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  opacity: 1;
+  pointer-events: all;
+  background-image: var(--message-box-bg-color, linear-gradient(160.44deg, #8a75da 1%, #574e96 20%, #736980 50%, #332e39 80%));
+  &:before {
+    position: absolute;
+    content: '';
+    background-image: radial-gradient(#f7bdde, #fff0 55%);
+    height: 100%;
+    width: 50%;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-animation: translateX(-50%);
+    -moz-transform: translateX(-50%);
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    left: 50%;
+    bottom: -30px;
+    height: 100%;
+    width: 61%;
+    transform: translateX(-50%);
+    opacity: 0.1;
+    background-image: var(--message-box-bg-transparent-color, radial-gradient(#fe3c72, #fff0 55%));
+    filter: blur(10px);
+    -webkit-filter: blur(10px);
+  }
+
+  .message-box-wrapper {
+      align-items: flex-start;
+      border-radius: 12px;
+      display: flex;
+      padding: 10px 20px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      gap: 20px;
+
+      &:before {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        opacity: 0.8;
+        filter: blur(2px);
+        -webkit-filter: blur(2px);
+        background-image: linear-gradient(94.44deg, #574a91 1%, #3a3541 20%);
+      }
+
+      &:after {
+        position: absolute;
+        content: '';
+        left: 50%;
+        bottom: -60px;
+        height: 100%;
+        width: 61%;
+        transform: translateX(-50%);
+        opacity: 0.3;
+        background-image: var(--message-box-bg-transparent-color, radial-gradient(#fe3c72, #fff0 55%));
+        filter: blur(10px);
+        -webkit-filter: blur(10px);
+      }
+
+      * {
+        position: relative;
+        z-index: 9;
+      }
+
+      .message-box-icon {
+        width: 26px;
+        min-width: 26px;
+      }
+
+
+      .message-box-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        p {
+          color: var(--primary-white-color);
+          font-size: 11.25px;
+          line-height: 17.38px;
+          color: var(--tertiary-color);
+        }
+        h2 {
+          color: var(--primary-white-color);
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22.2px;
+        }
+        &__button-wrapper {
+          &__button {
+            color: var(--cyrano-pink-shade-1);
+          }
+        }
+      }
+    }
+}
+
+/* code to manage the different Screen resolutions */
+@media only screen and (min-width: 767px) {
+  .message-box {
+    max-width: 290px;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .message-box {
+    max-width: 100%;
+  }
+}
+
+.tooltip-element--bottom, .tooltip-element--top {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: calc(50% - 10px);
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+  }
+}
+
+.tooltip-element--right, .tooltip-element--left {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 10px);
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+  }
+}
+
+.tooltip-element--left::after {
+  border-left: 10px solid var(--tooltip-bg-color, #4f4150);;
+  left: -14px;
+}
+
+.tooltip-element--right::after {
+  border-right: 10px solid var(--tooltip-bg-color, #4f4150);;
+  right: -14px;
+}
+
+.tooltip-element--bottom::after {
+  bottom: -14px;
+  border-bottom: 10px solid var(--tooltip-bg-color, #4f4150);;
+}
+
+.tooltip-element--top::after {
+  top: -14px;
+  border-top: 10px solid var(--tooltip-bg-color, #4f4150);
+}

package/src/lib/shared-styles/common/client-dash.scss

@@ -0,0 +1,5 @@
+lib-client-dashboard {
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+}