Insomnia logo tailwind (#7073)

packages/insomnia/src/ui/components/insomnia-icon.tsx

@@ -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>
-  );
-};

packages/insomnia/src/ui/routes/organization.tsx

@@ -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">
+              <div className="flex shrink-0 w-[50px] justify-center py-2">
-                <InsomniaAILogo />
+                <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"