Improve search styling

samuelmeuli · Jan 8, 2019 · 7f0783c · 7f0783c
1 parent 2a4bfb8
commit 7f0783c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/renderer/assets/styles/components/_search.scss b/src/renderer/assets/styles/components/_search.scss
@@ -25,6 +25,7 @@
 		width: 100%;
 		height: 100%;
 		padding: ($spacing-small / 2) $spacing-small;
+		font-weight: $font-weight-normal;
 		line-height: $line-height;
 	}
 
@@ -37,6 +38,10 @@
 	margin-top: $spacing-small;
 }
 
+.search-title:not(.text-faded) {
+	font-weight: $font-weight-semibold;
+}
+
 ::-webkit-search-cancel-button {
 	-webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
 }
diff --git a/src/renderer/assets/styles/elements/_form.scss b/src/renderer/assets/styles/elements/_form.scss
@@ -5,5 +5,5 @@ fieldset {
 
 legend {
 	margin-bottom: $spacing-small / 2;
-	font-weight: $font-weight-bold;
+	font-weight: $font-weight-semibold;
 }
diff --git a/src/renderer/components/elements/Calendar/SearchView/Search.js b/src/renderer/components/elements/Calendar/SearchView/Search.js
@@ -39,7 +39,9 @@ export default class Search extends PureComponent {
 							<p className="search-date text-faded">
 								{dateText}
 							</p>
-							<p className="search-title">{title}</p>
+							<p className={`search-title ${!title ? 'text-faded' : ''}`}>
+								{title || 'No title'}
+							</p>
 						</button>
 					</li>
 				);