Add branding to all pages

airtai · Sep 2, 2024 · 0b8b78d · 0b8b78d
1 parent a81d16b
commit 0b8b78d
Show file tree

Hide file tree

Showing 26 changed files with 111 additions and 85 deletions.
diff --git a/app/src/client/App.tsx b/app/src/client/App.tsx
@@ -130,7 +130,7 @@ export default function App({ children }: { children: ReactNode }) {
         ) : (
           <div className='relative flex flex-col min-h-screen justify-between'>
             {shouldDisplayAppNavBar && <AppNavBar />}
-            <div className='mx-auto max-w-7xl sm:px-6 lg:px-8 w-full'>
+            <div className='mx-auto max-w-7xl sm:px-6 lg:px-8 w-full z-10'>
               {isError ? (
                 children
               ) : isLoading ? (

diff --git a/app/src/client/Main.css b/app/src/client/Main.css
@@ -97,10 +97,10 @@ code {
 
 /* When the checkbox is checked, add a blue background */
 .toc-marketing-checkbox-wrapper .checkbox-container input:checked ~ .checkmark {
-  background-color: #6faabc;
+  background-color: #0080FF;
 }
 .toc-marketing-checkbox-wrapper.light .checkbox-container input:checked ~ .checkmark {
-  background-color: #fff;
+  background-color: #0080FF;
 }
 
 /* Create the checkmark/indicator (hidden when not checked) */

diff --git a/app/src/client/app/AccountPage.tsx b/app/src/client/app/AccountPage.tsx
@@ -11,46 +11,46 @@ const AccountPage = ({ user }: { user: User }) => {
   return (
     <div className='mt-10 px-6'>
       <div className='overflow-hidden border border-airt-primary shadow-lg sm:rounded-lg lg:m-8 dark:border-gray-100/10'>
-        <div className='px-4 py-5 sm:px-6 lg:px-8'>
-          <h3 className='text-base font-semibold leading-6 text-airt-font-base dark:text-white'>Account Information</h3>
+        <div className='px-4 py-5 sm:px-6 lg:px-8 bg-airt-font-base'>
+          <h3 className='text-base font-semibold leading-6 text-airt-dark-blue dark:text-white'>Account Information</h3>
         </div>
-        <div className='border-t border-airt-primary dark:border-gray-100/10 px-4 py-5 sm:p-0'>
+        <div className='border-t border-airt-primary bg-airt-font-base dark:border-gray-100/10 px-4 py-5 sm:p-0'>
           <dl className=' sm:dark:divide-gray-100/10'>
             {!!user.email && (
               <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-                <dt className='text-sm font-medium text-airt-font-base dark:text-white'>Email address</dt>
-                <dd className='mt-1 text-sm text-airt-font-base dark:text-airt-font-base sm:col-span-2 sm:mt-0'>
+                <dt className='text-sm font-medium text-airt-dark-blue dark:text-white'>Email address</dt>
+                <dd className='mt-1 text-sm text-airt-dark-blue dark:text-airt-dark-blue sm:col-span-2 sm:mt-0'>
                   {user.email}
                 </dd>
               </div>
             )}
             {!!user.username && (
               <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-                <dt className='text-sm font-medium text-airt-font-base dark:text-white'>Username</dt>
-                <dd className='mt-1 text-sm text-airt-font-base dark:text-airt-font-base sm:col-span-2 sm:mt-0'>
+                <dt className='text-sm font-medium text-airt-dark-blue dark:text-white'>Username</dt>
+                <dd className='mt-1 text-sm text-airt-dark-blue dark:text-airt-dark-blue sm:col-span-2 sm:mt-0'>
                   {user.username}
                 </dd>
               </div>
             )}
             {/* <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-              <dt className='text-sm font-medium text-airt-font-base dark:text-white '>Subscription status</dt>
+              <dt className='text-sm font-medium text-airt-dark-blue dark:text-white '>Subscription status</dt>
               {user.hasPaid ? (
                 <>
                   {user.subscriptionStatus !== 'past_due' ? (
-                    <dd className='mt-1 text-sm font-medium text-airt-font-base dark:text-white sm:col-span-1 sm:mt-0'>
+                    <dd className='mt-1 text-sm font-medium text-airt-dark-blue dark:text-white sm:col-span-1 sm:mt-0'>
 
                       Active
                     </dd>
                   ) : (
-                    <dd className='mt-1 text-sm text-airt-font-base dark:text-airt-font-base sm:col-span-1 sm:mt-0'>
+                    <dd className='mt-1 text-sm text-airt-dark-blue dark:text-airt-dark-blue sm:col-span-1 sm:mt-0'>
                       Your Account is Past Due! Please Update your Payment Information
                     </dd>
                   )}
                   <CustomerPortalButton />
                 </>
               ) : (
                 <>
-                  <dd className='mt-1 text-sm font-medium text-airt-font-base dark:text-white sm:col-span-1 sm:mt-0'>
+                  <dd className='mt-1 text-sm font-medium text-airt-dark-blue dark:text-white sm:col-span-1 sm:mt-0'>
                     N/A
                   </dd>
                   <div className='flex items-center justify-left -mt-2'>
@@ -60,7 +60,7 @@ const AccountPage = ({ user }: { user: User }) => {
               )}
             </div> */}
             <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-              <dt className='text-sm font-medium text-airt-font-base'>I agree to receiving marketing emails</dt>
+              <dt className='text-sm font-medium text-airt-dark-blue'>I agree to receiving marketing emails</dt>
               <>
                 <MarketingEmailPreferenceSwitcher
                   hasSubscribedToMarketingEmails={user.hasSubscribedToMarketingEmails}
@@ -70,7 +70,7 @@ const AccountPage = ({ user }: { user: User }) => {
           </dl>
         </div>
       </div>
-      <div className='inline-flex w-full justify-end'>
+      <div className='inline-flex w-full justify-end mb-5 pr-8'>
         <Button onClick={logout} label='logout' />
       </div>
     </div>
@@ -96,7 +96,7 @@ function BuyMoreButton() {
 //     <div className='ml-4 flex-shrink-0 sm:col-span-1 sm:mt-0'>
 //       <button
 //         onClick={handleClick}
-//         className='font-medium text-sm text-airt-font-base dark:text-white hover:underline dark:text-indigo-400 dark:hover:text-indigo-300'
+//         className='font-medium text-sm text-airt-dark-blue dark:text-white hover:underline dark:text-indigo-400 dark:hover:text-indigo-300'
 //       >
 //         Manage Subscription
 //       </button>

diff --git a/app/src/client/app/PlayGroundPage.tsx b/app/src/client/app/PlayGroundPage.tsx
@@ -182,7 +182,7 @@ const PlayGroundPage = ({ user }: { user: User }) => {
           <div className='flex-1 overflow-hidden'>
             {conversations && conversations.length > 0 ? (
               <>
-                <p className='text-center text-lg font-bold bg-airt-primary text-airt-font-base'>
+                <p className='text-center text-lg font-bold bg-airt-dark-blue text-airt-font-base'>
                   Chatting with{' '}
                   <a className='text-airt-secondary hover:underline hover:cursor-pointer' onClick={handleTeamClick}>
                     {currentChatDetails.selectedTeam}

diff --git a/app/src/client/app/PricingPage.tsx b/app/src/client/app/PricingPage.tsx
@@ -62,8 +62,8 @@ const PricingPage = () => {
       <div className='mx-auto max-w-7xl px-6 lg:px-8'>
         <div id='pricing' className='mx-auto max-w-4xl text-center'>
           <h2 className='mt-2 text-4xl font-bold tracking-tight text-airt-font-base sm:text-5xl dark:airt-font-base'>
-            <span className='text-airt-primary'>Coming soon,</span>{' '}
-            <span className='px-2 py-1 bg-airt-primary rounded-md text-airt-font-base'>
+            <span className='text-airt-font-base'>Coming soon,</span>{' '}
+            <span className='px-2 py-1 bg-airt-dark-blue rounded-md text-airt-font-base'>
               everything is free for now!
             </span>
           </h2>

diff --git a/app/src/client/app/PrivacyPage.tsx b/app/src/client/app/PrivacyPage.tsx
@@ -111,7 +111,7 @@ export default function PrivacyPage() {
                 // href="https://myaccount.google.com/permissions‍"
                 href='https://myaccount.google.com/connections'
                 target='_black'
-                className='no-underline hover:underline text-airt-primary'
+                className='no-underline hover:underline text-airt-dark-blue'
               >
                 https://myaccount.google.com/permissions‍
               </a>
@@ -126,7 +126,7 @@ export default function PrivacyPage() {
               <a
                 href='https://developers.google.com/terms/api-services-user-data-policy'
                 target='_blank'
-                className='no-underline hover:underline text-airt-primary'
+                className='no-underline hover:underline text-airt-dark-blue'
               >
                 Google API Services User Data Policy
               </a>
@@ -147,7 +147,7 @@ export default function PrivacyPage() {
                 <a
                   href='https://developers.google.com/analytics/devguides/config/admin/v1'
                   target='_blank'
-                  className='no-underline hover:underline text-airt-primary'
+                  className='no-underline hover:underline text-airt-dark-blue'
                 >
                   https://developers.google.com/analytics/devguides/config/admin/v1
                 </a>{' '}
@@ -159,7 +159,7 @@ export default function PrivacyPage() {
                 <a
                   href='https://developers.google.com/google-ads/api/docs/oauth/internals'
                   target='_blank'
-                  className='no-underline hover:underline text-airt-primary'
+                  className='no-underline hover:underline text-airt-dark-blue'
                 >
                   https://developers.google.com/google-ads/api/docs/oauth/internals
                 </a>{' '}
@@ -170,7 +170,7 @@ export default function PrivacyPage() {
                 <a
                   href='https://developers.google.com/webmaster-tools/v1/sites/get'
                   target='_blank'
-                  className='no-underline hover:underline text-airt-primary'
+                  className='no-underline hover:underline text-airt-dark-blue'
                 >
                   https://developers.google.com/webmaster-tools/v1/sites/get
                 </a>{' '}
@@ -248,7 +248,7 @@ export default function PrivacyPage() {
               <a
                 href='https://learn.microsoft.com/en-us/azure/compliance/'
                 target='_blank'
-                className='no-underline hover:underline text-airt-primary'
+                className='no-underline hover:underline text-airt-dark-blue'
               >
                 https://learn.microsoft.com/en-us/azure/compliance/
               </a>
@@ -367,7 +367,7 @@ export default function PrivacyPage() {
             <h2 className='text-xl font-semibold mb-2'>Contact Us</h2>
             <p className='mb-4'>
               In order to receive further information regarding use of the Site, please contact us at:{' '}
-              <a href='mailto:[email protected]' className='no-underline hover:underline text-airt-primary'>
+              <a href='mailto:[email protected]' className='no-underline hover:underline text-airt-dark-blue'>
                 [email protected]
               </a>
               .

diff --git a/app/src/client/app/TocPage.tsx b/app/src/client/app/TocPage.tsx
@@ -72,7 +72,7 @@ export default function TocPage() {
             <p className='mb-4'>
               If you have any questions about your FastAgency Studio subscription or these terms, please reach out to us
               at{' '}
-              <a href='mailto:[email protected]' className='no-underline hover:underline text-airt-primary'>
+              <a href='mailto:[email protected]' className='no-underline hover:underline text-airt-dark-blue'>
                 [email protected]
               </a>
               .
@@ -185,7 +185,7 @@ export default function TocPage() {
             <h2 className='text-xl font-semibold mb-2'>Contact Us</h2>
             <p className='mb-4'>
               In order to receive further information regarding use of the Site, please contact us at:{' '}
-              <a href='mailto:[email protected]' className='no-underline hover:underline text-airt-primary'>
+              <a href='mailto:[email protected]' className='no-underline hover:underline text-airt-dark-blue'>
                 [email protected]
               </a>
               .

diff --git a/app/src/client/app/TutorialPage.tsx b/app/src/client/app/TutorialPage.tsx
@@ -45,7 +45,7 @@ export default function TutorialPage() {
   return (
     <ChakraProvider>
       <div className='mx-auto max-w-7xl pl-10 pr-10 text-airt-font-base pt-10 pb-24 sm:pb-32 lg:gap-x-8 lg:py-5 lg:px-8'>
-        <h1 className='text-title-md2 font-semibold text-airt-primary dark:text-white my-4'>Tutorials</h1>
+        <h1 className='text-title-md2 font-semibold text-airt-font-base dark:text-white my-4'>Tutorials</h1>
         <div className='rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark min-h-[300px] sm:min-h-[600px]'>
           <div className='p-10'>
             <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>

diff --git a/app/src/client/auth/LoginSignupForm.tsx b/app/src/client/auth/LoginSignupForm.tsx
@@ -170,7 +170,7 @@ export const LoginSignupForm = ({
           {loginFlow === State.Login ? "Don't have an account? " : 'Already have an account? '}
           <Link
             to={loginFlow === State.Login ? '/signup' : '/login'}
-            className='no-underline hover:underline cursor-pointer text-airt-secondary'
+            className='no-underline hover:underline cursor-pointer text-airt-light-red'
           >
             {loginFlow === State.Login ? 'Sign up' : 'Sign in'}
           </Link>

diff --git a/app/src/client/auth/authWrapper.tsx b/app/src/client/auth/authWrapper.tsx
@@ -4,7 +4,7 @@ export function AuthWrapper({ children }: { children: ReactNode }) {
   return (
     <div className='flex min-h-full flex-col justify-center pt-10 sm:px-6 lg:px-8'>
       <div className='sm:mx-auto sm:w-full sm:max-w-md p-4'>
-        <div className='bg-airt-primary p-8 shadow-xl rounded-lg sm:px-7 sm:py-7 dark:bg-white text-airt-font-base'>
+        <div className='bg-airt-font-base p-8 shadow-xl rounded-lg sm:px-7 sm:py-7 dark:bg-white text-airt-dark-blue'>
           <div className='-mt-8'>{children}</div>
         </div>
       </div>

diff --git a/app/src/client/components/ChatForm.tsx b/app/src/client/components/ChatForm.tsx
@@ -88,7 +88,7 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger
             placeholder='Enter your message...'
             minRows={1}
             maxRows={4}
-            className='w-full p-3 text-sm text-white bg-airt-primary rounded-lg focus:outline-none focus:ring-0'
+            className='w-full p-3 text-sm text-airt-dark-blue bg-airt-font-base rounded-lg focus:outline-none focus:ring-0'
             style={{ resize: 'none', lineHeight: '1.5' }}
           />
           <button
@@ -97,12 +97,12 @@ export default function ChatForm({ handleFormSubmit, currentChatDetails, trigger
             className={`absolute right-2 p-1.5 rounded-lg ${
               isInputDisabled() || !message.trim()
                 ? 'bg-gray-300 cursor-not-allowed'
-                : 'bg-secondary hover:opacity-90 cursor-pointer'
+                : 'bg-airt-dark-blue hover:opacity-90 cursor-pointer'
             }`}
             aria-label='Send message'
           >
             <span className=''>
-              <svg width='24' height='24' viewBox='0 0 24 24' fill='none' className='text-airt-primary'>
+              <svg width='24' height='24' viewBox='0 0 24 24' fill='none' className='text-airt-font-base'>
                 <path
                   d='M7 11L12 6L17 11M12 18V7'
                   stroke='currentColor'

diff --git a/app/src/client/components/ChatSidebar.tsx b/app/src/client/components/ChatSidebar.tsx
@@ -99,7 +99,7 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen, refetchAllChatDetails }: Cha
   return (
     <aside
       ref={sidebar}
-      className={` border-airt-font-base border-r absolute left-0 top-0 z-9999 flex h-screen w-75 flex-col overflow-y-hidden bg-airt-primary duration-300 ease-linear dark:bg-airt-primary lg:static lg:translate-x-0 ${
+      className={` border-airt-dark-blue border-r absolute left-0 top-0 z-9999 flex h-screen w-75 flex-col overflow-y-hidden bg-airt-font-base duration-300 ease-linear dark:bg-airt-font-base lg:static lg:translate-x-0 ${
         sidebarOpen ? 'translate-x-0' : '-translate-x-full'
       }`}
     >
@@ -130,7 +130,7 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen, refetchAllChatDetails }: Cha
       <div>
         <Link
           to='#'
-          className='no-underline mt-7 my-1 mx-4 mb-10 flex items-center justify-left gap-2.5 rounded-md bg-airt-secondary py-4 px-4 text-center font-medium text-airt-primary hover:bg-opacity-90'
+          className='no-underline mt-7 my-1 mx-4 mb-10 flex items-center justify-left gap-2.5 rounded-md bg-airt-dark-blue py-4 px-4 text-center font-medium text-airt-font-base hover:bg-opacity-90'
           onClick={handleCreateNewChat}
         >
           <span>
@@ -176,8 +176,8 @@ const ChatSidebar = ({ sidebarOpen, setSidebarOpen, refetchAllChatDetails }: Cha
                         pathname === '/' && 'bg-gray-700 dark:bg-meta-4'
                       } ${
                         chat.uuid === activeChat
-                          ? 'bg-airt-secondary text-airt-primary hover:bg-airt-font-base hover:text-airt-primary'
-                          : 'text-airt-font-base hover:bg-airt-secondary hover:text-airt-primary'
+                          ? 'bg-airt-dark-blue text-airt-font-base hover:bg-airt-font-base hover:text-airt-dark-blue'
+                          : 'text-airt-dark-blue hover:bg-airt-dark-blue hover:text-airt-font-base'
                       }`}
                     >
                       <svg

diff --git a/app/src/client/components/ConversationList.tsx b/app/src/client/components/ConversationList.tsx
@@ -8,7 +8,7 @@ import LetterByLetterDisplay from './LetterByLetterDisplay';
 import RetryConversation from './RetryConversation';
 import AgentConversationHistory from './AgentConversationHistory';
 import AnimatedCharacterLoader from './AnimatedCharacterLoader';
-import logo from '../static/logo.svg';
+import logo from '../static/fa-small-logo.svg';
 
 type ConversationsListProps = {
   conversations: Conversation[];
@@ -35,15 +35,15 @@ export default function ConversationsList({
     <div data-testid='conversations-wrapper' className='w-full'>
       {conversations.map((conversation, idx) => {
         const isUserConversation = conversation.role === 'user';
-        const conversationBgColor = isUserConversation ? 'airt-secondary' : 'airt-primary';
-        const conversationTextColor = isUserConversation ? 'airt-primary' : 'airt-font-base';
+        const conversationBgColor = isUserConversation ? 'airt-font-base' : 'airt-dark-blue';
+        const conversationTextColor = isUserConversation ? 'airt-dark-blue' : 'airt-font-base';
         const conversationLogo = isUserConversation ? (
           <span
             style={{
               alignItems: 'center',
-              background: '#fff',
+              background: '#0080FF',
               borderRadius: '50%',
-              color: '#003257',
+              color: '#FFF',
               display: 'flex',
               flexBasis: '40px',
               flexGrow: '0',
@@ -60,10 +60,7 @@ export default function ConversationsList({
             <span className='inline-block'>You</span>
           </span>
         ) : (
-          <span
-            className='inline-block bg-airt-font-base'
-            style={{ borderRadius: '50%', width: '93%', height: '93%', paddingTop: '3px' }}
-          >
+          <span className='inline-block'>
             <img
               alt='FastAgency Studio logo'
               className='w-full h-full'
@@ -125,13 +122,13 @@ export default function ConversationsList({
                       {!currentChatDetails.isChatTerminated && !currentChatDetails.isExceptionOccured && (
                         <div className='flex'>
                           <button
-                            className='bg-airt-secondary text-airt-primary hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap'
+                            className='bg-airt-font-base text-airt-dark-blue hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap'
                             onClick={() => handleFormSubmit('')}
                           >
                             Auto reply
                           </button>
                           <button
-                            className='bg-airt-secondary text-airt-primary hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap ml-2'
+                            className='bg-airt-font-base text-airt-dark-blue hover:opacity-90 font-medium rounded-lg text-sm px-3 py-2 m-1 inline-block whitespace-nowrap ml-2'
                             onClick={() => handleFormSubmit('exit')}
                           >
                             Exit