From 629062d945eff9f1905c4b9f7d012dc36bb60dec Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Wed, 17 Jun 2020 00:36:38 +0800
Subject: [PATCH] refactor(proxies): make the content header and settings
 button sticky

---
 src/components/proxies/Proxies.module.css   | 12 +++++++++---
 src/components/proxies/Proxies.tsx          | 14 ++++++++------
 src/components/proxies/ProxyList.module.css |  1 +
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/proxies/Proxies.module.css b/src/components/proxies/Proxies.module.css
index 2c702e7..f8f50a9 100644
--- a/src/components/proxies/Proxies.module.css
+++ b/src/components/proxies/Proxies.module.css
@@ -1,11 +1,17 @@
 .topBar {
   position: sticky;
   top: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   z-index: 1;
   background: var(--color-background);
-  display: flex;
-  justify-content: flex-end;
-  padding: 5px 5px 2px 0;
+  background: linear-gradient(var(--color-background) 70%, transparent);
+}
+
+.settingBtnContainer {
+  margin-right: 20px;
 }
 
 .group {
diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
index 474d09f..2a6977b 100644
--- a/src/components/proxies/Proxies.tsx
+++ b/src/components/proxies/Proxies.tsx
@@ -84,18 +84,20 @@ function Proxies({
 
   return (
     <>
-      <div className={s0.topBar}>
-        <Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
-          <Equalizer size={16} />
-        </Button>
-      </div>
       <BaseModal
         isOpen={isSettingsModalOpen}
         onRequestClose={closeSettingsModal}
       >
         <Settings />
       </BaseModal>
-      <ContentHeader title="Proxies" />
+      <div className={s0.topBar}>
+        <ContentHeader title="Proxies" />
+        <div className={s0.settingBtnContainer}>
+          <Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
+            <Equalizer size={16} />
+          </Button>
+        </div>
+      </div>
       <div>
         {groupNames.map((groupName: string) => {
           return (
diff --git a/src/components/proxies/ProxyList.module.css b/src/components/proxies/ProxyList.module.css
index b7ff2a3..1814929 100644
--- a/src/components/proxies/ProxyList.module.css
+++ b/src/components/proxies/ProxyList.module.css
@@ -2,6 +2,7 @@
   margin: 8px 0;
   display: flex;
   flex-wrap: wrap;
+  margin-left: -3px;
 }
 
 .listSummaryView {