hds-web 1.4.4 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Avatars/hasConAv.js

@@ -13,7 +13,7 @@ export default function HasConAvatar({ name, designation, size, imageUrl }) {
             </div>
             <div className='relative pt-6 mb-m:pt-0 pl-6 mb-m:pl-0 mb-m:self-center'>
                 <img
-                    className={`inline-block max-[420px]:bg-blue-400  rounded-r-xl max-[420px]:rounded-full  w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
+                    className={`inline-block max-[399px]:bg-blue-300  rounded-r-xl max-[399px]:rounded-full  w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
                     src={imageUrl}
                 />
                  {/* <div className="absolute tb-l:rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div> */}

package/src/HDS/components/Avatars/profileAvatar.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
 import { Typography } from '../../foundation/Typography';
+import { HDSColor } from '../../foundation/ColorPalette';
 const imgSizes = {
     'xs': 'h-8 w-8',
     'sm': 'h-10 w-10',
@@ -13,18 +14,19 @@ const AvatarVariant = {
     'square': 'rounded-lg',
 }
 
-export default function ProfileAvatar({ name, designation, size, imageUrl, avatarVariant }) {
+export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant }) {
     const imgSizeClass = imgSizes[size] || imgSizes.md;
     const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
+
     return (
         <div className="group block flex-shrink-0">
             <div className="flex items-center">
                 <div>
                     {hasImageUrl ? (
                         <img
-                            className={`${imgSizeClass} ${avatarVariantClass} rounded inline-block`}
+                            className={`${imgSizeClass} ${avatarVariantClass} ${HDSColor(avatarBgColor)} rounded inline-block`}
                             src={imageUrl}
                         />
                     ) : (

package/src/HDS/components/Cards/Misc/talkcard2.js

@@ -38,7 +38,7 @@ export default function TalkCard2(props) {
                         }
 
                     </div>
-                    <div className="tb-l:w-[380px] db:w-[520px]  h-full flex flex-col tb:justify-between">
+                    <div className="tb-l:w-[380px] db:w-[520px] flex flex-col tb:justify-between">
                         <div>
                             <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
                             {props.para &&
@@ -62,7 +62,7 @@ export default function TalkCard2(props) {
                                             size='md'
                                             rightAnimatedArrow={true}
                                             rightAnimatedArrowColor='#3970FD'
-                                            className='mt-4'
+                                            className='mt-2'
                                             btnTextColorClass='text-blue-500'
                                             animatedHoverStroke='stroke-blue-500'
                                         />
@@ -84,6 +84,7 @@ export default function TalkCard2(props) {
                                             size='md'
                                             designation={value.designation}
                                             imageUrl={value.imageUrl}
+                                            avatarBgColor={value.avatarBgColor}
                                         />
                                     </div>
 

package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js

@@ -60,6 +60,7 @@ export default function TalkDetailCard(props) {
                       designation={speaker.designation}
                       imageUrl={speaker.imageUrl}
                       avatarVariant="circle"
+                      avatarBgColor={speaker.avatarBgColor}
                     />
                   </div>
                 ))

package/src/HDS/components/Tabs/tab.js

@@ -36,7 +36,7 @@ export default function Tab(props) {
               href="#"
               className={`px-3 py-1 font-medium text-sm rounded-full ${
                 activeTab === tab
-                  ? ' first:bg-blue-500  text-neutral-0 transition-all  delay-500 duration-100 '
+                  ? ' first:bg-blue-500  text-neutral-0 transition-all'
                   : 'text-neutral-500 transition-all flex-nowrap '
               }`}
               aria-current={activeTab === tab ? 'page' : undefined}
@@ -47,7 +47,7 @@ export default function Tab(props) {
           ))}
           <span
             ref={pillRef}
-            className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-700"
+            className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-300"
             style={{
               left: `${activeTab.index * 100}%`,
               width: `${activeTab.width}px`, // Use the width of the clicked tab

package/src/styles/tailwind.css

@@ -735,9 +735,9 @@ select {
   }
 }
 
-@media (min-width: 420px) {
+@media (min-width: 400px) {
   .container {
-    max-width: 420px;
+    max-width: 400px;
   }
 }
 
@@ -1416,10 +1416,6 @@ select {
   max-height: 100%;
 }
 
-.min-h-\[120px\] {
-  min-height: 120px;
-}
-
 .w-1\/2 {
   width: 50%;
 }
@@ -1524,10 +1520,6 @@ select {
   width: 90%;
 }
 
-.w-\[9rem\] {
-  width: 9rem;
-}
-
 .w-auto {
   width: auto;
 }
@@ -1546,18 +1538,10 @@ select {
   width: 100vw;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
 .min-w-\[11\.5rem\] {
   min-width: 11.5rem;
 }
 
-.min-w-\[144px\] {
-  min-width: 144px;
-}
-
 .min-w-\[18rem\] {
   min-width: 18rem;
 }
@@ -2031,18 +2015,6 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-x-reverse: 0;
-  border-right-width: calc(2px * var(--tw-divide-x-reverse));
-  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
-}
-
-.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
-}
-
 .divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
   border-color: rgb(30 86 227 / 0.1);
 }
@@ -2070,10 +2042,6 @@ select {
   align-self: flex-end;
 }
 
-.self-center {
-  align-self: center;
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -2178,6 +2146,11 @@ select {
   border-bottom-right-radius: 0.375rem;
 }
 
+.rounded-r-xl {
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
 .rounded-t-3xl {
   border-top-left-radius: 1.5rem;
   border-top-right-radius: 1.5rem;
@@ -2188,16 +2161,6 @@ select {
   border-top-right-radius: 0.375rem;
 }
 
-.rounded-l-xl {
-  border-top-left-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
-}
-
-.rounded-r-xl {
-  border-top-right-radius: 0.75rem;
-  border-bottom-right-radius: 0.75rem;
-}
-
 .rounded-tl-2xl {
   border-top-left-radius: 1rem;
 }
@@ -2369,11 +2332,6 @@ select {
   border-top-color: rgb(236 237 240 / var(--tw-border-opacity));
 }
 
-.border-b-neutral-200 {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 243 212 / var(--tw-bg-opacity));
@@ -5370,11 +5328,6 @@ select {
   padding-bottom: 1.625rem;
 }
 
-.py-\[30px\] {
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -5443,10 +5396,6 @@ select {
   padding-left: 1.75rem;
 }
 
-.pl-8 {
-  padding-left: 2rem;
-}
-
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -5499,6 +5448,10 @@ select {
   padding-top: 4rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -5511,10 +5464,6 @@ select {
   padding-top: 2rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -6496,10 +6445,6 @@ select {
   transition-delay: 300ms;
 }
 
-.delay-500 {
-  transition-delay: 500ms;
-}
-
 .duration-100 {
   transition-duration: 100ms;
 }
@@ -6520,10 +6465,6 @@ select {
   transition-duration: 500ms;
 }
 
-.duration-700 {
-  transition-duration: 700ms;
-}
-
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -8096,24 +8037,29 @@ select {
   }
 }
 
-@media (max-width: 450px) {
-  .max-\[450px\]\:rounded-full {
+@media (max-width: 419px) {
+  .max-\[419px\]\:rounded-full {
     border-radius: 9999px;
   }
+
+  .max-\[419px\]\:bg-blue-300 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(198 214 255 / var(--tw-bg-opacity));
+  }
 }
 
-@media (max-width: 420px) {
-  .max-\[420px\]\:rounded-full {
+@media (max-width: 399px) {
+  .max-\[399px\]\:rounded-full {
     border-radius: 9999px;
   }
 
-  .max-\[420px\]\:bg-blue-400 {
+  .max-\[399px\]\:bg-blue-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(128 163 255 / var(--tw-bg-opacity));
+    background-color: rgb(198 214 255 / var(--tw-bg-opacity));
   }
 }
 
-@media (min-width: 420px) {
+@media (min-width: 400px) {
   .mb-m\:flex {
     display: flex;
   }
@@ -8146,30 +8092,6 @@ select {
     align-self: center;
   }
 
-  .mb-m\:rounded {
-    border-radius: 0.25rem;
-  }
-
-  .mb-m\:rounded-l-2xl {
-    border-top-left-radius: 1rem;
-    border-bottom-left-radius: 1rem;
-  }
-
-  .mb-m\:rounded-r-2xl {
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-  }
-
-  .mb-m\:rounded-r-xl {
-    border-top-right-radius: 0.75rem;
-    border-bottom-right-radius: 0.75rem;
-  }
-
-  .mb-m\:rounded-l-xl {
-    border-top-left-radius: 0.75rem;
-    border-bottom-left-radius: 0.75rem;
-  }
-
   .mb-m\:px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -8189,12 +8111,6 @@ select {
   }
 }
 
-@media (min-width: 450px) {
-  .min-\[450px\]\:rounded-full {
-    border-radius: 9999px;
-  }
-}
-
 @media (min-width: 600px) {
   .tb\:mb-16 {
     margin-bottom: 4rem;
@@ -8942,20 +8858,24 @@ select {
     padding: 2.5rem;
   }
 
-  .tb-l\:py-12 {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-  }
-
   .tb-l\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
 
+  .tb-l\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
   .tb-l\:pb-12 {
     padding-bottom: 3rem;
   }
 
+  .tb-l\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
   .tb-l\:pl-8 {
     padding-left: 2rem;
   }
@@ -8964,10 +8884,6 @@ select {
     padding-top: 3rem;
   }
 
-  .tb-l\:pb-6 {
-    padding-bottom: 1.5rem;
-  }
-
   .tb-l\:text-left {
     text-align: left;
   }

package/tailwind.config.js

@@ -169,7 +169,7 @@ module.exports = {
     extend: {
       screens: {
         'mb-s': '360px',
-        'mb-m':'420px',
+        'mb-m':'400px',
         'tb': '600px',
         'tb-m': '800px',
         'tb-l': '905px',