aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Button/index.styled.ts28
-rw-r--r--src/components/Footer/index.styled.ts9
-rw-r--r--src/components/Game/index.styled.ts3
-rw-r--r--src/components/Guess/index.styled.ts41
-rw-r--r--src/components/Header/index.styled.ts46
-rw-r--r--src/components/InfoPopUp/index.styled.ts66
-rw-r--r--src/components/Player/index.styled.ts31
-rw-r--r--src/components/Player/index.tsx4
-rw-r--r--src/components/Result/index.styled.ts41
-rw-r--r--src/components/Search/index.styled.ts68
10 files changed, 152 insertions, 185 deletions
diff --git a/src/components/Button/index.styled.ts b/src/components/Button/index.styled.ts
index 1bb964f..728bf00 100644
--- a/src/components/Button/index.styled.ts
+++ b/src/components/Button/index.styled.ts
@@ -2,22 +2,26 @@ import styled from "styled-components";
import { theme } from "../../constants";
export const Button = styled.button<{ variant?: keyof typeof theme }>`
- background-color: ${({ theme, variant }) =>
- variant ? theme[variant] : theme.background100};
+ background-color: transparent;
+ border: 1px solid ${({ theme, variant }) =>
+ variant ? theme[variant] : theme.border};
+ color: ${({ theme, variant }) =>
+ variant ? theme[variant] : theme.text};
- border-radius: 5px;
- border: none;
-
- color: ${({ theme }) => theme.text};
- font-size: 1rem;
- font-weight: 800;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.8rem;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ padding: 10px 20px;
width: max-content;
- padding: 12.5px 20px;
+ cursor: pointer;
+ transition: background-color 0.1s, color 0.1s;
&:hover {
- opacity: 0.8;
+ background-color: ${({ theme, variant }) =>
+ variant ? theme[variant] : theme.border};
+ color: var(--cl-gray-0);
}
-
- cursor: pointer;
`;
diff --git a/src/components/Footer/index.styled.ts b/src/components/Footer/index.styled.ts
index 6caa7ff..76c98b6 100644
--- a/src/components/Footer/index.styled.ts
+++ b/src/components/Footer/index.styled.ts
@@ -2,10 +2,13 @@ import styled from "styled-components";
export const Text = styled.p`
text-align: center;
- color: ${({ theme }) => theme.text};
- margin-top: 50px;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.75rem;
+ color: var(--cl-gray-5);
+ margin-top: 48px;
`;
export const Link = styled.a`
- color: ${({ theme }) => theme.text};
+ color: var(--cl-gray-6) !important;
+ &:hover { color: var(--cl-magenta-7) !important; }
`;
diff --git a/src/components/Game/index.styled.ts b/src/components/Game/index.styled.ts
index 7860f98..c2ff1fb 100644
--- a/src/components/Game/index.styled.ts
+++ b/src/components/Game/index.styled.ts
@@ -1,8 +1,9 @@
import styled from "styled-components";
export const Buttons = styled.div`
- margin-top: 5%;
+ margin-top: 16px;
display: flex;
justify-content: space-between;
+ gap: 8px;
width: 100%;
`;
diff --git a/src/components/Guess/index.styled.ts b/src/components/Guess/index.styled.ts
index a235355..dac85ab 100644
--- a/src/components/Guess/index.styled.ts
+++ b/src/components/Guess/index.styled.ts
@@ -1,43 +1,38 @@
import styled from "styled-components";
-
import { GuessState } from "../../types/guess";
+const stateColor = (theme: any, active: boolean, state: GuessState | undefined) => {
+ if (active) return theme.border;
+ if (state === GuessState.Correct) return theme.green;
+ if (state === GuessState.PartiallyCorrect) return theme.yellow;
+ if (state === GuessState.Incorrect) return theme.red;
+ return theme.border100;
+};
+
export const Container = styled.div<{
active: boolean;
state: GuessState | undefined;
}>`
width: 100%;
- height: 45px;
-
- margin: 5px auto;
+ height: 44px;
+ margin: 3px 0;
display: flex;
align-items: center;
- border-color: ${({ theme, active, state }) => {
- if (active) {
- return theme.border;
- } else if (state === GuessState.PartiallyCorrect) {
- return theme.yellow;
- } else if (state === GuessState.Incorrect) {
- return theme.red;
- } else {
- return theme.border100;
- }
- }};
- border-width: 1px;
- border-radius: 5px;
- border-style: solid;
+ background-color: var(--cl-gray-1);
+
+ border: 1px solid ${({ theme, active, state }) => stateColor(theme, active, state)};
+ border-left: 4px solid ${({ theme, active, state }) => stateColor(theme, active, state)};
color: ${({ theme }) => theme.text};
`;
export const Text = styled.p`
+ margin: 0;
+ padding: 0 12px;
width: 100%;
- height: max-content;
-
- padding: 0px 10px;
-
- font-size: 1rem;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.85rem;
color: ${({ theme }) => theme.text};
`;
diff --git a/src/components/Header/index.styled.ts b/src/components/Header/index.styled.ts
index c66cd26..af38065 100644
--- a/src/components/Header/index.styled.ts
+++ b/src/components/Header/index.styled.ts
@@ -1,49 +1,39 @@
import styled from "styled-components";
export const Container = styled.header`
- display: flex;
- align-items: center;
- justify-content: center;
-
width: 100%;
-
- border-color: ${({ theme }) => theme.border};
- border-bottom-width: 0.5px;
- border-bottom-style: solid;
-
- margin-bottom: 15px;
+ border-bottom: 1px solid ${({ theme }) => theme.border};
+ padding-bottom: 16px;
+ margin-bottom: 32px;
`;
export const Content = styled.div`
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
- justify-content: space-between;
-
- width: 40%;
+ max-width: 680px;
+ margin: 0 auto;
- @media (max-width: 768px) {
- width: 95%;
+ svg {
+ color: var(--cl-gray-6);
+ &:hover {
+ cursor: pointer;
+ color: var(--cl-white);
+ }
}
- max-width: 650px;
-
- svg:hover {
- cursor: pointer;
- opacity: 0.8;
- }
-
- a {
- color: ${({ theme }) => theme.text};
- }
+ a { color: ${({ theme }) => theme.text}; }
`;
export const Logo = styled.h1`
- color: ${({ theme }) => theme.text};
- font-family: "Roboto Serif", serif;
+ font-family: "Roboto Mono", monospace;
+ font-size: 1rem;
+ font-weight: 700;
+ letter-spacing: 0.3em;
text-transform: uppercase;
text-align: center;
+ color: var(--cl-green-6);
+ margin: 0;
- -webkit-touch-callout: none;
user-select: none;
`;
diff --git a/src/components/InfoPopUp/index.styled.ts b/src/components/InfoPopUp/index.styled.ts
index 6431246..aafab91 100644
--- a/src/components/InfoPopUp/index.styled.ts
+++ b/src/components/InfoPopUp/index.styled.ts
@@ -1,70 +1,64 @@
import styled from "styled-components";
export const Container = styled.div`
- position: absolute;
+ position: fixed;
top: 0;
- z-index: 2;
-
+ left: 0;
+ z-index: 10;
width: 100%;
height: 100%;
-
display: flex;
align-items: center;
justify-content: center;
-
- background-color: rgba(0, 0, 0, 0.75);
+ background-color: rgba(0, 0, 0, 0.85);
`;
export const PopUp = styled.div`
width: 90%;
- max-width: 500px;
- @media (max-width: 768px) {
- width: 80%;
- }
- padding: 20px;
-
- background-color: ${({ theme }) => theme.background100};
-
- border-radius: 10px;
-
+ max-width: 480px;
+ padding: 32px;
+ background-color: var(--cl-gray-1);
+ border: 1px solid ${({ theme }) => theme.border};
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
h1 {
- margin-bottom: 0;
+ font-family: "Roboto Mono", monospace;
+ font-size: 1rem;
+ font-weight: 700;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--cl-green-6);
+ margin: 0;
}
`;
export const Spacer = styled.div`
- width: 70%;
- height: 0.2px;
-
+ width: 100%;
+ height: 1px;
margin: 20px 0;
-
- background-color: ${({ theme }) => theme.text};
- opacity: 0.5;
+ background-color: ${({ theme }) => theme.border};
`;
export const Section = styled.div`
- display: flex;
- gap: 10px;
- align-items: center;
- justify-content: space-between;
+ width: 100%;
+ margin: 4px 0;
- a {
- color: ${({ theme }) => theme.text};
+ p {
+ font-size: 0.82rem;
+ line-height: 1.6;
+ color: var(--cl-gray-9);
+ margin: 0 0 8px 0;
}
+
+ a { color: var(--cl-orange-6); }
`;
export const Contact = styled.p`
- a {
- color: ${({ theme }) => theme.text};
- }
margin-top: 5%;
-
- font-size: 0.9rem;
- font-weight: bold;
+ font-size: 0.75rem;
opacity: 0.5;
+
+ a { color: ${({ theme }) => theme.text}; }
`;
diff --git a/src/components/Player/index.styled.ts b/src/components/Player/index.styled.ts
index 9e775cf..3c98f1e 100644
--- a/src/components/Player/index.styled.ts
+++ b/src/components/Player/index.styled.ts
@@ -2,47 +2,38 @@ import styled from "styled-components";
export const ProgressBackground = styled.div`
position: relative;
- z-index: -1;
-
width: 100%;
- height: 20px;
- background-color: ${({ theme }) => theme.gray};
- border-radius: 2px;
-
- margin-top: 5%;
+ height: 12px;
+ background-color: var(--cl-gray-2);
+ border: 1px solid ${({ theme }) => theme.border};
+ margin: 24px 0 4px 0;
`;
export const Progress = styled.div<{ value: number }>`
width: ${({ value }) => value * 6.25}%;
- height: 20px;
-
- align-self: flex-start;
-
+ height: 100%;
background-color: ${({ theme }) => theme.green};
-
- border-radius: 2px;
-
transition: width 0.5s;
`;
export const Separator = styled.div`
position: absolute;
top: 0;
-
width: 1px;
height: 100%;
-
- background-color: ${({ theme }) => theme.border100};
+ background-color: ${({ theme }) => theme.border};
`;
export const TimeStamps = styled.div`
display: flex;
justify-content: space-between;
- align-items: center;
-
width: 100%;
+ margin-bottom: 12px;
`;
export const TimeStamp = styled.p`
- color: ${({ theme }) => theme.text};
+ margin: 0;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.7rem;
+ color: var(--cl-gray-5);
`;
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
index 9e3d819..e5d2d28 100644
--- a/src/components/Player/index.tsx
+++ b/src/components/Player/index.tsx
@@ -79,8 +79,8 @@ export function Player({ id, currentTry }: Props) {
</Styled.TimeStamps>
<IoPlay
style={{ cursor: "pointer" }}
- size={40}
- color="#fff"
+ size={36}
+ color="var(--cl-green-6)"
onClick={startPlayback}
/>
</>
diff --git a/src/components/Result/index.styled.ts b/src/components/Result/index.styled.ts
index 21d471c..3b2d33d 100644
--- a/src/components/Result/index.styled.ts
+++ b/src/components/Result/index.styled.ts
@@ -1,33 +1,38 @@
import styled from "styled-components";
export const ResultTitle = styled.h1`
- text-align: center;
+ font-family: "Roboto Mono", monospace;
+ font-size: 1.3rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ color: var(--cl-green-6);
+ margin-bottom: 8px;
+
@media (max-width: 768px) {
- width: 100%;
+ font-size: 1rem;
}
`;
export const Tries = styled.h4`
- @media (max-width: 768px) {
- text-align: center;
- width: 100%;
- }
-
- margin-top: 0;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.85rem;
+ font-weight: 400;
+ color: var(--cl-gray-8);
+ margin: 0 0 16px 0;
`;
export const SongTitle = styled.h3`
- @media (max-width: 768px) {
- text-align: center;
- width: 100%;
- }
-
- margin-top: 0;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--cl-white);
+ margin: 0 0 4px 0;
`;
export const TimeToNext = styled.h4`
- @media (max-width: 768px) {
- text-align: center;
- width: 100%;
- }
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.8rem;
+ font-weight: 400;
+ color: var(--cl-gray-6);
+ margin-top: 16px;
`;
diff --git a/src/components/Search/index.styled.ts b/src/components/Search/index.styled.ts
index 89af883..65a5052 100644
--- a/src/components/Search/index.styled.ts
+++ b/src/components/Search/index.styled.ts
@@ -2,88 +2,72 @@ import styled from "styled-components";
export const Container = styled.div`
position: relative;
-
width: 100%;
-
- margin-top: 5%;
+ margin-top: 16px;
`;
export const SearchContainer = styled.div`
display: flex;
align-items: center;
-
width: 100%;
- height: 50px;
-
- border-color: ${({ theme }) => theme.border};
- border-width: 1px;
- border-radius: 5px;
- border-style: solid;
-
+ height: 48px;
+ background-color: var(--cl-gray-1);
+ border: 1px solid ${({ theme }) => theme.border};
color: ${({ theme }) => theme.text};
`;
export const SearchPadding = styled.div`
display: flex;
align-items: center;
-
width: 100%;
-
- padding: 0 15px;
+ padding: 0 12px;
+ color: var(--cl-gray-5);
`;
export const Input = styled.input`
width: 100%;
height: 100%;
margin: 0 10px;
-
background-color: transparent;
border: none;
outline: none !important;
-
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.9rem;
color: ${({ theme }) => theme.text};
- font-size: 1rem;
+
+ &::placeholder {
+ color: var(--cl-gray-5);
+ }
`;
export const ResultsContainer = styled.div`
position: absolute;
- bottom: 50px;
+ bottom: 48px;
z-index: 1;
-
display: flex;
flex-direction: column;
- justify-content: flex-start;
-
width: 100%;
-
- max-height: 500%;
+ max-height: 280px;
overflow-y: auto;
+ border: 1px solid ${({ theme }) => theme.border};
+ border-bottom: none;
`;
export const Result = styled.div`
- padding: 1px 15px;
-
- background-color: ${({ theme }) => theme.background100};
-
- border-color: ${({ theme }) => theme.border};
- border-width: 1px;
- border-radius: 5px;
- border-style: solid;
-
- color: ${({ theme }) => theme.text};
-
+ padding: 0 12px;
+ background-color: var(--cl-gray-1);
+ border-bottom: 1px solid ${({ theme }) => theme.border};
cursor: pointer;
+
+ &:hover {
+ background-color: var(--cl-gray-2);
+ }
`;
export const ResultText = styled.p`
- width: 100%;
-
+ margin: 8px 0;
+ font-family: "Roboto Mono", monospace;
+ font-size: 0.82rem;
color: ${({ theme }) => theme.text};
- font-size: 0.9rem;
-
user-select: none;
-
- &:hover {
- opacity: 0.8;
- }
`;
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage