);
}
}
- const [expanded, setExpanded] = useState(false);
const onDocsClick: React.MouseEventHandler = event => {
trackEvent("user_options.select_docs");
const docsUrl = `https://docs.replay.io`;
@@ -187,40 +187,87 @@ export default function UserOptions() {
trackEvent(collapsed ? "video.settings.set_collapsed" : "video.settings.set_expanded");
};
+ const signedInMenuHeader =
+ accessToken && currentUserInfo ? (
+
+ ) : null;
+
+ const triggerContent =
+ accessToken && currentUserInfo ? (
+ <>
+ {currentUserInfo.picture ? (
+
+
more_horiz}
+ buttonClassName="flex max-w-[220px] items-center gap-3 rounded-md px-2 py-1.5 text-foreground transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-60 md:px-3"
+ buttonContent={triggerContent}
dataTestId="UserOptions"
- setExpanded={setExpanded}
expanded={expanded}
orientation="bottom"
+ setExpanded={setExpanded}
>
+ {signedInMenuHeader}
{devLayoutOptions}
-
+
+
-
+
-
+
-
+
+
diff --git a/src/ui/components/Header/ViewToggle.css b/src/ui/components/Header/ViewToggle.css
index 915edc30f4e..227a0d37647 100644
--- a/src/ui/components/Header/ViewToggle.css
+++ b/src/ui/components/Header/ViewToggle.css
@@ -1,30 +1,38 @@
.view-toggle {
display: flex;
- padding: 2px 0;
+ padding: 3px;
cursor: pointer;
text-align: left;
- padding: 1px;
width: auto;
appearance: none;
- border: none;
outline: none !important;
- border-radius: 8px;
- font-size: 15px;
- background: var(--theme-toggle-bgcolor);
- border: 1px solid var(--theme-toggle-bgcolor);
+ border-radius: var(--radius-lg, 0.625rem);
+ font-size: 0.9375rem;
+ line-height: 1.375rem;
+ background: hsl(var(--muted));
+ border: 1px solid hsl(var(--border) / 0.65);
+ box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
position: relative;
user-select: none;
+ transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.view-toggle:hover {
+ border-color: hsl(var(--border) / 0.9);
}
.view-toggle .handle {
position: absolute;
content: "";
- height: calc(100% - 2px);
- border-radius: 7px;
- background: var(--theme-toggle-handle-bgcolor);
- width: calc(50% - 1px);
- top: 0;
- margin: 1px;
+ /* Track: 3px inset left/right, 3px gutter between segments → each pill is (100% − 9px) / 2 */
+ top: 3px;
+ height: calc(100% - 6px);
+ width: calc(50% - 4.5px);
+ border-radius: var(--radius-md, 0.5rem);
+ background: hsl(var(--card));
+ box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
+ margin: 0;
+ transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.view-toggle .option {
@@ -36,17 +44,18 @@
.view-toggle .text {
min-width: 145px;
text-align: center;
- padding: 3px 36px;
+ padding: 4px 36px;
white-space: nowrap;
- color: var(--tab-standard-color);
+ color: hsl(var(--muted-foreground));
position: relative;
z-index: 1;
+ transition: color 150ms ease;
}
.view-toggle .active {
- color: var(--tab-selected-color);
- font-weight: 400;
- background: linear-gradient(180deg, var(--base-theme-100) 0%, rgba(255, 255, 255, 0.82) 100%);
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
- border-radius: 7px;
+ color: hsl(var(--foreground));
+ font-weight: 500;
+ background: transparent;
+ box-shadow: none;
+ border-radius: var(--radius-md, 0.5rem);
}
diff --git a/src/ui/components/Header/ViewToggle.tsx b/src/ui/components/Header/ViewToggle.tsx
index 7530d7e53be..944089a9281 100644
--- a/src/ui/components/Header/ViewToggle.tsx
+++ b/src/ui/components/Header/ViewToggle.tsx
@@ -63,7 +63,8 @@ export default function ViewToggle() {
mode === viewMode) / MODES.length) * 100}%`,
+ left:
+ MODES.findIndex(({ mode }) => mode === viewMode) === 0 ? "3px" : "calc(50% + 1.5px)",
}}
>
{MODES.map(({ mode, label }) => (
diff --git a/src/ui/components/LoginButton.tsx b/src/ui/components/LoginButton.tsx
index 6d67ec52ea2..2dfd4f58ec3 100644
--- a/src/ui/components/LoginButton.tsx
+++ b/src/ui/components/LoginButton.tsx
@@ -1,10 +1,9 @@
import React, { FC, useContext } from "react";
import { SessionContext } from "replay-next/src/contexts/SessionContext";
+import Icon from "ui/components/shared/Icon";
import { login, logout } from "ui/utils/auth";
-import Avatar from "./Avatar";
-
interface LoginButtonProps {
variant?: string;
iconPosition?: "left" | "right";
@@ -18,9 +17,10 @@ const LoginButton: FC
= ({ variant, iconPosition = "left" }) =
);
}
@@ -29,6 +29,7 @@ const LoginButton: FC = ({ variant, iconPosition = "left" }) =
{" "}
+ 
{" "}
+ 
+
+
+
+
+ 
+
+
+