visor redesign

dcSpark · Nov 23, 2023 · bbb1e63 · bbb1e63
1 parent 42a7a73
commit bbb1e63
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/apps/shinkai-visor/public/welcome.jpg b/apps/shinkai-visor/public/welcome.jpg
diff --git a/apps/shinkai-visor/src/components/popup/popup.tsx b/apps/shinkai-visor/src/components/popup/popup.tsx
@@ -55,7 +55,7 @@ export const Popup = () => {
       {popupVisibility && (
         <motion.div
           animate={{ opacity: 1 }}
-          className="h-full w-full flex flex-col p-4 shadow-xl rounded-lg bg-secondary-600 bg-app-gradient"
+          className="flex h-full w-full flex-col rounded-lg bg-gray-500 p-4 shadow-xl"
           exit={{ opacity: 0 }}
           initial={{ opacity: 0 }}
           transition={{ duration: 0.5 }}
@@ -149,12 +149,12 @@ root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <IntlProvider locale={locale} messages={langMessages}>
-        <div className="font-inter w-full h-full">
+        <div className="font-inter h-full w-full">
           <Router>
             <Popup></Popup>
           </Router>
         </div>
       </IntlProvider>
     </QueryClientProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/apps/shinkai-visor/src/components/welcome/welcome.tsx b/apps/shinkai-visor/src/components/welcome/welcome.tsx
@@ -1,15 +1,14 @@
+import { Button } from '@shinkai_network/shinkai-ui';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router';
 
-import heroImg from '../../../src/assets/icons/permanent-hero.svg';
 import logo from '../../../src/assets/icons/visor.svg';
 import { srcUrlResolver } from '../../helpers/src-url-resolver';
-import { Button } from '../ui/button';
 
 export default function Welcome() {
   const history = useHistory();
   return (
-    <div className="h-full flex flex-col justify-between">
+    <div className="flex h-full flex-col justify-between">
       <div className="grid place-content-center">
         <img
           alt="shinkai logo"
@@ -18,18 +17,20 @@ export default function Welcome() {
           src={srcUrlResolver(logo)}
         />
       </div>
-      <div className="flex-1 flex justify-center items-end pb-6">
+      <div className="-ml-4 -mr-4 pb-6">
         <img
           alt="shinkai logo"
-          className="animate-spin-slow w-3/4 px-6"
+          className="animate-spin-slow w-full"
           data-cy="shinkai-logo"
-          src={srcUrlResolver(heroImg)}
+          src={'/welcome.jpg'}
         />
       </div>
-      <p className="text-md text-center py-4 pb-7" data-cy="welcome-message">
+      <p className="text-md py-4 pb-7 text-center" data-cy="welcome-message">
         <FormattedMessage id="welcome" />
       </p>
-      <Button onClick={() => history.replace('/nodes/connect/method/quick-start')}>
+      <Button
+        onClick={() => history.replace('/nodes/connect/method/quick-start')}
+      >
         <FormattedMessage id="setup" />
       </Button>
     </div>

diff --git a/libs/shinkai-ui/src/shinkai-preset.js b/libs/shinkai-ui/src/shinkai-preset.js
@@ -37,6 +37,9 @@ module.exports = {
           700: '#FF5E5F',
           800: '#FF3E3F',
         },
+        secondary: {
+          600: '#19242D',
+        },
         foreground: '#FFFFFF',
         'muted-foreground': '#c7c7c7',
         // TODO: remove visor