Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rebuilding the DAPP color scheme #232

Merged
merged 2 commits into from
Apr 12, 2022
Merged

Rebuilding the DAPP color scheme #232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0613f4
Rebuilding the color scheme
liarco Apr 12, 2022
5788e37
Adding hover variants for all colors
liarco Apr 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions minting-dapp/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
56 changes: 31 additions & 25 deletions minting-dapp/src/styles/components/general.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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;
}
}

Expand All @@ -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';
Expand All @@ -64,14 +63,15 @@ 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;
@apply border-btn_error-border;

&:hover {
@apply bg-error-400;
@apply text-btn_error-hover_txt;
@apply bg-btn_error-hover_bg;
@apply border-btn_error-hover_border;
}
}
}
Expand All @@ -82,21 +82,26 @@ 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 text-btn-hover_txt;
@apply bg-btn-hover_bg;
@apply border-btn-hover_border;
}

&.primary {
@apply text-primarytxt;
@apply bg-primary-500;
@apply border;
@apply text-btn_primary-txt;
@apply bg-btn_primary-bg;
@apply border-btn_primary-border;

&:hover {
@apply bg-primary-600;
@apply text-btn_primary-hover_txt;
@apply bg-btn_primary-hover_bg;
@apply border-btn_primary-hover_border;
}

&:disabled {
Expand All @@ -115,15 +120,16 @@ 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 text-txt_input-focus_txt;
@apply bg-txt_input-focus_bg;
@apply border-txt_input-focus_border;
}

&:disabled {
Expand All @@ -139,5 +145,5 @@ label {
@apply mt-4 mb-1 ml-1;

@apply font-semibold;
@apply text-sm text-primary-600;
@apply text-label text-sm;
}
55 changes: 27 additions & 28 deletions minting-dapp/src/styles/components/minting-dapp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
}

Expand All @@ -35,7 +35,7 @@

h2 {
@apply font-semibold;
@apply text-primary-600 text-xl text-center;
@apply text-titles text-xl text-center;
}

p {
Expand All @@ -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 {
Expand All @@ -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;
}
}
Expand All @@ -84,25 +85,24 @@
@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;

& > * {
@apply flex flex-col items-center;
@apply px-6 py-4;

.label {
@apply text-xs text-primary-600;
@apply text-xs text-label;
}
}

.user-address {
@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;
Expand All @@ -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;
}
}
}
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -193,7 +192,7 @@
@apply w-full;

&:not(:last-child) {
@apply border-b border-neutral-200;
@apply border-b border-popups-internal_border;
}
}

Expand All @@ -206,15 +205,15 @@
}

.decrease, .mint-amount {
@apply border-r border-neutral-200;
@apply border-r border-popups-internal_border;
}

.mint-amount {
@apply flex items-center justify-center;
@apply w-full;

@apply font-semibold;
@apply text-primary-600;
@apply text-label text-lg;
}

.primary {
Expand Down
Loading