[front] - refactor: update IconButton variant from ghost to outline (#…

…8597) - Change the IconButton component variant in various columns across the application for consistency and styling purposes - The variant was updated on sorting buttons and action buttons to maintain a uniform look throughout the platform
dust-tt · Nov 12, 2024 · 36f1431 · 36f1431
1 parent fbf9785
commit 36f1431
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 13 deletions.
diff --git a/front/components/poke/assistants/columns.tsx b/front/components/poke/assistants/columns.tsx
@@ -41,7 +41,7 @@ export function makeColumnsForAssistants(
           <div className="flex space-x-2">
             <p>Id</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
@@ -58,7 +58,7 @@ export function makeColumnsForAssistants(
           <div className="flex space-x-2">
             <p>Name</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
@@ -100,7 +100,7 @@ export function makeColumnsForAssistants(
               assistant.status !== "archived" ? TrashIcon : EmotionLaughIcon
             }
             size="xs"
-            variant="ghost"
+            variant="outline"
             onClick={async () => {
               await (assistant.status !== "archived"
                 ? archiveAssistant(owner, reload, assistant)

diff --git a/front/components/poke/data_source_views/columns.tsx b/front/components/poke/data_source_views/columns.tsx
@@ -28,7 +28,7 @@ export function makeColumnsForDataSourceViews(): ColumnDef<DataSourceView>[] {
           <div className="flex space-x-2">
             <p>sId</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
@@ -52,7 +52,7 @@ export function makeColumnsForDataSourceViews(): ColumnDef<DataSourceView>[] {
           <div className="flex space-x-2">
             <p>Data Source</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")

diff --git a/front/components/poke/data_sources/columns.tsx b/front/components/poke/data_sources/columns.tsx
@@ -35,7 +35,7 @@ export function makeColumnsForDataSources(
           <div className="flex space-x-2">
             <p>sId</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
@@ -52,7 +52,7 @@ export function makeColumnsForDataSources(
           <div className="flex space-x-2">
             <p>Name</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")

diff --git a/front/components/poke/features/columns.tsx b/front/components/poke/features/columns.tsx
@@ -22,7 +22,7 @@ export function makeColumnsForFeatureFlags(
           <div className="flex space-x-2">
             <p>Name</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")

diff --git a/front/components/poke/invitations/columns.tsx b/front/components/poke/invitations/columns.tsx
@@ -32,6 +32,7 @@ export function makeColumnsForInvitations(
             &nbsp;
             <IconButton
               icon={ClipboardIcon}
+              variant="outline"
               tooltip="Copy invite link to clipboard"
               size="xs"
               onClick={() =>
@@ -74,7 +75,7 @@ export function makeColumnsForInvitations(
           <IconButton
             icon={TrashIcon}
             size="xs"
-            variant="ghost"
+            variant="outline"
             onClick={async () => {
               await onRevokeInvitation(invitation.inviteEmail);
             }}

diff --git a/front/components/poke/members/columns.tsx b/front/components/poke/members/columns.tsx
@@ -33,7 +33,7 @@ export function makeColumnsForMembers({
           <div className="flex space-x-2">
             <p>Id</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
@@ -50,7 +50,7 @@ export function makeColumnsForMembers({
           <div className="flex space-x-2">
             <p>Name</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
@@ -88,7 +88,7 @@ export function makeColumnsForMembers({
           <div className="flex space-x-2">
             <p>Role</p>
             <IconButton
-              variant="ghost"
+              variant="outline"
               icon={ArrowsUpDownIcon}
               onClick={() =>
                 column.toggleSorting(column.getIsSorted() === "asc")
@@ -134,7 +134,7 @@ export function makeColumnsForMembers({
           <IconButton
             icon={TrashIcon}
             size="xs"
-            variant="ghost"
+            variant="outline"
             onClick={async () => {
               await onRevokeMember(member);
             }}