Skip to content

Commit

Permalink
Merge pull request #438 from pendulum-chain/feat/design-restructure
Browse files Browse the repository at this point in the history 
Redesign
  • Loading branch information
@Sharqiewicz
Sharqiewicz authored Feb 7, 2025
2 parents 25b40af + 41415d0 commit 1dd124e
Show file tree
Hide file tree
Showing 63 changed files with 4,340 additions and 2,564 deletions.
253 changes: 155 additions & 98 deletions App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,61 @@ div[data-rk] {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'tailwindcss';
@plugin "daisyui";

:root {
--color-primary: #0f4dc0;
--color-primary-content: #fff;
--color-secondary: #f4f5f6;
--color-secondary-content: #58667e;
--color-accent: #1de7df;
--color-accent-content: #000;
--color-neutral: #eff2f5;
--color-neutral-content: #58667e;
--color-base-100: #f5f9fa;
--color-base-200: #fff;
--color-base-300: #f7f7f7;
--color-base-content: #58667e;

--radius-field: 9px;
--border: 1px;

--text: #111;
--bg-modal: #fff;
--modal-border: #e5e5e5;
--rounded-btn: 9px;
--btn-text-case: none;
}
:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
scrollbar-gutter: unset;
}

.modal-box {
border-bottom-right-radius: 1.25rem;
border-bottom-left-radius: 1.25rem;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
}

.input-disabled {
cursor: not-allowed;
color: rgb(229 231 235 / var(--tw-text-opacity));
border-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-border-opacity)));
background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
}

.input {
&:has(> input[disabled]),
&:is(:disabled, [disabled]) {
background-color: transparent;
}
}

.input-vortex-primary:focus-within {
outline: 2px solid var(--color-primary);
}

.fadein-button-animation::before {
content: '';
position: absolute;
Expand All @@ -53,115 +93,132 @@ div[data-rk] {
transform: scaleX(1);
}

.click-animation:active:hover,
.click-animation:active:focus {
animation: button-pop 0.2s ease-out;
transform: scale(var(1, 0.97));
.step-vortex {
min-height: 2.5rem !important;
}
.step-vortex::before {
@apply bg-blue-700;
width: 2px !important;
}
.step-vortex::after {
@apply text-blue-700;
}
.step-primary.step-vortex::after {
@apply text-white;
}

@keyframes click {
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
.collapse-title,
:where(.collapse > input[type='checkbox']),
:where(.collapse > input[type='radio']) {
min-height: 0rem !important;
}

/** Vortex customisations of DaisyUI components */
@layer components {
.step-vortex {
min-height: 2.5rem !important;
}
.step-vortex::before {
@apply bg-blue-700 !important;
width: 2px !important;
}
.step-vortex::after {
@apply text-blue-700 !important;
}
.step-primary.step-vortex::after {
@apply text-white !important;
}
.collapse-title::after {
@apply text-blue-700;
@apply w-3;
@apply h-3;
top: 1.4rem !important;
}

.collapse-title,
:where(.collapse > input[type='checkbox']),
:where(.collapse > input[type='radio']) {
min-height: 0rem !important;
}
.input-ghost[aria-readonly='true']:focus,
.input-ghost[aria-readonly='true']:focus-within {
background-color: transparent !important;
color: var(--color-base-content);
border-color: #0000;
box-shadow: none;
}

.collapse-title::after {
@apply text-blue-700;
@apply w-3 !important;
@apply h-3 !important;
top: 1.4rem !important;
}
.btn-vortex-primary {
@apply bg-blue-700;
@apply text-white;
@apply rounded-xl;
@apply border;
@apply border-blue-700;
}
.input {
height: unset;
}

.btn-vortex-primary:hover {
@apply bg-white;
@apply text-blue-700;
@apply border-blue-700;
}
.btn {
height: 3rem;
}

.btn-vortex-primary:disabled {
@apply bg-blue-700;
@apply text-white;
@apply border-blue-700;
@apply opacity-40;
}
.btn-vortex-primary {
@apply bg-blue-700;
@apply text-white;
@apply rounded-xl;
@apply border;
@apply border-blue-700;
@apply shadow-none;
}

.btn-vortex-primary:active,
.btn-vortex-primary:focus {
@apply bg-blue-200;
@apply text-blue-700;
@apply border-blue-700;
}
.btn-vortex-primary:hover {
@apply bg-white;
@apply text-blue-700;
@apply border-blue-700;
}

.btn-vortex-primary-inverse {
@apply bg-white;
@apply text-blue-700;
@apply rounded-xl;
@apply border;
@apply border-blue-700;
}
.btn-vortex-primary:disabled {
@apply bg-blue-700;
@apply text-white;
@apply border-blue-700;
@apply opacity-40;
}

.btn-vortex-primary-inverse:hover {
@apply bg-blue-700;
@apply text-white;
@apply border-blue-700;
}
.btn-vortex-primary:active,
.btn-vortex-primary:focus {
@apply bg-blue-200;
@apply text-blue-700;
@apply border-blue-700;
}

.btn-vortex-primary-inverse:disabled {
@apply bg-white;
@apply text-blue-700;
@apply border-blue-700;
@apply opacity-40;
}
.btn-vortex-primary-inverse {
@apply bg-white;
@apply text-blue-700;
@apply rounded-xl;
@apply border;
@apply border-blue-700;
}

.btn-vortex-primary-inverse:active,
.btn-vortex-primary-inverse:focus {
@apply bg-blue-200;
@apply text-blue-700;
@apply border-blue-700;
}
.btn-vortex-primary-inverse:hover {
@apply bg-blue-700;
@apply text-white;
@apply border-blue-700;
}

.btn-vortex-primary-inverse:disabled {
@apply bg-white;
@apply text-blue-700;
@apply border-blue-700;
@apply opacity-40;
}

.btn-vortex-primary-inverse:active,
.btn-vortex-primary-inverse:focus {
@apply bg-blue-200;
@apply text-blue-700;
@apply border-blue-700;
}

.btn-vortex-secondary {
@apply text-white;
@apply bg-pink-600;
@apply border-pink-600;
@apply shadow-none;
}

.btn-vortex-secondary:hover {
@apply bg-pink-100;
@apply text-pink-600;
@apply border;
@apply border-pink-600;
}

.btn-vortex-primary {
background-color: var(--color-blue-700);
color: white;
border-radius: var(--radius-field);
border: var(--border) solid var(--color-blue-700);

.btn-vortex-secondary {
@apply text-white;
@apply bg-pink-600;
@apply border-pink-600;
&:hover {
background-color: white;
color: var(--color-blue-700);
}

.btn-vortex-secondary:hover {
@apply bg-pink-100;
@apply text-pink-600;
@apply border;
@apply border-pink-600;
&:disabled {
opacity: 0.4;
}
}
9 changes: 3 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,28 +39,24 @@
"@sentry/react": "^8.36.0",
"@sentry/vite-plugin": "^2.22.6",
"@slack/web-api": "^7.7.0",
"@tailwindcss/vite": "^4.0.3",
"@talismn/connect-components": "^1.1.9",
"@talismn/connect-wallets": "^1.2.5",
"@tanstack/react-query": "^5.64.2",
"@vitejs/plugin-react": "^4.3.4",
"@walletconnect/modal": "^2.6.2",
"@walletconnect/universal-provider": "^2.12.2",
"autoprefixer": "^10.4.19",
"big.js": "^6.2.1",
"bn.js": "^5.2.1",
"buffer": "^6.0.3",
"daisyui": "^4.11.1",
"motion": "^12.0.3",
"postcss": "^8.4.38",
"react": "^19.0.0",
"react-daisyui": "^5.0.5",
"react-dom": "^19.0.0",
"react-hook-form": "^7.51.5",
"react-toastify": "^10.0.6",
"stellar-base": "^11.0.1",
"stellar-sdk": "^11.3.0",
"tailwind": "^4.0.0",
"tailwindcss": "^3.4.3",
"tailwindcss": "^4.0.3",
"viem": "^2.22.13",
"wagmi": "^2.14.9",
"web3": "^4.10.0",
Expand All @@ -85,6 +81,7 @@
"@typescript-eslint/eslint-plugin": "^5.53.0",
"@typescript-eslint/parser": "^5.53.0",
"babel-preset-vite": "^1.1.3",
"daisyui": "^5.0.0-beta.6",
"eslint": "^8.34.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
Expand Down
8 changes: 0 additions & 8 deletions postcss.config.js
View file

This file was deleted.

Loading

0 comments on commit 1dd124e

Please sign in to comment.