feat: add some styling

laina-defi · Aug 19, 2024 · b47ddab · b47ddab
1 parent 64b649f
commit b47ddab
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
     "@astrojs/react": "^3.6.0",
     "@astrojs/tailwind": "^5.1.0",
     "@creit.tech/stellar-wallets-kit": "^0.9.2",
+    "@fontsource/inter": "^5.0.20",
     "@stellar/freighter-api": "^2.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -25,7 +26,7 @@
   "scripts": {
     "astro": "astro",
     "build": "astro check && astro build",
-    "dev": "npm run init && astro dev",
+    "dev": "astro dev",
     "init": "node initialize.js",
     "preview": "astro preview",
     "start": "npm run init && astro dev",

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+
+export const SelectButtonWrapper = ({ children }: PropsWithChildren) => (
+  <div className="flex bg-grey p-1 gap-2 rounded-full">{children}</div>
+)
+
+export interface SelectLinkButtonProps {
+  href: string;
+  selected: boolean;
+}
+
+export const SelectLinkButton = ({ href, selected, children }: PropsWithChildren<SelectLinkButtonProps>) => (
+  <a className={`text-white font-bold px-6 py-1.5 rounded-full ${selected ? 'bg-white text-black' : ''}`} href={href}>{children}</a>
+)
+
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -1,6 +1,11 @@
 import logo from '/public/laina_v3_shrinked.png';
+import { SelectButtonWrapper, SelectLinkButton } from './Button';
 
-export default function Nav() {
+interface NavProps {
+  pathname: 'index' | 'lend' | 'borrow' | 'liquidate';
+}
+
+export default function Nav({ pathname }: NavProps) {
   return (
     <nav className="relative max-w-screen-lg mx-auto mb-12 flex justify-between items-center pt-12 pb-6">
       <div>
@@ -9,11 +14,11 @@ export default function Nav() {
         </a>
       </div>
 
-      <div className="flex gap-12 bg-gray-200 rounded-full px-8 py-2 text-white font-bold">
-        <a href="/lend">Lend</a>
-        <a href="/borrow">Borrow</a>
-        <a href="/liquidate">Liquidate</a>
-      </div>
+      <SelectButtonWrapper>
+        <SelectLinkButton href="/lend" selected={pathname === 'lend'}>Lend</SelectLinkButton>
+        <SelectLinkButton href="/borrow" selected={pathname === 'borrow'}>Borrow</SelectLinkButton>
+        <SelectLinkButton href="/liquidate" selected={pathname === 'liquidate'}>Liquidate</SelectLinkButton>
+      </SelectButtonWrapper>
 
       <div className="bg-black text-white px-8 py-2 rounded-full">
         {/* biome-ignore lint: TODO: connect wallet */}

diff --git a/src/components/lending.astro b/src/components/lending.astro
@@ -1,18 +1,14 @@
-<div class="flex w-[700px] h-[90px] mx-auto">
-  <h1>Lend Assets</h1>
-</div>
-
-<div class="flex shadow-xl bg-white w-[700px] h-[90px] mx-auto my-2 rounded-2xl px-5 py-3 justify-between">
+<div class="flex shadow-xl bg-white w-full my-2 rounded-2xl px-5 py-3 justify-between">
   <div class="flex w-[55px] items-center justify-center">
     <img src="/Stellar_Symbol.png" alt="Stellar lumens logo" width="50" />
   </div>
 
-  <div class="w-[120px]">
+  <div>
     <strong> Stellar Lumens</strong>
     <p>XLM</p>
   </div>
 
-  <div class="w-[110px]">
+  <div>
     <p>Total supplied</p>
     <strong id="current-liquid" aria-live="polite">???</strong>
     <p>$30.82</p>
@@ -27,7 +23,7 @@
   <button xlm-withdraw aria-controls="current">Withdraw</button>
 </div>
 
-<div class="relative flex shadow-xl bg-white w-[700px] h-[90px] mx-auto my-2 rounded-2xl px-5 py-3 justify-between">
+<div class="relative flex shadow-xl bg-white w-full my-2 rounded-2xl px-5 py-3 justify-between">
   <div class="flex w-[55px] items-center justify-center">
     <img src="/usdc.svg" alt="USD Coin logo" />
   </div>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,10 +1,15 @@
 ---
+import '@fontsource/inter';
+import '@fontsource/inter/600.css';
+
+import Nav from '../components/Nav';
+
 interface Props {
   title: string;
+  pathname: 'index' | 'lend' | 'borrow' | 'liquidate';
 }
 
-const { title } = Astro.props;
-import Nav from '../components/Nav';
+const { title, pathname } = Astro.props;
 ---
 
 <!doctype html>
@@ -17,9 +22,11 @@ import Nav from '../components/Nav';
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body>
-    <Nav />
-    <slot />
+  <body class="font-sans bg-grey-light min-h-screen">
+    <Nav pathname={pathname} />
+    <main class="max-w-full w-256">
+      <slot />
+    </main>
   </body>
 </html>
 <style is:global>

diff --git a/src/pages/borrow.astro b/src/pages/borrow.astro
@@ -4,7 +4,7 @@ import Loan_pool from '../components/borrowing.astro';
 import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Laina – Borrowing">
+<Layout title="Laina – Borrowing" pathname="borrow">
   <ConnectFreighter />
   <Loan_pool />
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,7 +2,7 @@
 import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Laina - DeFi made simple.">
+<Layout title="Laina - DeFi made simple." pathname="index">
   <main>
     <div>
       <h1>Landing page</h1>

diff --git a/src/pages/lend.astro b/src/pages/lend.astro
@@ -4,7 +4,9 @@ import Loan_pool from '../components/lending.astro';
 import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Laina – Lending">
+<Layout title="Laina – Lending" pathname="lend">
   <ConnectFreighter />
+  <h1 class="text-5xl font-bold mb-8">Lend Assets</h1>
+
   <Loan_pool />
 </Layout>
diff --git a/src/pages/liquidate.astro b/src/pages/liquidate.astro
@@ -2,7 +2,7 @@
 import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Laina – DeFi made simple">
+<Layout title="Laina – DeFi made simple" pathname="liquidate">
   <main>
     <div>
       <h1>Liquidate page</h1>

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -2,7 +2,23 @@
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    fontFamily: {
+      sans: ['Inter', 'system-ui', 'sans-serif'],
+    },
+    colors: {
+      white: '#fff',
+      grey: {
+        DEFAULT: '#999',
+        light: '#efefef',
+      },
+      black: '#000',
+    },
+    extend: {
+      spacing: {
+        128: '32rem',
+        256: '64rem',
+      },
+    },
   },
   plugins: [],
 };