groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Tooltip/Tooltip.js

@@ -1,23 +1,23 @@
-import React from "react";
 import PropTypes from 'prop-types';
+import React from "react";
+import { usePopperTooltip } from 'react-popper-tooltip';
 import styled from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
-import { usePopperTooltip } from 'react-popper-tooltip';
 
 /**
  * Primary UI component for user interaction
  */
 const TooltipContainer = styled.div`
-${({ theme, type, customStylesTPContainer }) => {
-        if (theme) {
+${({ inBuiltCss, type, customStylesTPContainer }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tooltip-container']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tooltip-container']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tooltip-container']) {
-                    tempObj[property] = theme['tooltip-container'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tooltip-container']) {
+                    tempObj[property] = inBuiltCss['tooltip-container'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPContainer };
@@ -25,16 +25,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 
     &[data-popper-placement*='bottom'] .tooltip-arrow {
-        ${({ theme, type, customStylesTPAbottom }) => {
-        if (theme) {
+        ${({ inBuiltCss, type, customStylesTPAbottom }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-bottom-arrow']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-bottom-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-bottom-arrow']) {
-                    tempObj[property] = theme['tp-cont-bottom-arrow'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-bottom-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAbottom };
@@ -43,16 +43,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }
 
 &[data-popper-placement*='bottom'] .tooltip-arrow::before {
-    ${({ theme, type, customStylesTPAbottomBefore }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAbottomBefore }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-bottom-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-bottom-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-bottom-arrow-before']) {
-                    tempObj[property] = theme['tp-cont-bottom-arrow-before'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-bottom-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-before'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAbottomBefore };
@@ -61,16 +61,16 @@ ${({ theme, type, customStylesTPContainer }) => {
 }
 
 &[data-popper-placement*='bottom'] .tooltip-arrow::after {
-    ${({ theme, type, customStylesTPAbottomAfter }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAbottomAfter }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-bottom-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-bottom-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-bottom-arrow-after']) {
-                    tempObj[property] = theme['tp-cont-bottom-arrow-after'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-bottom-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-after'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAbottomAfter };
@@ -78,16 +78,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='top'] .tooltip-arrow {
-    ${({ theme, type, customStylesTPAtop }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAtop }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-top-arrow']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-top-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-top-arrow']) {
-                    tempObj[property] = theme['tp-cont-top-arrow'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-top-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-top-arrow'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAtop };
@@ -95,16 +95,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='top'] .tooltip-arrow::before {
-    ${({ theme, type, customStylesTPAtopBefore }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAtopBefore }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-top-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-top-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-top-arrow-before']) {
-                    tempObj[property] = theme['tp-cont-top-arrow-before'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-top-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-top-arrow-before'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAtopBefore };
@@ -112,16 +112,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='top'] .tooltip-arrow::after {
-    ${({ theme, type, customStylesTPAtopAfter }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAtopAfter }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-top-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-top-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-top-arrow-after']) {
-                    tempObj[property] = theme['tp-cont-top-arrow-after'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-top-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-top-arrow-after'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAtopAfter };
@@ -129,16 +129,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='right'] .tooltip-arrow {
-    ${({ theme, type, customStylesTPAright }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAright }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-right-arrow']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-right-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-right-arrow']) {
-                    tempObj[property] = theme['tp-cont-right-arrow'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-right-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-right-arrow'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAright };
@@ -146,16 +146,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='right'] .tooltip-arrow::before {
-    ${({ theme, type, customStylesTPArightBefore }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPArightBefore }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-right-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-right-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-right-arrow-before']) {
-                    tempObj[property] = theme['tp-cont-right-arrow-before'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-right-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-right-arrow-before'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPArightBefore };
@@ -163,16 +163,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='right'] .tooltip-arrow::after {
-    ${({ theme, type, customStylesTPArightAfter }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPArightAfter }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-right-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-right-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-right-arrow-after']) {
-                    tempObj[property] = theme['tp-cont-right-arrow-after'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-right-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-right-arrow-after'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPArightAfter };
@@ -180,16 +180,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='left'] .tooltip-arrow {
-    ${({ theme, type, customStylesTPAleft }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAleft }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-left-arrow']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-left-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-left-arrow']) {
-                    tempObj[property] = theme['tp-cont-left-arrow'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-left-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-left-arrow'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAleft };
@@ -197,16 +197,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='left'] .tooltip-arrow::before {
-    ${({ theme, type, customStylesTPAleftBefore }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAleftBefore }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-left-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-left-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-left-arrow-before']) {
-                    tempObj[property] = theme['tp-cont-left-arrow-before'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-left-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-left-arrow-before'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAleftBefore };
@@ -214,16 +214,16 @@ ${({ theme, type, customStylesTPContainer }) => {
     }}
 }
 &[data-popper-placement*='left'] .tooltip-arrow::after {
-    ${({ theme, type, customStylesTPAleftAfter }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAleftAfter }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tp-cont-left-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tp-cont-left-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tp-cont-left-arrow-after']) {
-                    tempObj[property] = theme['tp-cont-left-arrow-after'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tp-cont-left-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-left-arrow-after'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAleftAfter };
@@ -234,16 +234,16 @@ ${({ theme, type, customStylesTPContainer }) => {
 
 const TooltipArrow = styled.div`
 
-${({ theme, type, customStylesTPArrow }) => {
-        if (theme) {
+${({ inBuiltCss, type, customStylesTPArrow }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tooltip-arrow']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tooltip-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tooltip-arrow']) {
-                    tempObj[property] = theme['tooltip-arrow'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tooltip-arrow']) {
+                    tempObj[property] = inBuiltCss['tooltip-arrow'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPArrow };
@@ -252,16 +252,16 @@ ${({ theme, type, customStylesTPArrow }) => {
 
 
 &::before{
-    ${({ theme, type, customStylesTPAbefore }) => {
-        if (theme) {
+    ${({ inBuiltCss, type, customStylesTPAbefore }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tooltip-arrow-before']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tooltip-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tooltip-arrow-before']) {
-                    tempObj[property] = theme['tooltip-arrow-before'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tooltip-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tooltip-arrow-before'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAbefore };
@@ -270,16 +270,16 @@ ${({ theme, type, customStylesTPArrow }) => {
     }
 
     &::after{
-        ${({ theme, type, customStylesTPAafter }) => {
-        if (theme) {
+        ${({ inBuiltCss, type, customStylesTPAafter }) => {
+        if (inBuiltCss) {
             let tempObj = {};
-            if (theme['tooltip-arrow-after']) {
-                for (const property in theme['common']) {
-                    tempObj[property] = theme['common'][property]
+            if (inBuiltCss['tooltip-arrow-after']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
                 }
-                for (const property in theme['tooltip-arrow-after']) {
-                    tempObj[property] = theme['tooltip-arrow-after'][property]
-                    delete theme.common[property]
+                for (const property in inBuiltCss['tooltip-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tooltip-arrow-after'][property]
+                    delete inBuiltCss.common[property]
                 }
             }
             return { ...tempObj, ...customStylesTPAafter };
@@ -289,7 +289,7 @@ ${({ theme, type, customStylesTPArrow }) => {
 `;
 
 export const Tooltip = ({
-    theme,
+    inBuiltCss,
     contentTrigger,
     contentTooltip,
     popperOptionsP,
@@ -345,7 +345,7 @@ export const Tooltip = ({
             </div>
             {visible && (
                 <TooltipContainer
-                    theme={theme}
+                    inBuiltCss={defaultStyles}
                     ref={setTooltipRef}
                     {...getTooltipProps({ className: 'tooltip-container' })}
                     customStylesTPContainer={customStylesTPContainer}
@@ -363,7 +363,7 @@ export const Tooltip = ({
                     customStylesTPAleftAfter={customStylesTPAleftAfter}
                 >
                     <TooltipArrow
-                        theme={theme}
+                        inBuiltCss={defaultStyles}
                         {...getArrowProps({ className: 'tooltip-arrow' })}
                         customStylesTPArrow={customStylesTPArrow}
                         customStylesTPAbefore={customStylesTPAbefore}
@@ -377,10 +377,7 @@ export const Tooltip = ({
 };
 
 Tooltip.propTypes = {
-    /**
-     * Theme object
-     */
-    theme: PropTypes.object,
+
     /**
      * The element where to attach the tooltip
      */
@@ -470,9 +467,6 @@ Tooltip.propTypes = {
 };
 
 Tooltip.defaultProps = {
-    theme: defaultStyles,
     contentTrigger: <div>Trigger</div>,
     contentTooltip: <div>I am the tooltip</div>,
-};
-
-export default Tooltip;
+};

package/components/Typography/Typography.js

@@ -1,8 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { useTheme } from 'styled-components';
-import FontStyles from '../global/FontStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
+import FontStyles from '../global/FontStyle';
 
 const sizes = {
     xs: {
@@ -25,20 +25,23 @@ const sizes = {
 
 const Box = styled.div`
     color: ${({ theme, text }) => text ? theme.variant[text] : theme.textColor};
-    background: ${({ theme, bg }) => bg ? theme.variant[bg] : theme.bgColor};
+    // background: ${({ theme, bg }) => bg ? theme.variant[bg] : theme.bgColor};
     font-size: ${({ size }) => sizes[size].fontSize};
     line-height: ${({ size }) => sizes[size].lineHeight};
 `
 
 export const Typography = ({ size, children, bg, text, ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor
+
     return (
         <Box
+            theme={activeTheme}
             bg={bg}
             text={text}
             size={size}
             {...props}
         >
-            <FontStyles />
+            <FontStyles theme={activeTheme} />
             {children}
         </Box>
     );
@@ -67,12 +70,8 @@ Typography.propTypes = {
     theme: PropTypes.object,
 };
 
-Box.defaultProps = {
-    theme: defaultThemeColor,
-};
+
 
 Typography.defaultProps = {
-    theme: defaultThemeColor,
     size: 'md',
-};
-
+};

package/components/constants/defaultStyle.js

@@ -27,47 +27,31 @@ const defaultStyles = {
         color: 'red',
         'border-color': 'black',
     },
-    /**
-     * Default Style of the card
-     */
-    card: {
-        color: `${defaultThemeColor.textColor}`,
-        'padding-top': '25px',
-        'padding-bottom': '25px',
-        'padding-left': '32px',
-        'padding-right': '32px',
-        'background-color': `${defaultThemeColor.bgColor}`,
-        width: 'inherit',
-        height: 'inherit',
-        'border-color': `${defaultThemeColor.neutral['neutral-4']}`,
-        'border-radius': '5px',
-        'box-shadow': '0px 5px 37px rgba(56, 66, 100, 0.0880136)',
-    },
 
     /**
      * Default Style of the progressBar
      */
-    progressWrapper: {
-        height: '10px',
-        'border-radius': '10px',
-        'margin-top': '13px',
-        'margin-left': '13px',
-        'margin-right': '13px',
-        width: 'inherit',
-        'background-color': `${defaultThemeColor.primary['primary-1']}`,
-    },
+    // progressWrapper: {
+    //   height: '10px',
+    //   'border-radius': '10px',
+    //   'margin-top': '13px',
+    //   'margin-left': '13px',
+    //   'margin-right': '13px',
+    //   width: 'inherit',
+    //   'background-color': `${defaultThemeColor.primary['primary-1']}`,
+    // },
 
     /**
      * Default Style of the progressBar Container
      */
-    containerWrapper: {
-        height: 'inherit',
-        width: 'inherit',
-        transition: 'width 1s ease-in-out',
-        'border-radius': 'inherit',
-        'text-align': 'right',
-        'background-color': `${defaultThemeColor.primary['primary-1']}`,
-    },
+    // containerWrapper: {
+    //   height: 'inherit',
+    //   width: 'inherit',
+    //   transition: 'width 1s ease-in-out',
+    //   'border-radius': 'inherit',
+    //   'text-align': 'right',
+    //   'background-color': `${defaultThemeColor.primary['primary-1']}`,
+    // },
     /**
      * Default Style of the progressBar Label
      */
@@ -98,8 +82,7 @@ const defaultStyles = {
         position: 'relative',
     },
     avatarCircle: {
-        'background-color': `${defaultThemeColor.variant['primary-1']}`,
-        color: '#FFFFFF',
+
         'border-radius': '50%',
         display: 'flex',
         'align-items': 'center',
@@ -125,7 +108,6 @@ const defaultStyles = {
         'min-height': '38px',
     },
     avatarName: {
-        color: `${defaultThemeColor.variant['primary-1']}`,
     },
     avatarNameSM: {
         'margin-left': '8px',
@@ -206,14 +188,23 @@ const defaultStyles = {
         position: 'absolute',
     },
     imageAvatarSM: {
+        'border-radius': '50%',
+        'box-sizing': 'border-box',
+        position: 'absolute',
         width: '30px',
         height: '30px',
     },
     imageAvatarMD: {
+        'border-radius': '50%',
+        'box-sizing': 'border-box',
+        position: 'absolute',
         width: '32px',
         height: '32px',
     },
     imageAvatarLG: {
+        'border-radius': '50%',
+        'box-sizing': 'border-box',
+        position: 'absolute',
         width: '38px',
         height: '38px',
     },
@@ -221,8 +212,15 @@ const defaultStyles = {
         table: {
             style: {
                 borderRadius: '4px',
-                paddingRight: '17px', // For the vertical scroll bar
+                paddingRight: '0px', // For the vertical scroll bar
                 // borderBottom: `1px solid red`,
+                backgroundColor: 'transparent',
+            },
+        },
+        checkbox: {
+            style: {
+                maxHeight: '28px',
+                maxWidth: '28px',
             },
         },
 
@@ -242,7 +240,7 @@ const defaultStyles = {
         },
         headCells: {
             style: {
-                color: `${defaultThemeColor.variant['primary-2']}`,
+                // color: `${defaultThemeColor.variant['primary-2']}`,
                 fontSize: '14px',
                 fontWeight: '600',
                 '&:first-of-type': {
@@ -401,7 +399,6 @@ const defaultStyles = {
      * Default Style of the dropZone component
      */
     'dropzone-parent': {
-        width: '100%',
         height: '86px',
         'padding-left': '8px',
         'padding-right': '8px',
@@ -740,8 +737,8 @@ const defaultStyles = {
     },
     'modalComp-modal-close': {
         position: 'absolute',
-        top: '10px',
-        right: '5px',
+        top: '15px',
+        right: '10px',
         outline: 'none',
         border: 'none',
         background: 'transparent',