Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 28917ae

Browse files
chiciochicio
committed
Improved styles 🚀
1 parent 1b1f73a commit 28917ae

File tree

15 files changed

+66
-61
lines changed

15 files changed

+66
-61
lines changed

‎src/components/design-system/atoms/border-radius.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { css } from "styled-components";
2+
3+
export const borderRadius = css`
4+
border-radius: 4px;
5+
`;

‎src/components/design-system/atoms/call-to-action-style.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { css } from "styled-components";
22
import { mediaQuery } from "../utils-css/media-query";
3+
import { borderRadius } from "./border-radius";
34

45
export const callToActionStyle = css`
56
font-size: ${(props) => props.theme.fontSizes[3]};
67
background-color: ${(props) => props.theme.light.accentColor};
78
color: ${(props) => props.theme.light.textAbovePrimaryColor};
89
padding: ${(props) => props.theme.spacing[2]};
910
border: none;
10-
border-radius: 4px;
11+
${borderRadius};
1112
margin: ${(props) => props.theme.spacing[0]};
1213
line-height: 1;
1314
text-align: center;

‎src/components/design-system/atoms/container-fullscreen.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from "styled-components";
2-
import { mediaQuery } from "../utils-css/media-query";
2+
import { backgroundGradients } from "./gradients";
33

44
export const ContainerFullscreen = styled.div`
55
display: flex;
@@ -9,9 +9,5 @@ export const ContainerFullscreen = styled.div`
99
height: 100vh;
1010
min-height: 100vh;
1111
width: 100%;
12-
background-color: ${(props) => props.theme.light.primaryColor};
13-
14-
${mediaQuery.dark} {
15-
background-color: ${(props) => props.theme.dark.primaryColor};
16-
}
12+
${backgroundGradients}
1713
`;

‎src/components/design-system/atoms/gradients.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { css } from "styled-components";
2+
3+
export const backgroundGradients = css`
4+
background-image: linear-gradient(
5+
to bottom,
6+
${(props) => props.theme.dark.secondaryColor},
7+
${(props) => props.theme.dark.primaryColor}
8+
);
9+
`;

‎src/components/design-system/atoms/overlay.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { useLockBodyScroll } from "../hooks/use-lock-body-scroll";
66
export interface OverlayProps {
77
zIndex: number;
88
delay: string;
9-
onClick: () => void;
109
}
1110

1211
const StyledOverlay = styled.div<TransientProps<OverlayProps>>`
@@ -23,8 +22,12 @@ const StyledOverlay = styled.div<TransientProps<OverlayProps>>`
2322
backdrop-filter: blur(4px);
2423
`;
2524

26-
export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
25+
export const Overlay: FC<OverlayProps & { onClick: () => void }> = ({
26+
zIndex,
27+
onClick,
28+
delay,
29+
}) => {
2730
useLockBodyScroll();
2831

29-
return <StyledOverlay $zIndex={zIndex} $onClick={onClick} $delay={delay} />;
32+
return <StyledOverlay $zIndex={zIndex} onClick={onClick} $delay={delay} />;
3033
};

‎src/components/design-system/atoms/syntax.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { css } from "styled-components";
2+
import { borderRadius } from "./border-radius";
23

34
export const syntax = css`
45
/**
@@ -36,7 +37,7 @@ export const syntax = css`
3637
3738
pre[class*="language-"] {
3839
padding: 15px;
39-
border-radius: 4px;
40+
${borderRadius};
4041
border: 1px solid #e1e1e8;
4142
overflow: auto;
4243
position: relative;

‎src/components/design-system/molecules/post-card.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { mediaQuery } from "../utils-css/media-query";
1010
import { gatsbyImagePlaceholderSelector } from "../utils-css/gatsby-image-selector";
1111
import { FC } from "react";
1212
import { PostTags } from "./post-tags";
13+
import { borderRadius } from "../atoms/border-radius";
1314

1415
interface BigCardProps {
1516
big: boolean;
@@ -21,7 +22,7 @@ const PostDescription = styled(Paragraph)`
2122
`;
2223

2324
const PostCardContainer = styled.div<TransientProps<BigCardProps>>`
24-
border-radius: 4px;
25+
${borderRadius};
2526
margin-top: ${(props) => props.theme.spacing[4]};
2627
background-color: ${(props) => props.theme.light.generalBackgroundLight};
2728
box-shadow: 0 3px 10px 0 ${(props) => props.theme.light.boxShadowLight};

‎src/components/design-system/molecules/project.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Paragraph } from "../atoms/paragraph";
99
import { List } from "../atoms/list";
1010
import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";
1111
import { gatsbyImageWrapperSelector } from "../utils-css/gatsby-image-selector";
12+
import { borderRadius } from "../atoms/border-radius";
1213

1314
interface ProjectContainerProps {
1415
reverse: boolean;
@@ -40,7 +41,7 @@ const ProjectImageContainer = styled(ProjectContentContainer)`
4041
4142
${gatsbyImageWrapperSelector} {
4243
overflow: hidden;
43-
border-radius: 4px;
44+
${borderRadius};
4445
box-shadow: 0 3px 10px 0 ${(props) => props.theme.light.boxShadowLight};
4546
4647
${mediaQuery.dark} {

‎src/components/design-system/molecules/search.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Link } from "gatsby";
99
import { isIOS } from "react-device-detect";
1010
import { SearchResult } from "../lunr";
1111
import { useSearch } from "../hooks/use-search";
12+
import { borderRadius } from "../atoms/border-radius";
1213

1314
const SearchListContainer = styled(Container)`
1415
position: absolute;
@@ -18,15 +19,15 @@ const SearchListContainer = styled(Container)`
1819
bottom: 0;
1920
height: calc(100vh - 55px ${isIOS ? " - 100px" : ""});
2021
overflow: scroll;
21-
border-radius: 4px;
22+
${borderRadius};
2223
`;
2324

2425
const SearchHitsList = styled(List)`
2526
list-style: none;
2627
padding: ${(props) => props.theme.spacing[2]};
2728
margin: ${(props) => props.theme.spacing[6]} 0;
2829
background-color: ${(props) => props.theme.light.generalBackground};
29-
border-radius: 4px;
30+
${borderRadius};
3031
3132
${mediaQuery.dark} {
3233
background-color: ${(props) => props.theme.dark.generalBackground};
@@ -133,7 +134,7 @@ const SearchBoxInput = styled.input<TransientProps<StartSearchProps>>`
133134
css`
134135
width: 200px;
135136
background: ${(props) => props.theme.light.generalBackground};
136-
border-radius: 4px;
137+
${borderRadius};
137138
138139
${mediaQuery.dark} {
139140
background: ${(props) => props.theme.dark.generalBackground};

‎src/components/design-system/organism/blog-header.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { StaticImage } from "gatsby-plugin-image";
33
import styled from "styled-components";
44
import { mediaQuery } from "../utils-css/media-query";
55
import { gatsbyImagePlaceholderSelector } from "../utils-css/gatsby-image-selector";
6+
import { backgroundGradients } from "../atoms/gradients";
67

78
const BlogHeaderContainer = styled.div`
89
display: flex;
@@ -108,11 +109,7 @@ const MobileContainer = styled.div<MobileContainerProps>`
108109
`;
109110

110111
const Background = styled.div<TransientProps<DesktopHeaderProps>>`
111-
background-image: linear-gradient(
112-
to bottom,
113-
${(props) => props.theme.dark.secondaryColor},
114-
${(props) => props.theme.dark.primaryColor}
115-
);
112+
${backgroundGradients};
116113
height: ${(props) => (props.$big ? "400px" : "220px")};
117114
position: absolute;
118115
top: 0;

0 commit comments

Comments
 (0)