1 files changed, 26 insertions, 42 deletions
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;
-  }
 `;