chore: styling updates

Author: mmioana

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<style>
+  html,
+  body.sb-main-fullscreen,
+  body.sb-main-fullscreen #storybook-root {
+    height: 100%;
+  }
+</style>

.storybook/preview.ts

@@ -37,6 +37,8 @@ const preview: Preview = {
       },
     },
 
+    layout: 'fullscreen',
+
     a11y: {
       // 'todo' - show a11y violations in the test UI only
       // 'error' - fail CI on a11y violations

src/components/composite/DepositModal/DepositModal.stories.tsx

@@ -7,6 +7,8 @@ import { ConnectButton } from 'src/components/ConnectButton';
 import { useIsDisconnected } from 'src/components/Navbar/hooks';
 import { WalletMenuToggle } from 'src/components/Navbar/components/Buttons/WalletMenuToggle';
 import { DepositButton } from '../DepositButton/DepositButton';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const meta = {
   component: DepositModal,
@@ -53,18 +55,21 @@ export const WithToggleAndConnectButton: Story = {
     const isDisconnected = useIsDisconnected();
 
     return (
-      <div>
-        {isDisconnected ? <ConnectButton /> : <WalletMenuToggle />}
-        <DepositButton
-          onClick={() => setIsOpen(!isOpen)}
-          label="Quick deposit"
-        />
+      <Box sx={{ p: 2 }}>
+        <Stack direction="row" spacing={2}>
+          {isDisconnected ? <ConnectButton /> : <WalletMenuToggle />}
+          <DepositButton
+            onClick={() => setIsOpen(!isOpen)}
+            label="Quick deposit"
+          />
+        </Stack>
+
         <DepositModal
           {...args}
           isOpen={isOpen}
           onClose={() => setIsOpen(false)}
         />
-      </div>
+      </Box>
     );
   },
   args: {

src/components/composite/DepositModal/DepositModal.styles.tsx

@@ -7,6 +7,7 @@ export const CenteredWrapper = styled(Box)(({ theme }) => ({
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
+  outline: 'none',
 }));
 
 export const CloseIconButton = styled(IconButton)(({ theme }) => ({

src/components/composite/DepositModal/DepositModal.tsx

@@ -10,41 +10,7 @@ import { CenteredWrapper, CloseIconButton } from './DepositModal.styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { TaskType } from 'src/types/strapi';
 import { motion } from 'framer-motion';
-
-export interface Protocol {
-  name: string;
-  product: string;
-  version: string;
-  logo: string;
-}
-
-export interface Chain {
-  chainId: number;
-  chainKey: string;
-}
-
-export interface Token {
-  name: string;
-  symbol: string;
-  decimals: number;
-  logo: string;
-  address: string;
-  chain: Chain;
-}
-
-// @TODO need to import from backend types when available
-export interface EarnOpportunity {
-  name: string;
-  asset: Token;
-  protocol: Protocol;
-  url: string;
-  description: string;
-  tags: string[];
-  rewards: string[];
-  lpToken: Token;
-  slug: string;
-  featured: boolean;
-}
+import { EarnOpportunity } from 'src/types/jumper-backend';
 
 interface DepositModalProps {
   onClose: () => void;
@@ -122,8 +88,8 @@ export const DepositModal: FC<DepositModalProps> = ({
                 ctx={{
                   theme: {
                     container: {
-                      maxHeight: 'calc(100vh - 10rem)',
-                      minWidth: 400,
+                      maxHeight: 'calc(100vh - 6rem)',
+                      minWidth: '100%',
                       maxWidth: 400,
                     },
                   },