Skip to content

Commit f45fd2c

Browse files
dkarskidkarski
authored
Merge pull request #7 from luck-js/develop
v1.6-alpha
2 parents 9f6ae1e + 7548564 commit f45fd2c

File tree

27 files changed

+380
-49
lines changed

27 files changed

+380
-49
lines changed

‎.env.develop‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
APPOLO_CLIENT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkYmViZTNkNDM3OGVhNTExZDE4MGIzZSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTU3Mjc4MTY1NiwiZXhwIjoxNTc1MzczNjU2fQ.--S0L3AC0nJqskUp49_6_yYFs6oCmEyNhRCPsvnt68A
1+
APPOLO_CLIENT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkYmViZTNkNDM3OGVhNTExZDE4MGIzZSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTU3Mjk3MjEwMiwiZXhwIjoxNTc1NTY0MTAyfQ.6dS0-u8mzdBN8N9cJ8e4NF5GMAx_zRe6HoJHojQc5OM
22
CLIENT_URL=http://localhost:1337
33
SHOULD_SHOW_DRAFT=true

‎pages/blog/BlogLayout.tsx‎ renamed to ‎components/BlogLayout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Fragment } from 'react';
2-
import Layout from '../../components/Layout';
3-
import { Navigation } from '../../components';
2+
import Layout from './Layout';
3+
import { Navigation } from './index';
44

55
type LayoutProps = {
66
backgroundColor: string;

‎pages/index/Bubbles/Bubble.tsx‎ renamed to ‎components/Bubbles/Bubble.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import Konva from 'konva';
33
import { Circle } from 'react-konva';
44
import { Size } from './BubbleList';
5-
import { getRandomInt } from '../../../utils';
5+
import { getRandomInt } from '../../utils';
66

77
export interface BubbleConfig {
88
radius: number;

‎pages/index/Bubbles/BubbleList.tsx‎ renamed to ‎components/Bubbles/BubbleList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import Bubble, { BubbleConfig } from './Bubble';
3-
import { getRandomInt, helper} from '../../../utils';
3+
import { getRandomInt, helper, Theme} from '../../utils';
44

55
export interface Size {
66
width: number;
@@ -26,7 +26,7 @@ const getBubbleProps = ({ width, height }: Size): BubbleConfig => {
2626
const y = getRandomInt(-height / 5, 0, 20);
2727
const opacity = 0.6;
2828

29-
return { radius, x, y, opacity, fill: 'white' };
29+
return { radius, x, y, opacity, fill: `${Theme.colors.main}` };
3030
};
3131

3232
const BubbleList: React.FunctionComponent<BubbleListProps> = ({ size, handleClickBubble }) => {

‎pages/index/Bubbles/index.tsx‎ renamed to ‎components/Bubbles/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from 'styled-components';
33
import useComponentSize from '@rehooks/component-size';
44
//TODO: add react-konva as lazy
55
import { Layer, Stage } from 'react-konva';
6-
import { Theme } from '../../../utils';
6+
import { Theme } from '../../utils';
77
import BubbleList, { Size } from './BubbleList';
88

99
const CONTAINER_HEIGHTS = [200, 250, 300];

‎components/Button/Button.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import styled, { css } from 'styled-components';
2-
import { applyStyleModifiers } from 'styled-components-modifiers';
2+
import {applyStyleModifiers, ModifierKeys, ModifiersConfig} from 'styled-components-modifiers';
33
import { BaseButton } from './BaseButton';
44
import * as Theme from '../../utils/theme';
5+
import {TextStyle} from "../../utils"
56

6-
const BUTTON_VARIANTS = {
7+
interface ButtonProps extends TextStyle{
8+
modifiers?:ModifierKeys;
9+
href?: string;
10+
ariaLabel: string;
11+
12+
}
13+
14+
const BUTTON_VARIANTS:ModifiersConfig = {
715
black: () => css`
816
color: ${Theme.colors.black};
917
@@ -13,7 +21,8 @@ const BUTTON_VARIANTS = {
1321
`,
1422
};
1523

16-
export const Button = styled(BaseButton)<any>`
24+
25+
export const Button = styled(BaseButton)<ButtonProps>`
1726
font-weight: 700;
1827
letter-spacing: 0;
1928
cursor: pointer;

‎components/Button/NavLink.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { Button } from './Button';
33
import styled from 'styled-components';
44
import { BaseButton } from './BaseButton';
55
import * as React from 'react';
6+
import {ModifierKeys} from "styled-components-modifiers"
67

7-
const NavLink = ({ modifiers, href, ariaLabel, ...props }: { modifiers?: string[]; href: string, ariaLabel: string }) => {
8+
const NavLink = ({ modifiers, href, ariaLabel, ...props }: { modifiers?: ModifierKeys; href: string, ariaLabel: string }) => {
89
return (
910
<NavLink.Container {...props}>
1011
<Link href={href}>

‎components/Footer.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Box } from './Box';
4+
import { TextLink } from './TextLink';
5+
import { SmallText } from './Typography';
6+
import { Theme } from '../utils';
7+
import media from '../utils/media';
8+
import Link from 'next/link';
9+
10+
const Container = styled(Box)`
11+
text-align: center;
12+
color: ${Theme.colors.black};
13+
background-color: ${Theme.colors.main};
14+
15+
padding: ${Theme.space.small}px ${Theme.space.xregular}px;
16+
17+
${media.greaterThan('mobile')`
18+
19+
`}
20+
21+
${media.greaterThan('tablet')`
22+
padding: ${Theme.space.regular}px ${Theme.space.xregular}px;
23+
`}
24+
25+
${media.greaterThan('desktop')`
26+
padding: ${Theme.space.xregular}px ${Theme.space.xregular}px;
27+
`}
28+
`;
29+
30+
const Footer = () => {
31+
return (
32+
<Container>
33+
<SmallText>
34+
Polityka prywatności{' '}
35+
<Link href={'./polityka-prywatnosci-strony'}>
36+
<TextLink
37+
href={'./polityka-prywatnosci-strony'}
38+
aria-label={'przejdź do polityki prywatnosci strony'}
39+
modifiers={['black']}
40+
underline
41+
>
42+
strony
43+
</TextLink>
44+
</Link>{' '}
45+
&{' '}
46+
<Link href={'./polityka-prywatnosci-pan-mikolaj-luck'}>
47+
<TextLink
48+
href={'./polityka-prywatnosci-pan-mikolaj-luck'}
49+
aria-label={'przejdź do polityki prywatnosci Pan Mikołaj Luck'}
50+
modifiers={['black']}
51+
underline
52+
>
53+
Pan Mikołaj Luck
54+
</TextLink>
55+
</Link>
56+
</SmallText>
57+
</Container>
58+
);
59+
};
60+
export default Footer;

‎components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type LayoutProps = {
88
};
99
const Container = styled(Box)`
1010
margin: 0;
11-
min-height: 100%;
11+
height: 100%;
1212
`;
1313

1414
const Layout: React.FunctionComponent<LayoutProps> = ({ children, ...props }) => {

‎components/TextLink.tsx‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
1-
import styled from "styled-components"
1+
import styled, {css} from "styled-components"
22
import {Theme} from "../utils"
3+
import {applyStyleModifiers, ModifierKeys, ModifiersConfig} from "styled-components-modifiers"
34

5+
const BUTTON_VARIANTS:ModifiersConfig = {
6+
darkGray: () => css`
7+
color: ${Theme.colors.darkGray};
8+
9+
&:hover {
10+
text-decoration-color: ${Theme.colors.darkGray};
11+
}
12+
`,
13+
black: (props) => css`
14+
color: ${Theme.colors.black};
15+
text-decoration-color: ${props.underline && Theme.colors.black};
16+
17+
&:hover {
18+
text-decoration-color: ${Theme.colors.black};
19+
opacity: ${props.underline && 0.8};
20+
}
21+
`,
22+
};
423

5-
export const TextLink = styled('a')`
6-
color: ${Theme.colors.darkGray};
24+
25+
export const TextLink = styled('a')<{modifiers?:ModifierKeys, underline?:boolean}>`
26+
color: ${Theme.colors.main};
727
28+
cursor: pointer;
829
text-decoration: underline;
930
text-decoration-color: transparent;
10-
transition: text-decoration-color 0.5s;
31+
transition: text-decoration-color 0.5s, opacity 0.5s;
32+
33+
opacity: 1;
1134
1235
&:hover {
13-
text-decoration-color: ${Theme.colors.darkGray};
36+
text-decoration-color: ${Theme.colors.main};
1437
}
38+
39+
${applyStyleModifiers(BUTTON_VARIANTS)};
1540
`

0 commit comments

Comments
 (0)