visual tweaks

lmpayvr · Jul 3, 2023 · 664cf03 · 664cf03
1 parent c3fb091
commit 664cf03
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 43 deletions.
diff --git a/webapps/console/components/ButtonGroup/ButtonGroup.module.css b/webapps/console/components/ButtonGroup/ButtonGroup.module.css
@@ -1,3 +1,3 @@
-.buttonGroup > :global(.ant-btn) {
-  margin-inline-start: 0 !important;
-}
+/*.buttonGroup > :global(.ant-btn) {*/
+/*  margin-inline-start: 0 !important;*/
+/*}*/
diff --git a/webapps/console/components/ButtonGroup/ButtonGroup.tsx b/webapps/console/components/ButtonGroup/ButtonGroup.tsx
@@ -1,17 +1,18 @@
-import { Button, Dropdown, MenuProps } from "antd";
+import { Button, Dropdown, MenuProps, Tooltip } from "antd";
 import React from "react";
 import { JitsuButton, WJitsuButton } from "../JitsuButton/JitsuButton";
 import { BaseButtonProps } from "antd/lib/button/button";
 import styles from "./ButtonGroup.module.css";
 import { useRouter } from "next/router";
 import { useWorkspace } from "../../lib/context";
+import { MoreVertical } from "lucide-react";
 
 const AntButtonGroup = Button.Group;
 
-export type ButtonProps = Omit<BaseButtonProps, "children"> & {
+export type ButtonProps = Omit<BaseButtonProps, "children" | "type"> & {
   href?: string;
   label?: React.ReactNode;
-  hideLabel?: boolean;
+  showLabel?: boolean;
   collapsed?: boolean;
   title?: string;
   onClick?: () => void;
@@ -48,31 +49,24 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = ({ items, collapseLast })
       {expandedItems.map((item, i) => {
         if (item.href) {
           return (
-            <WJitsuButton
-              {...item}
-              key={i}
-              href={item.href}
-              title={item.hideLabel && typeof item.label === "string" ? item.label : undefined}
-            >
-              {!item.hideLabel && item.label ? item.label : <></>}
-            </WJitsuButton>
+            <Tooltip title={!item.showLabel && typeof item.label === "string" ? item.label : undefined} key={i}>
+              <WJitsuButton {...item} key={i} href={item.href}>
+                {item.showLabel && item.label ? item.label : undefined}
+              </WJitsuButton>
+            </Tooltip>
           );
         }
         return (
-          <JitsuButton
-            {...item}
-            key={i}
-            title={item.hideLabel && typeof item.label === "string" ? item.label : undefined}
-          >
-            {!item.hideLabel && item.label ? item.label : <></>}
-          </JitsuButton>
+          <Tooltip title={!item.showLabel && typeof item.label === "string" ? item.label : undefined} key={i}>
+            <JitsuButton {...item} key={i}>
+              {item.showLabel && item.label ? item.label : undefined}
+            </JitsuButton>
+          </Tooltip>
         );
       })}
       {collapsedItems.length > 0 && (
         <Dropdown trigger={["click"]} menu={{ items: collapsedItems }}>
-          <Button className="text-lg font-bold p-0">
-            <b>⋮</b>
-          </Button>
+          <JitsuButton className="text-lg font-bold p-0" icon={<MoreVertical className={"w-4 h-4"} />} />
         </Dropdown>
       )}
     </AntButtonGroup>

diff --git a/webapps/console/components/ConfigObjectEditor/ConfigEditor.tsx b/webapps/console/components/ConfigObjectEditor/ConfigEditor.tsx
@@ -30,12 +30,12 @@ import { useWorkspace } from "../../lib/context";
 import omitBy from "lodash/omitBy";
 import { GlobalLoader, LoadingAnimation } from "../GlobalLoader/GlobalLoader";
 import { WLink } from "../Workspace/WLink";
-import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import { DeleteOutlined } from "@ant-design/icons";
 import { ErrorCard, GlobalError } from "../GlobalError/GlobalError";
 import { Action, confirmOp, doAction, feedbackError, feedbackSuccess, useTitle } from "../../lib/ui";
 import { branding } from "../../lib/branding";
 import { useAntdModal } from "../../lib/modal";
-import { Inbox } from "lucide-react";
+import { Edit3, Inbox } from "lucide-react";
 import { createDisplayName, prepareZodObjectForSerialization } from "../../lib/zod";
 import { JitsuButton } from "../JitsuButton/JitsuButton";
 import { EditorTitle } from "./EditorTitle";
@@ -650,7 +650,7 @@ const ObjectsList: React.FC<{ objects: any[]; onDelete: (id: string) => Promise<
           {
             label: "Edit",
             href: `/${type}s?id=${record.id}`,
-            icon: <EditOutlined />,
+            icon: <Edit3 className={"w-4 h-4"} />,
           },
           ...actions.map(action => ({
             disabled: !!(action.disabled && action.disabled(record)),

diff --git a/webapps/console/components/JitsuButton/JitsuButton.tsx b/webapps/console/components/JitsuButton/JitsuButton.tsx
@@ -27,7 +27,7 @@ const HJitsuButton: React.FC<JitsuButtonProps & Required<Pick<ButtonProps, "href
 
 function Button0(props: JitsuButtonProps) {
   return (
-    <Button {...omit(props, "href", "children", "icon", "iconPosition")}>
+    <Button {...omit(props, "href", "children", "icon", "iconPosition")} className={"pr-1"}>
       {props.icon ? (
         <ButtonLabel icon={props.icon} iconPosition={props.iconPosition} loading={!!props.loading}>
           {props.children}

diff --git a/webapps/console/pages/[workspaceId]/connections/index.tsx b/webapps/console/pages/[workspaceId]/connections/index.tsx
@@ -13,12 +13,11 @@ import { FaExternalLinkAlt, FaPlus, FaTrash } from "react-icons/fa";
 import { index } from "juava";
 import { getCoreDestinationType } from "../../../lib/schema/destinations";
 import { useRouter } from "next/router";
-import { FiEdit2 } from "react-icons/fi";
 import { useLinksQuery } from "../../../lib/queries";
 import { jsonSerializationBase64, useQueryStringState } from "../../../lib/useQueryStringState";
 import { TableProps } from "antd/es/table/InternalTable";
 import { ColumnType, SortOrder } from "antd/es/table/interface";
-import { Inbox } from "lucide-react";
+import { Edit3, Inbox } from "lucide-react";
 import { PlusOutlined } from "@ant-design/icons";
 import { JitsuButton, WJitsuButton } from "../../../components/JitsuButton/JitsuButton";
 import { DestinationTitle } from "../destinations";
@@ -158,7 +157,7 @@ function ConnectionsTable({ links, streams, destinations, reloadCallback }: Remo
       render: (text, link) => {
         const items: ButtonProps[] = [
           {
-            icon: <FiEdit2 />,
+            icon: <Edit3 className={"w-4 h-4"} />,
             label: "Edit",
             href: `/connections/edit?id=${link.id}`,
           },

diff --git a/webapps/console/pages/[workspaceId]/streams.tsx b/webapps/console/pages/[workspaceId]/streams.tsx
@@ -324,7 +324,7 @@ const StreamsList: React.FC<{}> = () => {
       {
         icon: <Wrench className="w-full h-full" />,
         title: "Setup Instructions",
-        collapsed: true,
+        collapsed: false,
         action: stream => {
           router.replace({
             pathname: router.pathname,

diff --git a/webapps/console/pages/[workspaceId]/syncs/index.tsx b/webapps/console/pages/[workspaceId]/syncs/index.tsx
@@ -9,16 +9,15 @@ import { Table, Tag } from "antd";
 import { confirmOp, feedbackError, feedbackSuccess } from "../../../lib/ui";
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
-import { FaExternalLinkAlt, FaPlus, FaRegPlayCircle, FaThList, FaTrash } from "react-icons/fa";
+import { FaExternalLinkAlt, FaPlay, FaPlus, FaTrash } from "react-icons/fa";
 import { index, rpc } from "juava";
 import { getCoreDestinationType } from "../../../lib/schema/destinations";
 import { useRouter } from "next/router";
-import { FiEdit2 } from "react-icons/fi";
 import { useLinksQuery } from "../../../lib/queries";
 import { jsonSerializationBase64, useQueryStringState } from "../../../lib/useQueryStringState";
 import { TableProps } from "antd/es/table/InternalTable";
 import { ColumnType, SortOrder } from "antd/es/table/interface";
-import { Inbox } from "lucide-react";
+import { Edit3, Inbox, ListMinusIcon } from "lucide-react";
 import { PlusOutlined } from "@ant-design/icons";
 import { JitsuButton, WJitsuButton } from "../../../components/JitsuButton/JitsuButton";
 import { ErrorCard } from "../../../components/GlobalError/GlobalError";
@@ -228,11 +227,9 @@ function SyncsTable({ links, services, destinations, reloadCallback }: RemoteEnt
         const t = tasks?.data?.tasks?.[link.id];
         const items: ButtonProps[] = [
           {
-            type: "primary",
             disabled: t?.status === "RUNNING",
             title: t?.status === "RUNNING" ? "Sync is already running" : undefined,
-            ghost: true,
-            icon: <FaRegPlayCircle />,
+            icon: <FaPlay />,
             onClick: async () => {
               const runStatus = await rpc(`/api/${workspace.id}/sources/run?syncId=${link.id}`);
               if (runStatus?.error) {
@@ -251,12 +248,12 @@ function SyncsTable({ links, services, destinations, reloadCallback }: RemoteEnt
             label: "Run",
           },
           {
-            icon: <FaThList />,
+            icon: <ListMinusIcon className={"w-5 h-5"} />,
             label: "Logs",
             href: `/syncs/tasks?query=${JSON5.stringify({ syncId: link.id })}`,
           },
           {
-            icon: <FiEdit2 />,
+            icon: <Edit3 className={"w-4 h-4"} />,
             label: "Edit",
             href: `/syncs/edit?id=${link.id}`,
           },

diff --git a/webapps/console/pages/[workspaceId]/syncs/tasks.tsx b/webapps/console/pages/[workspaceId]/syncs/tasks.tsx
@@ -105,9 +105,7 @@ function TasksTable({ tasks, loading, linksMap, servicesMap, destinationsMap }:
                   <Tag color={"green"} style={{ marginRight: 0 }}>
                     SUCCESS
                   </Tag>
-                  <span className={"text-xxs text-gray-500"}>
-                    {processed_rows.toLocaleString("FR", { useGrouping: true })} rows
-                  </span>
+                  <span className={"text-xxs text-gray-500"}>{processed_rows.toLocaleString()} rows</span>
                 </Space>
               );
             } catch (e) {}