fork and restyle, init scaffold for changes

1 files changed, 18 insertions, 23 deletions

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};
 `;