refactor: display proxy type Shadowsocks as SS

also make proxy type text smaller

for https://github.com/haishanh/yacd/issues/539

src/components/proxies/Proxy.module.css

@@ -42,8 +42,9 @@
 .proxyType {
   font-family: var(--font-mono);
   font-size: 0.6em;
+  margin-right: 3px;
   @media (--breakpoint-not-small) {
-    font-size: 1em;
+    font-size: 0.85em;
   }
 }
 

src/components/proxies/Proxy.tsx

@@ -110,6 +110,11 @@ function ProxySmallImpl({
   );
 }
 
+function formatProxyType(t: string) {
+  if (t === 'Shadowsocks') return 'SS';
+  return t;
+}
+
 function ProxyImpl({
   now,
   name,
@@ -149,7 +154,7 @@ function ProxyImpl({
       <div className={s0.proxyName}>{name}</div>
       <div className={s0.row}>
         <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
-          {proxy.type}
+          {formatProxyType(proxy.type)}
         </span>
         {latency && latency.number ? (
           <ProxyLatency number={latency.number} color={color} />