From d0613f481782f72c6e618e17f697279f4663d9a3 Mon Sep 17 00:00:00 2001
From: Marco Lipparini <developer@liarco.net>
Date: Wed, 13 Apr 2022 00:42:30 +0200
Subject: [PATCH 1/2] Rebuilding the color scheme
---
minting-dapp/postcss.config.js | 8 +-
.../src/styles/components/general.scss | 48 +++++-----
.../src/styles/components/minting-dapp.scss | 55 ++++++-----
minting-dapp/tailwind.config.js | 91 +++++++++++++++----
4 files changed, 126 insertions(+), 76 deletions(-)
diff --git a/minting-dapp/postcss.config.js b/minting-dapp/postcss.config.js
index ddc009c78..7fbaf2ac8 100644
--- a/minting-dapp/postcss.config.js
+++ b/minting-dapp/postcss.config.js
@@ -1,6 +1,6 @@
module.exports = {
- plugins: {
- tailwindcss: {},
- autoprefixer: {}
- }
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {}
+ }
};
\ No newline at end of file
diff --git a/minting-dapp/src/styles/components/general.scss b/minting-dapp/src/styles/components/general.scss
index 20edc72f8..4202d2f6a 100644
--- a/minting-dapp/src/styles/components/general.scss
+++ b/minting-dapp/src/styles/components/general.scss
@@ -3,10 +3,9 @@ body {
@apply min-h-screen;
@apply font-sans;
- @apply text-neutral-800;
// Simple background with color gradient
- @apply bg-gradient-to-b from-neutral-100 via-neutral-100 to-neutral-200;
+ @apply bg-gradient-to-b from-page-from_bg via-page-from_bg to-page-to_bg;
// Fullscreen background image example
//background-image: url('../../images/background.jpg');
@@ -15,10 +14,11 @@ body {
a, a:link, a:visited {
@apply font-semibold;
- @apply text-primary-600;
+ @apply text-links-txt;
&:hover {
@apply underline;
+ @apply text-links-hover_txt;
}
}
@@ -45,11 +45,10 @@ span.emoji {
@apply rounded-lg;
@apply p-3;
- @apply text-sm;
- @apply bg-error-50;
- @apply border border-error-200;
+ @apply text-error-txt text-sm;
+ @apply bg-error-bg;
+ @apply border border-error-border;
@apply shadow;
- @apply text-error-500;
&::before {
content: 'Error';
@@ -64,14 +63,12 @@ span.emoji {
@apply px-2 py-1;
@apply rounded-md;
- @apply text-xs;
-
@apply font-semibold;
- @apply text-errortxt;
- @apply bg-error-500;
+ @apply text-btn_error-txt text-xs;
+ @apply bg-btn_error-bg;
&:hover {
- @apply bg-error-400;
+ @apply bg-btn_error-hover_bg;
}
}
}
@@ -82,21 +79,22 @@ button {
@apply rounded-full;
@apply font-semibold;
- @apply bg-popupsbg;
- @apply border border-neutral-200;
+ @apply text-btn-txt;
+ @apply bg-btn-bg;
+ @apply border border-btn-border;
@apply shadow-sm;
&:hover {
- @apply bg-neutral-100;
+ @apply bg-btn-hover_bg;
}
&.primary {
- @apply text-primarytxt;
- @apply bg-primary-500;
- @apply border;
+ @apply text-btn_primary-txt;
+ @apply bg-btn_primary-bg;
+ @apply border-none;
&:hover {
- @apply bg-primary-600;
+ @apply bg-btn_primary-hover_bg;
}
&:disabled {
@@ -115,15 +113,15 @@ input[type=text] {
@apply rounded-full;
@apply font-mono font-semibold;
- @apply text-primary-600;
- @apply bg-popupsbg;
- @apply border border-neutral-200;
+ @apply text-txt_input-txt;
+ @apply bg-txt_input-bg;
+ @apply border border-txt_input-border;
@apply shadow-sm;
@apply outline-none;
&:focus {
- @apply bg-neutral-50;
- @apply border-primary-300;
+ @apply bg-txt_input-focus_bg;
+ @apply border-txt_input-focus_border;
}
&:disabled {
@@ -139,5 +137,5 @@ label {
@apply mt-4 mb-1 ml-1;
@apply font-semibold;
- @apply text-sm text-primary-600;
+ @apply text-label text-sm;
}
diff --git a/minting-dapp/src/styles/components/minting-dapp.scss b/minting-dapp/src/styles/components/minting-dapp.scss
index babf3cd9b..790a3d45b 100644
--- a/minting-dapp/src/styles/components/minting-dapp.scss
+++ b/minting-dapp/src/styles/components/minting-dapp.scss
@@ -9,8 +9,8 @@
@apply px-4 py-6;
@apply rounded-lg;
- @apply bg-popupsbg;
- @apply border border-neutral-50;
+ @apply text-popups-txt;
+ @apply bg-popups-bg;
@apply shadow;
.use-block-explorer {
@@ -25,7 +25,7 @@
@apply mx-auto my-3;
@apply w-12;
- @apply border-t border-neutral-300;
+ @apply border-t-2 border-popups-internal_border;
}
}
@@ -35,7 +35,7 @@
h2 {
@apply font-semibold;
- @apply text-primary-600 text-xl text-center;
+ @apply text-titles text-xl text-center;
}
p {
@@ -47,8 +47,8 @@
@apply mt-4;
@apply p-3;
- @apply text-sm;
- @apply bg-primary-100;
+ @apply text-wl_message-txt text-sm;
+ @apply bg-wl_message-bg;
}
input {
@@ -59,22 +59,23 @@
button {
@apply rounded-b-lg;
@apply rounded-t-none;
+ @apply border-t-0;
}
}
}
.collection-not-ready {
+ @apply flex items-center justify-center;
@apply px-6 py-4;
@apply rounded-lg;
- @apply text-sm;
- @apply bg-popupsbg;
- @apply border border-neutral-50;
+ @apply text-popups-txt text-sm;
+ @apply bg-popups-bg;
@apply shadow;
.spinner {
@apply inline;
- @apply -ml-1 mr-3 h-8 w-8 text-primary-500;
+ @apply -ml-1 mr-3 h-8 w-8 text-loading_spinner;
@apply animate-spin;
}
}
@@ -84,9 +85,8 @@
@apply rounded-lg;
@apply font-mono;
- @apply text-sm;
- @apply bg-popupsbg;
- @apply border border-neutral-50;
+ @apply text-popups-txt text-sm;
+ @apply bg-popups-bg;
@apply shadow;
& > * {
@@ -94,7 +94,7 @@
@apply px-6 py-4;
.label {
- @apply text-xs text-primary-600;
+ @apply text-xs text-label;
}
}
@@ -102,7 +102,7 @@
@apply sm:col-span-2;
@apply overflow-hidden;
- @apply border-b border-neutral-200;
+ @apply border-b border-popups-internal_border;
.address {
@apply w-full;
@@ -121,7 +121,7 @@
}
&.supply {
- @apply border-b sm:border-b-0 sm:border-r border-neutral-200;
+ @apply border-b sm:border-b-0 sm:border-r border-popups-internal_border;
}
}
}
@@ -130,9 +130,8 @@
@apply rounded-lg;
@apply px-6 py-4;
- @apply text-center;
- @apply bg-popupsbg;
- @apply border border-neutral-50;
+ @apply text-popups-txt text-center;
+ @apply bg-popups-bg;
@apply shadow;
&.cannot-mint .emoji {
@@ -142,10 +141,10 @@
}
&.not-mainnet {
- @apply bg-warning-400;
- @apply border-warning-500;
+ @apply text-warning-txt;
+ @apply bg-warning-bg;
+ @apply border border-warning-border;
- @apply text-warningtxt;
.small {
@apply block;
@@ -168,14 +167,14 @@
@apply rounded-lg;
@apply overflow-hidden;
- @apply text-center;
- @apply bg-popupsbg;
+ @apply text-popups-txt text-center;
+ @apply bg-popups-bg;
@apply shadow;
.preview {
@apply p-8;
- @apply bg-primary-200;
+ @apply bg-token_preview;
img {
@apply m-auto;
@@ -193,7 +192,7 @@
@apply w-full;
&:not(:last-child) {
- @apply border-b border-neutral-200;
+ @apply border-b border-popups-internal_border;
}
}
@@ -206,7 +205,7 @@
}
.decrease, .mint-amount {
- @apply border-r border-neutral-200;
+ @apply border-r border-popups-internal_border;
}
.mint-amount {
@@ -214,7 +213,7 @@
@apply w-full;
@apply font-semibold;
- @apply text-primary-600;
+ @apply text-label text-lg;
}
.primary {
diff --git a/minting-dapp/tailwind.config.js b/minting-dapp/tailwind.config.js
index 661099a97..9e7768230 100644
--- a/minting-dapp/tailwind.config.js
+++ b/minting-dapp/tailwind.config.js
@@ -1,25 +1,78 @@
const colors = require('tailwindcss/colors');
module.exports = {
- mode: 'jit',
- content: [
- './src/**/*.tsx',
- './public/index.html',
- ],
- theme: {
- extend: {
- colors: {
- popupsbg: colors.white,
- neutral: colors.slate,
- primary: colors.indigo,
- primarytxt: colors.white,
- warning: colors.yellow,
- warningtxt: colors.black,
- error: colors.red,
- errortxt: colors.white,
- },
+ mode: 'jit',
+ content: [
+ './src/**/*.tsx',
+ './public/index.html',
+ ],
+ theme: {
+ extend: {
+ colors: {
+ // General
+ page: {
+ from_bg: colors.slate[100],
+ to_bg: colors.slate[200],
},
+ titles: colors.indigo[600],
+ links: {
+ txt: colors.indigo[600],
+ hover_txt: colors.indigo[700],
+ },
+ loading_spinner: colors.indigo[500],
+ popups: {
+ bg: colors.white,
+ txt: colors.slate[800],
+ internal_border: colors.slate[200],
+ },
+ warning: {
+ txt: colors.slate[800],
+ bg: colors.yellow[400],
+ border: colors.yellow[500],
+ },
+ error: {
+ txt: colors.red[500],
+ bg: colors.red[50],
+ border: colors.red[200],
+ },
+
+ // Inputs
+ btn: {
+ txt: colors.slate[800],
+ bg: colors.white,
+ hover_bg: colors.slate[100],
+ border: colors.slate[200],
+ },
+ btn_primary: {
+ txt: colors.white,
+ bg: colors.indigo[500],
+ hover_bg: colors.indigo[600],
+ },
+ btn_error: {
+ txt: colors.white,
+ bg: colors.red[500],
+ hover_bg: colors.red[600],
+ },
+ label: colors.indigo[600],
+ txt_input: {
+ bg: colors.white,
+ txt: colors.indigo[600],
+ focus_bg: colors.slate[50],
+ focus_border: colors.indigo[300],
+ border: colors.slate[200],
+ },
+
+ // Whitelist proof widget
+ wl_message: {
+ txt: colors.slate[800],
+ bg: colors.indigo[100],
+ },
+
+ // Mint widget
+ token_preview: colors.indigo[200],
+ },
},
- variants: {},
- plugins: [],
+ },
+ variants: {},
+ plugins: [],
};
From 5788e37037d723ac3943eb999d2cf4c08b628b5f Mon Sep 17 00:00:00 2001
From: Marco Lipparini <developer@liarco.net>
Date: Wed, 13 Apr 2022 00:59:51 +0200
Subject: [PATCH 2/2] Adding hover variants for all colors
---
minting-dapp/src/styles/components/general.scss | 10 +++++++++-
minting-dapp/tailwind.config.js | 15 ++++++++++++---
2 files changed, 21 insertions(+), 4 deletions(-)
diff --git a/minting-dapp/src/styles/components/general.scss b/minting-dapp/src/styles/components/general.scss
index 4202d2f6a..288e7eb87 100644
--- a/minting-dapp/src/styles/components/general.scss
+++ b/minting-dapp/src/styles/components/general.scss
@@ -66,9 +66,12 @@ span.emoji {
@apply font-semibold;
@apply text-btn_error-txt text-xs;
@apply bg-btn_error-bg;
+ @apply border-btn_error-border;
&:hover {
+ @apply text-btn_error-hover_txt;
@apply bg-btn_error-hover_bg;
+ @apply border-btn_error-hover_border;
}
}
}
@@ -85,16 +88,20 @@ button {
@apply shadow-sm;
&:hover {
+ @apply text-btn-hover_txt;
@apply bg-btn-hover_bg;
+ @apply border-btn-hover_border;
}
&.primary {
@apply text-btn_primary-txt;
@apply bg-btn_primary-bg;
- @apply border-none;
+ @apply border-btn_primary-border;
&:hover {
+ @apply text-btn_primary-hover_txt;
@apply bg-btn_primary-hover_bg;
+ @apply border-btn_primary-hover_border;
}
&:disabled {
@@ -120,6 +127,7 @@ input[type=text] {
@apply outline-none;
&:focus {
+ @apply text-txt_input-focus_txt;
@apply bg-txt_input-focus_bg;
@apply border-txt_input-focus_border;
}
diff --git a/minting-dapp/tailwind.config.js b/minting-dapp/tailwind.config.js
index 9e7768230..703ab1d87 100644
--- a/minting-dapp/tailwind.config.js
+++ b/minting-dapp/tailwind.config.js
@@ -40,26 +40,35 @@ module.exports = {
btn: {
txt: colors.slate[800],
bg: colors.white,
- hover_bg: colors.slate[100],
border: colors.slate[200],
+ hover_txt: colors.slate[800],
+ hover_bg: colors.slate[100],
+ hover_border: colors.slate[200],
},
btn_primary: {
txt: colors.white,
bg: colors.indigo[500],
+ border: colors.indigo[500],
+ hover_txt: colors.white,
hover_bg: colors.indigo[600],
+ hover_border: colors.indigo[600],
},
btn_error: {
txt: colors.white,
bg: colors.red[500],
+ border: colors.red[500],
+ hover_txt: colors.white,
hover_bg: colors.red[600],
+ hover_border: colors.red[600],
},
label: colors.indigo[600],
txt_input: {
- bg: colors.white,
txt: colors.indigo[600],
+ bg: colors.white,
+ border: colors.slate[200],
+ focus_txt: colors.indigo[600],
focus_bg: colors.slate[50],
focus_border: colors.indigo[300],
- border: colors.slate[200],
},
// Whitelist proof widget