fix: Edit button looks strange (#649)

Author: CsCherrYY

src/formatter-settings/assets/features/formatterSettings/FormatterSettingView.tsx

@@ -97,7 +97,7 @@ const FormatterSettingsView = (): JSX.Element => {
     <Container className="root d-flex flex-column">
       <Row className="setting-header">
         <Col><h2 className="mb-0">{title}</h2></Col>
-        <Col className="flex-grow-0">{readOnly && (<div><a className="btn btn-primary float-right" role="button" title="Download and edit profile" onClick={() => onWillDownloadAndUse()}>Edit</a></div>)}</Col>
+        <Col className="flex-grow-0">{readOnly && (<div><a className="btn btn-primary float-right edit-button" role="button" title="Download and edit profile" onClick={() => onWillDownloadAndUse()}>Download and Edit</a></div>)}</Col>
       </Row>
       <Row className="flex-grow-1 d-flex flex-nowrap view-body">
         <Col className="flex-grow-0">{naviBar}</Col>

src/formatter-settings/assets/style.scss

@@ -3,7 +3,7 @@ $enable-rounded: false;
 .root {
   overflow: hidden;
   max-width: 1200px !important;
-  min-width: 530px !important;
+  min-width: 600px !important;
   min-height: 220px !important;
   height: 100vh !important;
 }
@@ -285,4 +285,14 @@ body.vscode-high-contrast {
   display: inline-block;
 }
 
+.edit-button {
+  background-color: var(--vscode-button-background) !important;
+  padding: 4px !important;
+  white-space: nowrap !important;
+  border: 1px solid var(--vscode-settings-dropdownBorder) !important;
+  &:hover {
+    background-color: var(--vscode-button-hoverBackground) !important;
+  }
+}
+
 @import "../../assets/vscode.scss";