diff --git a/web/calendar/calendar.css b/web/calendar/calendar.css
--- a/web/calendar/calendar.css
+++ b/web/calendar/calendar.css
@@ -1,19 +1,23 @@
-a.filtersButton {
- font-weight: 600;
- float: left;
- color: white;
- background-color: rgba(68, 68, 85, 0.67);
- padding: 8px 18px;
- border-radius: 18px;
- margin: 0 15px 5px 15px;
- font-size: 16px;
+.filtersButton {
+ color: var(--fg);
+ background-color: var(--filters-button-bg);
+ width: 40px;
+ height: 40px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ margin: 0 0px 9px 24px;
cursor: pointer;
- text-transform: uppercase;
position: absolute;
+ border: 1px solid var(--filters-button-border);
+ border-radius: 4px;
}
-a.filtersButton > svg {
- padding-right: 5px;
+
+.filtersButton:hover {
+ background-color: var(--filters-button-hover-bg);
}
+
div.content {
height: 100%;
position: relative;
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -1,7 +1,5 @@
// @flow
-import { faFilter } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import dateFormat from 'dateformat';
import invariant from 'invariant';
import * as React from 'react';
@@ -179,8 +177,7 @@
onClick={this.toggleFilters}
style={filterButtonStyle}
>
-
- Filters
+