diff --git a/index.html b/index.html index d7a0f3b..65e4a04 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ - React 18, TypeScript, Jest, Testing Library, TailwindCSS 3, Vite, Eslint and Prettier boilerplate + Rescue Name | ENS Name Renewal Vaults +
diff --git a/postcss.config.mjs b/postcss.config.mjs index 2b75bd8..badd100 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -1,6 +1,6 @@ export default { - plugins: { - tailwindcss: {}, - autoprefixer: {} - } -} + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +}; diff --git a/src/components/App.tsx b/src/components/App.tsx index 292f0fe..fb5f606 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,71 +1,72 @@ -import Avatar from 'components/Avatar' -import logo from 'assets/logo.svg' +import logo from "assets/logo.svg"; +import Avatar from "components/Avatar"; const randoms = [ - [1, 2], - [3, 4, 5], - [6, 7] -] + [1, 2], + [3, 4, 5], + [6, 7] +]; function App() { - return ( -
-
-
-
-
- -
-

- Welcome! -

-

- This is a boilerplate build with Vite, React 18, TypeScript, - Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier. -

-
-
-
- - Start building for free - - -
-
- ) + ); } -export default App +export default App; diff --git a/src/global.css b/src/global.css new file mode 100644 index 0000000..89c32fe --- /dev/null +++ b/src/global.css @@ -0,0 +1,243 @@ +body { + font-family: "Satoshi", sans-serif; + background: var(--thorin-background-primary); + color: var(--thorin-text-primary); +} + +* { + box-sizing: border-box; +} + +p { + margin: 0; +} + +@font-face { + font-family: "Satoshi"; + src: url("https://app.ens.domains/fonts/sans-serif/Satoshi-Bold.otf") + format("opentype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Satoshi"; + src: url("https://app.ens.domains/fonts/sans-serif/Satoshi-Variable.ttf") + format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Satoshi"; + src: url("https://app.ens.domains/fonts/sans-serif/Satoshi-Medium.otf") + format("opentype"); + font-weight: 500; + font-style: normal; +} + +html { + --thorin-blue-primary: #3889FF; + --thorin-blue-active: #003685; + --thorin-blue-dim: #056AFF; + --thorin-blue-bright: #569AFF; + --thorin-blue-light: #D1E4FF; + --thorin-blue-surface: #EEF5FF; + --thorin-indigo-primary: #5854D6; + --thorin-indigo-active: #19175F; + --thorin-indigo-dim: #342FC5; + --thorin-indigo-bright: #7E7BDF; + --thorin-indigo-light: #C7C5F1; + --thorin-indigo-surface: #E3E2F8; + --thorin-purple-primary: #A343D3; + --thorin-purple-active: #3D1353; + --thorin-purple-dim: #8A2BBA; + --thorin-purple-bright: #B86EDD; + --thorin-purple-light: #E3C6F1; + --thorin-purple-surface: #EBD6F5; + --thorin-pink-primary: #D52E7E; + --thorin-pink-active: #440E28; + --thorin-pink-dim: #AE2366; + --thorin-pink-bright: #DE5999; + --thorin-pink-light: #F4CDE0; + --thorin-pink-surface: #EBD6F5; + --thorin-red-primary: #C6301B; + --thorin-red-active: #280A06; + --thorin-red-dim: #992515; + --thorin-red-bright: #E34631; + --thorin-red-light: #F0C2C2; + --thorin-red-surface: #F9E7E7; + --thorin-orange-primary: #F3930B; + --thorin-orange-active: #492C03; + --thorin-orange-dim: #C37609; + --thorin-orange-bright: #F6A93C; + --thorin-orange-light: #FBE1BC; + --thorin-orange-surface: #FDF0DD; + --thorin-yellow-primary: #E9B911; + --thorin-yellow-active: #423505; + --thorin-yellow-dim: #B9930E; + --thorin-yellow-bright: #F0C93C; + --thorin-yellow-light: #FFEFAD; + --thorin-yellow-surface: #FFF5CD; + --thorin-green-primary: #199C75; + --thorin-green-active: #072C21; + --thorin-green-dim: #158463; + --thorin-green-bright: #1EB789; + --thorin-green-light: #CBE7DC; + --thorin-green-surface: #E7F4EF; + --thorin-grey-primary: #9B9BA7; + --thorin-grey-active: #1E2122; + --thorin-grey-dim: #595959; + --thorin-grey-bright: #B6B6BF; + --thorin-grey-light: #E8E8E8; + --thorin-grey-surface: #F6F6F6; + --thorin-text-primary: #1E2122; + --thorin-text-secondary: #9B9BA7; + --thorin-text-accent: #FFFFFF; + --thorin-text-disabled: #B6B6BF; + --thorin-background-primary: #FFFFFF; + --thorin-background-secondary: #F6F6F6; + --thorin-background-disabled: #E8E8E8; + --thorin-border: #E8E8E8; + + --thorin-spacing-1: 4px; + --thorin-spacing-2: 8px; + --thorin-spacing-4: 16px; + + --thorin-radius-button: 8px; + --thorin-radius-card: 16px; + --thorin-radius-tag: 14px; + --thorin-radius-label: 4px; +} + +@media (prefers-color-scheme: dark) { + html:not(.no-system) { + --thorin-blue-primary: #3889FF; + --thorin-blue-active: #EEF5FF; + --thorin-blue-dim: #D1E4FF; + --thorin-blue-bright: #056AFF; + --thorin-blue-light: #0C4597; + --thorin-blue-surface: #20395F; + --thorin-indigo-primary: #6B67E9; + --thorin-indigo-active: #E3E2F8; + --thorin-indigo-dim: #C7C5F1; + --thorin-indigo-bright: #342FC5; + --thorin-indigo-light: #221E90; + --thorin-indigo-surface: #23216D; + --thorin-purple-primary: #A343D3; + --thorin-purple-active: #EBD6F5; + --thorin-purple-dim: #E3C6F1; + --thorin-purple-bright: #8A2BBA; + --thorin-purple-light: #5E1683; + --thorin-purple-surface: #42145A; + --thorin-pink-primary: #D52E7E; + --thorin-pink-active: #FAE8F1; + --thorin-pink-dim: #F4CDE0; + --thorin-pink-bright: #AE2366; + --thorin-pink-light: #761544; + --thorin-pink-surface: #5B1135; + --thorin-red-primary: #C6301B; + --thorin-red-active: #F9E7E7; + --thorin-red-dim: #F0C2C2; + --thorin-red-bright: #A72614; + --thorin-red-light: #7F1313; + --thorin-red-surface: #3F2424; + --thorin-orange-primary: #F3930B; + --thorin-orange-active: #FDF0DD; + --thorin-orange-dim: #FBE1BC; + --thorin-orange-bright: #C37609; + --thorin-orange-light: #6D4308; + --thorin-orange-surface: #583503; + --thorin-yellow-primary: #E9B911; + --thorin-yellow-active: #FFF5CD; + --thorin-yellow-dim: #FFEFAD; + --thorin-yellow-bright: #B9930E; + --thorin-yellow-light: #5C4B0C; + --thorin-yellow-surface: #373222; + --thorin-green-primary: #199C75; + --thorin-green-active: #E7F4EF; + --thorin-green-dim: #CBE7DC; + --thorin-green-bright: #158463; + --thorin-green-light: #104A38; + --thorin-green-surface: #153C31; + --thorin-grey-primary: #9B9BA7; + --thorin-grey-active: #F6F6F6; + --thorin-grey-dim: #E8E8E8; + --thorin-grey-bright: #5D5C62; + --thorin-grey-light: #424347; + --thorin-grey-surface: #141416; + --thorin-text-primary: #FFFFFF; + --thorin-text-secondary: #9B9BA7; + --thorin-text-accent: #FFFFFF; + --thorin-text-disabled: #5D5C62; + --thorin-background-primary: #1E2122; + --thorin-background-secondary: #141416; + --thorin-background-disabled: #424347; + --thorin-border: #42464E; + } +} + +html.dark { + --thorin-blue-primary: #3889FF; + --thorin-blue-active: #EEF5FF; + --thorin-blue-dim: #D1E4FF; + --thorin-blue-bright: #056AFF; + --thorin-blue-light: #0C4597; + --thorin-blue-surface: #20395F; + --thorin-indigo-primary: #6B67E9; + --thorin-indigo-active: #E3E2F8; + --thorin-indigo-dim: #C7C5F1; + --thorin-indigo-bright: #342FC5; + --thorin-indigo-light: #221E90; + --thorin-indigo-surface: #23216D; + --thorin-purple-primary: #A343D3; + --thorin-purple-active: #EBD6F5; + --thorin-purple-dim: #E3C6F1; + --thorin-purple-bright: #8A2BBA; + --thorin-purple-light: #5E1683; + --thorin-purple-surface: #42145A; + --thorin-pink-primary: #D52E7E; + --thorin-pink-active: #FAE8F1; + --thorin-pink-dim: #F4CDE0; + --thorin-pink-bright: #AE2366; + --thorin-pink-light: #761544; + --thorin-pink-surface: #5B1135; + --thorin-red-primary: #C6301B; + --thorin-red-active: #F9E7E7; + --thorin-red-dim: #F0C2C2; + --thorin-red-bright: #A72614; + --thorin-red-light: #7F1313; + --thorin-red-surface: #3F2424; + --thorin-orange-primary: #F3930B; + --thorin-orange-active: #FDF0DD; + --thorin-orange-dim: #FBE1BC; + --thorin-orange-bright: #C37609; + --thorin-orange-light: #6D4308; + --thorin-orange-surface: #583503; + --thorin-yellow-primary: #E9B911; + --thorin-yellow-active: #FFF5CD; + --thorin-yellow-dim: #FFEFAD; + --thorin-yellow-bright: #B9930E; + --thorin-yellow-light: #5C4B0C; + --thorin-yellow-surface: #373222; + --thorin-green-primary: #199C75; + --thorin-green-active: #E7F4EF; + --thorin-green-dim: #CBE7DC; + --thorin-green-bright: #158463; + --thorin-green-light: #104A38; + --thorin-green-surface: #153C31; + --thorin-grey-primary: #9B9BA7; + --thorin-grey-active: #F6F6F6; + --thorin-grey-dim: #E8E8E8; + --thorin-grey-bright: #5D5C62; + --thorin-grey-light: #424347; + --thorin-grey-surface: #141416; + --thorin-text-primary: #FFFFFF; + --thorin-text-secondary: #9B9BA7; + --thorin-text-accent: #FFFFFF; + --thorin-text-disabled: #5D5C62; + --thorin-background-primary: #1E2122; + --thorin-background-secondary: #141416; + --thorin-background-disabled: #424347; + --thorin-border: #42464E; +} diff --git a/tailwind.config.mjs b/tailwind.config.mjs index e59b9be..1e80d61 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,9 +1,9 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{mjs,js,ts,jsx,tsx}'], - theme: { - extend: {} - }, - plugins: [] + content: ["./src/**/*.{mjs,js,ts,jsx,tsx}"], + theme: { + extend: {} + }, + plugins: [] }; diff --git a/vite.config.ts b/vite.config.ts index 38502f8..436af03 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,15 +1,15 @@ /// -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' -import tsconfigPaths from 'vite-tsconfig-paths' +import react from "@vitejs/plugin-react-swc"; +import { defineConfig } from "vite"; +import tsconfigPaths from "vite-tsconfig-paths"; // https://vitejs.dev/config https://vitest.dev/config export default defineConfig({ - plugins: [react(), tsconfigPaths()], - test: { - globals: true, - environment: 'happy-dom', - setupFiles: '.vitest/setup', - include: ['**/test.{ts,tsx}'] - } -}) + plugins: [react(), tsconfigPaths()], + test: { + globals: true, + environment: "happy-dom", + setupFiles: ".vitest/setup", + include: ["**/test.{ts,tsx}"] + } +});