filter svg on the right

Author: violetforest

src/pages/display/index.js

@@ -830,17 +830,17 @@ export default class Display extends Component {
                   collection
                 </Primary>
               </Button>
-              <Button onClick={() => this.setState({ 
-                  filter: !this.state.filter 
-                })}>
-                <div className={styles.filter}>
-                  <Primary>
-                    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.02 63.39">
-                      <path d="M61.61,2.53A3.23,3.23,0,0,0,58.78.87H3.23A3.23,3.23,0,0,0,.49,5.81L21.86,35V64.26l18.31-6.79V35L61.45,5.93l.08-.12A3.24,3.24,0,0,0,61.61,2.53ZM36.16,33.68v21l-10.3,3.83V33.68L4.75,4.87H57.27Z" transform="translate(0 -0.87)"/>
-                    </svg>
-                  </Primary>
-                </div>
-              </Button>
+              <div className={styles.filter}>
+                <Button onClick={() => this.setState({ 
+                    filter: !this.state.filter 
+                  })}>
+                    <Primary>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter">
+                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                      </svg>                    
+                    </Primary>
+                </Button>
+              </div>
             </div>
           </Padding>
         </Container>

src/pages/display/styles.module.scss

@@ -40,12 +40,17 @@
 }
 
 .filter {
-  position: relative;
-  top: 2px;
-  left: -2px;
-  width: 20px;
-  height: 20px;
-  fill: var(--text-color);
+  display: inline;
+  float: right;
+
+  svg {
+    position: relative;
+    top: 2px;
+    left: -2px;
+    width: 20px;
+    height: 20px;
+    fill: var(--background-color);
+  }
 }
 
 .card {