From fad8cd4e48b2eececd131892fdcc121af76332e6 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 20 Mar 2024 17:34:55 -0400 Subject: [PATCH] icons, scaffolding --- app/components/Button.tsx | 22 ++++++--- app/pages/PageEnigma/PageEnigma.tsx | 6 ++- app/root.tsx | 6 +-- app/{rootStyles => styles}/normalize.css | 0 app/{rootStyles => styles}/tailwind.css | 0 app/template/TopBar/TopBar.tsx | 13 ++--- package-lock.json | 13 +++++ package.json | 1 + tailwind.config.ts | 61 ++++++++++++++++++++++-- 9 files changed, 98 insertions(+), 24 deletions(-) rename app/{rootStyles => styles}/normalize.css (100%) rename app/{rootStyles => styles}/tailwind.css (100%) diff --git a/app/components/Button.tsx b/app/components/Button.tsx index db0867ede7..ce52235d12 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -1,4 +1,5 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface ButtonProps extends React.ButtonHTMLAttributes { icon?: IconDefinition; @@ -7,15 +8,24 @@ interface ButtonProps extends React.ButtonHTMLAttributes { 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( ); diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 8b1f1cc606..93c2b2aa9a 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -27,8 +27,10 @@ export const PageEnigma = () => { }, []); return( - <> +
- +
RIGHT PANEL
+
Timeline Panel
+
); } \ No newline at end of file diff --git a/app/root.tsx b/app/root.tsx index 7a746dd94a..604d939e5f 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -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() { - + diff --git a/app/rootStyles/normalize.css b/app/styles/normalize.css similarity index 100% rename from app/rootStyles/normalize.css rename to app/styles/normalize.css diff --git a/app/rootStyles/tailwind.css b/app/styles/tailwind.css similarity index 100% rename from app/rootStyles/tailwind.css rename to app/styles/tailwind.css diff --git a/app/template/TopBar/TopBar.tsx b/app/template/TopBar/TopBar.tsx index 923a21a38f..b22f60e2e3 100644 --- a/app/template/TopBar/TopBar.tsx +++ b/app/template/TopBar/TopBar.tsx @@ -1,16 +1,9 @@ -import { useState } from 'react' - import { Button } from '~/components/Button' - -function classNames({...classes}:Array) { - return classes.filter(Boolean).join(' ') -} - +import { faRightToBracket } from '@fortawesome/free-solid-svg-icons' export const TopBar = () => { - const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return ( -
+
) diff --git a/package-lock.json b/package-lock.json index 510fcdfd1c..001d257968 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 72b52d8342..88fa55163d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/tailwind.config.ts b/tailwind.config.ts index 3139b8b979..5e1c1fb5e5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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',