From e85bf4f6e4445905c4ce64814ede995f1c81ac51 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 30 Mar 2024 22:10:36 +0000 Subject: [PATCH] styling tweaks --- app/globals.css | 25 +++++++++++-------- app/page.module.css | 7 +++++- app/page.tsx | 2 +- .../CalculationBase.module.css | 5 ++-- .../CalculationBase.tsx | 10 ++++---- .../index.tsx | 0 components/Content/Content.module.css | 17 +++++++++---- .../FormAmount/Inputs/InputAmount.module.css | 9 +++---- components/Strategies/styles.module.css | 1 + content.md | 10 +++++--- 10 files changed, 54 insertions(+), 32 deletions(-) rename components/{CalculationBase => CalculationBaseOutput}/CalculationBase.module.css (88%) rename components/{CalculationBase => CalculationBaseOutput}/CalculationBase.tsx (100%) rename components/{CalculationBase => CalculationBaseOutput}/index.tsx (100%) diff --git a/app/globals.css b/app/globals.css index 176b632..76ffffc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,16 +4,26 @@ --foreground-rgb: 20, 20, 20; --foreground-rgb-highlight: 0, 0, 0; - --background-start-rgb: 225, 230, 230; - --background-end-rgb: 255, 255, 255; + --background-rgb: 255, 255, 255; + --background-gradient: radial-gradient( + circle at 30% 0%, + rgb(216, 225, 242) 0%, + rgb(176, 187, 240) 30%, + rgb(255, 255, 255) 100% + ); } @media (prefers-color-scheme: dark) { :root { --foreground-rgb: 220, 220, 220; --foreground-rgb-highlight: 255, 255, 255; - --background-start-rgb: 25, 25, 25; - --background-end-rgb: 0, 0, 0; + --background-rgb: 0, 0, 0; + --background-gradient: radial-gradient( + circle at 30% 0%, + rgb(27, 40, 62) 0%, + rgb(15, 18, 33) 30%, + rgb(0, 0, 0) 100% + ); } } @@ -33,12 +43,7 @@ body { body { color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + background: var(--background-gradient) rgb(var(--background-rgb)); line-height: 1.5; min-height: 100vh; height: 100%; diff --git a/app/page.module.css b/app/page.module.css index a8e32ce..1e781db 100644 --- a/app/page.module.css +++ b/app/page.module.css @@ -21,7 +21,12 @@ .grid { display: grid; gap: 1.5rem; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); +} + +@media screen and (min-width: 400px) { + .grid { + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + } } .breakout { diff --git a/app/page.tsx b/app/page.tsx index a353088..0f9ace6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,7 +2,7 @@ import styles from './page.module.css' import { metadata } from './layout' import { Swap, Buy } from '@/components/Strategies' import { Content } from '@/components/Content' -import { CalculationBase } from '@/components/CalculationBase' +import { CalculationBase } from '@/components/CalculationBaseOutput' export default function Home() { return ( diff --git a/components/CalculationBase/CalculationBase.module.css b/components/CalculationBaseOutput/CalculationBase.module.css similarity index 88% rename from components/CalculationBase/CalculationBase.module.css rename to components/CalculationBaseOutput/CalculationBase.module.css index a58bd5f..54b004d 100644 --- a/components/CalculationBase/CalculationBase.module.css +++ b/components/CalculationBaseOutput/CalculationBase.module.css @@ -1,9 +1,10 @@ .calculationBase { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + justify-content: center; border-top: 1px solid rgba(var(--foreground-rgb), 0.2); border-left: 1px solid rgba(var(--foreground-rgb), 0.2); border-bottom: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-radius: var(--border-radius); margin-top: 1.5rem; } diff --git a/components/CalculationBase/CalculationBase.tsx b/components/CalculationBaseOutput/CalculationBase.tsx similarity index 100% rename from components/CalculationBase/CalculationBase.tsx rename to components/CalculationBaseOutput/CalculationBase.tsx index 7780a59..0e84a47 100644 --- a/components/CalculationBase/CalculationBase.tsx +++ b/components/CalculationBaseOutput/CalculationBase.tsx @@ -13,6 +13,11 @@ export function CalculationBase() { 1 ASI
= ${prices.asi} +
  • + 1 Fet = {ratioFetToAsi} ASI + fixed +
    = ${prices.fet} +
  • 1 OCEAN = {ratioOceanToAsi} ASI fixed @@ -23,11 +28,6 @@ export function CalculationBase() { fixed
    = ${prices.agix}
    • -
  • - 1 Fet = {ratioFetToAsi} ASI - fixed -
    = ${prices.fet} -
    • ) } diff --git a/components/CalculationBase/index.tsx b/components/CalculationBaseOutput/index.tsx similarity index 100% rename from components/CalculationBase/index.tsx rename to components/CalculationBaseOutput/index.tsx diff --git a/components/Content/Content.module.css b/components/Content/Content.module.css index 4eff79f..e72a24a 100644 --- a/components/Content/Content.module.css +++ b/components/Content/Content.module.css @@ -3,8 +3,14 @@ margin: auto; } -.content p { - margin-bottom: 1rem; +.content p, +.content ul, +.content ol, +.content h2, +.content h3, +.content h4, +.content h5 { + margin-bottom: 1.5rem; } .content a { @@ -12,15 +18,16 @@ } .content ul { - list-style-type: disc; - margin-left: 4rem; + list-style-type: square; + margin-left: 1rem; } .content ol { list-style-type: decimal; - margin-left: 4rem; + margin-left: 1rem; } .content li { margin-bottom: 0.5rem; + padding-left: 0.25rem; } diff --git a/components/FormAmount/Inputs/InputAmount.module.css b/components/FormAmount/Inputs/InputAmount.module.css index cc6a231..b8147d7 100644 --- a/components/FormAmount/Inputs/InputAmount.module.css +++ b/components/FormAmount/Inputs/InputAmount.module.css @@ -1,19 +1,18 @@ .input { all: unset; width: 70px; - padding-left: 0.2rem; - padding-right: 0.2rem; + padding: 0 0.2rem; text-align: center; - background-color: rgba(var(--background-end-rgb), 0.4); + background-color: rgba(var(--background-rgb), 0.4); } .input:hover { - background-color: rgba(var(--background-end-rgb), 0.5); + background-color: rgba(var(--background-rgb), 0.5); } .input:focus-within { outline: none; - background-color: rgba(var(--background-end-rgb), 0.9); + background-color: rgba(var(--background-rgb), 0.9); color: rgb(var(--foreground-rgb-highlight)); } diff --git a/components/Strategies/styles.module.css b/components/Strategies/styles.module.css index e393def..9fec285 100644 --- a/components/Strategies/styles.module.css +++ b/components/Strategies/styles.module.css @@ -8,4 +8,5 @@ margin-bottom: 1.5rem; font-size: 1.1rem; min-height: 52px; + line-height: 1.75; } diff --git a/content.md b/content.md index 51d0472..0194d99 100644 --- a/content.md +++ b/content.md @@ -1,11 +1,15 @@ +The **→ lines** show what you would get with the displayed token amount at the moment of the ASI swap, along with the converted value based on the current market price of FET. + The fiat values are fetched from [Coingecko](https://coingecko.com), and the token swap estimations directly from [Uniswap](https://uniswap.org) v3 swap routes. -All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions. - -There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk. +### All About Token Merge Find everything about the token merger in every team's announcement posts: - [Ocean Protocol: Ocean Protocol is joining the Superintelligence Alliance](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24) - [Fetch.ai: Superintelligence Alliance Token Merge $ASI](https://fetch.ai/blog/superintelligence-alliance-token-merge-asi) - [SingularityNET: Introducing the Artificial Superintelligence Alliance](https://blog.singularitynet.io/introducing-the-artificial-superintelligence-alliance-40a4dea01e62) + +### Disclaimer + +All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions. There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk.