daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-02 08:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

icons, scaffolding

Browse Source
This commit is contained in:
dev committed 2024-03-20 17:34:55 -04:00
1 parent 04b32b7e77
commit fad8cd4e48
9 files changed
+98 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/Button.tsx
+16 -6
View File
@@ -1,4 +1,5 @@
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
icon?: IconDefinition;
@@ -7,15 +8,24 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
export const Button = ({
icon,
children,
className : propsClassName,
...rest
}:ButtonProps)=>{
const className = `
bg-brand-primary hover:bg-brand-primary-400
text-white text-sm font-semibold
rounded-md px-3.5 py-2.5 shadow-sm
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-600
` + (propsClassName ? ` ${propsClassName}` : null);
return(
<button
className="
bg-indigo-600 hover:bg-indigo-500
text-white text-sm font-semibold
rounded-md px-3.5 py-2.5 shadow-sm
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
className={className}
{...rest}
>
{icon &&
<FontAwesomeIcon className="mr-2" icon={icon}/>
}
{children}
</button>
);
app/pages/PageEnigma/PageEnigma.tsx
+4 -2
View File
@@ -27,8 +27,10 @@ export const PageEnigma = () => {
}, []);
return(
<>
<div>
<canvas ref={canvasRef} id="video-scene" width="1280px" height="720px" />
</>
<div className="absolute top-0 right-0 bg-ui-panel h-screen w-1/5">RIGHT PANEL</div>
<div className="bg-ui-panel w-full h-screen">Timeline Panel</div>
</div>
);
}
app/root.tsx
+3 -3
View File
@@ -7,8 +7,8 @@ import {
ScrollRestoration,
} from "@remix-run/react";
import tailwindCss from "./rootStyles/tailwind.css?url";
import normalizeCss from "./rootStyles/normalize.css?url";
import tailwindCss from "./styles/tailwind.css?url";
import normalizeCss from "./styles/normalize.css?url";
import { TopBar } from "./template/TopBar";
@@ -30,8 +30,8 @@ export default function App() {
<Links />
</head>
<body className="bg-ui-background">
<TopBar />
<Outlet />
<TopBar />
<ScrollRestoration />
<Scripts />
</body>
app/rootStyles/normalize.css → app/styles/normalize.css
Vendored
View File
File renamed without changes.
app/rootStyles/tailwind.css → app/styles/tailwind.css
View File
File renamed without changes.
app/template/TopBar/TopBar.tsx
+3 -10
View File
@@ -1,16 +1,9 @@
import { useState } from 'react'
import { Button } from '~/components/Button'
function classNames({...classes}:Array<string>) {
return classes.filter(Boolean).join(' ')
}
import { faRightToBracket } from '@fortawesome/free-solid-svg-icons'
export const TopBar = () => {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<header className="bg-ui-panel">
<header className="bg-ui-panel fixed top-0 left-0 w-full">
<nav className="mx-auto flex max-w-full items-center justify-between p-4 lg:px-8" aria-label="Global">
<div className="flex lg:flex-1">
<a href="#" className="-m-1.5 p-1.5">
@@ -18,7 +11,7 @@ export const TopBar = () => {
<img className="h-10 w-auto" src="/resources/images/Storyteller-Logo-1.png" alt="Logo FakeYou StoryTeller.ai" />
</a>
</div>
<Button>Login</Button>
<Button icon={faRightToBracket}>Login</Button>
</nav>
</header>
)
package-lock.json
Generated
+13
View File
@@ -7,6 +7,7 @@
"name": "gottagofast_v0.0.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.18",
"@netlify/edge-functions": "^2.3.1",
@@ -1294,6 +1295,18 @@
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
"integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.5.1"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
package.json
+1
View File
@@ -12,6 +12,7 @@
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.18",
"@netlify/edge-functions": "^2.3.1",
tailwind.config.ts
+58 -3
View File
@@ -13,9 +13,64 @@ export default {
transparent: 'transparent',
current: 'currentColor',
'brand-primary': '#e66462',
'brand-secondary': '#39394c',
'brand-primary': { //sunglo
DEFAULT: '#e66462', //=500
'50': '#fdf3f3',
'100': '#fce4e4',
'200': '#facfce',
'300': '#f6acab',
'400': '#ef7c7a',
'500': '#e66462',
'600': '#cf3533',
'700': '#ae2927',
'800': '#902624',
'900': '#782524',
'950': '#410f0e',
},
'brand-secondary': { //gunpowder
DEFAULT: '#39394c', //=950
'50': '#f5f6f9',
'100': '#e8eaf1',
'200': '#d7dbe6',
'300': '#bbc1d5',
'400': '#9aa2c0',
'500': '#8188b0',
'600': '#6f74a1',
'700': '#636492',
'800': '#545579',
'900': '#464762',
'950': '#39394c',
},
danger: { //copper rust
DEFAULT: '#8f4951', //=700
'50': '#fbf5f5',
'100': '#f7ecec',
'200': '#efdcdc',
'300': '#e2c0bf',
'400': '#d19b9c',
'500': '#bd7679',
'600': '#a5595f',
'700': '#8f4951',
'800': '#743d45',
'900': '#64373f',
'950': '#361b1e',
},
success:{ //apple
DEFAULT: '#40ad48', //=500
'50': '#f2fbf2',
'100': '#e2f6e3',
'200': '#c5edc7',
'300': '#98dd9d',
'400': '#64c46b',
'500': '#40ad48',
'600': '#2f8a35',
'700': '#286d2e',
'800': '#245728',
'900': '#1f4823',
'950': '#0c270f',
},
'ui-background': '#1a1a27',
'ui-panel': '#242433',