groundfloor-react-ui 1.0.0 → 1.0.1

package/components/constants/defaultStyle.js

@@ -1,5 +1,4 @@
 import defaultThemeColor from './defaultThemeColor';
-const border = `#D4D7E3`;
 
 const defaultStyles = {
     /**
@@ -143,7 +142,7 @@ const defaultStyles = {
     * Default Style of the textbox wrapper
     */
     'textbox-wrapper': {
-        'border': `1px solid ${border}`,
+        'border': `1px solid ${defaultThemeColor.border}`,
         'border-radius': '4px',
         'padding': '5.5px 7px',
         'display': 'flex',
@@ -186,6 +185,9 @@ const defaultStyles = {
         'color': `${defaultThemeColor.variant['neutral-2']}`,
         'display': 'flex',
         'width': 'max-content',
+        'background-color': 'transparent',
+        'margin-bottom': '0px',
+        'padding-bottom': '0px'
     },
     /**
      * Default Style of the Image
@@ -324,7 +326,7 @@ const defaultStyles = {
         'color': '#444444'
     },
     'option-text': {
-        'background-color': `${defaultThemeColor.bgColor}`,
+        // 'background-color': `${defaultThemeColor.bgColor}`,
         'color': "#A9B1B8",
         'font-size': '16px',
     },
@@ -344,7 +346,7 @@ const defaultStyles = {
      * Default Style of the checkbox label
      */
     'checkBox-outer': {
-        'border': `2px solid ${border}`,
+        'border': `2px solid ${defaultThemeColor.border}`,
         'width': '20px',
         'height': '20px',
         'border-radius': '3px',
@@ -372,8 +374,8 @@ const defaultStyles = {
     },
     'toggle-switch-wrapper': {
         'display': 'flex',
-        'align-items': 'flex-start',
-        'gap': '40px',
+        'align-items': 'center',
+        'gap': '10px',
         'width': 'fit-content',
     },
     'toggle-switch-checkbox-label': {
@@ -384,7 +386,7 @@ const defaultStyles = {
         'cursor': 'pointer',
     },
     'toggle-switch-option-text': {
-        'background-color': `${defaultThemeColor.bgColor}`,
+        // 'background-color': `${defaultThemeColor.bgColor}`,
         'color': `${defaultThemeColor.neutral['neutral-1']}`,
         'font-size': '16px',
         'margin-right': '30px',
@@ -401,7 +403,7 @@ const defaultStyles = {
         'display': 'flex',
         'justify-content': 'center',
         'align-items': 'center',
-        'font-size': '17px',
+        'font-size': '16px',
         'border-radius': '5.5px',
         'color': ` ${defaultThemeColor.textColor}`,
     },
@@ -451,10 +453,8 @@ const defaultStyles = {
         'font-size': '17px',
         'color': `${defaultThemeColor.textColor}`,
         'background-color': `${defaultThemeColor.bgColor}`,
-        // 'border': `1px solid ${defaultThemeColor.neutral['neutral-3']} `,
     },
     'signature-wrapper-div': {
-        // 'margin-left': '2px',
         'display': 'flex',
         'flex': 'auto',
         'justify-content': 'center',
@@ -469,8 +469,7 @@ const defaultStyles = {
         'text-align': 'center',
         'display': 'block',
         'height': '48px',
-        'width': `calc(100% - 50px)!important`,
-        // 'max-width': '394px',
+        'width': `calc(100% - 54px)!important`,
         'background-color': `${defaultThemeColor.bgColor}`,
         'font-family': "Beauty",
         'background-clip': 'padding-box',
@@ -478,8 +477,7 @@ const defaultStyles = {
         'font-style': 'normal',
         'font-weight': 'normal',
         'font-size': '47px',
-        'padding-left': '10px'
-
+        'padding-left': '10px',
     },
     /**
      * Default Style of the modal component
@@ -589,7 +587,6 @@ const defaultStyles = {
     },
     'tp-cont-bottom-arrow-before': {
         'border-color': `transparent transparent ${defaultThemeColor.bgColor} transparent`,
-        // 'border-width': '0 0.5rem 0.4rem 0.5rem',
         'border-width': '0 15px 19px 15px',
         'position': 'absolute',
         'top': '-1px',
@@ -733,14 +730,13 @@ const defaultStyles = {
             right: 'auto',
             bottom: 'auto',
             marginRight: '-50%',
-            padding: '3rem 3rem 0.8rem 3rem',
             transform: 'translate(-50%, -50%)',
             zIndex: "999",
         },
     },
     'modalComp-modal-close': {
         position: 'absolute',
-        top: '5px',
+        top: '10px',
         right: '5px',
         outline: 'none',
         border: 'none',
@@ -752,13 +748,13 @@ const defaultStyles = {
         'margin-bottom': '15px',
     },
     'modalComp-modal-footer': {
-        display: 'flex',
-        'justify- content': 'end',
+
         'margin-top': '30px',
         'margin-bottom': '15px',
+        'border-top': `1px solid  ${defaultThemeColor.border}`,
+        'padding': '1rem 3rem 0rem 3rem',
         '&:before': {
             content: '',
-            'border-top': '1px solid #E5E7F0',
             position: 'fixed',
             display: 'inline-block',
             left: 0,

package/components/constants/defaultThemeColor.js

@@ -9,7 +9,8 @@ const defaultThemeColor = {
     variant: { ...primaryColor, ...uiColor, ...neutralColor, ...shadeColor, ...graphColor },
     textColor: primaryColor['primary-2'],
     bgColor: '#FFFFFF', /**background color */
-    black: '#000000'
+    black: '#000000',
+    border: '#D4D7E3'
 };
 
 export default defaultThemeColor;