@eturnity/eturnity_reusable_components 8.7.4-EPDM-12729.13 → 8.7.4-EPDM-12729.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.4-EPDM-12729.13",
+  "version": "8.7.4-EPDM-12729.15",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/clickable_info.svg

@@ -1,4 +1,4 @@
-<svg fill="none" height="14" viewbox="13 13 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
 <circle cx="20" cy="20" fill="white" r="7"></circle>
 <path d="M20 13C18.6155 13 17.2622 13.4105 16.111 14.1797C14.9599 14.9489 14.0627 16.0421 13.5328 17.3212C13.003 18.6003 12.8644 20.0078 13.1345 21.3656C13.4046 22.7235 14.0713 23.9708 15.0503 24.9497C16.0292 25.9287 17.2765 26.5954 18.6344 26.8655C19.9922 27.1356 21.3997 26.997 22.6788 26.4672C23.9579 25.9373 25.0511 25.0401 25.8203 23.889C26.5895 22.7378 27 21.3845 27 20C27 18.1435 26.2625 16.363 24.9497 15.0503C23.637 13.7375 21.8565 13 20 13V13ZM21.3125 24.5558H18.6875V19.3058H21.3125V24.5558ZM20 18.0692C19.7404 18.0692 19.4867 17.9922 19.2708 17.848C19.055 17.7038 18.8868 17.4988 18.7874 17.2589C18.6881 17.0191 18.6621 16.7552 18.7127 16.5006C18.7634 16.246 18.8884 16.0121 19.0719 15.8286C19.2555 15.645 19.4893 15.52 19.7439 15.4694C19.9985 15.4187 20.2624 15.4447 20.5023 15.5441C20.7421 15.6434 20.9471 15.8116 21.0913 16.0275C21.2355 16.2433 21.3125 16.4971 21.3125 16.7567C21.312 17.1046 21.1736 17.4382 20.9276 17.6842C20.6815 17.9303 20.348 18.0687 20 18.0692V18.0692Z" fill="#B2B9C5"></path>
 </svg>

package/src/components/infoText/index.vue

@@ -45,7 +45,7 @@
             </slot>
           </span>
         </TextOverlay>
-        <Arrow :image="image" :style="arrowStyle" />
+        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
       </TextWrapper>
     </Teleport>
   </PageContainer>
@@ -66,7 +66,12 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlay = styled('div')`
+  const TextOverlayAttrs = {
+    appTheme: String,
+    image: Boolean,
+    width: Number,
+  }
+  const TextOverlay = styled('div', TextOverlayAttrs)`
     background-color: ${(props) =>
       props.image ? props.theme.colors.white : props.theme.colors.black};
     color: ${(props) =>
@@ -91,16 +96,16 @@
     }
   `
 
-  const Arrow = styled('div')`
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    border-top-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
-    filter: ${(props) =>
-      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
-  `
+  // const Arrow = styled('div')`
+  //   position: absolute;
+  //   width: 0;
+  //   height: 0;
+  //   border: 8px solid transparent;
+  //   border-top-color: ${(props) =>
+  //     props.image ? props.theme.colors.white : props.theme.colors.black};
+  //   filter: ${(props) =>
+  //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  // `
 
   const PageContainer = styled('div')`
     display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
@@ -137,7 +142,7 @@
     components: {
       IconComponent,
       TextOverlay,
-      Arrow,
+      // Arrow,
       Dot,
       PageContainer,
       TextWrapper,
@@ -206,6 +211,11 @@
         required: false,
         default: 'info', // info, dot
       },
+      appTheme: {
+        type: String,
+        default: 'light', // light or dark
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -223,7 +233,11 @@
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
-        color: props.image ? theme.colors.grey1 : theme.colors.white,
+        color: props.image
+          ? theme.colors.grey1
+          : props.appTheme === 'dark'
+          ? theme.colors.black
+          : theme.colors.white,
         textAlign: props.image ? 'right' : 'left',
       }))
 
@@ -353,7 +367,9 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : theme.colors.black,
+            : props.appTheme === 'light'
+            ? theme.colors.black
+            : theme.colors.grey5,
         }
       }