chore: theme style

6 files changed, 13 insertions, 5 deletions

diff --git a/src/components/CollapsibleSectionHeader.module.scss b/src/components/CollapsibleSectionHeader.module.scss
index b654f35..a875719 100644
--- a/src/components/CollapsibleSectionHeader.module.scss
+++ b/src/components/CollapsibleSectionHeader.module.scss
@@ -1,6 +1,7 @@
 .header {
   display: flex;
   align-items: center;
+  padding: 5px;
 
   &:focus {
     outline: none;
diff --git a/src/components/SwitchThemed.tsx b/src/components/SwitchThemed.tsx
index 056e5a0..5145816 100644
--- a/src/components/SwitchThemed.tsx
+++ b/src/components/SwitchThemed.tsx
@@ -12,7 +12,7 @@ const Switch = ReactSwitch.default ? ReactSwitch.default : ReactSwitch;
 
 function SwitchThemed({ checked = false, onChange, theme, name }) {
   const offColor = theme === 'dark' ? '#393939' : '#e9e9e9';
-  const onColor = theme === 'dark' ? '#005caf' : '#005caf';
+  const onColor = theme === 'dark' ? '#306081' : '#005caf';
   return (
     <Switch
       onChange={onChange}
diff --git a/src/components/proxies/Proxies.module.scss b/src/components/proxies/Proxies.module.scss
index 6a4b655..d3295cd 100644
--- a/src/components/proxies/Proxies.module.scss
+++ b/src/components/proxies/Proxies.module.scss
@@ -35,5 +35,4 @@
   @media (--breakpoint-not-small) {
     padding: 10px 40px;
   }
-  border-bottom: dashed rgba(154, 154, 154, 0.222);
 }
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index a912a5b..f6f6f71 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -113,7 +113,7 @@ function ProxySmallImpl({
       className={cx(s0.proxySmall, {
         [s0.selectable]: isSelectable,
       })}
-      style={{ background: color, scale: now ? '1.6' : '1' }}
+      style={{ background: color, scale: now ? '1.2' : '1' }}
       onClick={doSelect}
       onKeyDown={handleKeyDown}
       role={isSelectable ? 'menuitem' : ''}
@@ -215,7 +215,7 @@ function ProxyImpl({
         <ProxyNameTooltip label={name} aria-label={`proxy name: ${name}`}>
           <span>{name}</span>
         </ProxyNameTooltip>
-        <span className={s0.proxyType} style={{ paddingLeft: 4, opacity: 1.0, color: '#51A8DD' }}>
+        <span className={s0.proxyType} style={{ paddingLeft: 4, opacity: 0.4, color: '#51A8DD' }}>
           {formatUdpType(proxy.udp, proxy.xudp)}
         </span>
       </div>
@@ -224,7 +224,7 @@ function ProxyImpl({
         <div className={s0.row}>
           <span
             className={s0.proxyType}
-            style={{ paddingRight: 4, opacity: 1.0, color: '#F596AA' }}
+            style={{ paddingRight: 4, opacity: 0.4, color: '#F596AA' }}
           >
             {formatProxyType(proxy.type)}
           </span>
diff --git a/src/components/proxies/ProxyGroup.module.scss b/src/components/proxies/ProxyGroup.module.scss
index 5409ea8..07a82a2 100644
--- a/src/components/proxies/ProxyGroup.module.scss
+++ b/src/components/proxies/ProxyGroup.module.scss
@@ -2,6 +2,13 @@
   margin-bottom: 12px;
 }
 
+.group {
+  padding: 10px;
+  background-color: var(--color-bg-card);
+  border-radius: 10px;
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
+}
+
 .zapWrapper {
   width: 20px;
   height: 20px;
diff --git a/src/components/proxies/ProxyList.module.scss b/src/components/proxies/ProxyList.module.scss
index 33f76f0..efb8345 100644
--- a/src/components/proxies/ProxyList.module.scss
+++ b/src/components/proxies/ProxyList.module.scss
@@ -16,4 +16,5 @@
 
 .summary {
   grid-template-columns: repeat(auto-fill, 12px);
+  padding-left: 10px;
 }