From a7990e5babed8be93116d0968aa881caeb93b92a Mon Sep 17 00:00:00 2001
From: SleepingFox <seanloganking@gmail.com>
Date: Fri, 3 Apr 2020 19:29:39 -0400
Subject: [PATCH] Messy PoC

state jittering still seems to be an issue on rare occasion even though the button hitbox is no longer changing size.
---
 ui/component/button/view.jsx          | 36 +++++++++++++++++++--------
 ui/component/subscribeButton/view.jsx | 10 +++++++-
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx
index d621f446d..a114c755d 100644
--- a/ui/component/button/view.jsx
+++ b/ui/component/button/view.jsx
@@ -91,17 +91,33 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
   const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default
 
   const content = (
-    <span className="button__content">
-      {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
+    <div className="button__content" style={{ border: `1px solid white` }}>
+      {/* style={{ border: `1px solid white` }} */}
+      <div style={{ border: `1px solid green` }}>
+        {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
+      </div>
       {
-        <p style={{ visibility: 'hidden' }}>
-          {largestLabel}
-          {label && (
-            <span className="button__label" style={{ visibility: 'visible' }}>
-              {label}
-            </span>
-          )}
-        </p>
+        <div style={{ border: `1px solid blue` }}>
+          <span style={{ visibility: 'hidden' }}>
+            {largestLabel || label}
+            {label && (
+              //   <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 0, margin: 'auto' }}>
+              <div
+                style={{
+                  position: 'relative',
+                  left: '50%',
+                  right: '50%',
+                  transform: `translate(-50%, -50%)`,
+                  border: `1px solid red`,
+                }}
+              >
+                <span className="button__label" style={{ visibility: 'visible' }}>
+                  {label}
+                </span>
+              </div>
+            )}
+          </span>
+        </div>
       }
       {children && children}
       {iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />}
diff --git a/ui/component/subscribeButton/view.jsx b/ui/component/subscribeButton/view.jsx
index 331c634a9..fc6cf60df 100644
--- a/ui/component/subscribeButton/view.jsx
+++ b/ui/component/subscribeButton/view.jsx
@@ -46,11 +46,19 @@ export default function SubscribeButton(props: Props) {
   const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
   const label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel;
 
+  let longestStr = __('Following');
+
+  if (__('Following').length < __('Unfollow').length) {
+    longestStr = __('Unfollow');
+  }
+
+  longestStr = longestStr + '-';
+
   return permanentUrl ? (
     <Button
       ref={buttonRef}
       iconColor="red"
-      largestLabel="TEST LABEL"
+      largestLabel={longestStr}
       icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
       button={'alt'}
       requiresAuth={IS_WEB}