Removing more octo-button usages

webapp/src/components/propertyValueElement.tsx

@@ -54,7 +54,7 @@ export default class PropertyValueElement extends React.Component<Props, State>
         }
 
         if (propertyTemplate.type === 'select') {
-            let className = 'octo-button octo-propertyvalue'
+            let className = 'octo-propertyvalue'
             if (!displayValue) {
                 className += ' empty'
             }

webapp/src/components/viewHeader.scss

@@ -24,4 +24,13 @@
             background: rgba(var(--main-fg), 0.1);
         }
     }
+
+    .octo-spacer {
+        flex: 1;
+    }
+
+    .filter-container {
+        position: relative;
+        overflow: unset;
+    }
 }

webapp/src/components/viewHeader.tsx

@@ -213,28 +213,29 @@ class ViewHeader extends React.Component<Props, State> {
                             ))}
                         </Menu>
                     </MenuWrapper>}
-                <div
-                    className={hasFilter ? 'octo-button active' : 'octo-button'}
-                    style={{position: 'relative', overflow: 'unset'}}
-                    onClick={this.filterClicked}
-                >
-                    <FormattedMessage
-                        id='ViewHeader.filter'
-                        defaultMessage='Filter'
-                    />
-                    {this.state.showFilter &&
-                        <FilterComponent
-                            boardTree={boardTree}
-                            onClose={this.hideFilter}
-                        />}
+                <div className='filter-container'>
+                    <Button
+                        active={hasFilter}
+                        onClick={this.filterClicked}
+                    >
+                        <FormattedMessage
+                            id='ViewHeader.filter'
+                            defaultMessage='Filter'
+                        />
+                        {this.state.showFilter &&
+                            <FilterComponent
+                                boardTree={boardTree}
+                                onClose={this.hideFilter}
+                            />}
+                    </Button>
                 </div>
                 <MenuWrapper>
-                    <div className={hasSort ? 'octo-button active' : 'octo-button'}>
+                    <Button active={hasSort}>
                         <FormattedMessage
                             id='ViewHeader.sort'
                             defaultMessage='Sort'
                         />
-                    </div>
+                    </Button>
                     <Menu>
                         {(activeView.sortOptions.length > 0) &&
                             <>

webapp/src/styles/main.scss

@@ -209,11 +209,6 @@ hr {
     &.square {
         padding: 0;
     }
-
-    &.active {
-        color: rgb(45, 170, 220);
-        font-weight: 500;
-    }
 }
 
 

webapp/src/widgets/buttons/button.scss

@@ -25,6 +25,11 @@
         }
     }
 
+    &.active {
+        color: rgb(45, 170, 220);
+        font-weight: 500;
+    }
+
     .Icon {
         width: 14px;
         height: 14px;

webapp/src/widgets/buttons/button.tsx

@@ -10,6 +10,7 @@ type Props = {
     title?: string
     icon?: React.ReactNode
     filled?: boolean
+    active?: boolean
 }
 
 export default class Button extends React.Component<Props> {
@@ -17,7 +18,7 @@ export default class Button extends React.Component<Props> {
         return (
             <div
                 onClick={this.props.onClick}
-                className={`Button ${this.props.filled ? 'filled' : ''}`}
+                className={`Button ${this.props.active ? 'active' : ''} ${this.props.filled ? 'filled' : ''}`}
                 title={this.props.title}
             >
                 {this.props.icon}