Radix base (#2338)

Radix base and topnav

Co-authored-by: Guy Langford-Lee <guy@growthbook.io>
Co-authored-by: Jeremy Dorn <jeremy@jeremydorn.com>

.docker-compose-okteto.yml

@@ -19,6 +19,7 @@ services:
       - JWT_SECRET=${JWT_SECRET}
       - IS_CLOUD=true
       - IS_MULTI_ORG=true
+      - ALLOW_SELF_ORG_CREATION=true
       - SSO_CONFIG=${SSO_CONFIG}
       - DISABLE_TELEMETRY=debug
     volumes:

docs/docs/lib/script-tag.mdx

@@ -157,10 +157,10 @@ We have a walkthrough tutorial on how to configure this in our [GTM Guide](/guid
 
 ### Mixpanel
 
-To work with Mixpanel, we have to set the ID as an attribute for GrowthBook, and also add the custom event tracking callback. 
+To work with Mixpanel, we have to set the ID as an attribute for GrowthBook, and also add the custom event tracking callback.
 Below is an example of how to set up GrowthBook with Mixpanel. The script initializes Mixpanel (which you probably already have)
-and then sets the Mixpanel distinct ID to a GrowthBook `id` attribute once it has loaded. Then the script defines a trackingCallback 
-to log the experiment exposure event to Mixpanel. 
+and then sets the Mixpanel distinct ID to a GrowthBook `id` attribute once it has loaded. Then the script defines a trackingCallback
+to log the experiment exposure event to Mixpanel.
 
 ```html
 <script>
@@ -193,7 +193,7 @@ window.growthbook_config.trackingCallback = (experiment, result) => {
 
 ### Others
 
-For any other event tracking system (or if the built-in ones above do not meet your requirements), you can define your own custom tracking callback function. This must be defined *BEFORE* loading the main GrowthBook snippet on the page.
+For any other event tracking system (or if the built-in ones above do not meet your requirements), you can define your own custom tracking callback function. This must be defined _BEFORE_ loading the main GrowthBook snippet on the page.
 
 ```html
 <script>

packages/front-end/components/ActivityList.tsx

@@ -3,6 +3,7 @@ import { AuditInterface } from "back-end/types/audit";
 import Link from "next/link";
 import { date, datetime } from "shared/dates";
 import useApi from "@/hooks/useApi";
+import { useUser } from "@/services/UserContext";
 import LoadingOverlay from "./LoadingOverlay";
 import Avatar from "./Avatar/Avatar";
 //import { phaseSummary } from "@/services/utils";
@@ -21,6 +22,7 @@ const ActivityList: FC<{
     events: AuditInterface[];
     experiments: { id: string; name: string }[];
   }>("/activity");
+  const { users } = useUser();
 
   if (error) {
     return <div className="alert alert-danger">{error.message}</div>;
@@ -39,6 +41,10 @@ const ActivityList: FC<{
     <div className="">
       <ul className="list-unstyled simple-divider pl-0 mb-0">
         {events.map((event) => {
+          let name = "API";
+          if ("id" in event.user) {
+            name = users.get(event.user.id)?.name ?? "";
+          }
           return (
             <li key={event.id} className="media d-flex w-100 hover-highlight">
               <Link
@@ -51,6 +57,7 @@ const ActivityList: FC<{
                       email={event.user.email}
                       className="mr-2 float-left"
                       size={24}
+                      name={name}
                     />
                   )}
                   <div className="d-flex flex-column flex-fill ">

packages/front-end/components/Avatar/Avatar.tsx

@@ -1,28 +1,39 @@
 import { FC } from "react";
-import md5 from "md5";
 import clsx from "clsx";
+import { violet } from "@radix-ui/colors";
 
 const Avatar: FC<{
   email: string;
+  name: string;
   size?: number;
   className?: string;
-  name?: string;
 }> = ({ email, size = 40, className, name }) => {
-  const hash = md5(email?.trim()?.toLowerCase() || "");
-  const url = `https://www.gravatar.com/avatar/${hash}?d=identicon&s=${size}`;
-
+  const firstNameLetter = name?.charAt(0) || email.charAt(0);
+  const lastNameLetter = name?.split(" ")[1]?.charAt(0);
   const title = name ? `${name} <${email}>` : email;
-
+  const copy =
+    name.toLowerCase() === "api"
+      ? name.toUpperCase()
+      : `${firstNameLetter.toUpperCase()}${lastNameLetter?.toUpperCase()}`;
   return (
-    <img
-      className={clsx("border rounded-circle", className)}
-      src={url}
+    //round avatar with initals in the middle
+    <div
+      className={clsx(
+        "align-items-center justify-content-center border rounded-circle d-flex",
+        className
+      )}
       title={title}
       style={{
-        width: size + 2,
-        height: size + 2,
+        height: size,
+        width: size,
+        backgroundColor: violet?.violet3,
+        color: violet?.violet11,
+        fontSize: size / 2.7,
+        fontWeight: 600,
       }}
-    />
+    >
+      {copy}
+    </div>
   );
 };
 export default Avatar;

packages/front-end/components/DiscussionThread.tsx

@@ -65,7 +65,7 @@ const DiscussionThread: FC<{
 
             return (
               <li className="media mb-3" key={i}>
-                <Avatar email={email} className="mr-2" />
+                <Avatar email={email} className="mr-2" name={name} />
                 <div className="media-body">
                   {edit === i ? (
                     <CommentForm

packages/front-end/components/Features/RevisionLog.tsx

@@ -18,6 +18,7 @@ import useApi from "@/hooks/useApi";
 import LoadingOverlay from "@/components/LoadingOverlay";
 import Avatar from "@/components/Avatar/Avatar";
 import Code from "@/components/SyntaxHighlighting/Code";
+import { useUser } from "@/services/UserContext";
 
 export type MutateLog = {
   mutateLog: () => Promise<void>;
@@ -31,6 +32,7 @@ export interface Props {
 
 function RevisionLogRow({ log, first }: { log: RevisionLog; first: boolean }) {
   const [open, setOpen] = useState(false);
+  const { users } = useUser();
 
   let value = log.value;
   let valueContainsData = false;
@@ -63,6 +65,11 @@ function RevisionLogRow({ log, first }: { log: RevisionLog; first: boolean }) {
     "cursor-pointer ": !(!!comment || !valueContainsData),
   });
 
+  let name = "API";
+  if (log.user?.type === "dashboard") {
+    name = users.get(log.user.id)?.name ?? "";
+  }
+
   return (
     <div className={`appbox mb-0 ${first ? "" : "mt-3"} revision-log`}>
       <div
@@ -90,7 +97,7 @@ function RevisionLogRow({ log, first }: { log: RevisionLog; first: boolean }) {
         <div className="d-flex">
           {log.user?.type === "dashboard" && (
             <div className="mr-2">
-              <Avatar email={log.user.email} size={20} />
+              <Avatar email={log.user.email} size={20} name={name} />
             </div>
           )}
           <div>

packages/front-end/components/HomePage/DiscussionFeed.tsx

@@ -45,7 +45,12 @@ const DiscussionFeed: FC<{
 
           return (
             <li className="mb-3" key={i}>
-              <Avatar email={email} className="mr-2 float-left" size={24} />
+              <Avatar
+                email={email}
+                className="mr-2 float-left"
+                size={24}
+                name={name}
+              />
               <div
                 className="card cursor-pointer border-0"
                 onClick={(e) => {

packages/front-end/components/Layout/TopNav.module.scss

@@ -10,7 +10,6 @@ $sidebarwidth: 240px;
   right: 0;
   height: 56px;
   z-index: 1010;
-  transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
   background-color: var(--surface-background-color);
   border-bottom: 1px solid var(--border-color-300);
   padding: 0 16px;
@@ -29,19 +28,27 @@ $sidebarwidth: 240px;
   z-index: 995;
 }
 .pagetitle {
-  font-size: 18px;
+  font-size: 14px;
   line-height: 1.1;
   color: var(--text-color-main);
   font-weight: 600;
   flex: 1;
   min-width: 0;
-
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
   white-space: nowrap;
   vertical-align: middle;
 }
+.breadcrumblink {
+  color: var(--text-color-primary);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--text-color-primary-hover);
+    text-decoration: underline;
+  }
+}
 .mobilemenu {
   display: none;
   font-size: 24px;