[#46] Fix: Song Search Modal 반응형 아이콘 크기 변경

UX를 고려하여 변경
playthesong · Apr 7, 2021 · b4dde38 · b4dde38
1 parent f73f902
commit b4dde38
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/components/LetterEditor/SongSearchModal/SearchForm.jsx b/src/components/LetterEditor/SongSearchModal/SearchForm.jsx
@@ -52,6 +52,7 @@ const Form = styled.form`
 
   @media ${({ theme }) => theme.device.mobile} {
     width: 98%;
+    height: 2.7rem;
   }
 `;
 
@@ -69,6 +70,10 @@ const SearchLabel = styled.span`
   color: white;
   font-weight: 600;
   box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, 0.1);
+
+  @media ${({ theme }) => theme.device.mobile} {
+    height: 2.7rem;
+  }
 `;
 
 const SearchInput = styled.input`
@@ -119,6 +124,10 @@ const SearchInputWrap = styled.div`
       margin-left: 3.8rem;
     }
   }
+
+  @media ${({ theme }) => theme.device.mobile} {
+    height: 2.7rem;
+  }
 `;
 
 const SearchButton = styled.button`
@@ -133,11 +142,20 @@ const SearchButton = styled.button`
   border-radius: 0rem 0.5rem 0.5rem 0rem;
   flex: 1;
   box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, 0.1);
+
+  @media ${({ theme }) => theme.device.mobile} {
+    height: 3rem;
+  }
 `;
 
 const SearchIcon = styled(BiSearch)`
   color: #fff;
   font-size: 1.4rem;
+
+  @media ${({ theme }) => theme.device.mobile} {
+    width: 2rem;
+    font-size: 1.6rem;
+  }
 `;
 
 export default SearchForm;
diff --git a/src/components/LetterEditor/SongSearchModal/SongSearchResultItem.jsx b/src/components/LetterEditor/SongSearchModal/SongSearchResultItem.jsx
@@ -92,6 +92,11 @@ const SelectButton = styled(HiCheck)`
   margin-right: 2%;
   cursor: pointer;
   transition: 0.25s;
+
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-top: 0.3rem;
+    font-size: 3rem;
+  }
 `;
 
 export default SongSearchResultItem;