updated filter dialog UI

Author: vardhan0604

src/components/BrowserFilter/BrowserFilter.react.js

@@ -210,33 +210,37 @@ export default class BrowserFilter extends React.Component {
               )}
               {!this.state.confirmName && (
                 <div className={styles.footer}>
-                  <Button
-                    color="white"
-                    value="Save"
-                    width="120px"
-                    onClick={() => this.setState({ confirmName: true })}
-                  />
-                  <Button
-                    color="white"
-                    value="Clear"
-                    disabled={this.state.filters.size === 0}
-                    width="120px"
-                    onClick={() => this.clear()}
-                  />
-                  <Button
-                    color="white"
-                    value="Add"
-                    disabled={Object.keys(available).length === 0}
-                    width="120px"
-                    onClick={() => this.addRow()}
-                  />
-                  <Button
-                    color="white"
-                    primary={true}
-                    value="Apply"
-                    width="120px"
-                    onClick={() => this.apply()}
-                  />
+                  <div className={styles.btnFlex}>
+                    <Button
+                      color="white"
+                      value="Save"
+                      width="120px"
+                      onClick={() => this.setState({ confirmName: true })}
+                    />
+                    <Button
+                      color="white"
+                      value="Clear"
+                      disabled={this.state.filters.size === 0}
+                      width="120px"
+                      onClick={() => this.clear()}
+                    />
+                  </div>
+                  <div className={styles.btnFlex}>
+                    <Button
+                      color="white"
+                      value="Add"
+                      disabled={Object.keys(available).length === 0}
+                      width="120px"
+                      onClick={() => this.addRow()}
+                    />
+                    <Button
+                      color="white"
+                      primary={true}
+                      value="Apply"
+                      width="120px"
+                      onClick={() => this.apply()}
+                    />
+                  </div>
                 </div>
               )}
             </div>

src/components/BrowserFilter/BrowserFilter.scss

@@ -99,9 +99,10 @@
 
 .footer {
   background: rgba(0,0,0,0.2);
-  padding: 11px 0;
+  padding: 11px 16px;
   text-align: center;
-
+  display: flex;
+  justify-content: space-between;
   > button {
     margin-right: 10px;
 
@@ -157,3 +158,8 @@
   display: flex;
   align-items: center;
 }
+
+.btnFlex{
+  display: flex;
+  gap: 12px;
+}