converted action buttons to sticky footer action buttons (#11293)

This commit is contained in:
tanjiro
2025-06-02 07:50:12 -07:00
committed by GitHub
parent 9630386f2b
commit 7155e157da
4 changed files with 34 additions and 29 deletions
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { Form, Input, Select } from "antd";
import { Button, TextInput } from "@tremor/react";
import { Form, Input, Select, Button as AntdButton } from "antd";
import { Button as TremorButton, TextInput } from "@tremor/react";
import { KeyResponse } from "./key_team_helpers/key_list";
import { fetchTeamModels } from "../components/create_key_button";
import { modelAvailableCall } from "./networking";
@@ -203,13 +203,15 @@ export function KeyEditView({
<Input />
</Form.Item>
<div className="flex justify-end gap-2 mt-6">
<Button variant="light" onClick={onCancel}>
Cancel
</Button>
<Button>
Save Changes
</Button>
<div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
<div className="flex justify-end items-center gap-2">
<AntdButton onClick={onCancel}>
Cancel
</AntdButton>
<TremorButton type="submit">
Save Changes
</TremorButton>
</div>
</div>
</Form>
);
@@ -134,7 +134,7 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
};
return (
<div className="p-4">
<div className="w-full h-screen p-4">
<div className="flex justify-between items-center mb-6">
<div>
<Button
@@ -273,7 +273,7 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
{/* Settings Panel */}
<TabPanel>
<Card>
<Card className="overflow-y-auto max-h-[65vh]">
<div className="flex justify-between items-center mb-4">
<Title>Key Settings</Title>
{!isEditing && userRole && rolesWithWriteAccess.includes(userRole) && (
@@ -338,7 +338,7 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
{/* Settings Panel */}
<TabPanel>
<Card>
<Card className="overflow-y-auto max-h-[65vh]">
<div className="flex justify-between items-center mb-4">
<Title>Organization Settings</Title>
{(canEditOrg && !isEditing) && (
@@ -423,13 +423,15 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
<Input.TextArea rows={4} />
</Form.Item>
<div className="flex justify-end gap-2 mt-6">
<Button onClick={() => setIsEditing(false)}>
Cancel
</Button>
<TremorButton type="submit">
Save Changes
</TremorButton>
<div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
<div className="flex justify-end items-center gap-2">
<Button onClick={() => setIsEditing(false)}>
Cancel
</Button>
<TremorButton type="submit">
Save Changes
</TremorButton>
</div>
</div>
</Form>
) : (
@@ -358,7 +358,7 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
{/* Settings Panel */}
<TabPanel>
<Card>
<Card className="overflow-y-auto max-h-[65vh]">
<div className="flex justify-between items-center mb-4">
<Title>Team Settings</Title>
{(canEditTeam && !isEditing) && (
@@ -474,15 +474,16 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
<Form.Item label="Metadata" name="metadata">
<Input.TextArea rows={10} />
</Form.Item>
<div className="flex justify-end gap-2 mt-6">
<Button onClick={() => setIsEditing(false)}>
Cancel
</Button>
<TremorButton>
Save Changes
</TremorButton>
<div className="sticky z-10 bg-white p-4 border-t border-gray-200 bottom-[-1.5rem] inset-x-[-1.5rem]">
<div className="flex justify-end items-center gap-2">
<Button htmlType="button" onClick={() => setIsEditing(false)}>
Cancel
</Button>
<TremorButton type="submit">
Save Changes
</TremorButton>
</div>
</div>
</Form>
) : (