- {table.map((item) => {
- let icon = youtube;
+
+ {table.map((item) => {
+ let icon = youtube;
- if (item.type === 'soundcloud') {
- icon = soundcloud;
- } else if (item.type === 'bandcamp') {
- icon = bandcamp;
- }
+ if (item.type === 'soundcloud') {
+ icon = soundcloud;
+ } else if (item.type === 'bandcamp') {
+ icon = bandcamp;
+ }
- return (
- onClick(item.type, item.id)}
- />
- );
- })}
+ return (
+ onClick(item.type, item.id)}
+ />
+ );
+ })}
+
);
}
diff --git a/src/components/text-link/text-link.component.styles.ts b/src/components/text-link/text-link.component.styles.ts
index 3ab577f9..8ba2d6cb 100644
--- a/src/components/text-link/text-link.component.styles.ts
+++ b/src/components/text-link/text-link.component.styles.ts
@@ -1,4 +1,5 @@
import styled from 'styled-components';
+
import {AnchorOptions} from './text-link.component';
const getBorder = (c) => `0.15em solid ${c}`;
diff --git a/src/components/text-link/text-link.component.tsx b/src/components/text-link/text-link.component.tsx
index 7bea4d65..47b6a4ba 100644
--- a/src/components/text-link/text-link.component.tsx
+++ b/src/components/text-link/text-link.component.tsx
@@ -1,4 +1,5 @@
import React, {ReactElement} from 'react';
+
import {TextLink} from './text-link.component.styles';
interface TextLinkComponentProps {
diff --git a/src/components/title/title.component.styles.ts b/src/components/title/title.component.styles.ts
index f0b3411c..a14988e8 100644
--- a/src/components/title/title.component.styles.ts
+++ b/src/components/title/title.component.styles.ts
@@ -1,8 +1,8 @@
+import {addHoverLink, centerFlex} from 'src/app/shared.styles';
import styled from 'styled-components';
-import {flexCenter, hoverLink} from 'src/app/styles/styles';
export const Title = styled.h1`
- ${flexCenter};
- ${hoverLink};
+ ${centerFlex};
+ ${addHoverLink};
font-weight: 900;
`;
diff --git a/src/components/title/title.component.test.tsx b/src/components/title/title.component.test.tsx
index 646634e8..d81164ce 100644
--- a/src/components/title/title.component.test.tsx
+++ b/src/components/title/title.component.test.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
import {render, screen} from '@testing-library/react';
+import React from 'react';
+
import {TitleComponent} from './title.component';
describe('TitleComponent', () => {
diff --git a/src/components/title/title.component.tsx b/src/components/title/title.component.tsx
index eceea155..20b65768 100644
--- a/src/components/title/title.component.tsx
+++ b/src/components/title/title.component.tsx
@@ -1,5 +1,6 @@
import React, {ReactElement} from 'react';
import {LinkComponent} from 'src/components/link.component';
+
import {Title} from './title.component.styles';
/**
diff --git a/src/hooks/use-autoplay.test.ts b/src/hooks/use-autoplay.test.ts
index 95441cc3..861bc7bc 100644
--- a/src/hooks/use-autoplay.test.ts
+++ b/src/hooks/use-autoplay.test.ts
@@ -1,4 +1,5 @@
import {renderHook} from '@testing-library/react-hooks';
+
import {useAutoplay} from './use-autoplay';
describe('useAutoplay', () => {
diff --git a/src/hooks/use-cache.ts b/src/hooks/use-cache.ts
index 984cb03b..00a417c8 100644
--- a/src/hooks/use-cache.ts
+++ b/src/hooks/use-cache.ts
@@ -1,4 +1,5 @@
import {useEffect, useState} from 'react';
+
import {useInterval} from './use-interval';
/**
diff --git a/src/hooks/use-redirect-auto.ts b/src/hooks/use-redirect-auto.ts
index 7b8189ba..bcd49c40 100644
--- a/src/hooks/use-redirect-auto.ts
+++ b/src/hooks/use-redirect-auto.ts
@@ -1,5 +1,5 @@
-import {useEffect} from 'react';
import {useRouter} from 'next/router';
+import {useEffect} from 'react';
/**
* Hook to redirect automatically to a given path
diff --git a/src/layouts/default/default.layout.styles.ts b/src/layouts/default/default.layout.styles.ts
index 84c57d64..89923c71 100644
--- a/src/layouts/default/default.layout.styles.ts
+++ b/src/layouts/default/default.layout.styles.ts
@@ -1,48 +1,25 @@
+import {
+ addColorsDefault,
+ addFontSizes,
+ addMargins,
+ addVerticalScroll,
+ centerFlex,
+} from 'src/app/shared.styles';
import styled from 'styled-components';
-import {widths} from 'src/app/styles/widths';
-import {mediaQueries} from 'src/app/styles/breakpoints';
-
-export const Container = styled.div`
- position: fixed;
-
- display: flex;
- justify-content: center;
- align-items: center;
+export const DefaultLayoutContainer = styled.div`
width: 100vw;
height: 100vh;
- color: ${(props) => props.theme.primary};
- background: ${(props) => props.theme.background.primary};
-`;
-
-export const Wrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
-
- height: 100%;
+ display: grid;
+ grid-template-rows: auto 1fr;
- text-align: center;
- font-size: 1.1em;
-
- ${mediaQueries.below.tablet} {
- width: ${widths.mobile};
- }
-
- ${mediaQueries.above.tablet} {
- width: ${widths.tablet};
- }
-
- ${mediaQueries.above.desktop} {
- width: ${widths.desktop};
- }
-
- ${mediaQueries.above.widescreen} {
- width: ${widths.widescreen};
- }
+ ${addColorsDefault};
+ ${addFontSizes};
+`;
- ${mediaQueries.above.fullhd} {
- width: ${widths.fullhd};
- }
+export const NewWrapper = styled.div`
+ ${centerFlex};
+ ${addMargins};
+ ${addVerticalScroll};
`;
diff --git a/src/layouts/default/default.layout.test.tsx b/src/layouts/default/default.layout.test.tsx
index 535701fe..02d4d62e 100644
--- a/src/layouts/default/default.layout.test.tsx
+++ b/src/layouts/default/default.layout.test.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
import {render as defaultRender} from '@testing-library/react';
-import {DefaultLayout} from './default.layout';
+import React from 'react';
+
import {ThemeWrapper} from '../../app/components/theme-wrapper/theme-wrapper';
+import {DefaultLayout} from './default.layout';
const render = () => {
function Children() {
diff --git a/src/layouts/default/default.layout.tsx b/src/layouts/default/default.layout.tsx
index f4688ee3..6c3fccc4 100644
--- a/src/layouts/default/default.layout.tsx
+++ b/src/layouts/default/default.layout.tsx
@@ -1,7 +1,8 @@
import React, {ReactElement} from 'react';
import {HeaderComponent} from 'src/components/header/header.component';
import {MetaComponent} from 'src/components/meta/meta.component';
-import {Container, Wrapper} from './default.layout.styles';
+
+import {DefaultLayoutContainer, NewWrapper} from './default.layout.styles';
interface DefaultLayoutProps {
children: ReactElement | ReactElement[];
@@ -18,10 +19,13 @@ export function DefaultLayout({
return (
<>
{!customMeta &&