Merge pull request #349 from preactjs/filter-panel-style

Modernize filter panel styling

Author: marvinhagemeister

src/view/components/Devtools.module.css

@@ -56,6 +56,7 @@ input {
 	--color-code: #e3e3e3;
 	--color-code-border: #c2c2c2;
 	--color-text: #333;
+	--color-text-input: #333;
 	--color-text-stronger: #111;
 	--color-disabled: #dedede;
 	--color-panelbar-bg: #f7f7f7;
@@ -144,6 +145,7 @@ input {
 	--color-code: black;
 	--color-code-border: #5c5858;
 	--color-text: #b0b0b0;
+	--color-text-input: #c9c5c5;
 	--color-text-stronger: #dcdcdc;
 	--color-disabled: #575757;
 	--color-panelbar-bg: #373737;

src/view/components/elements/TreeBar.module.css

@@ -68,7 +68,7 @@
 	top: 90%;
 	right: -0.5rem;
 	border-top: none;
-	box-shadow: 0 0.1875rem 0.375rem var(--color-shadow);
+	border: .0625rem solid var(--color-border);
 	background: var(--color-bg);
 	width: 12rem;
 	z-index: 10;
@@ -89,10 +89,6 @@
 	align-items: center;
 }
 
-.filterRow + .filterRow {
-	margin-top: 0.25rem;
-}
-
 .filterCheck {
 	width: 1.25rem;
 	display: flex;
@@ -119,14 +115,26 @@
 	text-align: left;
 }
 
+.filterValueText {
+	padding-left: .25rem;
+	font-size: .875rem;
+}
+
+.filterAdd {
+	display: flex;
+	align-items: center;
+	font-size: .875rem;
+}
+
 .filterName {
 	display: flex;
 	align-items: center;
 	width: 100%;
 	background: var(--color-props-input-bg);
 	border: none;
-	color: var(--color-text);
+	color: var(--color-text-input);
 	padding: 0.15rem 0.3rem;
+	font-size: .75rem;
 }
 
 .filterActions {
@@ -141,7 +149,7 @@
 	color: var(--color-selected-text);
 	border: none;
 	border-radius: 0.1875rem;
-	font-size: 0.8rem;
+	font-size: .875rem;
 	padding: 0.25rem 0.5rem;
 }
 

src/view/components/elements/TreeBar.tsx

@@ -139,7 +139,7 @@ function FilterCheck({
 				/>
 				{checked ? <CheckboxChecked /> : <CheckboxUnChecked />}
 			</span>
-			<span class={s.filterValue}>{label}</span>
+			<span class={`${s.filterValue} ${s.filterValueText}`}>{label}</span>
 		</label>
 	);
 }
@@ -249,10 +249,12 @@ export function FilterPopup() {
 							setFilters([...filters, { enabled: false, value: "" }])
 						}
 					>
-						<span class={s.filterCheck}>
-							<AddCircle />
+						<span class={s.filterAdd}>
+							<span class={s.filterCheck}>
+								<AddCircle />
+							</span>
+							Add filter
 						</span>
-						Add filter
 					</IconBtn>
 					<button
 						type="submit"