diff --git a/vue-app/package.json b/vue-app/package.json index 79c6d1e92..09fdd6723 100644 --- a/vue-app/package.json +++ b/vue-app/package.json @@ -14,6 +14,7 @@ "dependencies": { "@kleros/gtcr-encoder": "^1.4.0", "@openfonts/inter_all": "^1.0.2", + "@openfonts/work-sans_all": "^1.0.1", "@walletconnect/web3-provider": "^1.5.1", "axios": "^0.27.2", "core-js": "^3.6.4", diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue index acfb0f6ae..3d9ae4590 100644 --- a/vue-app/src/App.vue +++ b/vue-app/src/App.vue @@ -17,7 +17,6 @@ 'mr-cart-closed': !isCartToggledOpen && isSideCartShown, }" > -
+ + diff --git a/vue-app/src/assets/Meridians-purple.svg b/vue-app/src/assets/Meridians-purple.svg new file mode 100644 index 000000000..7da50532b --- /dev/null +++ b/vue-app/src/assets/Meridians-purple.svg @@ -0,0 +1,3 @@ + + + diff --git a/vue-app/src/assets/Twitter-purple.svg b/vue-app/src/assets/Twitter-purple.svg new file mode 100644 index 000000000..7a7e87e59 --- /dev/null +++ b/vue-app/src/assets/Twitter-purple.svg @@ -0,0 +1,3 @@ + + + diff --git a/vue-app/src/assets/arrow-right.svg b/vue-app/src/assets/arrow-right.svg new file mode 100644 index 000000000..9e39dfeb5 --- /dev/null +++ b/vue-app/src/assets/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/vue-app/src/assets/bridge/bridge.png b/vue-app/src/assets/bridge/bridge.png new file mode 100644 index 000000000..3b261f82e Binary files /dev/null and b/vue-app/src/assets/bridge/bridge.png differ diff --git a/vue-app/src/assets/bridge/bridge_w1080.png b/vue-app/src/assets/bridge/bridge_w1080.png new file mode 100644 index 000000000..0c9401700 Binary files /dev/null and b/vue-app/src/assets/bridge/bridge_w1080.png differ diff --git a/vue-app/src/assets/bridge/bridge_w1440.png b/vue-app/src/assets/bridge/bridge_w1440.png new file mode 100644 index 000000000..d0f185aca Binary files /dev/null and b/vue-app/src/assets/bridge/bridge_w1440.png differ diff --git a/vue-app/src/assets/bridge/bridge_w2160.png b/vue-app/src/assets/bridge/bridge_w2160.png new file mode 100644 index 000000000..19a9ca9b2 Binary files /dev/null and b/vue-app/src/assets/bridge/bridge_w2160.png differ diff --git a/vue-app/src/assets/bridge/bridge_w2880.png b/vue-app/src/assets/bridge/bridge_w2880.png new file mode 100644 index 000000000..80cbef5d6 Binary files /dev/null and b/vue-app/src/assets/bridge/bridge_w2880.png differ diff --git a/vue-app/src/assets/bridge/bridge_w360.png b/vue-app/src/assets/bridge/bridge_w360.png new file mode 100644 index 000000000..245a7bd2a Binary files /dev/null and b/vue-app/src/assets/bridge/bridge_w360.png differ diff --git a/vue-app/src/assets/bridge/bridge_w720.png b/vue-app/src/assets/bridge/bridge_w720.png new file mode 100644 index 000000000..28a27673b Binary files /dev/null and b/vue-app/src/assets/bridge/bridge_w720.png differ diff --git a/vue-app/src/assets/close-white.svg b/vue-app/src/assets/close-white.svg new file mode 100644 index 000000000..733620947 --- /dev/null +++ b/vue-app/src/assets/close-white.svg @@ -0,0 +1 @@ + diff --git a/vue-app/src/assets/clr.svg b/vue-app/src/assets/clr-dark.svg similarity index 89% rename from vue-app/src/assets/clr.svg rename to vue-app/src/assets/clr-dark.svg index d561e8d3d..799ee38c7 100644 --- a/vue-app/src/assets/clr.svg +++ b/vue-app/src/assets/clr-dark.svg @@ -1,3 +1,3 @@ - + diff --git a/vue-app/src/assets/clr-light.svg b/vue-app/src/assets/clr-light.svg new file mode 100644 index 000000000..473b55a6f --- /dev/null +++ b/vue-app/src/assets/clr-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/vue-app/src/assets/copy-black.svg b/vue-app/src/assets/copy-black.svg new file mode 100644 index 000000000..18c636bc9 --- /dev/null +++ b/vue-app/src/assets/copy-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/vue-app/src/assets/copy.svg b/vue-app/src/assets/copy.svg index 9aac24805..92ff79cf4 100644 --- a/vue-app/src/assets/copy.svg +++ b/vue-app/src/assets/copy.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/vue-app/src/assets/green-tick.svg b/vue-app/src/assets/green-tick.svg index 3f3c0b349..3cc6d46e6 100644 --- a/vue-app/src/assets/green-tick.svg +++ b/vue-app/src/assets/green-tick.svg @@ -1,3 +1,3 @@ - + diff --git a/vue-app/src/assets/half-moon.svg b/vue-app/src/assets/half-moon.svg index b3de08048..b10ba96dc 100644 --- a/vue-app/src/assets/half-moon.svg +++ b/vue-app/src/assets/half-moon.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/vue-app/src/assets/help.svg b/vue-app/src/assets/help-dark.svg similarity index 79% rename from vue-app/src/assets/help.svg rename to vue-app/src/assets/help-dark.svg index 439616e93..9b34ef91c 100644 --- a/vue-app/src/assets/help.svg +++ b/vue-app/src/assets/help-dark.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/vue-app/src/assets/help-light.svg b/vue-app/src/assets/help-light.svg new file mode 100644 index 000000000..ca3a0eb68 --- /dev/null +++ b/vue-app/src/assets/help-light.svg @@ -0,0 +1 @@ + diff --git a/vue-app/src/assets/hero/hero.png b/vue-app/src/assets/hero/hero.png new file mode 100644 index 000000000..246c1a71f Binary files /dev/null and b/vue-app/src/assets/hero/hero.png differ diff --git a/vue-app/src/assets/hero/hero_w1080.png b/vue-app/src/assets/hero/hero_w1080.png new file mode 100644 index 000000000..9fcab61b4 Binary files /dev/null and b/vue-app/src/assets/hero/hero_w1080.png differ diff --git a/vue-app/src/assets/hero/hero_w1440.png b/vue-app/src/assets/hero/hero_w1440.png new file mode 100644 index 000000000..fafb3c67c Binary files /dev/null and b/vue-app/src/assets/hero/hero_w1440.png differ diff --git a/vue-app/src/assets/hero/hero_w2160.png b/vue-app/src/assets/hero/hero_w2160.png new file mode 100644 index 000000000..df48830d4 Binary files /dev/null and b/vue-app/src/assets/hero/hero_w2160.png differ diff --git a/vue-app/src/assets/hero/hero_w2880.png b/vue-app/src/assets/hero/hero_w2880.png new file mode 100644 index 000000000..3b1018abc Binary files /dev/null and b/vue-app/src/assets/hero/hero_w2880.png differ diff --git a/vue-app/src/assets/hero/hero_w360.png b/vue-app/src/assets/hero/hero_w360.png new file mode 100644 index 000000000..e79f69306 Binary files /dev/null and b/vue-app/src/assets/hero/hero_w360.png differ diff --git a/vue-app/src/assets/hero/hero_w720.png b/vue-app/src/assets/hero/hero_w720.png new file mode 100644 index 000000000..bbd7707e6 Binary files /dev/null and b/vue-app/src/assets/hero/hero_w720.png differ diff --git a/vue-app/src/assets/next-step.svg b/vue-app/src/assets/next-step.svg new file mode 100644 index 000000000..c84f2106e --- /dev/null +++ b/vue-app/src/assets/next-step.svg @@ -0,0 +1,3 @@ + + + diff --git a/vue-app/src/assets/project-card-placeholder.png b/vue-app/src/assets/project-card-placeholder.png new file mode 100644 index 000000000..0297af110 Binary files /dev/null and b/vue-app/src/assets/project-card-placeholder.png differ diff --git a/vue-app/src/assets/robot/robot.png b/vue-app/src/assets/robot/robot.png new file mode 100644 index 000000000..a6b43acdd Binary files /dev/null and b/vue-app/src/assets/robot/robot.png differ diff --git a/vue-app/src/assets/robot/robot_w1080.png b/vue-app/src/assets/robot/robot_w1080.png new file mode 100644 index 000000000..4751b907a Binary files /dev/null and b/vue-app/src/assets/robot/robot_w1080.png differ diff --git a/vue-app/src/assets/robot/robot_w1440.png b/vue-app/src/assets/robot/robot_w1440.png new file mode 100644 index 000000000..34b861119 Binary files /dev/null and b/vue-app/src/assets/robot/robot_w1440.png differ diff --git a/vue-app/src/assets/robot/robot_w2160.png b/vue-app/src/assets/robot/robot_w2160.png new file mode 100644 index 000000000..38ed0d791 Binary files /dev/null and b/vue-app/src/assets/robot/robot_w2160.png differ diff --git a/vue-app/src/assets/robot/robot_w2880.png b/vue-app/src/assets/robot/robot_w2880.png new file mode 100644 index 000000000..204de51fe Binary files /dev/null and b/vue-app/src/assets/robot/robot_w2880.png differ diff --git a/vue-app/src/assets/robot/robot_w360.png b/vue-app/src/assets/robot/robot_w360.png new file mode 100644 index 000000000..7f3e879f5 Binary files /dev/null and b/vue-app/src/assets/robot/robot_w360.png differ diff --git a/vue-app/src/assets/robot/robot_w720.png b/vue-app/src/assets/robot/robot_w720.png new file mode 100644 index 000000000..007e4f7c9 Binary files /dev/null and b/vue-app/src/assets/robot/robot_w720.png differ diff --git a/vue-app/src/assets/sun.svg b/vue-app/src/assets/sun.svg index fe6de4d38..2c7d739d3 100644 --- a/vue-app/src/assets/sun.svg +++ b/vue-app/src/assets/sun.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/vue-app/src/assets/warning.svg b/vue-app/src/assets/warning.svg new file mode 100644 index 000000000..d21ff634e --- /dev/null +++ b/vue-app/src/assets/warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/vue-app/src/components/AddToCartButton.vue b/vue-app/src/components/AddToCartButton.vue index e47161ec3..7eebee34d 100644 --- a/vue-app/src/components/AddToCartButton.vue +++ b/vue-app/src/components/AddToCartButton.vue @@ -17,7 +17,7 @@ v-if="inCart && canContribute()" :button="{ wide: true, - text: 'In cart 🎉', + text: 'In cart', }" @click="toggleCartPanel()" /> diff --git a/vue-app/src/components/BalanceItem.vue b/vue-app/src/components/BalanceItem.vue index e01ac3d5f..7ac2be6a3 100644 --- a/vue-app/src/components/BalanceItem.vue +++ b/vue-app/src/components/BalanceItem.vue @@ -36,8 +36,6 @@ export default class BalanceItem extends Vue { .item { display: flex; align-items: center; - padding: 1rem; - border: 1px solid #000000; margin-top: -1px; &:first-of-type { margin-top: 0px; diff --git a/vue-app/src/components/BrightIdWidget.vue b/vue-app/src/components/BrightIdWidget.vue index 9c1de75c3..336cfb373 100644 --- a/vue-app/src/components/BrightIdWidget.vue +++ b/vue-app/src/components/BrightIdWidget.vue @@ -17,11 +17,11 @@
-

BrightID setup

-

{{ getCurrentStep }} / 4

+
BrightID setup
+
{{ getCurrentStep }} / 4
- - Start setup -

+ Start setup + +

{{ isVerified ? 'Verified' : 'Unverified' }} -

+
@@ -131,36 +142,29 @@ export default class BrightIdWidget extends Vue { @import '../styles/vars'; @import '../styles/theme'; -.setup-container { - background: var(--bg-secondary-color); - border-radius: 0.5rem; - padding: 0.5rem 0; - width: auto; - height: auto; +.text-small { + font-size: 14px; + line-height: 16px; + font-weight: 600; +} - h2 { - font-size: 20px; - font-family: 'Glacial Indifference', sans-serif; - margin: 0; - } +.text-xsmall { + font-size: 10px; + line-height: 12px; + font-weight: 600; } .row { display: flex; - justify-content: space-between; + gap: 0.5rem; align-items: center; width: 100%; - - p { - margin: 0; - font-weight: 600; - } a { margin: 0; line-height: 0; } .unverified { - color: var(--warning-color); + color: $clr-error; } .brightid-verified { color: $clr-green; @@ -187,66 +191,23 @@ export default class BrightIdWidget extends Vue { } } +.ml-auto { + margin-left: auto; +} + .bright-id-widget-container { - background: var(--bg-secondary-color); - border-radius: 0.5rem; + color: #16161a; + background: var(--bg-bright-id-widget); + border-radius: 20px; width: auto; height: auto; - - h2 { - font-size: 20px; - font-family: 'Glacial Indifference', sans-serif; - margin: 0; - } } .bright-id-profile-widget { padding: 1rem; } -.row { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - - p { - margin: 0; - font-weight: 600; - } - a { - margin: 0; - line-height: 0; - } - .unverified { - color: var(--warning-color); - } - .brightid-verified { - color: $clr-green; - } - - .step0:before { - content: '0'; - } - .step1:before { - content: '1'; - } - .step2:before { - content: '2'; - } - .step3:before { - content: '3'; - } - .step4:before { - content: '4'; - } - .span { - margin: 0; - line-height: 0; - } -} - .progress { width: 100%; border-radius: 2rem; diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue index 5266c3971..735eefe22 100644 --- a/vue-app/src/components/Cart.vue +++ b/vue-app/src/components/Cart.vue @@ -6,62 +6,35 @@
+
+

Your cart

+
+ Collapse + + close +
+ +
- You’ve already contributed this round. You can edit your choices and add - new projects, but your cart total must always equal your original + You’ve already contributed this round. You can edit your choices and new + projects, but your cart total must always equal your original contribution amount. Why?
Almost done! You must submit one more transaction to complete your contribution.
-
-
- cart - close -
-

{{ isEditMode ? 'Edit cart' : 'Your cart' }}

-
- -
-
- -

{{ text }}

-
-
-
-
-
Time left:
- +
Time left:
+
- Original contribution + Original contribution {{ formatAmount(this.contribution) }} {{ tokenSymbol }}
- Your cart + Your cart
⚠️{{ formatAmount(getCartTotal(this.$store.state.cart)) }} @@ -181,8 +158,53 @@ {{ formatAmount(this.contribution) }} {{ tokenSymbol }} evenly
+
+
+ Projects +
+ {{ formatAmount(getCartTotal($store.state.committedCart)) }} + {{ tokenSymbol }} +
+
+
+ Matching Pool +
+ {{ getCartMatchingPoolTotal() }} {{ tokenSymbol }} +
+
+
+
+

Total

+
+
+ {{ formatAmount(getCartTotal(this.$store.state.cart)) }} / +

{{ formatAmount(contribution) }}

+
+

+ {{ formatAmount(getTotal()) }} {{ tokenSymbol }} +

+
+
+
-
Time left:
- -
-
-
-
- Projects -
- {{ formatAmount(getCartTotal($store.state.committedCart)) }} - {{ tokenSymbol }} -
-
-
- Matching Pool -
- {{ getCartMatchingPoolTotal() }} {{ tokenSymbol }} -
-
-
-
- Total -
- {{ formatAmount(getCartTotal(this.$store.state.cart)) }} / - {{ - formatAmount(contribution) - }} - - {{ formatAmount(getTotal()) }} - {{ tokenSymbol }} +
Time left:
+
@@ -719,19 +701,20 @@ window.onclick = function (event) { @import '../styles/vars'; @import '../styles/theme'; -h2 { - line-height: 130%; +.h100 { + min-height: 100%; + background: var(--bg-cart-color); } .cart-container { + display: flex; + flex-direction: column; + gap: 0; box-sizing: border-box; position: relative; - gap: 1rem; height: 100%; - padding: 1rem 0rem; - padding-top: 0rem; width: 100%; - border-left: 1px solid #000; + background: var(--bg-cart-color); @media (max-width: $breakpoint-m) { padding: 0rem; @@ -779,20 +762,36 @@ h2 { justify-content: space-between; width: 100%; margin-top: 1rem; + + div { + text-transform: uppercase; + } } .time-left-read-only { display: flex; - align-items: flex-end; + align-items: center; justify-content: space-between; - padding: 1rem; + padding: 1rem 3.5rem; + border-bottom: 1px solid $clr-violet; + + div { + text-transform: uppercase; + } + + span > h2 { + font-size: 28px !important; + } } .cart-title-bar { + background: var(--bg-cart-color); + justify-content: space-between; position: sticky; - padding: 1rem; + padding: 3rem 3.5rem 2rem 3.5rem; top: 0; z-index: 1; + border-bottom: 1px solid $clr-violet; @media (max-width: $breakpoint-m) { justify-content: space-between; } @@ -841,12 +840,6 @@ h2 { margin: 1rem 0; } -.absolute-left { - /* position: absolute; - left: 0; */ - /* margin-left: 1rem; */ -} - .absolute-right { position: absolute; right: 1rem; @@ -854,21 +847,19 @@ h2 { .cart-btn { @include button( - white, - var(--bg-light-color), + var(--text-color), + transparent, 1px solid rgba($border-light, 0.3) ); border: 0px solid var(--text-color); background: transparent; - padding: 0.75rem 0.5rem; + padding: 0.75rem; border-radius: 0.5rem; display: flex; gap: 0.5rem; margin-right: -0.5rem; &:hover { - background: var(--bg-secondary-color); - gap: 0.75rem; - margin-right: -0.75rem; + background: var(--bg-landing-hiw-card); } img { @@ -885,17 +876,20 @@ h2 { .empty-cart { font-size: 16px; font-weight: 400; - margin: 1rem; padding: 1.5rem 1.5rem; + display: flex; + flex-direction: column; + place-items: center; + gap: 0.5rem; + text-align: center; + border-bottom: 1px solid $clr-violet; img { height: 70px; } h3 { - font-family: 'Glacial Indifference', sans-serif; - font-size: 25px; - font-weight: 700; + margin: 0; } div { @@ -923,20 +917,21 @@ h2 { } .total-bar { + background: var(--bg-cart-color); box-sizing: border-box; display: flex; align-items: center; position: sticky; bottom: 0; - padding: 1rem; + padding: 1rem 3.5rem; justify-content: space-between; - border-top: 1px solid #000; - border-bottom: 1px solid #000; + border-bottom: 1px solid $clr-violet; font-family: 'Inter'; font-size: 1rem; line-height: 0; font-weight: 400; height: 60px; + @media (max-width: $breakpoint-m) { position: fixed; bottom: 4rem; @@ -950,6 +945,17 @@ h2 { } } +.total-text { + font-size: 28px; + line-height: 33px; + margin: 0; +} + +.total-amount { + font-weight: 400; + margin: 0; +} + .total-reallocation { font-family: 'Inter'; font-size: 1rem; @@ -957,18 +963,11 @@ h2 { font-weight: 700; } -.total-label { - font-family: 'Glacial Indifference', sans-serif; - font-size: 1.5rem; - font-weight: 700; - line-height: 0; - margin-right: 0.5rem; -} - .reallocation-message { - padding: 1rem; - background: $highlight-color; - font-size: 14px; + padding: 1.5rem 2rem; + margin: 3rem 3.5rem 2rem 3.5rem; + border: 1px solid $clr-purple; + border-radius: 20px; } .message-link { @@ -979,8 +978,6 @@ h2 { .balance { padding: 1rem; background: var(--bg-primary-color); - border-bottom: 1px solid #000000; - border-top: 1px solid #000000; display: flex; justify-content: space-between; } @@ -998,16 +995,15 @@ h2 { .submit-btn-wrapper { align-self: flex-end; box-sizing: border-box; - border-top: 1px solid #000000; text-align: left; gap: 0.5rem; width: 100%; display: flex; flex-direction: column; align-items: flex-start; - padding: 1rem; + padding: 1rem 3.5rem; position: relative; - background: var(--bg-secondary-color); + @media (max-width: $breakpoint-m) { padding: 2rem; } @@ -1031,10 +1027,6 @@ h2 { } } -.h100 { - height: 100%; -} - .p1 { width: 100%; margin-bottom: 1rem; @@ -1123,7 +1115,7 @@ h2 { flex-direction: column; gap: 0.5rem; padding: 1rem; - border-top: 1px solid #000; + border-bottom: 1px solid $clr-violet; } .dropdown { diff --git a/vue-app/src/components/CartItems.vue b/vue-app/src/components/CartItems.vue index 622b3fd45..ca5eb0f17 100644 --- a/vue-app/src/components/CartItems.vue +++ b/vue-app/src/components/CartItems.vue @@ -1,5 +1,5 @@
@@ -108,12 +110,19 @@ export default class FormProgressWidget extends Vue { position: sticky; top: 5rem; align-self: start; - padding: 1.5rem 1rem; + padding: 2.5rem; border-radius: 16px; - box-shadow: var(--box-shadow); + border: 1px solid #505053; + background: var(--bg-progress-forms); + + #progress-title { + margin: 1rem 0; + color: var(--text-color); + } .progress-steps { margin-bottom: 1rem; + color: var(--text-color); } .progress-step { @@ -123,16 +132,14 @@ export default class FormProgressWidget extends Vue { margin-right: 1rem; } - img:not(.completed-step) { - filter: var(--img-filter, invert(0.3)); + img:not(.completed-step, .current-step) { + filter: var(--img-filter, invert(1)); } p { margin: 0.5rem 0; } - .step { - @include stepColor(var(--text-color-rgb)); - } + .active { color: var(--text-color); font-weight: 600; @@ -146,14 +153,10 @@ export default class FormProgressWidget extends Vue { transform: scale(1.02); } } - - .subtitle { - font-weight: 500; - opacity: 0.8; - } } .mobile { + top: 64px; margin-bottom: 0; position: fixed; width: 100%; @@ -178,6 +181,15 @@ export default class FormProgressWidget extends Vue { } } +.current-step { + background: white; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + justify-self: center; + align-self: center; +} + .cancel-link { position: sticky; top: 0px; diff --git a/vue-app/src/components/FundsNeededWarning.vue b/vue-app/src/components/FundsNeededWarning.vue index 1459e2d04..1dabbeca8 100644 --- a/vue-app/src/components/FundsNeededWarning.vue +++ b/vue-app/src/components/FundsNeededWarning.vue @@ -1,13 +1,14 @@ @@ -98,17 +99,16 @@ export default class FundsNeededWarning extends Vue { @import '../styles/theme'; .warning { + border: 1px solid $clr-error; width: 100%; box-sizing: border-box; - background: var(--warning-background); - border-radius: 1rem; - padding: 1rem; - margin: 1rem 0 0; - color: var(--warning-color); + border-radius: 20px; + padding: 1.5rem 2rem; + color: $clr-error; + text-align: center; } .message { - margin: 1.25rem 0 0; color: var(--text-color); } diff --git a/vue-app/src/components/IconStatus.vue b/vue-app/src/components/IconStatus.vue index 0101da377..d474b38f9 100644 --- a/vue-app/src/components/IconStatus.vue +++ b/vue-app/src/components/IconStatus.vue @@ -85,7 +85,7 @@ export default class IconStatus extends Vue { } .status-sad { - background: var(--attention-color); + background: $clr-error; padding: 0.125rem; border-radius: 2rem; height: 0.5rem; @@ -95,7 +95,7 @@ export default class IconStatus extends Vue { } .status-custom { - background: var(--bg); + background: $clr-white; border-radius: 2rem; padding: 0.125rem; height: 0.5rem; @@ -108,7 +108,7 @@ export default class IconStatus extends Vue { position: relative; top: -0.5rem; right: -0.5rem; - background: var(--bg-secondary-color); + background: $clr-white; padding: 2px; border-radius: 2rem; } diff --git a/vue-app/src/components/Info.vue b/vue-app/src/components/Info.vue index 579346b1d..997c0fbe2 100644 --- a/vue-app/src/components/Info.vue +++ b/vue-app/src/components/Info.vue @@ -1,7 +1,7 @@ @@ -21,10 +21,9 @@ export default class Info extends Vue { @import '../styles/theme'; .info { - background-color: var(--bg-transparent); - border: 1px solid $highlight-color; + border: 1px solid var(--text-color); border-radius: 0.5rem; - padding: 0.5rem 1rem; + padding: 2rem 1.5rem; font-size: 16px; font-family: Inter; line-height: 150%; diff --git a/vue-app/src/components/InputButton.vue b/vue-app/src/components/InputButton.vue index bb63accb9..7b6cceb65 100644 --- a/vue-app/src/components/InputButton.vue +++ b/vue-app/src/components/InputButton.vue @@ -8,7 +8,7 @@ />
-
+
{{ renderCopiedOrHash }}
@@ -71,9 +71,7 @@ export default class IpfsCopyWidget extends Vue { .hash { padding: 0.5rem; - font-size: 14px; - font-weight: 500; - line-height: 150%; + font-size: 16px; align-items: center; gap: 1rem; width: 100%; diff --git a/vue-app/src/components/IpfsImageUpload.vue b/vue-app/src/components/IpfsImageUpload.vue index 0e4045cc8..3674e8361 100644 --- a/vue-app/src/components/IpfsImageUpload.vue +++ b/vue-app/src/components/IpfsImageUpload.vue @@ -5,9 +5,15 @@ @submit="handleUploadToIPFS" name="image" > -

{{ label }}

-

{{ description }}

+

{{ label }}

+

{{ description }}

+ {{ loading ? 'Uploading...' : 'Upload' }} @@ -43,8 +49,8 @@ />
-

IPFS hash

-

+

IPFS hash

+

Your image is now stored on a decentralized network at the following hash. You don't need to do anything with it but you may want to keep it for future use. @@ -216,50 +222,67 @@ export default class IpfsImageUpload extends Vue { margin: 1rem 0 2rem; } +.input-label { + color: $clr-gray; + font-weight: 500; + text-align: left; + margin: 0; +} + +input[type='file'] { + display: none; +} + .input { - flex: 1; - color: var(--text-color); - border-radius: 16px; - border: 2px solid $button-color; - background-color: var(--bg-secondary-color); - margin: 0.5rem 0; - padding: 0.5rem 1rem; - font-size: 16px; - font-family: Inter; - font-weight: 400; - line-height: 24px; - letter-spacing: 0em; width: 100%; - &:valid { - border: 2px solid $clr-green; - } - &:hover { - background: var(--bg-primary-color); - border: 2px solid $highlight-color; - box-shadow: 0px 4px 16px 0px 25, 22, 35, 0.4; - } - &:optional { - border: 2px solid $button-color; - background-color: var(--bg-secondary-color); + background: var(--bg-input-forms); + border: 1px solid var(--border-input-forms); + border-radius: 30px; + padding: 0.5rem; + height: 50px; + display: flex; + gap: 0.5rem; + align-items: center; + + &:focus { + border: 1px solid $clr-purple; } } -.input-label { - font-family: Inter; - font-size: 16px; +.invalid { + border: 1px solid $clr-error; +} + +.error { + margin-top: 2rem; + color: $clr-error; + font-family: 'Work Sans'; font-style: normal; font-weight: 500; - line-height: 24px; - letter-spacing: 0em; - text-align: left; - margin: 0; + font-size: 22px; + line-height: 26px; +} +.error:before { + content: url('~@/assets/warning.svg'); + margin-right: 0.5rem; +} + +.btn-file { + @include button($clr-dark, #e4e7ec, none); + max-height: 34px; + min-height: 0; +} + +.file-name { + max-width: 320px; + overflow: hidden; } .input-description { + color: var(--text-color); margin-top: 0.25rem; + margin-bottom: 0; font-size: 14px; - font-family: Inter; - margin-bottom: 0.5rem; line-height: 150%; } diff --git a/vue-app/src/components/LinkBox.vue b/vue-app/src/components/LinkBox.vue index ec86f6950..4a1385cfb 100644 --- a/vue-app/src/components/LinkBox.vue +++ b/vue-app/src/components/LinkBox.vue @@ -1,17 +1,19 @@ @@ -34,17 +36,19 @@ export default class extends Vue { @import '../styles/theme'; .link-box { - background: var(--bg-primary-color); - padding: 1.5rem; - border-radius: 1rem; - box-shadow: var(--box-shadow); - overflow-wrap: anywhere; + border: 1px solid $clr-dark-gray; + border-radius: 20px; + padding: 2rem 2.5rem; .link-title { - font-size: 1.5rem; margin: 0; margin-bottom: 1rem; - font-family: 'Glacial Indifference', sans-serif; + color: $clr-dark-white; + } + + .link-box-content { + display: flex; + justify-content: space-between; } .link-row { @@ -52,6 +56,12 @@ export default class extends Vue { align-items: center; padding: 0.5rem; gap: 0.5rem; + font-size: 18px; + font-weight: 600; + + a { + color: $clr-purple; + } } } diff --git a/vue-app/src/components/Markdown.vue b/vue-app/src/components/Markdown.vue index 53338a5ce..faa547a46 100644 --- a/vue-app/src/components/Markdown.vue +++ b/vue-app/src/components/Markdown.vue @@ -22,6 +22,9 @@ export default class Transaction extends Vue { diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue index 5d2d2cea7..f57a2b68b 100644 --- a/vue-app/src/components/ProjectListItem.vue +++ b/vue-app/src/components/ProjectListItem.vue @@ -4,24 +4,24 @@

-
{{ project.category }}
+
{{ project.category }}
-
- +

+ {{ project.name }} -

+ -
{{ project.tagline }}
+
{{ project.tagline }}
- +
@@ -105,7 +105,9 @@ export default class ProjectListItem extends Vue { display: flex; flex-direction: column; justify-content: space-between; + gap: 1rem; z-index: 0; + border: 1px solid $clr-dark; &:hover { transform: scale(1.01); box-shadow: 0px 4px 4px 0px 0, 0, 0, 0.25; @@ -161,6 +163,10 @@ export default class ProjectListItem extends Vue { padding-top: 0rem; } +.project-title { + color: var(--text-color) !important; +} + .buttons { display: flex; flex-direction: column; @@ -181,24 +187,26 @@ export default class ProjectListItem extends Vue { } .project-description { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - font-size: 16px; - overflow: hidden; - margin-bottom: 1rem; - color: var(--text-body); - opacity: 0.8; + margin-top: 1rem; + margin-bottom: 2rem; + color: var(--secondary-text-color) !important; } .btn { margin-top: 20px; } +.btn-more { + width: 100%; + text-transform: uppercase; +} + .tag { position: absolute; top: 0.5rem; right: 0.5rem; box-shadow: var(--box-shadow); + background: var(--bg-secondary-color); + color: var(--text-color); } diff --git a/vue-app/src/components/ProjectProfile.vue b/vue-app/src/components/ProjectProfile.vue index 5a05a59be..ad4391cf4 100644 --- a/vue-app/src/components/ProjectProfile.vue +++ b/vue-app/src/components/ProjectProfile.vue @@ -12,83 +12,82 @@ :alt="project.name" />
-

- {{ - project.name - }} - {{ project.name }} -

-

{{ project.tagline }}

-
-
{{ project.category }} tag
-
- Team: {{ project.teamName }} -
-
-
- - -

- ✔️ You have contributed to this project! -

-
-
-

About the project

- -
-
-

The problem it solves

- -
-
-

Funding plans

- -
-
+
-
Recipient address
-
- {{ addressName }} +

+ {{ + project.name + }} + {{ project.name }} +

+

{{ project.tagline }}

+
+
{{ project.category }}
+
+ Team: {{ project.teamName }} +
-
- + - +

- - + ✔️ You have contributed to this project! +

-
+
+
+

About the project

+ +
+
+

The problem it solves

+ +
+
+

Funding plans

+ +
+
+

Recipient address

+
+ {{ addressName }} +
+ + + + +
+
+
+ +
+
-
@@ -252,11 +252,31 @@ export default class ProjectProfile extends Vue { } .about { + padding-bottom: 0; + + .title-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + @media (max-width: $breakpoint-xl) { + flex-direction: column; + margin-bottom: 3rem; + } + + .actions-container { + max-width: 320px; + width: 100%; + + @media (max-width: $breakpoint-xl) { + max-width: calc(100vw - 1.5rem); + } + } + } + .project-name { - font-family: 'Glacial Indifference', sans-serif; font-weight: bold; - font-size: 2.5rem; - letter-spacing: -0.015em; margin: 0; a { @@ -265,11 +285,9 @@ export default class ProjectProfile extends Vue { } .tagline { - font-size: 1.5rem; - line-height: 150%; margin-top: 0.25rem; margin-bottom: 1rem; - font-family: 'Glacial Indifference', sans-serif; + font-size: 1.125rem; } .subtitle { @@ -284,14 +302,61 @@ export default class ProjectProfile extends Vue { margin-bottom: 2rem; } + .tag { + color: $clr-white; + background: $clr-purple; + border-radius: 4px; + padding: 0.25rem 0.75rem; + font-size: 18px; + } + .team-byline { - line-height: 150%; + font-size: 18px; + + a { + color: $clr-purple; + } } } + .project-section-container { + display: flex; + flex-direction: column; + gap: 3rem; + } + .project-section { - margin-bottom: 3rem; - color: var(--text-body); + border: 1px solid $clr-dark-gray; + border-radius: 20px; + padding: 2rem 2.5rem; + + p { + color: $clr-dark-white; + } + + .markdown { + background: transparent; + color: var(--text-color); + + ::v-deep { + h1, + h2, + h3, + h4, + h5, + h6 { + padding: 0; + } + p { + padding: 0; + font-family: 'Work Sans'; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 140%; + } + } + } } .address-box { @@ -317,16 +382,6 @@ export default class ProjectProfile extends Vue { margin-bottom: 0.25rem; text-transform: uppercase; } - - .address { - display: flex; - font-family: 'Glacial Indifference', sans-serif; - font-weight: 600; - border-radius: 8px; - align-items: center; - gap: 0.5rem; - word-break: break-all; - } } .address-box-no-team { @@ -380,6 +435,19 @@ export default class ProjectProfile extends Vue { } } + .address-container { + display: flex; + gap: 0.5rem; + align-items: center; + color: var(--text-color); + padding: 0; + font-family: 'Work Sans'; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 140%; + } + .copy-div { display: flex; gap: 0.5rem; @@ -389,7 +457,6 @@ export default class ProjectProfile extends Vue { padding: 0; .icon { @include icon(none, var(--explorer-hover)); - border: 1px solid var(--explorer-border); filter: var(--img-filter, invert(0.7)); } } diff --git a/vue-app/src/components/RecipientSubmissionWidget.vue b/vue-app/src/components/RecipientSubmissionWidget.vue index 31a767ae7..4112be626 100644 --- a/vue-app/src/components/RecipientSubmissionWidget.vue +++ b/vue-app/src/components/RecipientSubmissionWidget.vue @@ -1,12 +1,6 @@