V2 Beta Release #16

.eslintrc

@@ -1,5 +1,5 @@
 {
-	"extends": ["react-app"],
+	"extends": ["react-app", "plugin:@next/next/recommended"],
 	"plugins": ["prettier"],
 	"rules": {
 		"react/react-in-jsx-scope": "off",
@@ -17,6 +17,7 @@
 		],
 		"jsx-a11y/anchor-is-valid": "off",
 		"jsx-a11y/alt-text": "off",
-		"import/no-anonymous-default-export": "off"
+		"import/no-anonymous-default-export": "off",
+		"@next/next/no-img-element": "off"
 	}
 }

.github/workflows/updateDependency.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Update @synthetixio/contracts-interface dependency
         run: |
           npm install --legacy-peer-deps --no-audit
-          npm install @synthetixio/contracts-interface@${{ github.event.client_payload.version }} --save-exact
+          npm install @synthetixio/contracts-interface@${{ github.event.client_payload.version }} --save-exact --legacy-peer-deps
       - name: Commit changes
         run: |
           git config --global user.email "[email protected]" && git config --global user.name "Synthetix Team"

.storybook/preview.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { CustomThemeProvider } from '../contexts/CustomThemeContext';
+import { ThemeProvider } from 'styled-components';
+import { themes } from '../styles/theme';
 import '../styles/main.css';
 
 export const parameters = {
@@ -12,10 +13,11 @@ export const parameters = {
 	},
 };
 
+// TODO: Maybe implement custom theme switcher for Storybook.
 export const decorators = [
 	(Story) => (
-		<CustomThemeProvider>
+		<ThemeProvider theme={themes.dark}>
 			<Story />
-		</CustomThemeProvider>
+		</ThemeProvider>
 	),
 ];

components/Badge/Badge.tsx

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 
 const Badge = styled.span`
 	text-transform: uppercase;
-	color: ${(props) => props.theme.colors.black};
-	padding: 2px 3px 1px 5px;
+	padding: 1.6px 3px 1px 5px;
 	text-align: center;
 	font-family: ${(props) => props.theme.fonts.black};
-	background: ${(props) => props.theme.colors.selectedTheme.red};
+	color: ${(props) => props.theme.colors.selectedTheme.badge.text};
+	background: ${(props) => props.theme.colors.selectedTheme.badge.background};
 	border-radius: 100px;
 	letter-spacing: 1px;
 	margin-left: 4px;

components/BaseModal/BaseModal.tsx

@@ -57,10 +57,14 @@ const StyledDialogContent = styled(DialogContent)`
 	border: 0;
 	background: none;
 	${media.lessThan('sm')`
-		&&& {		
+		&&& {
 			width: 100%;
 			height: 100%;
 			margin: 0;
+
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
 	`}
 `;