feat: add Settings/Accounts Settings section (#2853)

Closes #2818

front/src/modules/ui/display/icon/index.ts

@@ -60,6 +60,7 @@ export {
   IconList,
   IconLogout,
   IconMail,
+  IconMailCog,
   IconMap,
   IconMinus,
   IconMoneybag,

front/src/modules/ui/display/pill/components/SoonPill.tsx

@@ -1,5 +1,9 @@
 import styled from '@emotion/styled';
 
+type SoonPillProps = {
+  className?: string;
+};
+
 const StyledSoonPill = styled.span`
   align-items: center;
   background: ${({ theme }) => theme.background.transparent.light};
@@ -13,8 +17,9 @@ const StyledSoonPill = styled.span`
   height: ${({ theme }) => theme.spacing(4)};
   justify-content: flex-end;
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
-  margin-left: auto;
   padding: ${({ theme }) => `0 ${theme.spacing(2)}`};
 `;
 
-export const SoonPill = () => <StyledSoonPill>Soon</StyledSoonPill>;
+export const SoonPill = ({ className }: SoonPillProps) => (
+  <StyledSoonPill className={className}>Soon</StyledSoonPill>
+);

front/src/modules/ui/input/button/components/Button.tsx

@@ -277,6 +277,10 @@ const StyledButton = styled.button<
   }
 `;
 
+const StyledSoonPill = styled(SoonPill)`
+  margin-left: auto;
+`;
+
 export const Button = ({
   className,
   Icon,
@@ -307,7 +311,7 @@ export const Button = ({
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}
-      {soon && <SoonPill />}
+      {soon && <StyledSoonPill />}
     </StyledButton>
   );
 };

front/src/modules/ui/layout/card/components/Card.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledCard = styled.div`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  padding: ${({ theme }) => theme.spacing(3)};
+`;
+
+export { StyledCard as Card };

front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Card } from '../Card';
+
+const meta: Meta<typeof Card> = {
+  title: 'UI/Layout/Card/Card',
+  component: Card,
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {};