diff --git a/assets/_sliding-menu.scss b/assets/_sliding-menu.scss index cf165fd86..964cf1fbd 100644 --- a/assets/_sliding-menu.scss +++ b/assets/_sliding-menu.scss @@ -10,6 +10,7 @@ $sliding-menu-narrow-width: 260px; bottom: 0; width: $sliding-menu-width; + min-height: 100vh; background-color: $like-gray-1; diff --git a/assets/css/main.css b/assets/css/main.css index b5a91365b..80db7019a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -24,3 +24,8 @@ a, a:hover, a:focus, a:visited max-width: 400px; max-height: 289px; } + +/* HACK: Fix for vendor CSS overwritten WalletConnect style */ +.walletconnect-modal__headerLogo { + height: 21px !important; +} diff --git a/assets/index.scss b/assets/index.scss index bb97183f1..e4182fcd2 100644 --- a/assets/index.scss +++ b/assets/index.scss @@ -7,6 +7,8 @@ /* sliding menu style for global */ @import "sliding-menu"; +@import "v2/global"; + * { margin: 0; padding: 0; @@ -154,8 +156,7 @@ a, .lc-page-wrapper { display: flex; flex-direction: column; - - min-height: 100vh; + flex-grow: 1; .lc-page-content { flex-grow: 1; @@ -171,7 +172,6 @@ a, } } - .lc-container-0, .lc-container-1, [class^="lc-container-2"], @@ -608,6 +608,10 @@ $line-height-map: ( } .lc-bg- { + &white { + background-color: white; + } + &transparent { background-color: transparent; } diff --git a/assets/logo/liker-land.svg b/assets/logo/liker-land.svg new file mode 100644 index 000000000..0a5f92817 --- /dev/null +++ b/assets/logo/liker-land.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + diff --git a/assets/v2/global.css b/assets/v2/global.css new file mode 100644 index 000000000..080ef552d --- /dev/null +++ b/assets/v2/global.css @@ -0,0 +1,97 @@ +html * { + font-family: 'Open Sans', sans-serif; +} + +.v2-card-view { + border-radius: 24px; + background-color: #fff; +} + +.v2-card-view__content { + padding: 32px 24px; +} + +.v2-modal__title { + text-align: center; + + color: #4a4a4a; + + font-size: 16px; + line-height: 22px; +} + +.v2-modal__description { + margin-top: 16px; + + text-align: center; + + color: #9b9b9b; + + font-size: 16px; + line-height: 22px; +} + +.v2-modal__actions { + display: grid; + align-items: center; + grid-auto-flow: column; + column-gap: 8px; + justify-content: center; + + margin-top: 24px; +} + +.v2-form, +.v2-form__content, +.v2-form__body { + display: grid; + grid-auto-rows: auto; + row-gap: 12px; +} +.v2-form__header, +.v2-form__footer { + display: flex; + justify-content: space-between; +} + +.v2-form__footer { + margin-top: 24px; +} + +.v2-form__header-left-slot, +.v2-form__header-right-slot, +.v2-form__footer-left-slot, +.v2-form__footer-right-slot { + display: flex; + align-items: center; +} + +.v2-form__header-left-slot, +.v2-form__footer-left-slot { + justify-content: flex-start; + + margin-right: auto; +} + +.v2-form__header-right-slot, +.v2-form__footer-right-slot { + justify-content: flex-end; + + margin-left: auto; +} + +.v2-form__header h2 { + margin: 0 12px; + + color: #28646E; + + font-size: 16px; + line-height: 1.25; +} + +.v2-form__body { + color: #9b9b9b; + + font-size: 16px; + line-height: 1.375; +} diff --git a/assets/v2/icons/liker-land-app-qrcode.svg b/assets/v2/icons/liker-land-app-qrcode.svg new file mode 100644 index 000000000..d834e2875 --- /dev/null +++ b/assets/v2/icons/liker-land-app-qrcode.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/v2/icons/liker-land-app.svg b/assets/v2/icons/liker-land-app.svg new file mode 100644 index 000000000..29da70254 --- /dev/null +++ b/assets/v2/icons/liker-land-app.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/v2/icons/star.min.svg b/assets/v2/icons/star.min.svg new file mode 100644 index 000000000..391b9b48c --- /dev/null +++ b/assets/v2/icons/star.min.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/v2/icons/star.svg b/assets/v2/icons/star.svg new file mode 100644 index 000000000..5e3572927 --- /dev/null +++ b/assets/v2/icons/star.svg @@ -0,0 +1,5 @@ + + + diff --git a/assets/v2/register-completed.svg b/assets/v2/register-completed.svg new file mode 100644 index 000000000..9dd313dbd --- /dev/null +++ b/assets/v2/register-completed.svg @@ -0,0 +1,8 @@ + + + + diff --git a/assets/v2/wallet-connect-qrcode-frame.svg b/assets/v2/wallet-connect-qrcode-frame.svg new file mode 100644 index 000000000..6c8d75926 --- /dev/null +++ b/assets/v2/wallet-connect-qrcode-frame.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + diff --git a/components/Mission/ItemPlaceholder.vue b/components/Mission/ItemPlaceholder.vue index faadf5fac..c224d3fb2 100644 --- a/components/Mission/ItemPlaceholder.vue +++ b/components/Mission/ItemPlaceholder.vue @@ -82,6 +82,8 @@ export default { } .animated-background { + + height: $top; // stylelint-disable-line order/properties-order margin: 0 20px 8px; $top: 0; @@ -90,9 +92,10 @@ export default { &.amount-label { top: $top; - $height: 20px; $top: $top + $height; height: $height; + $height: 20px; $top: $top + $height; + &.left { left: 0; } @@ -107,17 +110,19 @@ export default { right: 0; left: 0; - $height: 24px; $top: $top + $height; height: $height; + + $height: 24px; $top: $top + $height; } &.icon-middle { top: $top; - $height: 80px; $top: $top + $height; width: calc((100% - #{$height}) / 2); height: $height; + $height: 80px; $top: $top + $height; + &.left { left: 0; } @@ -132,8 +137,9 @@ export default { right: 0; left: 0; - $height: 24px; $top: $top + $height; height: $height; + + $height: 24px; $top: $top + $height; } $top: $top + 20px; @@ -143,16 +149,18 @@ export default { right: 0; left: 0; - $height: 4px; $top: $top + $height; height: $height; + + $height: 4px; $top: $top + $height; } &.label-newline { top: $top; - $height: 20px; $top: $top + $height; height: $height; + $height: 20px; $top: $top + $height; + &.left { left: 0; } @@ -162,8 +170,6 @@ export default { } } } - - height: $top; // stylelint-disable-line order/properties-order } } diff --git a/components/SlidingMenu/index.vue b/components/SlidingMenu/index.vue index 192637a27..d480233fd 100644 --- a/components/SlidingMenu/index.vue +++ b/components/SlidingMenu/index.vue @@ -116,18 +116,21 @@ diff --git a/components/icons/Keplr.vue b/components/icons/Keplr.vue new file mode 100644 index 000000000..8ebac7845 --- /dev/null +++ b/components/icons/Keplr.vue @@ -0,0 +1,23 @@ + + + diff --git a/components/icons/LikerLand.vue b/components/icons/LikerLand.vue new file mode 100644 index 000000000..91cef4e4b --- /dev/null +++ b/components/icons/LikerLand.vue @@ -0,0 +1,23 @@ + + + diff --git a/components/icons/SignIn.vue b/components/icons/SignIn.vue new file mode 100644 index 000000000..1e8d3e0ce --- /dev/null +++ b/components/icons/SignIn.vue @@ -0,0 +1,22 @@ + + diff --git a/components/toolbars/ToolBars.vue b/components/toolbars/ToolBars.vue index 3352bffce..5da3e7a96 100644 --- a/components/toolbars/ToolBars.vue +++ b/components/toolbars/ToolBars.vue @@ -3,7 +3,10 @@
- + + +
+ +
+
+ + + + + diff --git a/components/v2/InputField.vue b/components/v2/InputField.vue new file mode 100644 index 000000000..3b821d5d7 --- /dev/null +++ b/components/v2/InputField.vue @@ -0,0 +1,207 @@ +