Add small visual tweaks

e2e-tests/tests/javascript-web/reporter/index.html

@@ -17,8 +17,10 @@ <h1>Hello from JS client</h1>
         const params = new URLSearchParams(window.location.search);
         const token = params.get("token");
         TT.registerToken(token);
+
         const serverPort = params.get("server_port");
-        TT.setServerUrl(`ws://localhost:${serverPort}`);
+        const serverUrl = params.get("server_url") || `ws://localhost:${serverPort}`;
+        TT.setServerUrl(serverUrl);
 
         async function hello(name) {
           await new Promise((res) => setTimeout(res, 100));

frontend/src/components/Snippet/Snippet.constants.ts

@@ -50,11 +50,11 @@ func hello(name string) {
 
 func main() {
   tt.Config.RegisterToken("${token}")
-  
+
   hello("world")
-  
+
   tt.Wait()
-} 
+}
 `.trim();
 
 const CODE_BLOCKS = {
@@ -71,11 +71,12 @@ export type AvailableLanguage = keyof typeof CODE_BLOCKS;
 interface LanguageDisplayData {
   name: string;
   logo: string;
+  addRing: boolean;
 }
 const DISPLAY_DATA: Record<AvailableLanguage, LanguageDisplayData> = {
-  js: { name: "JavaScript", logo: jsLogo },
-  python: { name: "Python", logo: pythonLogo },
-  go: { name: "Go", logo: goLogo },
+  js: { name: "JavaScript", logo: jsLogo, addRing: false },
+  python: { name: "Python", logo: pythonLogo, addRing: false },
+  go: { name: "Go", logo: goLogo, addRing: true },
 };
 
 export const getInstallationSnippet = (language: AvailableLanguage) => INSTALLATION_CODE_BLOCKS[language];

frontend/src/components/Snippet/Snippet.tsx

@@ -8,14 +8,14 @@ interface SnippetProps {
 export const Snippet = ({ token }: SnippetProps) => {
   return (
     <Tabs defaultValue={SHOWN_LANGUAGES[0]} className="flex flex-col w-full items-end">
-      <TabsList>
+      <TabsList className="h-auto">
         {SHOWN_LANGUAGES.map((language) => {
-          const { logo, name } = getDisplayData(language);
+          const { logo, name, addRing } = getDisplayData(language);
           return (
-            <TabsTrigger key={language} value={language}>
+            <TabsTrigger key={language} value={language} className="p-2">
               <div className="relative">
-                <img src={logo} alt={name} className="w-6 aspect-square rounded-tiny" />
-                <div className="fill-absolute ring-1 ring-primary/10 ring-inset rounded-tiny" />
+                <img src={logo} alt={name} className="w-5 aspect-square rounded-tiny" />
+                {addRing && <div className="fill-absolute ring-1 ring-primary/10 ring-inset rounded-tiny" />}
               </div>
             </TabsTrigger>
           );

frontend/src/components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -13,12 +13,12 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -27,13 +27,13 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -43,11 +43,11 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };

frontend/src/layouts/EventsSearch/EventsSearch.tsx

@@ -20,7 +20,7 @@ export function EventsSearch({ setSearchValue, setSearchBy }: EventsSearchProps)
   };
 
   return (
-    <div className="grid  p-2 gap-4 xl:grid-cols-2">
+    <div className="grid py-2 px-4 gap-2 xl:grid-cols-2">
       <Input
         size="lg"
         name="searchValue"
@@ -31,14 +31,14 @@ export function EventsSearch({ setSearchValue, setSearchBy }: EventsSearchProps)
       />
       <div className="flex gap-2 items-center">
         <ToggleGroup type="single" onValueChange={handleSearchByValue} defaultValue="all" value={toggleGroupValue}>
+          <ToggleGroupItem value="all" aria-label="Search by all">
+            All
+          </ToggleGroupItem>
           <ToggleGroupItem value="eventName" aria-label="Search by name">
-            name
+            Name
           </ToggleGroupItem>
           <ToggleGroupItem value="eventDetails" aria-label="Search by details">
-            details
-          </ToggleGroupItem>
-          <ToggleGroupItem value="all" aria-label="Search by all">
-            all
+            Details
           </ToggleGroupItem>
         </ToggleGroup>
       </div>