@comicrelief/component-library 7.38.0 → 7.40.0

package/src/components/Organisms/Membership/Membership.style.js

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import Input from '../../Atoms/Input/Input';
 import Text from '../../Atoms/Text/Text';
 import spacing from '../../../theme/shared/spacing';
-import { media } from '../../../theme/shared/size';
 import Picture from '../../Atoms/Picture/Picture';
 
 const Container = styled.div`
@@ -52,7 +51,7 @@ const Wrapper = styled.div`
   text-align: center;
   margin-bottom: 50%;
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     margin: 0 ${spacing('xxl')};
     max-width: 420px;
   }
@@ -68,7 +67,7 @@ const FormWrapper = styled.div`
   box-shadow: 0px ${spacing('md')} ${spacing('xl')} rgba(0, 0, 0, 0.3);
   height: 450px;
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     height: 430px;
   }
 `;
@@ -139,7 +138,7 @@ const AmountField = styled(Input)`
   font-weight: 400;
   display: block;
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     flex: 0 0 60%;
   }
 
@@ -185,7 +184,7 @@ const Button = styled.button`
     background-color: ${({ theme }) => theme.color('coral_dark')};
   }
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: auto;
     padding: ${spacing('md')} ${spacing('l')};
     margin: 0 auto ${spacing('l')};

package/src/index.js

@@ -9,6 +9,7 @@ export { default as zIndex } from './theme/shared/zIndex';
 export { default as allowListed } from './utils/allowListed';
 export { default as spacing } from './theme/shared/spacing';
 export { default as breakpoint } from './theme/shared/breakpoint';
+export { default as allBreakpoints } from './theme/shared/allBreakpoints';
 export { media, screen, container } from './theme/shared/size';
 
 /* Atoms */

package/src/theme/shared/allContainers.js

@@ -0,0 +1,7 @@
+const container = {
+  small: '880px',
+  medium: '1200px',
+  large: '1440px'
+};
+
+export default container;