feat: styled preferences page cards.

src/containers/Preferences/Accountant/AccountantFormProvider.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import { useAccounts, useSaveSettings, useSettings } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
@@ -35,16 +38,21 @@ function AccountantFormProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <AccountantFormCard>
         {isLoading ? (
           <PreferencesPageLoader />
         ) : (
           <AccountantFormContext.Provider value={provider} {...props} />
         )}
-      </div>
+      </AccountantFormCard>
     </div>
   );
 }
 
 const useAccountantFormContext = () => React.useContext(AccountantFormContext);
+
 export { AccountantFormProvider, useAccountantFormContext };
+
+const AccountantFormCard = styled(Card)`
+  padding: 25px;
+`;

src/containers/Preferences/Currencies/Currencies.js

@@ -1,20 +1,26 @@
-
-
 import React from 'react';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import CurrenciesList from './CurrenciesList';
 
 export default function PreferencesCurrenciesPage() {
   return (
-    <div className={classNames(
+    <div
+      className={classNames(
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES,
-    )}>
+      )}
-      <div className={classNames(CLASSES.CARD)}>
+    >
+      <CurrenciesCard>
         <CurrenciesList />
+      </CurrenciesCard>
     </div>
-    </div>
+  );
-  )
 }
+
+const CurrenciesCard = styled(Card)`
+  padding: 0;
+`;

src/containers/Preferences/General/GeneralFormProvider.js

@@ -1,5 +1,8 @@
 import React, { createContext } from 'react';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import {
   useCurrentOrganization,
@@ -45,13 +48,13 @@ function GeneralFormProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <GeneralFormCard>
         {isOrganizationLoading || isDateFormatsLoading ? (
           <PreferencesPageLoader />
         ) : (
           <GeneralFormContext.Provider value={provider} {...props} />
         )}
-      </div>
+      </GeneralFormCard>
     </div>
   );
 }
@@ -59,3 +62,7 @@ function GeneralFormProvider({ ...props }) {
 const useGeneralFormContext = () => React.useContext(GeneralFormContext);
 
 export { GeneralFormProvider, useGeneralFormContext };
+
+const GeneralFormCard = styled(Card)`
+  padding: 25px;
+`;

src/containers/Preferences/Item/ItemPreferencesFormProvider.js

@@ -1,7 +1,9 @@
 import React, { useContext, createContext } from 'react';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
+import styled from 'styled-components';
 
+import { CLASSES } from 'common/classes';
+import { Card } from 'components';
 import { useSettingsItems, useAccounts, useSaveSettings } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
@@ -38,13 +40,13 @@ function ItemPreferencesFormProvider({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <ItemsPreferencesCard>
         {isLoading ? (
           <PreferencesPageLoader />
         ) : (
           <ItemFormContext.Provider value={provider} {...props} />
         )}
-      </div>
+      </ItemsPreferencesCard>
     </div>
   );
 }
@@ -52,3 +54,7 @@ function ItemPreferencesFormProvider({ ...props }) {
 const useItemPreferencesFormContext = () => useContext(ItemFormContext);
 
 export { useItemPreferencesFormContext, ItemPreferencesFormProvider };
+
+const ItemsPreferencesCard = styled(Card)`
+  padding: 25px;
+`;

src/containers/Preferences/SMSIntegration/SMSIntegrationTabs.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
 import { Tabs, Tab } from '@blueprintjs/core';
 import classNames from 'classnames';
+import styled from 'styled-components';
+
 import { CLASSES } from 'common/classes';
 import SMSMessagesDataTable from './SMSMessagesDataTable';
+import { Card } from 'components';
 
 import '../../../style/pages/Preferences/SMSIntegration.scss';
 
@@ -12,6 +14,10 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose } from 'utils';
 
+/**
+ * SMS Integration Tabs.
+ * @returns {React.JSX}
+ */
 function SMSIntegrationTabs({
   // #withDashboardActions
   changePreferencesPageTitle,
@@ -21,7 +27,7 @@ function SMSIntegrationTabs({
   }, [changePreferencesPageTitle]);
 
   return (
-    <div className={classNames(CLASSES.CARD)}>
+    <SMSIntegrationCard>
       <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
         <Tabs animate={true} defaultSelectedTabId={'sms_messages'}>
           <Tab
@@ -35,8 +41,12 @@ function SMSIntegrationTabs({
           />
         </Tabs>
       </div>
-    </div>
+    </SMSIntegrationCard>
   );
 }
 
 export default compose(withDashboardActions)(SMSIntegrationTabs);
+
+const SMSIntegrationCard = styled(Card)`
+  padding: 0;
+`;

src/containers/Preferences/Users/Users.js

@@ -2,9 +2,11 @@ import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
 import 'style/pages/Preferences/Users.scss';
 
+import { Card } from 'components';
 import { CLASSES } from 'common/classes';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
 
@@ -23,7 +25,7 @@ function UsersPreferences({ openDialog }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
       )}
     >
-      <div className={classNames(CLASSES.CARD)}>
+      <UsersPereferencesCard>
         <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
           <Tabs animate={true} onChange={onChangeTabs}>
             <Tab
@@ -38,9 +40,13 @@ function UsersPreferences({ openDialog }) {
             />
           </Tabs>
         </div>
-      </div>
+      </UsersPereferencesCard>
     </div>
   );
 }
 
 export default withUserPreferences(UsersPreferences);
+
+const UsersPereferencesCard = styled(Card)`
+  padding: 0;
+`;