Revert "Rebranding" (#28)

airtai · Nov 14, 2023 · 3cf0fa9 · 3cf0fa9
1 parent e70fd62
commit 3cf0fa9
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 41 deletions.
diff --git a/.github/workflows/docker_cleanup.yml b/.github/workflows/docker_cleanup.yml
@@ -16,7 +16,7 @@ jobs:
         with:
           # NOTE: at now only orgs is supported
           owner: airtai
-          name: rba-wasp
+          name: test-chat-app
 
           token: ${{ secrets.GITHUB_TOKEN }}
           # Keep latest N untagged images

diff --git a/main.wasp b/main.wasp
@@ -2,16 +2,16 @@ app chatApp {
   wasp: {
     version: "^0.11.7"
   },
-  title: "RBA Demo",
+  title: "Capt'n.ai",
   head: [
         "<meta property='og:type' content='website' />",
         "<meta property='og:url' content='' />",
-        "<meta property='og:description' content='RBA Demo' />",
-        "<meta property='og:image' content='src/client/static/rba-logo-large.png' />",
+        "<meta property='og:description' content='Captn AI product page' />",
+        "<meta property='og:image' content='src/client/static/captn-logo-large.png' />",
         "<script type='text/javascript'> (function(l) { if (l.search[1] === '/' ) { var decoded = l.search.slice(1).split('&').map(function(s) { return s.replace(/~and~/g, '&') }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash ); } }(window.location)) </script>",
+        "<script async src='https://www.googletagmanager.com/gtag/js?id=G-NQN20RRZVD'></script>",
+        "<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-NQN20RRZVD');</script>",
         // you can put your google analytics script here, too!
-        // "<script async src='https://www.googletagmanager.com/gtag/js?id=G-NQN20RRZVD'></script>",
-        // "<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-NQN20RRZVD');</script>",
   ],
   // 🔐 Auth out of the box! https://wasp-lang.dev/docs/auth/overview
   auth: {

diff --git a/src/client/AccountPage.tsx b/src/client/AccountPage.tsx
@@ -59,7 +59,7 @@ export default function Example({ user }: { user: User }) {
       <div className='inline-flex w-full justify-end'>
         <button
           onClick={logout}
-          className='inline-flex justify-center mx-8 py-2 px-4 border border-transparent shadow-md text-sm font-medium rounded-md text-black bg-rba-yellow hover:brightness-90'
+          className='inline-flex justify-center mx-8 py-2 px-4 border border-transparent shadow-md text-sm font-medium rounded-md text-white bg-captn-cta-red hover:bg-captn-cta-red-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
         >
           logout
         </button>

diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -9,7 +9,7 @@ export default function App({ children }: { children: ReactNode }) {
    * in this case the NavBar will always be rendered
    */
   return (
-    <div className="relative flex-col z-0 flex h-screen w-full overflow-hidden bg-rba-light-gray">
+    <div className="relative flex-col z-0 flex h-screen w-full overflow-hidden">
       <NavBar />
       <div className='max-w-full px-0'>{children}</div>
     </div>

diff --git a/src/client/ChatPage.jsx b/src/client/ChatPage.jsx
@@ -8,7 +8,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Link } from '@wasp/router'
 import Markdown from 'react-markdown'
 
-import logo from './static/rba-logo.png'
+import logo from './static/captn-logo.png'
 import createChat from '@wasp/actions/createChat'
 import updateConversation from '@wasp/actions/updateConversation'
 import getAgentResponse from '@wasp/actions/getAgentResponse'
@@ -24,7 +24,7 @@ const ChatsList = ({ chats }) => {
             to="/chat/:id?"
             params={{ id: chat.id }}>
                 <li key={idx}>
-                    <div className="flex items-center p-2 text-white hover:bg-rba-light-gray hover:text-rba-dark-gray group rounded-lg ">
+                    <div className="flex items-center p-2 text-white hover:bg-captn-light-blue hover:text-captn-dark-blue group rounded-lg ">
                     <svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="icon-sm" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                     <span className="ml-3">
                         {chat.id}
@@ -40,7 +40,7 @@ const ChatsList = ({ chats }) => {
 const Loader = () => {
     return (
         <div className="absolute top-[38%] left-[45%] -translate-y-2/4 -translate-x-2/4">
-            <div className="w-12 h-12 border-4 border-white rounded-full animate-spin border-t-rba-yellow border-t-4"></div>
+            <div className="w-12 h-12 border-4 border-white rounded-full animate-spin border-t-captn-light-blue border-t-4"></div>
         </div>
     )
 }
@@ -51,8 +51,8 @@ const ConversationsList = ({ conversations }) => {
     return (
         <div className="w-full">
           {conversations.map((conversation, idx) => {
-            const conversationBgColor = conversation.role === "user" ? "rba-dark-gray" : "rba-light-gray";
-            const conversationTextColor = conversation.role === "user" ? "white" : "black";
+            const conversationBgColor = conversation.role === "user" ? "captn-light-blue" : "captn-dark-blue";
+            const conversationTextColor = conversation.role === "user" ? "captn-dark-blue" : "captn-light-cream";
             const conversationLogo = conversation.role === "user" ? <div style={{"alignItems": "center","background": "#fff","borderRadius": "50%","color": "#444654","display": "flex","flexBasis": "40px","flexGrow": "0","flexShrink": "0","fontSize": "14px","height": "40px","justifyContent": "center","padding": "5px","position": "relative","width": "40px"}} className="flex"><div>You</div></div>: <img alt="captn logo" src={logo} className="w-full h-full" style={{"borderRadius": "50%"}} />
             return (
             <div key={idx}>
@@ -154,12 +154,12 @@ export default function ChatPage(props) {
 
     return (
         <div className='relative z-0 flex h-full w-full overflow-hidden h-screen'>
-            <div id="default-sidebar" className="md:w-[260px] flex-shrink-0 overflow-x-hidden dark bg-rba-dark-gray gizmo:bg-black" aria-label="Sidebar">
-            <div style={{"borderRight": "1px solid #eae4d9"}} className="border-x-rba-dark-gray h-full px-3 py-4 overflow-y-auto bg-rba-dark-gray">
+            <div id="default-sidebar" className="md:w-[260px] flex-shrink-0 overflow-x-hidden dark bg-captn-dark-blue gizmo:bg-black" aria-label="Sidebar">
+            <div style={{"borderRight": "1px solid #eae4d9"}} className="border-x-captn-light-cream h-full px-3 py-4 overflow-y-auto bg-captn-dark-blue dark:bg-captn-dark-blue">
                 <div className='mb-1 flex flex-row gap-2'>
                 <button
                 onClick={handleClick}
-                className='flex px-3 min-h-[44px] py-1 items-center gap-3 transition-colors duration-200 cursor-pointer text-sm rounded-md rounded-md text-black bg-rba-yellow hover:bg-rba-yellow-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 flex-grow overflow-hidden hover:brightness-90'
+                className='flex px-3 min-h-[44px] py-1 items-center gap-3 transition-colors duration-200 dark:text-white cursor-pointer text-sm rounded-md rounded-md text-white bg-captn-cta-green hover:bg-captn-cta-green-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 flex-grow overflow-hidden'
                 >
                 <svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round" className="icon-sm shrink-0" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                 <span className="m-0 p-0 md:hidden">New</span>
@@ -174,7 +174,7 @@ export default function ChatPage(props) {
                 </div>
             </div>
             </div>
-            <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden bg-rba-light-gray">
+            <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden bg-captn-light-blue">
                 <div className="relative h-full w-full flex-1 overflow-auto transition-width">
                     <div className="flex h-full flex-col">
                         <div className="flex-1 overflow-hidden">
@@ -191,11 +191,11 @@ export default function ChatPage(props) {
                                             <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                                         </svg> */}
                                     </div>
-                                    <input type="search" id="userQuery" name="search" className="block w-full p-4 pl-5 text-sm text-rba-light-gray border border-rba-dark-gray rounded-lg bg-rba-dark-gray focus:ring-blue-500 focus:border-blue-500" placeholder="Send a message" required />
-                                    <button type="submit" className="text-black absolute right-2.5 bottom-2.5 bg-rba-yellow hover:bg-rba-yellow focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2">Send</button>
+                                    <input type="search" id="userQuery" name="search" className="block w-full p-4 pl-5 text-sm text-captn-light-cream border border-gray-300 rounded-lg bg-captn-dark-blue focus:ring-blue-500 focus:border-blue-500 dark:bg-captn-dark-blue dark:border-gray-600 dark:placeholder-gray-400 dark:text-captn-light-cream dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Send a message" required />
+                                    <button type="submit" className="text-white absolute right-2.5 bottom-2.5 bg-captn-cta-green hover:bg-captn-cta-green-hover focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-captn-cta-green dark:hover:bg-captn-cta-green-hover dark:focus:ring-blue-800">Send</button>
                                 </div>
                             </form>
-                        </div>) : <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xl md:text-6xl text-rba-dark-gray opacity-70" style={{"lineHeight": "normal"}}>Please initiate a new chat or select existing chats to resume your conversation.</p>}
+                        </div>) : <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xl md:text-6xl text-captn-light-cream opacity-70" style={{"lineHeight": "normal"}}>Please initiate a new chat or select existing chats to resume your conversation.</p>}
                         </div>
                     </div>
                 </div>

diff --git a/src/client/MainPage.tsx b/src/client/MainPage.tsx
@@ -1,13 +1,13 @@
-import imgUrl from './static/rba-logo-large.png'
+import imgUrl from './static/captn-logo-large.png'
 
 export default function MainPage() {
   return (
-    <div >
+    <div>
       <div className='mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:py-32 lg:px-8'>
         <div className='px-6 lg:px-0 lg:pt-4'>
           <div className='mx-auto max-w-2xl'>
             <div className='max-w-lg'>
-              <h1 className=' text-4xl font-bold tracking-tight text-black sm:text-6xl'>RBA Demo</h1>
+              <h1 className=' text-4xl font-bold tracking-tight text-captn-dark-blue sm:text-6xl'>Capt'n AI</h1>
 
               {/* <h2 className='ml-4 max-w-2xl text-2xl f tracking-tight text-gray-800 slg:col-span-2 xl:col-auto'>
                 Product home page
@@ -16,8 +16,8 @@ export default function MainPage() {
                 Postgres/Prisma, Express, React, Node
               </h2> */}
 
-              <p className='mt-4 text-lg leading-8 text-black'>
-              Hi there! 🧙‍♂️ Tell us your needs, and we'll create an exclusive, tailor-made loan offer just for you!
+              <p className='mt-4 text-lg leading-8 text-captn-dark-blue'>
+              Hey 🧙‍♂️! This is a sneak peek at my product's evolving homepage. Get ready for an amazing launch soon!
               </p>
               {/* <ul className='list-disc ml-8 my-2 leading-8 text-gray-600'>
                 <li>Stripe integration</li>
@@ -51,9 +51,15 @@ export default function MainPage() {
         </div>
         <div className='mt-20 sm:mt-24 lg:mx-0 md:mx-auto md:max-w-2xl lg:w-screen lg:mt-0 '>
           <div className='shadow-lg md:rounded-3xl relative isolate overflow-hidden'>
-          <div className='relative'>
-              <img className='w-full' src={imgUrl} />
-          </div>
+            <div className='bg-captn-light-blue [clip-path:inset(0)] md:[clip-path:inset(0_round_theme(borderRadius.3xl))]'>
+              <div
+                className='absolute -inset-y-px -z-10 ml-40 w-[200%] bg-captn-light-cream ring-1 ring-inset ring-white '
+                aria-hidden='true'
+              />
+              <div className='relative px-6 pt-8 sm:pt-16 md:pl-16 md:pr-0'>
+                <img src={imgUrl} />
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/client/NavBar.tsx b/src/client/NavBar.tsx
@@ -1,18 +1,18 @@
 
-import logo from './static/rba-logo.png'
+import logo from './static/captn-logo.png'
 import { Disclosure } from '@headlessui/react';
 import { AiOutlineBars, AiOutlineClose, AiOutlineUser } from 'react-icons/ai';
 import useAuth from '@wasp/auth/useAuth';
 
-const active = 'inline-flex items-center border-b-8 mt-1 border-rba-yellow px-1 pt-1 text-sm text-black font-black hover:text-black hover:font-black';
-const inactive = 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-black font-thin hover:border-rba-yellow hover:text-black hover:font-black'
+const active = 'inline-flex items-center border-b-2 border-indigo-300 px-1 pt-1 text-sm font-medium text-gray-900';
+const inactive = 'inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700'
 const current = window.location.pathname;
 
 export default function NavBar() {
   const { data: user } = useAuth();
 
   return (
-    <Disclosure as='nav' className='bg-white shadow sticky top-0 z-50 '>
+    <Disclosure as='nav' className='bg-captn-light-cream shadow sticky top-0 z-50 '>
       {({ open }) => (
         <>
           <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-16'>
@@ -63,21 +63,21 @@ export default function NavBar() {
               <Disclosure.Button
                 as='a'
                 href='/'
-                className={`${current === '/' ? "bg-rba-yellow" : ""} block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-captn-dark-blue hover:border-gray-300 hover:bg-gray-50 hover:text-captn-dark-blue`}
+                className={`${current === '/' ? "bg-captn-light-blue" : ""} block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-captn-dark-blue hover:border-gray-300 hover:bg-gray-50 hover:text-captn-dark-blue`}
               >
                 Home
               </Disclosure.Button>
               <Disclosure.Button
                 as='a'
                 href='/chat'
-                className={`${current.includes('chat') ? "bg-rba-yellow" : ""} block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-captn-dark-blue hover:border-gray-300 hover:bg-gray-50 hover:text-captn-dark-blue`}
+                className={`${current.includes('chat') ? "bg-captn-light-blue" : ""} block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-captn-dark-blue hover:border-gray-300 hover:bg-gray-50 hover:text-captn-dark-blue`}
               >
                 Chat
               </Disclosure.Button>
               <Disclosure.Button
                 as='a'
                 href='/account'
-                className={`${current.includes('account') ? "bg-rba-yellow" : ""} block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-captn-dark-blue hover:border-gray-300 hover:bg-gray-50 hover:text-captn-dark-blue`}
+                className={`${current.includes('account') ? "bg-captn-light-blue" : ""} block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-captn-dark-blue hover:border-gray-300 hover:bg-gray-50 hover:text-captn-dark-blue`}
               >
                 Account
               </Disclosure.Button>

diff --git a/src/client/appearance.ts b/src/client/appearance.ts
@@ -2,8 +2,8 @@ import type { CustomizationOptions } from '@wasp/auth/forms/types'
 
 export const appearance: CustomizationOptions['appearance'] = {
   colors: {
-    brand: '#f7ff00', 
-    brandAccent: '#f7ff00',
-    submitButtonText: 'black',
+    brand: '#0da37f', 
+    brandAccent: '#066d55',
+    submitButtonText: 'white',
   },
 }
diff --git a/src/client/public/favicon.ico b/src/client/public/favicon.ico
diff --git a/src/client/static/rba-logo-large.png b/src/client/static/rba-logo-large.png
diff --git a/src/client/static/rba-logo.png b/src/client/static/rba-logo.png
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -5,10 +5,9 @@ module.exports = {
   theme: {
     extend: {},
     colors: {
-      'rba-yellow': '#f7ff00',
+      'captn-light-blue': '#6faabc',
       'captn-dark-blue': '#003851',
-      'rba-dark-gray': '#34393c',
-      'rba-light-gray':'#f7f7f7',
+      'captn-light-cream': '#eae4d9',
       'captn-cta-green': '#0da37f',
       'captn-cta-red': '#e57373',
       'captn-cta-green-hover': '#066d55',