@thecb/components 5.9.0-beta.5 → 5.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.9.0-beta.5",
+  "version": "5.9.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -61,14 +61,12 @@
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-visualizer": "^4.0.4",
     "storybook": "^5.3.14",
-    "styled-components": "5.1.1",
     "styled-theming": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "6.0.0-alpha.3",
-    "styled-components": "5.1.1",
     "styled-theming": "^2.2.0"
   },
   "husky": {
@@ -85,6 +83,7 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.5.0"
+    "redux-freeform": "^5.5.0",
+    "styled-components": "^5.1.1"
   }
 }

package/src/components/atoms/add-obligation/AddObligation.js

@@ -12,8 +12,7 @@ const AddObligation = ({
   action,
   themeValues,
   extraStyles,
-  textExtraStyles,
-  dataQa
+  textExtraStyles
 }) => {
   const hoverStyles = `
   &:hover {
@@ -49,7 +48,6 @@ const AddObligation = ({
       extraStyles={defaultStyles}
       onClick={action}
       tabIndex="0"
-      dataQa={dataQa}
     >
       <Cover singleChild minHeight="100%">
         <Cluster justify="center" align="center" minHeight="100%">

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,4 +1,4 @@
-const color = "#292A33";
+const color = "#15749D";
 
 export const fallbackValues = {
   color

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -64,7 +64,6 @@ const ButtonWithAction = ({
   action = noop,
   variant = "primary",
   text,
-  textWrap = false,
   isLoading = false,
   dataQa = null,
   textExtraStyles,
@@ -144,7 +143,6 @@ const ButtonWithAction = ({
               weight={themeValues.fontWeight}
               variant={themeValues.fontSizeVariant}
               color={themeValues.color}
-              textWrap={textWrap}
               extraStyles={textExtraStyles}
             >
               {text}

package/src/components/atoms/icons/AutopayOnIcon.js

@@ -1,7 +1,8 @@
 import React from "react";
-import { SEA_GREEN } from "../../../constants/colors";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
 
-const AutopayOnIcon = () => (
+const AutopayOnIcon = ({ themeValues }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="12"
@@ -11,7 +12,7 @@ const AutopayOnIcon = () => (
     <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
       <path
         className="autopayIcon"
-        fill={SEA_GREEN}
+        fill={themeValues.primaryColor}
         fillRule="nonzero"
         d="M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
       ></path>
@@ -19,4 +20,9 @@ const AutopayOnIcon = () => (
   </svg>
 );
 
-export default AutopayOnIcon;
+export default themeComponent(
+  AutopayOnIcon,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

package/src/components/atoms/layouts/Box.styled.js

@@ -35,8 +35,8 @@ export const BoxWrapper = styled(
   position: relative;
   box-sizing: border-box;
   padding: ${({ padding }) => padding};
-  border: ${({ border, borderSize, borderColor }) =>
-    border ? border : `${borderSize} solid ${borderColor}`};
+  border: ${({ borderSize, borderColor }) =>
+    `${borderSize} solid ${borderColor}`};
   box-shadow: ${({ boxShadow }) => boxShadow};
   background-color: ${({ background }) => background};
   min-height: ${({ minHeight }) => (minHeight ? minHeight : "auto")};
@@ -45,7 +45,9 @@ export const BoxWrapper = styled(
   max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : "auto")};
   color: ${({ color }) => color};
   border-radius: ${({ borderRadius }) => borderRadius};
-  border-width: ${({ borderWidthOverride }) => borderWidthOverride};
+  border-width: ${({ borderWidthOverride, borderSize }) =>
+    borderWidthOverride ? borderWidthOverride : borderSize};
+  border: ${({ border }) => border};
   text-align: ${({ textAlign }) => textAlign};
 
   &:hover {

package/src/components/atoms/layouts/Cluster.js

@@ -40,7 +40,7 @@ const Cluster = ({
       childGap={childGap}
       minHeight={minHeight}
       minWidth={minWidth}
-      $nowrap={nowrap}
+      nowrap={nowrap}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

package/src/components/atoms/layouts/Cluster.styled.js

@@ -16,7 +16,7 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 export const ClusterInnerWrapper = styled.div`
   box-sizing: border-box;
   display: flex;
-  flex-wrap: ${({ $nowrap }) => ($nowrap ? "nowrap" : "wrap")};
+  flex-wrap: ${({ nowrap }) => (nowrap ? "nowrap" : "wrap")};
   justify-content: ${({ justify }) => justify};
   align-items: ${({ align }) => align};
   margin: calc(${({ childGap }) => childGap} / 2 * -1);

package/src/components/atoms/text/Text.js

@@ -10,7 +10,6 @@ const Text = ({
   themeValues,
   weight = FONT_WEIGHT_REGULAR,
   color = FIREFLY_GREY,
-  textWrap = true,
   extraStyles = ``,
   hoverStyles,
   onClick,
@@ -31,7 +30,6 @@ const Text = ({
     onClick={onClick}
     onKeyPress={onKeyPress}
     data-qa={dataQa}
-    $textWrap={textWrap}
     {...rest}
   >
     {safeChildren(children, <span />)}

package/src/components/atoms/text/Text.styled.js

@@ -8,7 +8,6 @@ export const TextSpan = styled.span`
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
-  white-space: ${({ $textWrap }) => ($textWrap ? "initial" : "nowrap")};
 
   &:hover {
     ${({ hoverStyles }) =>

package/src/components/molecules/obligation/Obligation.js

@@ -1,11 +1,6 @@
 import React from "react";
 import { Box, Cluster, Stack } from "../../../components/atoms/layouts";
-import {
-  WHITE,
-  BRIGHT_GREY,
-  ATHENS_GREY,
-  GRECIAN_GREY
-} from "../../../constants/colors";
+import { WHITE, BRIGHT_GREY, ATHENS_GREY } from "../../../constants/colors";
 import {
   IconModule,
   TitleModule,
@@ -30,43 +25,26 @@ const Obligation = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  dueDate,
-  agencyName,
-  inactive = false,
+  isActive = true,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
   inactiveLookupValue = ""
 }) => {
-  /*
-    The value of obligations is always an array. It can contain:
-      - A single obligation
-      - A group of obligations (a "collection")
-    
-    The top level desc/subdesc for all obligations in a collection is the same
-    (Collection accounts look different in the Account Details page)
-  */
-  const firstObligation = obligations[0];
-  const customAttributes = firstObligation?.customAttributes ?? {};
+  const obligation = obligations[0];
+  const { customAttributes } = obligation;
   const boxShadowValue =
-    "0px 2px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+    "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   const activeObligation = (
     <Box
       padding="0"
       borderRadius="4px"
       boxShadow={boxShadowValue}
       as="section"
-      aria-label={`${firstObligation?.description ??
-        "account"} ${firstObligation?.subDescription ?? obligationAssocID}`}
-      border={`1px solid ${GRECIAN_GREY}`}
-      borderWidthOverride="1px 0 0 0"
+      aria-label={`${obligation.description} ${obligation.subDescription}`}
     >
-      <Box background={WHITE} padding={isMobile ? "16px" : "24px 16px"}>
+      <Box background={WHITE}>
         <Stack childGap="14px">
-          <Box
-            key={`${firstObligation?.id}-top`}
-            padding="0 8px"
-            minWidth="100%"
-          >
+          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
             <Cluster
               justify="space-between"
               align="center"
@@ -85,8 +63,8 @@ const Obligation = ({
                     />
                   )}
                   <TitleModule
-                    title={firstObligation?.description}
-                    subtitle={firstObligation?.subDescription}
+                    title={obligation.description}
+                    subtitle={obligation.subDescription}
                     titleColor={BRIGHT_GREY}
                     isMobile={isMobile}
                   />
@@ -94,7 +72,7 @@ const Obligation = ({
               </Box>
               {!isMobile && (
                 <AmountModule
-                  totalAmountDue={obligations?.reduce(
+                  totalAmountDue={obligations.reduce(
                     (acc, curr) => acc + curr.amountDue,
                     0
                   )}
@@ -125,7 +103,6 @@ const Obligation = ({
               isMobile={isMobile}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
-              obligationAssocID={obligationAssocID}
             />
           )}
         </Stack>
@@ -145,7 +122,6 @@ const Obligation = ({
           isMobile={isMobile}
           isPaymentPlan={isPaymentPlan}
           nextAutopayDate={nextAutopayDate}
-          obligationAssocID={obligationAssocID}
         />
       )}
     </Box>
@@ -159,17 +135,17 @@ const Obligation = ({
       as="section"
       aria-label={`${inactiveLookupTitle} ${inactiveLookupInput}: ${inactiveLookupValue}`}
     >
-      <Box background={ATHENS_GREY} padding={isMobile ? "16px" : "24px"}>
+      <Box background={ATHENS_GREY}>
         <Stack childGap="14px">
-          <Box key={`${obligationAssocID}-top`} padding="0" minWidth="100%">
+          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
             <Cluster
               justify="space-between"
               align="center"
-              childGap="40px"
+              childGap="4px"
               nowrap
             >
               <Box padding="0">
-                <Cluster justify="flex-start" align="center" nowrap>
+                <Cluster justify="flex-start" align="center">
                   <IconModule
                     icon={config.icon}
                     iconDefault={config.iconDefault}
@@ -198,9 +174,6 @@ const Obligation = ({
                   isMobile={isMobile}
                   nextAutopayDate={nextAutopayDate}
                   obligationAssocID={obligationAssocID}
-                  dueDate={dueDate}
-                  agencyName={agencyName}
-                  configType={config.type}
                 />
               )}
             </Cluster>
@@ -217,9 +190,6 @@ const Obligation = ({
               isMobile={isMobile}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
-              dueDate={dueDate}
-              agencyName={agencyName}
-              configType={config.type}
             />
           )}
         </Stack>
@@ -227,7 +197,7 @@ const Obligation = ({
     </Box>
   );
 
-  return inactive ? inactiveObligation : activeObligation;
+  return isActive ? activeObligation : inactiveObligation;
 };
 
 export default Obligation;

package/src/components/molecules/obligation/modules/AmountModule.js

@@ -42,7 +42,6 @@ const AmountModule = ({
             paymentPlanSchedule={paymentPlanSchedule}
             isPaymentPlan={isPaymentPlan}
             nextAutopayDate={nextAutopayDate}
-            controlType="link"
           />
         )}
       </Stack>

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -16,16 +16,13 @@ const AutopayModal = ({
   modalOpen,
   deactivatePaymentSchedule,
   navigateToSettings,
-  controlType = "tertiary",
+  buttonLinkType,
   isMobile,
   themeValues,
   isPaymentPlan,
-  nextAutopayDate,
-  dueDate,
-  inactive
+  nextAutopayDate
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
-  const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive
       ? `Deactivate ${planType}`
@@ -33,11 +30,7 @@ const AutopayModal = ({
     modalBodyText: autoPayActive
       ? `Are you sure you want to deactivate ${
           isPaymentPlan ? "your payment plan" : "autopay"
-        }? ${
-          !inactive && nextDate
-            ? `Your next payment will be due on ${nextDate}.`
-            : ""
-        }`
+        }? You will need to manually make your next payment.`
       : `To set up ${
           isPaymentPlan ? "a payment plan" : "autopay"
         } you must save a payment method and address in your profile. Do you want to save these now?`,
@@ -69,75 +62,6 @@ const AutopayModal = ({
   const defaultStyles = `
     .autopayIcon { fill: ${themeValues.color}; text-decoration: underline; }
      `;
-  const renderAutoPayControl = () => {
-    switch (controlType) {
-      case "secondary": {
-        return (
-          <ButtonWithAction
-            text={autoPayActive ? `Turn off ${planType}` : `Set Up ${planType}`}
-            variant="secondary"
-            action={() => {
-              toggleModal(true);
-            }}
-            dataQa="Turn off Autopay"
-            extraStyles={
-              isMobile
-                ? `flex-grow: 1; width: 100%; margin: 0;`
-                : `flex-grow: 1; min-width: 165px;`
-            }
-          />
-        );
-      }
-      case "tertiary": {
-        return (
-          <ButtonWithAction
-            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
-            variant="tertiary"
-            action={() => {
-              toggleModal(true);
-            }}
-            dataQa="Manage Autopay"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-          />
-        );
-      }
-      case "link": {
-        return (
-          <Box
-            padding="0"
-            onClick={() => {
-              toggleModal(true);
-            }}
-            hoverStyles={hoverStyles}
-            activeStyles={activeStyles}
-            extraStyles={defaultStyles}
-          >
-            <Cluster
-              justify={isMobile ? "flex-start" : "flex-end"}
-              align="center"
-            >
-              <AutopayOnIcon />
-              <Text
-                variant="pS"
-                onClick={() => toggleModal(true)}
-                onKeyPress={e => {
-                  e.key === "Enter" && toggleModal(true);
-                }}
-                tabIndex="0"
-                dataQa={`${planType} On`}
-                color={SEA_GREEN}
-                weight={themeValues.fontWeight}
-                hoverStyles={themeValues.modalLinkHoverFocus}
-                extraStyles={`padding-left: 0.25rem;`}
-              >
-                {`${planType} ${nextAutopayDate}`}
-              </Text>
-            </Cluster>
-          </Box>
-        );
-      }
-    }
-  };
   return (
     <Modal
       showModal={() => toggleModal(true)}
@@ -145,7 +69,50 @@ const AutopayModal = ({
       modalOpen={modalOpen}
       {...modalExtraProps}
     >
-      {renderAutoPayControl()}
+      {buttonLinkType ? (
+        <ButtonWithAction
+          text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+          variant="tertiary"
+          action={() => {
+            toggleModal(true);
+          }}
+          dataQa="Manage Autopay"
+          extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+        />
+      ) : (
+        <Box
+          padding="0"
+          onClick={() => {
+            toggleModal(true);
+          }}
+          hoverStyles={hoverStyles}
+          activeStyles={activeStyles}
+          extraStyles={defaultStyles}
+        >
+          <Cluster
+            justify={isMobile ? "flex-start" : "flex-end"}
+            align="center"
+          >
+            <AutopayOnIcon />
+            <Text
+              variant="pS"
+              onClick={() => toggleModal(true)}
+              onKeyPress={e => {
+                console.log({ e });
+                e.key === "Enter" && toggleModal(true);
+              }}
+              tabIndex="0"
+              dataQa={`${planType} On`}
+              color={SEA_GREEN}
+              weight={themeValues.fontWeight}
+              hoverStyles={themeValues.modalLinkHoverFocus}
+              extraStyles={`padding-left: 0.25rem;`}
+            >
+              {`${planType} ${nextAutopayDate}`}
+            </Text>
+          </Cluster>
+        </Box>
+      )}
     </Modal>
   );
 };

package/src/components/molecules/obligation/modules/InactiveControlsModule.js

@@ -3,7 +3,6 @@ import { GHOST_GREY } from "../../../../constants/colors";
 import ButtonWithAction from "../../../atoms/button-with-action";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { AutopayModalModule } from "./AutopayModalModule";
-import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 const InactiveControlsModule = ({
   autoPayEnabled,
@@ -15,26 +14,18 @@ const InactiveControlsModule = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  dueDate,
-  agencyName,
-  configType,
   actions
 }) => {
   const [modalOpen, toggleModal] = useState(false);
-  const { deleteObligationAssoc } = actions;
-  const handleRemoveAccount = () => deleteObligationAssoc(obligationAssocID);
+  const { removeAccount } = actions;
+  const handleRemoveAccount = () => removeAccount(obligationAssocID);
   return (
     <Box
       padding={isMobile ? "18px 0 0 0" : "0"}
       border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
       borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
     >
-      <Cluster
-        childGap={autoPayEnabled ? `8px` : "0"}
-        nowrap
-        justify={isMobile && autoPayEnabled && "center"}
-        align={isMobile && autoPayEnabled && "center"}
-      >
+      <Cluster childGap={isMobile ? `8px` : `18px`}>
         {autoPayEnabled && (
           <Box padding="0" extraStyles={`flex-grow: 1;`}>
             <AutopayModalModule
@@ -44,23 +35,22 @@ const InactiveControlsModule = ({
               modalOpen={modalOpen}
               navigateToSettings={navigateToSettings}
               deactivatePaymentSchedule={deactivatePaymentSchedule}
+              buttonLinkType
               isMobile={isMobile}
               paymentPlanSchedule={paymentPlanSchedule}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
               obligationAssocID={obligationAssocID}
-              dueDate={dueDate}
-              controlType="secondary"
-              inactive
             />
           </Box>
         )}
         <Box padding="0" extraStyles={`flex-grow: 1;`}>
-          <RemoveAccountModalModule
-            agencyName={agencyName}
-            removeAccount={handleRemoveAccount}
-            accountType={configType === "ACCOUNT" ? "Account" : "Property"}
-            isMobile={isMobile}
+          <ButtonWithAction
+            variant="tertiary"
+            text="Remove"
+            action={handleRemoveAccount}
+            dataQa="Remove Account"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
           />
         </Box>
       </Cluster>

package/src/components/molecules/obligation/modules/InactiveTitleModule.js

@@ -28,9 +28,9 @@ const InactiveTitleModule = ({ title, subtitle, autoPayEnabled }) => (
         Unable to load account details
       </Detail>
       <Detail variant="extraSmall" as="p" color={BLACK}>
-        {`This may mean that the balance has been paid, or there was an error loading it.${
+        {`This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.${
           autoPayEnabled
-            ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button."
+            ? " You may disable Autopay for this account by pressing the Turn off Autopay button."
             : ""
         }`}
       </Detail>

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -18,9 +18,7 @@ const PaymentDetailsActions = ({
   autoPaySchedule,
   paymentPlanSchedule,
   isPaymentPlan,
-  nextAutopayDate,
-  obligationAssocID,
-  dueDate
+  nextAutopayDate
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -40,7 +38,7 @@ const PaymentDetailsActions = ({
     createPaymentFromProfile(obligations, config);
   };
   const handleDetailsClick = () => {
-    setDetailedObligation(obligations, config, obligationAssocID);
+    setDetailedObligation(obligations, config);
     navigateToDetailedObligation(detailsSlug);
   };
   return (
@@ -108,7 +106,7 @@ const PaymentDetailsActions = ({
                 variant="tertiary"
                 text={`Set Up ${planType}`}
                 action={() => {
-                  setDetailedObligation(obligations, config, obligationAssocID);
+                  setDetailedObligation(obligations, config);
                   handleAutopayAction();
                 }}
                 dataQa="Set Up Autopay"
@@ -122,23 +120,26 @@ const PaymentDetailsActions = ({
                 modalOpen={modalOpen}
                 navigateToSettings={navigateToSettings}
                 deactivatePaymentSchedule={deactivatePaymentSchedule}
-                controlType="tertiary"
+                buttonLinkType
                 isMobile={isMobile}
                 paymentPlanSchedule={paymentPlanSchedule}
                 isPaymentPlan={isPaymentPlan}
                 nextAutopayDate={nextAutopayDate}
-                dueDate={dueDate}
               />
             )}
           </Box>
           {!isMobile && (
-            <Box padding={"0"}>
+            <Box
+              padding={isMobile ? "0 0 0 8px" : "0"}
+              extraStyles={isMobile && `flex-grow: 1;`}
+            >
               <ButtonWithAction
                 isLoading={isLoading}
                 action={() => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
               />
             </Box>
           )}
@@ -151,7 +152,7 @@ const PaymentDetailsActions = ({
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
-              extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
+              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
             />
           </Box>
         )}

package/src/components/molecules/obligation/modules/index.js

@@ -4,7 +4,6 @@ import AmountModule from "./AmountModule";
 import PaymentDetailsActions from "./PaymentDetailsActions";
 import InactiveControlsModule from "./InactiveControlsModule";
 import InactiveTitleModule from "./InactiveTitleModule";
-import RemoveAccountModalModule from "./RemoveAccountModalModule";
 
 export {
   IconModule,
@@ -12,6 +11,5 @@ export {
   AmountModule,
   PaymentDetailsActions,
   InactiveControlsModule,
-  InactiveTitleModule,
-  RemoveAccountModalModule
+  InactiveTitleModule
 };

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -4,8 +4,7 @@ import {
   BRIGHT_GREY,
   GHOST_GREY,
   ATHENS_GREY,
-  TRANSPARENT,
-  COOL_GREY_05
+  TRANSPARENT
 } from "../../../constants/colors";
 import Text from "../../atoms/text";
 import { InternalLink } from "../../atoms/link";
@@ -19,7 +18,7 @@ import { fallbackValues } from "./TabSidebar.theme";
 const TabSidebar = ({ links, isMobile, themeValues }) => (
   <Box
     padding="0"
-    background={COOL_GREY_05}
+    background={ATHENS_GREY}
     minHeight="100%"
     role="region"
     aria-label="Profile tabs"