Fix Cache Settings subsection styling

2 files changed, 27 insertions, 23 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index d7196caa8..3ccb37494 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -869,27 +869,26 @@ class EditSettingsForm extends Component {
                   {notCleared && (
                     <p>{intl.formatMessage(messages.cacheNotCleared)}</p>
                   )}
-                  <p>
-                    <Button
-                      buttonType="secondary"
-                      label={intl.formatMessage(messages.buttonClearAllCache)}
-                      onClick={() => {
-                        onClearAllCache();
-                        this.onClearCacheClicked();
-                      }}
-                      disabled={isClearingAllCache}
-                      loaded={!isClearingAllCache}
-                    />
-                  </p>
-                  <div style={{
-                    marginTop: 20,
-                  }}
-                  >
-                    <Button
-                      buttonType="secondary"
-                      label="Open Process Manager"
-                      onClick={openProcessManager}
-                    />
+                  <div className="settings__settings-group">
+                    <div className="settings__open-settings-cache-container">
+                      <Button
+                        buttonType="secondary"
+                        label={intl.formatMessage(messages.buttonClearAllCache)}
+                        className="settings__open-settings-cache-button"
+                        onClick={() => {
+                          onClearAllCache();
+                          this.onClearCacheClicked();
+                        }}
+                        disabled={isClearingAllCache}
+                        loaded={!isClearingAllCache}
+                      />
+                      <Button
+                        buttonType="secondary"
+                        label="Open Process Manager"
+                        className="settings__open-settings-cache-button"
+                        onClick={openProcessManager}
+                      />
+                    </div>
                   </div>
                 </div>
 
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index e0b7d39dd..b3f2d2475 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -27,7 +27,7 @@
   .settings__hr {
     color: rgba($dark-theme-gray, 0.8);
   }
-  
+
   .settings__hr-sections {
     color: rgba($dark-theme-text-color, 0.5);
   }
@@ -190,7 +190,7 @@
   .settings__hr {
     color: rgba($theme-gray, 0.2);
   }
-  
+
   .settings__hr-sections {
     color: rgba($theme-gray, 0.4);
   }
@@ -421,6 +421,11 @@
     height: auto !important;
   }
 
+  .settings__open-settings-cache-button, .settings__open-settings-cache-container {
+    cursor: pointer;
+    margin-right: 10px;
+  }
+
   .settings__empty-state {
     align-items: center;
     align-self: center;