mirror of
https://github.com/Kong/insomnia
synced 2024-11-08 14:49:53 +00:00
Insomnia logo tailwind (#7073)
This commit is contained in:
James Gatz
GitHub
parent
4010dd5358
commit
4383d0b38c
@ -1,89 +1,4 @@
|
||||
import React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
||||
import { useAIContext } from '../context/app/ai-context';
|
||||
|
||||
const SlideInLeftKeyframes = keyframes`
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
`;
|
||||
|
||||
const FadeInKeyframes = keyframes`
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const Layout = styled.div({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--padding-xs)',
|
||||
paddingLeft: '11px',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
const RelativeFrame = styled.div({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--padding-xs)',
|
||||
});
|
||||
|
||||
const AILoadingText = styled.div`
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-font);
|
||||
padding-right: var(--padding-sm);
|
||||
opacity: 0;
|
||||
animation: ${FadeInKeyframes} 0.1s 0.3s ease-out forwards;
|
||||
`;
|
||||
|
||||
const LoadingBoundary = styled.div({
|
||||
display: 'flex',
|
||||
width: 'calc(100% + 4px)',
|
||||
height: 'calc(100% + 2px)',
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '60px',
|
||||
});
|
||||
|
||||
const LoadingBar = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 60px;
|
||||
opacity: 0;
|
||||
animation: ${SlideInLeftKeyframes} 0.4s ease-out forwards;
|
||||
`;
|
||||
|
||||
const LoadingBarIndicator = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: #7400e1;
|
||||
border-radius: 60px;
|
||||
opacity: 1;
|
||||
transform: translateX(-100%);
|
||||
`;
|
||||
|
||||
export const InsomniaLogo = ({
|
||||
loading,
|
||||
@ -146,37 +61,3 @@ export const InsomniaLogo = ({
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const InsomniaAILogo = ({
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement>) => {
|
||||
const {
|
||||
generating: loading,
|
||||
progress,
|
||||
} = useAIContext();
|
||||
|
||||
const loadingProgress = 100 - (progress.progress / progress.total) * 100;
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<RelativeFrame>
|
||||
<InsomniaLogo loading={loading} {...props} />
|
||||
{loading && <LoadingBoundary>
|
||||
<LoadingBar />
|
||||
<LoadingBarIndicator
|
||||
style={{
|
||||
opacity: progress.progress === 0 || progress.total === progress.progress ? 0 : 1,
|
||||
transform: `translateX(-${loadingProgress}%)`,
|
||||
}}
|
||||
/>
|
||||
</LoadingBoundary>
|
||||
}
|
||||
{loading && (
|
||||
<AILoadingText>
|
||||
<span className="whitespace-nowrap">{'AI is thinking...'}</span>
|
||||
</AILoadingText>
|
||||
)}
|
||||
</RelativeFrame>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
MenuItem,
|
||||
MenuTrigger,
|
||||
Popover,
|
||||
ProgressBar,
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
} from 'react-aria-components';
|
||||
@ -44,12 +45,14 @@ import { CommandPalette } from '../components/command-palette';
|
||||
import { GitHubStarsButton } from '../components/github-stars-button';
|
||||
import { Hotkey } from '../components/hotkey';
|
||||
import { Icon } from '../components/icon';
|
||||
import { InsomniaAILogo } from '../components/insomnia-icon';
|
||||
import { InsomniaAI } from '../components/insomnia-ai-icon';
|
||||
import { InsomniaLogo } from '../components/insomnia-icon';
|
||||
import { showAlert, showModal } from '../components/modals';
|
||||
import { SettingsModal, showSettingsModal } from '../components/modals/settings-modal';
|
||||
import { OrganizationAvatar } from '../components/organization-avatar';
|
||||
import { PresentUsers } from '../components/present-users';
|
||||
import { Toast } from '../components/toast';
|
||||
import { useAIContext } from '../context/app/ai-context';
|
||||
import { InsomniaEventStreamProvider } from '../context/app/insomnia-event-stream-context';
|
||||
import { useRootLoaderData } from './root';
|
||||
import { UntrackedProjectsLoaderData } from './untracked-projects';
|
||||
@ -429,14 +432,19 @@ const OrganizationRoute = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const {
|
||||
generating: loadingAI,
|
||||
progress: loadingAIProgress,
|
||||
} = useAIContext();
|
||||
|
||||
return (
|
||||
<InsomniaEventStreamProvider>
|
||||
<div className="w-full h-full">
|
||||
<div className={`w-full h-full divide-x divide-solid divide-y divide-[--hl-md] ${isScratchPadBannerVisible ? 'grid-template-app-layout-with-banner' : 'grid-template-app-layout'} grid relative bg-[--color-bg]`}>
|
||||
<header className="[grid-area:Header] grid grid-cols-3 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex shrink-0 w-[50px] py-2">
|
||||
<InsomniaAILogo />
|
||||
<div className="flex shrink-0 w-[50px] justify-center py-2">
|
||||
<InsomniaLogo loading={loadingAI} />
|
||||
</div>
|
||||
<CommandPalette />
|
||||
{!user ? <GitHubStarsButton /> : null}
|
||||
@ -721,6 +729,36 @@ const OrganizationRoute = () => {
|
||||
</div> : null}
|
||||
</div>
|
||||
<div className='flex items-center gap-2 divide divide-y-[--hl-sm]'>
|
||||
{loadingAI && (
|
||||
<ProgressBar
|
||||
className="flex items-center gap-2 h-full"
|
||||
value={loadingAIProgress.progress}
|
||||
maxValue={loadingAIProgress.total}
|
||||
minValue={0}
|
||||
aria-label='AI generation'
|
||||
>
|
||||
{({ percentage }) => (
|
||||
<TooltipTrigger>
|
||||
<Button className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all">
|
||||
<InsomniaAI className='w-4 text-[--color-font] animate-pulse' />
|
||||
<div className="h-1 w-32 rounded-full bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-40">
|
||||
<div
|
||||
className="h-1 rounded-full bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100"
|
||||
style={{ width: percentage + '%' }}
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
<Tooltip
|
||||
placement="top"
|
||||
offset={8}
|
||||
className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
|
||||
>
|
||||
Generating tests with Insomnia AI
|
||||
</Tooltip>
|
||||
</TooltipTrigger>
|
||||
)}
|
||||
</ProgressBar>
|
||||
)}
|
||||
<TooltipTrigger>
|
||||
<Button
|
||||
className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user