Remove the overloaded term of Follow from social links

1 files changed, 46 insertions, 37 deletions

diff --git a/webroot/js/components/platform-logos-list.js b/webroot/js/components/platform-logos-list.js
index 301e32ca3..d5c051e56 100644
--- a/webroot/js/components/platform-logos-list.js
+++ b/webroot/js/components/platform-logos-list.js
@@ -1,61 +1,70 @@
-import {h} from '/js/web_modules/preact.js';
+import { h } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
-import {classNames} from '../utils/helpers.js';
+import { classNames } from '../utils/helpers.js';
 
 const html = htm.bind(h);
 
 function SocialIcon(props) {
-  const {platform, icon, url} = props;
-  const iconSupplied = !!icon
+  const { platform, icon, url } = props;
+  const iconSupplied = !!icon;
   const name = platform;
 
   const finalIcon = iconSupplied ? icon : '/img/platformlogos/default.svg';
 
-  const style = `background-image: url(${finalIcon});`
+  const style = `background-image: url(${finalIcon});`;
 
   const itemClass = classNames({
-    "user-social-item": true,
-    "flex": true,
-    "justify-start": true,
-    "items-center": true,
-    "m-1": true,
+    'user-social-item': true,
+    flex: true,
+    'justify-start': true,
+    'items-center': true,
+    'm-1': true,
   });
   const labelClass = classNames({
-    "platform-label": true,
-    "visually-hidden": !!finalIcon,
-    "text-indigo-800": true,
-    "text-xs": true,
-    "uppercase": true,
-    "max-w-xs": true,
-    "inline-block": true,
+    'platform-label': true,
+    'visually-hidden': !!finalIcon,
+    'text-indigo-800': true,
+    'text-xs': true,
+    uppercase: true,
+    'max-w-xs': true,
+    'inline-block': true,
   });
 
-  return (
-    html`
-      <a class=${itemClass} target="_blank" rel="me" href=${url}>
-        <span class="platform-icon rounded-lg bg-no-repeat"
-              style=${style} title="Find me on ${name}"></span>
-        <span class=${labelClass}>Find me on ${name}</span>
-      </a>
-    `);
+  return html`
+    <a class=${itemClass} target="_blank" rel="me" href=${url}>
+      <span
+        class="platform-icon rounded-lg bg-no-repeat"
+        style=${style}
+        title="Find me on ${name}"
+      ></span>
+      <span class=${labelClass}>Find me on ${name}</span>
+    </a>
+  `;
 }
 
 export default function (props) {
-  const {handles} = props;
+  const { handles } = props;
   if (handles == null) {
     return null;
   }
 
-  const list = handles.map((item, index) => html`
-    <li key="social${index}">
-      <${SocialIcon} platform=${item.platform} icon=${item.icon}
-                     url=${item.url}/>
-    </li>
-  `);
+  const list = handles.map(
+    (item, index) => html`
+      <li key="social${index}">
+        <${SocialIcon}
+          platform=${item.platform}
+          icon=${item.icon}
+          url=${item.url}
+        />
+      </li>
+    `
+  );
 
-  return html`
-    <ul id="social-list" class="social-list m-4 text-center">
-      <p class="follow-label text-xs font-bold uppercase m-1">Follow me:</p>
-      <p class="follow-icon-list flex flex-row items-center justify-center flex-wrap">${list}</p>
-    </ul>`;
+  return html` <ul id="social-list" class="social-list m-2 text-center">
+    <p
+      class="follow-icon-list flex flex-row items-center justify-center flex-wrap"
+    >
+      ${list}
+    </p>
+  </ul>`;
 }