toolkit(assistants): dark mode buttons (#507)

* working button * Update button * add danger secondary * name Button * Update components * fix IconButton * sidepanel - new button * fix * fix styling * remove buttongroup * fix * revert protected page * pr comments
cohere-ai · Jul 29, 2024 · c49f4e5 · c49f4e5
1 parent 5125c7f
commit c49f4e5
Show file tree

Hide file tree

Showing 37 changed files with 444 additions and 1,038 deletions.
diff --git a/src/interfaces/assistants_web/src/app/(auth)/login/Login.tsx b/src/interfaces/assistants_web/src/app/(auth)/login/Login.tsx
@@ -155,9 +155,10 @@ const Login: React.FC = () => {
             <Button
               disabled={loginStatus === 'pending' || !formState.isValid}
               label={loginStatus === 'pending' ? 'Logging in...' : 'Log in'}
-              type="submit"
+              buttonType="submit"
+              kind="cell"
+              iconPosition="end"
               className="mt-10 w-full self-center md:w-fit"
-              splitIcon="arrow-right"
             />
           </form>
 
@@ -169,7 +170,7 @@ const Login: React.FC = () => {
             <AuthLink
               redirect={redirect !== '/' ? redirect : undefined}
               action="register"
-              className="text-green-700 no-underline"
+              theme="evolved-green"
             />
           </Text>
         </>

diff --git a/src/interfaces/assistants_web/src/app/(auth)/register/Register.tsx b/src/interfaces/assistants_web/src/app/(auth)/register/Register.tsx
@@ -97,9 +97,10 @@ const Register: React.FC = () => {
         <Button
           disabled={registerStatus === 'pending' || !formState.isValid}
           label={registerStatus === 'pending' ? 'Logging in...' : 'Sign up'}
-          type="submit"
+          buttonType="submit"
+          kind="cell"
+          iconPosition="end"
           className="mt-10 w-full self-center md:w-fit"
-          splitIcon="arrow-right"
         />
       </form>
 
@@ -108,7 +109,7 @@ const Register: React.FC = () => {
         <AuthLink
           redirect={redirect !== '/' ? redirect : undefined}
           action="login"
-          className="text-green-250 no-underline"
+          theme="evolved-green"
         />
       </Text>
     </div>

diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentToolFilePicker.tsx b/src/interfaces/assistants_web/src/components/Agents/AgentToolFilePicker.tsx
@@ -29,7 +29,7 @@ export const AgentToolFilePicker: React.FC<Props> = ({
       {!disabled && (
         <Button
           kind="secondary"
-          startIcon={<Icon name="add" kind="outline" className="text-green-250" />}
+          icon="add"
           label="Select files/folders"
           onClick={handleOpenFilePicker}
         />

diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentsSidePanel.tsx b/src/interfaces/assistants_web/src/components/Agents/AgentsSidePanel.tsx
@@ -1,10 +1,9 @@
 'use client';
 
 import { Transition } from '@headlessui/react';
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { IconButton } from '@/components/IconButton';
-import { Button, Icon, Logo, Text } from '@/components/Shared';
+import { Button, Logo, Text, Tooltip } from '@/components/Shared';
 import { Shortcut } from '@/components/Shortcut';
 import { env } from '@/env.mjs';
 import { useIsDesktop } from '@/hooks/breakpoint';
@@ -83,34 +82,27 @@ export const AgentsSidePanel: React.FC<React.PropsWithChildren<{ className?: str
             'items-center': !isAgentsSidePanelOpen,
           })}
         >
-          <SidePanelButton
+          <Button
+            kind="secondary"
             label={
               <div className="group flex items-center justify-between">
                 <Text className="dark:text-evolved-green-700">New chat</Text>
                 <Shortcut sequence={['⌘', '↑', 'N']} className="hidden group-hover:flex" />
               </div>
             }
+            icon="add"
+            theme="evolved-green"
             onClick={() => navigateToNewChat()}
-            tooltip="New chat"
-            icon={<Icon name="add" kind="outline" className="dark:text-evolved-green-700" />}
-          />
-          <SidePanelButton
-            label="See all assistants"
-            tooltip="See all assistants"
-            href="/discover"
-            icon={<Icon name="compass" kind="outline" className="dark:text-mushroom-950" />}
+            stretch
           />
+
+          <Button kind="secondary" label="See all assistants" href="/discover" icon="compass" />
         </div>
 
         <div className={cn('flex-grow overflow-y-auto')}>{children}</div>
 
         <footer className={cn('flex flex-col gap-4', { 'items-center': !isAgentsSidePanelOpen })}>
-          <SidePanelButton
-            label="Settings"
-            tooltip="Settings"
-            href="/settings"
-            icon={<Icon name="settings" kind="outline" className="dark:text-mushroom-950" />}
-          />
+          <Button label="Settings" href="/settings" icon="settings" kind="secondary" />
           <section className="flex items-center justify-between">
             <div
               className={cn('flex items-center gap-2', {
@@ -130,42 +122,6 @@ export const AgentsSidePanel: React.FC<React.PropsWithChildren<{ className?: str
   );
 };
 
-const SidePanelButton: React.FC<{
-  label?: ReactElement | string;
-  tooltip?: string;
-  href?: string;
-  onClick?: VoidFunction;
-  icon: ReactElement;
-  className?: string;
-}> = ({ label, tooltip, href, icon, className, onClick }) => {
-  const {
-    agents: { isAgentsSidePanelOpen },
-  } = useAgentsStore();
-
-  if (isAgentsSidePanelOpen) {
-    return (
-      <Button
-        kind="secondary"
-        className={cn('dark:[&_span]:text-mushroom-950', className)}
-        startIcon={icon}
-        label={label}
-        href={href}
-        onClick={onClick}
-      />
-    );
-  }
-
-  return (
-    <IconButton
-      icon={icon}
-      href={href}
-      onClick={onClick}
-      className={className}
-      tooltip={tooltip ? { label: tooltip } : undefined}
-    />
-  );
-};
-
 const ToggleAgentsSidePanelButton: React.FC<{ className?: string }> = ({ className }) => {
   const {
     agents: { isAgentsSidePanelOpen },
@@ -180,17 +136,19 @@ const ToggleAgentsSidePanelButton: React.FC<{ className?: string }> = ({ classNa
   };
 
   return (
-    <IconButton
-      iconName="close-drawer"
-      onClick={handleToggleAgentsSidePanel}
-      tooltip={{ label: 'Toggle agents side panel' }}
-      className={cn(
-        'transform transition delay-100 duration-200 ease-in-out dark:text-mushroom-950 dark:hover:text-mushroom-950',
-        className,
-        {
-          'rotate-180 ': isAgentsSidePanelOpen,
-        }
-      )}
-    />
+    <Tooltip hover label="Toggle agents side panel">
+      <Button
+        kind="secondary"
+        className="px-2"
+        icon="close-drawer"
+        iconOptions={{
+          className: cn('transform transition delay-100 duration-200 ease-in-out', className, {
+            'rotate-180 ': isAgentsSidePanelOpen,
+          }),
+        }}
+        animate={false}
+        onClick={handleToggleAgentsSidePanel}
+      />
+    </Tooltip>
   );
 };
diff --git a/src/interfaces/assistants_web/src/components/Agents/CreateAgent.tsx b/src/interfaces/assistants_web/src/components/Agents/CreateAgent.tsx
@@ -197,9 +197,14 @@ export const CreateAgent: React.FC = () => {
         </div>
       </div>
       <div className="flex w-full flex-shrink-0 justify-end border-t border-marble-950 bg-white px-4 py-4 md:py-8">
-        <Button kind="green" splitIcon="add" onClick={handleOpenSubmitModal} disabled={!canSubmit}>
-          Create
-        </Button>
+        <Button
+          label="Create"
+          kind="secondary"
+          theme="evolved-green"
+          icon="add"
+          onClick={handleOpenSubmitModal}
+          disabled={!canSubmit}
+        />
       </div>
     </div>
   );
@@ -217,12 +222,14 @@ const SubmitModalContent: React.FC<{
       able to see and use it.
     </Text>
     <div className="flex justify-between">
-      <Button kind="secondary" onClick={onClose}>
-        Cancel
-      </Button>
-      <Button kind="green" onClick={onSubmit} splitIcon="arrow-right" disabled={isSubmitting}>
-        {isSubmitting ? 'Creating assistant' : 'Yes, make it public'}
-      </Button>
+      <Button label="Cancel" kind="secondary" onClick={onClose} />
+      <Button
+        label={isSubmitting ? 'Creating assistant' : 'Yes, make it public'}
+        onClick={onSubmit}
+        icon="arrow-right"
+        iconPosition="end"
+        disabled={isSubmitting}
+      />
     </div>
   </div>
 );
diff --git a/src/interfaces/assistants_web/src/components/Agents/DeleteAgent.tsx b/src/interfaces/assistants_web/src/components/Agents/DeleteAgent.tsx
@@ -34,17 +34,15 @@ export const DeleteAgent: React.FC<Props> = ({ name, agentId, onClose }) => {
         Your assistant <strong>{name}</strong> will be deleted. This action cannot be undone.
       </Text>
       <div className="flex justify-between">
-        <Button kind="secondary" onClick={onClose}>
-          Cancel
-        </Button>
+        <Button label="Cancel" kind="secondary" onClick={onClose} />
         <Button
-          kind="danger"
+          label={isPending ? 'Deleting' : 'Delete'}
           onClick={handleDeleteAgent}
-          splitIcon="arrow-right"
           disabled={isPending}
-        >
-          {isPending ? 'Deleting' : 'Delete'}
-        </Button>
+          icon="arrow-right"
+          theme="danger"
+          iconPosition="end"
+        />
       </div>
     </div>
   );

diff --git a/src/interfaces/assistants_web/src/components/Agents/DiscoverAgentCard.tsx b/src/interfaces/assistants_web/src/components/Agents/DiscoverAgentCard.tsx
@@ -43,18 +43,21 @@ export const DiscoverAgentCard: React.FC<Props> = ({ id, name, description, isBa
         <div className="flex w-full items-center justify-between">
           <Button
             href={isBaseAgent ? '/' : `/a/${id}`}
-            className="dark:[&_span]:text-evolved-green-700"
             label="Try now"
             kind="secondary"
-            endIcon="arrow-up-right"
+            icon="arrow-up-right"
+            iconPosition="end"
+            theme="evolved-green"
           />
           {!isBaseAgent && (
             <Button
               href={`/edit/${id}`}
               className="dark:[&_span]:text-evolved-green-700"
               label="Edit"
               kind="secondary"
-              endIcon="edit"
+              icon="edit"
+              iconPosition="end"
+              theme="evolved-green"
             />
           )}
         </div>

diff --git a/src/interfaces/assistants_web/src/components/Agents/UpdateAgent.tsx b/src/interfaces/assistants_web/src/components/Agents/UpdateAgent.tsx
@@ -237,11 +237,10 @@ export const UpdateAgent: React.FC<Props> = ({ agentId }) => {
         <div className="flex flex-col gap-y-6 px-4 py-4 lg:px-10 lg:pb-8 lg:pt-0">
           <InfoBanner agentName={agent.name} className="hidden md:flex" />
           <Button
-            className="self-end"
-            splitIcon="check-mark"
+            kind="cell"
             label={isSubmitting ? 'Updating' : 'Update'}
-            onClick={handleSubmit}
             disabled={!canSubmit}
+            icon="check-mark"
           />
         </div>
       )}

diff --git a/src/interfaces/assistants_web/src/components/AuthLink.tsx b/src/interfaces/assistants_web/src/components/AuthLink.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { Button, ButtonKind, IconName, InlineLink } from '@/components/Shared';
+import { Button, ButtonTheme, IconName } from '@/components/Shared';
 import { useAuthConfig } from '@/hooks/authConfig';
 
 type Props = {
   action: 'login' | 'register' | 'logout';
-  styleAs?: 'link' | 'button';
-  endIcon?: ReactElement | IconName;
-  splitIcon?: ReactElement | IconName;
-  kind?: ButtonKind;
+  icon?: IconName;
+  iconPosition?: 'start' | 'end';
+  theme?: ButtonTheme;
+  cellButton?: boolean;
   redirect?: string;
   className?: string;
 };
@@ -20,11 +20,11 @@ type Props = {
  * client apps
  */
 export const AuthLink: React.FC<Props> = ({
-  styleAs = 'link',
   action,
-  kind,
-  endIcon,
-  splitIcon,
+  icon,
+  iconPosition = 'end',
+  theme,
+  cellButton = false,
   redirect,
   className = '',
 }) => {
@@ -52,17 +52,16 @@ export const AuthLink: React.FC<Props> = ({
       break;
   }
 
-  return styleAs === 'button' ? (
+  return (
     <Button
       label={label}
       href={href}
-      kind={kind}
-      endIcon={endIcon}
-      splitIcon={splitIcon}
+      kind={cellButton ? 'cell' : 'secondary'}
+      theme={theme}
+      icon={icon}
+      iconPosition={iconPosition}
       className={className}
       id="auth-link"
     />
-  ) : (
-    <InlineLink label={label} href={href} endIcon={endIcon} className={className} />
   );
 };
diff --git a/src/interfaces/assistants_web/src/components/ButtonGroup.tsx b/src/interfaces/assistants_web/src/components/ButtonGroup.tsx