From 150311472eb44b3f4628c918b5912b9dd70cb838 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Fri, 17 Dec 2021 12:55:59 +0900
Subject: [PATCH] fixed reset date range button style Fixed reset date range
 button css on smaller displays

---
 source/src/pages/Search/TagSelect.tsx |  2 ++
 source/src/pages/Search/index.tsx     | 31 ++++++++++++++++-----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/source/src/pages/Search/TagSelect.tsx b/source/src/pages/Search/TagSelect.tsx
index a25b1dd..8d34c66 100644
--- a/source/src/pages/Search/TagSelect.tsx
+++ b/source/src/pages/Search/TagSelect.tsx
@@ -12,6 +12,7 @@ const map: Map = _map
 
 const StyledReactTagsContainer = styled.div`
 	width: 100%;
+	margin-top: 1.5rem;
 `
 
 export interface TagsData {
@@ -43,6 +44,7 @@ const TagSelect = (props: TagSelectProps) => {
 			<ThemeConsumer>
 				{(currentTheme) => (
 					<Select
+						placeholder="Select tags..."
 						theme={(theme) => ({
 							...theme,
 							colors: {
diff --git a/source/src/pages/Search/index.tsx b/source/src/pages/Search/index.tsx
index d7ac1a8..679689e 100644
--- a/source/src/pages/Search/index.tsx
+++ b/source/src/pages/Search/index.tsx
@@ -39,9 +39,18 @@ const StyledSearch = styled(MainContent)`
 	text-align: center;
 `
 
+const DateRangeControl = styled.div`
+	width: 350px;
+
+	@media screen and (max-width: ${theming.size.screen_size2}) {
+		margin-top: 2rem;
+	}
+`
+
 const ClearDateButton = styled.button`
 	width: 100%;
-	line-height: 2.5rem;
+	height: 2.5rem;
+
 	border: none;
 	cursor: pointer;
 
@@ -50,12 +59,18 @@ const ClearDateButton = styled.button`
 	font-weight: bold;
 `
 
+const StyledDateRange = styled(DateRange)`
+	width: 100%;
+	height: 350px;
+`
+
 const StyledSearchContainer = styled.div`
 	display: flex;
 	align-items: flex-start;
 
 	@media screen and (max-width: ${theming.size.screen_size2}) {
 		flex-direction: column-reverse;
+		align-items: center;
 	}
 `
 
@@ -69,15 +84,6 @@ const StyledSearchControlContainer = styled.div`
 	}
 `
 
-const StyledDateRange = styled(DateRange)`
-	width: 350px;
-	height: 350px;
-
-	@media screen and (max-width: ${theming.size.screen_size2}) {
-		margin-top: 1rem;
-	}
-`
-
 // check if post date is withing the range
 function isDateInRange(
 	dateToCompare: string,
@@ -257,7 +263,7 @@ const Search = () => {
 				<h1>Search</h1>
 
 				<StyledSearchContainer>
-					<div>
+					<DateRangeControl>
 						<ClearDateButton onClick={clearDate}>
 							Reset range
 						</ClearDateButton>
@@ -268,7 +274,7 @@ const Search = () => {
 							ranges={dateRange}
 							onChange={onDateRangeChange}
 						/>
-					</div>
+					</DateRangeControl>
 
 					<StyledSearchControlContainer
 						onSubmit={(event) => event.preventDefault()}
@@ -291,7 +297,6 @@ const Search = () => {
 						/>
 						{postCards.length}{" "}
 						{postCards.length > 1 ? "results" : "result"}
-						<h3>Tags</h3>
 						<TagSelect
 							query={query}
 							selectedTags={selectedTags}