fix(3000): Improve opacity of profile pictures

frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx

@@ -247,7 +247,12 @@ export const LemonButtonWithSideAction: React.FunctionComponent<
     const SideComponent = sideDropdown ? LemonButtonWithDropdown : LemonButton
 
     return (
-        <div className={clsx('LemonButtonWithSideAction', `LemonButtonWithSideAction--${buttonProps.size}`)}>
+        <div
+            className={clsx(
+                'LemonButtonWithSideAction',
+                buttonProps.size && `LemonButtonWithSideAction--${buttonProps.size}`
+            )}
+        >
             {/* Bogus `sideIcon` div prevents overflow under the side button. */}
             <LemonButton
                 ref={ref}

frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss

@@ -1,9 +1,6 @@
 .posthog-3000 {
     .LemonButton,
     .Link.LemonButton {
-        --lemon-button-transition: opacity 200ms ease, transform 200ms ease;
-        --lemon-button-border-width: 0;
-
         position: relative;
         min-height: 2.125rem;
         padding: 0;
@@ -14,7 +11,7 @@
         border-width: var(--lemon-button-border-width);
         border-radius: var(--radius);
         outline: none;
-        transition: var(--lemon-button-transition);
+        transition: none;
 
         .LemonButton__chrome {
             position: relative;
@@ -36,10 +33,16 @@
             border-style: solid;
             border-width: var(--lemon-button-border-width);
             border-radius: var(--radius);
-            transition: var(--transition);
+        }
 
-            .LemonButton__icon {
-                opacity: 0.5;
+        .LemonButton__icon {
+            color: var(--muted-3000);
+            transition: none;
+
+            > :not(.LemonIcon) {
+                // Elements that serve as an icon, but aren't an icon are slightly muted -
+                // not so much that they look disabled though
+                opacity: 0.75;
             }
         }
 
@@ -131,6 +134,13 @@
             }
         }
 
+        &:not([aria-disabled='true']):hover,
+        &.LemonButton--active {
+            .LemonButton__icon > :not(.LemonIcon) {
+                opacity: 1;
+            }
+        }
+
         &:not(.LemonButton--tertiary) {
             padding-bottom: 1px;
 
@@ -216,6 +226,10 @@
                 .LemonButton__chrome {
                     border-color: var(--secondary-3000-button-border);
                 }
+
+                .LemonButton__icon {
+                    color: var(--muted-3000);
+                }
             }
 
             &:not(:hover) {
@@ -227,6 +241,10 @@
                     background-color: transparent;
                     border-color: transparent;
                 }
+
+                .LemonButton__icon {
+                    color: var(--trace-3000);
+                }
             }
         }
 
@@ -249,12 +267,16 @@
         height: 1.25rem;
         color: var(--muted);
 
-        &.LemonButtonWithSideAction__spacer--divider {
+        &--divider {
             padding: 0;
             margin-left: 0.25rem;
         }
     }
 
+    .LemonButton--small .LemonButtonWithSideAction__spacer--divider {
+        height: 1.125rem;
+    }
+
     // SideAction buttons are buttons next to other buttons in the DOM but layered on top. since they're on another button, we don't want them to look like buttons.
     .LemonButtonWithSideAction__side-button {
         top: 1px;
@@ -280,6 +302,11 @@
             border: none !important;
         }
 
+        .LemonButton__icon {
+            color: currentColor;
+            opacity: 0.5;
+        }
+
         &:not([aria-disabled='true']):hover {
             background: rgb(0 0 0 / 10%);
         }

frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss

@@ -19,9 +19,7 @@
     align-items: center;
     justify-content: center;
     font-weight: 600;
-    color: #5f1903;
     user-select: none;
-    background-color: var(--lettermark-6-text);
     border-radius: 50%;
 
     &.xxl {
@@ -71,6 +69,8 @@
         height: inherit;
         font-size: inherit;
         line-height: inherit;
+        color: #5f1903;
+        background-color: var(--lettermark-6-text);
     }
 }