Skip to content

Commit

Permalink
Introduce basic styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucemans
lucemans committed Mar 17, 2024
1 parent 4154bc7 commit 41fed43
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 6 deletions.
17 changes: 15 additions & 2 deletions web/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,21 @@
export const App = () => {

return (
<div>
Hello App
<div className="w-full h-full min-h-screen bg-light-background-secondary dark:bg-dark-background-secondary">
<div className="mx-auto w-full max-w-2xl space-y-4 py-8">
<div className="card w-full p-4">
<h1 className="text-xl">UltraBulk.eth</h1>
<p>
A lightweight and gas-optimized smart contract focused on ENS <span className="font-bold">.eth</span> registrations and renewals.
With as much flexibility as you might need.
</p>
</div>
<div className="flex gap-4 w-full flex-col md:flex-row">
<div className="card w-full p-4">Commit Fee</div>
<div className="card w-full p-4">Registration Fee</div>
<div className="card w-full p-4">Renewal Fee</div>
</div>
</div>
</div>
);
};
4 changes: 4 additions & 0 deletions web/src/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,7 @@
.link {
@apply font-bold text-blue-500 hover:underline cursor-pointer;
}

.card {
@apply bg-light-background-primary border-light-border dark:bg-dark-background-primary dark:border-dark-border rounded-xl;
}
179 changes: 175 additions & 4 deletions web/tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,186 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./index.html',
],
content: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
theme: {
extend: {
screens: {
xs: '420px',
md: '801px',
},
colors: {
light: {
blue: {
primary: '#3889FF',
active: '#003685',
dim: '#056AFF',
bright: '#569AFF',
light: '#D1E4FF',
surface: '#EEF5FF',
},
indigo: {
primary: '#5854D6',
active: '#19175F',
dim: '#342FC5',
bright: '#7E7BDF',
light: '#C7C5F1',
surface: '#E3E2F8',
},
purple: {
primary: '#A343D3',
active: '#3D1353',
dim: '#8A2BBA',
bright: '#B86EDD',
light: '#E3C6F1',
surface: '#EBD6F5',
},
pink: {
primary: '#D52E7E',
active: '#440E28',
dim: '#AE2366',
bright: '#DE5999',
light: '#F4CDE0',
surface: '#EBD6F5',
},
red: {
primary: '#C6301B',
active: '#280A06',
dim: '#992515',
bright: '#E34631',
light: '#F0C2C2',
surface: '#F9E7E7',
},
orange: {
primary: '#F3930B',
active: '#492C03',
dim: '#C37609',
bright: '#F6A93C',
light: '#FBE1BC',
surface: '#FDF0DD',
},
yellow: {
primary: '#E9B911',
active: '#423505',
dim: '#B9930E',
bright: '#F0C93C',
light: '#FFEFAD',
surface: '#FFF5CD',
},
green: {
primary: '#199C75',
active: '#072C21',
dim: '#158463',
bright: '#1EB789',
light: '#CBE7DC',
surface: '#E7F4EF',
},
grey: {
primary: '#9B9BA7',
active: '#1E2122',
dim: '#595959',
bright: '#B6B6BF',
light: '#E8E8E8',
surface: '#F6F6F6',
},
text: {
primary: '#1E2122',
secondary: '#9B9BA7',
accent: '#FFFFFF',
disabled: '#B6B6BF',
},
background: {
primary: '#FFFFFF',
secondary: '#F6F6F6',
disabled: '#E8E8E8',
},
border: '#E8E8E8',
},
dark: {
blue: {
primary: '#3889FF',
active: '#EEF5FF',
dim: '#D1E4FF',
bright: '#056AFF',
light: '#0C4597',
surface: '#20395F',
},
indigo: {
primary: '#6B67E9',
active: '#E3E2F8',
dim: '#C7C5F1',
bright: '#342FC5',
light: '#221E90',
surface: '#23216D',
},
purple: {
primary: '#A343D3',
active: '#EBD6F5',
dim: '#E3C6F1',
bright: '#8A2BBA',
light: '#5E1683',
surface: '#42145A',
},
pink: {
primary: '#D52E7E',
active: '#FAE8F1',
dim: '#F4CDE0',
bright: '#AE2366',
light: '#761544',
surface: '#5B1135',
},
red: {
primary: '#C6301B',
active: '#F9E7E7',
dim: '#F0C2C2',
bright: '#A72614',
light: '#7F1313',
surface: '#3F2424',
},
orange: {
primary: '#F3930B',
active: '#FDF0DD',
dim: '#FBE1BC',
bright: '#C37609',
light: '#6D4308',
surface: '#583503',
},
yellow: {
primary: '#E9B911',
active: '#FFF5CD',
dim: '#FFEFAD',
bright: '#B9930E',
light: '#5C4B0C',
surface: '#373222',
},
green: {
primary: '#199C75',
active: '#E7F4EF',
dim: '#CBE7DC',
bright: '#158463',
light: '#104A38',
surface: '#153C31',
},
grey: {
primary: '#9B9BA7',
active: '#F6F6F6',
dim: '#E8E8E8',
bright: '#5D5C62',
light: '#424347',
surface: '#141416',
},
text: {
primary: '#FFFFFF',
secondary: '#9B9BA7',
accent: '#FFFFFF',
disabled: '#5D5C62',
},
background: {
primary: '#1E2122',
secondary: '#141416',
disabled: '#424347',
},
border: '#42464E',
},
},
},
},
plugins: [],
Expand Down

0 comments on commit 41fed43

Please sign in to comment.