Skip to content

Commit

Permalink
Add terms and privacy and cleaning up tw theme (#96)
Browse files Browse the repository at this point in the history
* fix: textfield when there's default value

* clean up theme

* add privacy and terms

* fix: checkbox for terms
  • Loading branch information
paulclindo authored Nov 28, 2023
1 parent 94e5cd9 commit a72c74b
Show file tree
Hide file tree
Showing 9 changed files with 73 additions and 121 deletions.
37 changes: 20 additions & 17 deletions apps/shinkai-visor/src/components/create-job/create-job.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,18 @@ export const CreateJob = () => {
</FormItem>
)}
/>
{query.has('context') && (
<div className="my-4">
<blockquote className="border-l-4 border-gray-200 bg-gray-300 py-2.5 pl-3 pr-3">
<span className="text-gray-80 font-medium">
Your selected text
</span>
<p className="line-clamp-2 h-full text-white">
{query.get('context')}
</p>
</blockquote>
</div>
)}

<FormField
control={form.control}
Expand All @@ -216,23 +228,14 @@ export const CreateJob = () => {
<FormattedMessage id="message.one" />
</FormLabel>
<FormControl>
<div className="flex flex-col space-y-1">
{query.has('context') && (
<blockquote className="bg-secondary-600 mb-5 max-h-28 overflow-hidden border-l-4 border-gray-300 p-4 dark:border-gray-500 dark:bg-gray-800">
<p className="h-full truncate italic dark:text-white">
{query.get('context')}
</p>
</blockquote>
)}
<Textarea
autoFocus
className="resize-none"
placeholder={intl.formatMessage({
id: 'tmwtd',
})}
{...field}
/>
</div>
<Textarea
autoFocus
className="resize-none"
placeholder={intl.formatMessage({
id: 'tmwtd',
})}
{...field}
/>
</FormControl>

<FormMessage />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const EditInboxNameDialog = ({
/>
</div>
<DialogFooter>
<div className="flex flex-col gap-2 pt-4">
<div className="flex gap-2 pt-4">
<Button
className="flex-1"
onClick={cancel}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const root = createRoot(container);
root.render(
<React.StrictMode>
<IntlProvider locale={locale} messages={langMessages}>
<div className="font-inter bg-secondary-600 bg-app-gradient h-full w-full overflow-hidden p-3 shadow-xl">
<div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
<InstalledPopup />
</div>
</IntlProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const root = createRoot(container);
root.render(
<React.StrictMode>
<IntlProvider locale={locale} messages={langMessages}>
<div className="font-inter bg-secondary-600 bg-app-gradient h-full w-full overflow-hidden p-3 shadow-xl">
<div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
<InstalledPopup />
</div>
</IntlProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const root = createRoot(container);
root.render(
<React.StrictMode>
<IntlProvider locale={locale} messages={langMessages}>
<div className="font-inter bg-secondary-600 bg-app-gradient h-full w-full overflow-hidden p-3 shadow-xl">
<div className="font-inter h-full w-full overflow-hidden bg-gray-500 p-3 shadow-xl">
<InstalledPopup />
</div>
</IntlProvider>
Expand Down
44 changes: 41 additions & 3 deletions apps/shinkai-visor/src/components/welcome/welcome.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Button } from '@shinkai_network/shinkai-ui';
import { Button, Checkbox } from '@shinkai_network/shinkai-ui';
import { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useHistory } from 'react-router';

Expand All @@ -7,8 +8,11 @@ import { srcUrlResolver } from '../../helpers/src-url-resolver';

export default function Welcome() {
const history = useHistory();
const [acceptedTermsAndContidions, setAcceptedTermsAndContidions] = useState<
boolean | 'indeterminate'
>(false);
return (
<div className="flex h-full flex-col justify-between">
<div className="flex h-full flex-col justify-between gap-3">
<div>
<div className="grid place-content-center ">
<img
Expand All @@ -18,7 +22,7 @@ export default function Welcome() {
src={srcUrlResolver(logo)}
/>
</div>
<div className="-ml-6 -mr-6 pb-6 pt-3">
<div className="-ml-6 -mr-6 pt-1">
<img
alt="shinkai logo"
className="animate-spin-slow w-full"
Expand All @@ -30,7 +34,41 @@ export default function Welcome() {
<FormattedMessage id="welcome" />
</p>
</div>
<div className="flex items-start space-x-2">
<Checkbox
checked={acceptedTermsAndContidions}
id="terms"
onCheckedChange={setAcceptedTermsAndContidions}
/>
<label
className="inline-block cursor-pointer text-xs leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
htmlFor="terms"
>
<span className={'leading-4 tracking-wide'}>
By continuing, you agree to our{' '}
<a
className={'text-blue-400 underline'}
href={'https://www.shinkai.com/terms-of-service'}
rel="noreferrer"
target={'_blank'}
>
Terms of Service{' '}
</a>
and{' '}
<a
className={'block text-blue-400 underline'}
href={'https://www.shinkai.com/privacy-policy'}
rel="noreferrer"
target={'_blank'}
>
Privacy Policy
</a>
</span>
</label>
</div>

<Button
disabled={!acceptedTermsAndContidions}
onClick={() => history.replace('/nodes/connect/method/quick-start')}
>
<FormattedMessage id="setup" />
Expand Down
70 changes: 5 additions & 65 deletions apps/shinkai-visor/src/theme/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,66 +14,8 @@
U+2215, U+FEFF, U+FFFD;
}

:host,body {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;

--radius: 0.5rem;

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
:host,
body {
.wmde-markdown-var[data-color-mode*='dark'] {
--color-canvas-default: var(--background);
--color-fg-default: theme('colors.white');
Expand All @@ -82,10 +24,8 @@
}
}
@layer base {
* {
@apply border-border;
}
:host, body {
@apply bg-background text-foreground;
:host,
body {
@apply bg-gray-500 text-white;
}
}
2 changes: 1 addition & 1 deletion libs/shinkai-ui/src/components/input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
'h-input peer w-full rounded-lg border border-gray-200 bg-gray-400 px-4 py-3 pt-8 text-sm font-medium text-white placeholder-transparent outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-gray-200 focus:border focus:border-gray-100 focus:outline-0 disabled:border-0 disabled:bg-gray-300 disabled:text-gray-100',
className,
)}
placeholder=""
placeholder=" "
ref={ref}
type={type}
{...props}
Expand Down
33 changes: 2 additions & 31 deletions libs/shinkai-ui/src/shinkai-preset.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,12 @@ const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [],
darkMode: ['class'],

theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
},
screens: { '2xl': '1400px' },
},

extend: {
height: {
input: '59px',
Expand All @@ -35,7 +31,7 @@ module.exports = {
red: {
DEFAULT: 'hsla(0, 63%, 51%, 1)',
},
// TODO: remove
// TODO: remove tray
primary: {
600: '#FF7E7F',
700: '#FF5E5F',
Expand All @@ -46,31 +42,6 @@ module.exports = {
},
foreground: '#FFFFFF',
'muted-foreground': '#c7c7c7',
// TODO: remove visor
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
},
border: {
input: 'hsl(var(--input))',
Expand Down

0 comments on commit a72c74b

Please sign in to comment.