Skip to content

Commit

Permalink
fix(onboarding): design improvements (#2475)
Browse files Browse the repository at this point in the history 
* fix(ui): welcome-view screen

* fix(ui): login-view screen

* fix(ui): create new hypha account screens

* fix(ui): create dao screen

* fix(ui): onboarding improvements
  • Loading branch information
@evgenibir
evgenibir authored Sep 25, 2023
1 parent 58bc002 commit a983af9
Show file tree
Hide file tree
Showing 8 changed files with 183 additions and 109 deletions.
Binary file added src/assets/icons/hypha-round-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/logos/hypha-horizontal-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/login/header-view.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default {
.full-width
.row.justify-between.q-mb-md
ipfs-image-viewer(:ipfsCid="logo" showDefault :defaultLabel="daoName" :size="height/1.5 + 'px'")
.flex.items-center {{ daoName }}

</template>

Expand Down
36 changes: 18 additions & 18 deletions src/components/login/login-view.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,20 +82,20 @@ export default {
</script>

<template lang="pug">
.full-width.full-height.flex(:class="{ 'items-start':!$q.screen.gt.md, 'items-center':$q.screen.gt.md }")
.full-width.full-height.flex.q-pa-xl(:class="{ 'items-start':!$q.screen.gt.md, 'items-center':$q.screen.gt.md }")
.full-width.full-height.flex.column.justify-between.no-wrap(:style="{ 'padding-bottom': '140px' }")
.full-height.flex.justify-center.column
.row.flex.items-center.cursor-pointer(@click="$emit('back')")
q-icon.q-mr-xxs(name="fas fa-arrow-left" color="primary" size="14px")
.full-height.flex.column(:class="{ 'justify-start': !$q.screen.gt.md, 'justify-center': $q.screen.gt.md }")
.row.flex.items-center.cursor-pointer.q-mb-sm(@click="$emit('back')")
q-icon.q-mr-xxs(name="fas fa-chevron-left" color="primary" size="14px")
.text-bold.text-primary {{ $t('login.login-view.back') }}
template(v-if="$q.screen.gt.md")
.font-lato.text-heading.text-weight-bolder(:style="{ 'font-size': '34px' }") {{ $t('login.login-view.loginTo', { daoName: selectedDao?.title?.replace(/^\w/, (c) => c.toUpperCase()) }) }}
template(v-if="!$q.screen.gt.md")
span
.font-lato.text-heading.text-weight-bolder(:style="{ 'font-size': '34px' }") {{ $t('login.login-view.loginTo1') }}
.text-weight-bolder {{ $t('login.login-view.yourAccount') }}
//- template(v-if="$q.screen.gt.md")
//- .font-lato.text-heading.text-weight-bolder(:style="{ 'font-size': '34px' }") {{ $t('login.login-view.loginTo', { daoName: selectedDao?.title?.replace(/^\w/, (c) => c.toUpperCase()) }) }}
template
span(:style="'line-height: 44px'")
.font-lato.text-heading.text-bold(:class="{ 'desktop-font-size': $q.screen.gt.md }" :style="{ 'font-size': '38px' }") {{ $t('login.login-view.loginTo1') }}
.text-bold {{ selectedDao?.title?.replace(/^\w/, (c) => c.toUpperCase()) }}
.h-b1-signup.text-weight-thin.q-mt-lg.q-mb-lg(v-if="$q.screen.gt.md") {{ $t('login.login-view.youCanEither') }}
.h-b1-signup.text-weight-thin.q-mt-lg.q-mb-lg(v-if="!$q.screen.gt.md") {{ $t('login.login-view.pleaseLoginWith') }}
.h-b1-signup.q-mt-lg.q-mb-xxs(v-if="!$q.screen.gt.md") {{ $t('login.login-view.pleaseLoginWith') }}
div
.col-12(v-if="pkForm && pk")
.text-h5.text-bold.input-label.q-mb-md {{ $t('login.login-view.account1') }}
Expand All @@ -106,7 +106,7 @@ export default {
q-btn.q-mt-md.login-button(unelevated :label="$t('login.login-view.login')" no-caps @click="onLoginInApp" :loading="submitting")
.col-xs-12.col-md-6.q-mt-xxxl(v-else)
q-list(v-if="$ual" v-for="(wallet, idx) in $ual.authenticators" :key="wallet.getStyle().text")
q-item.wallet.q-my-xs(v-if="wallet.ualName !== 'seeds'" v-ripple :style="{ background: wallet.getStyle().background, color: wallet.getStyle().textColor }")
q-item.wallet.q-mt-md(v-if="wallet.ualName !== 'seeds'" v-ripple :style="{ background: wallet.getStyle().background, color: wallet.getStyle().textColor }")
q-item-section.cursor-pointer(avatar @click="onLoginWallet(idx)")
img(:src="wallet.getStyle().icon" width="20")
q-item-section.cursor-pointer.text-center(@click="onLoginWallet(idx)") {{ $t('login.login-view.login1', { '1': wallet.getStyle().text, '2': wallet.getStyle().text === 'Seeds' ? '(beta)' : '' }) }}
Expand All @@ -115,11 +115,9 @@ export default {
loading-spinner(v-if="loading === wallet.getStyle().text" :color="wallet.getStyle().textColor" size="2em")
q-btn(v-else :color="wallet.getStyle().textColor" icon="fas fa-cloud-download-alt" @click="openUrl(wallet.getOnboardingLink())" target="_blank" dense flat size="10px")
q-tooltip {{ $t('login.login-view.getApp') }}
.row.full-width.flex.justify-center.q-mt-md.q-mb-xs
.h-b1-signup {{ $t('login.login-view.orChooseAPartner') }}
.row.flex.items-center
.col.q-mr-md
q-select.q-mt-xs(:options="authenticators" dense dropdown-icon="fas fa-chevron-down" hide-bottom-space options-dense outlined rounded v-model="selectedAuthenticator")
.col-7.q-mr-sm
q-select.q-mt-md(:options="authenticators" dense dropdown-icon="fas fa-chevron-down" hide-bottom-space options-dense outlined rounded v-model="selectedAuthenticator")
template(v-if="selectedAuthenticator" v-slot:prepend)
img(:src="selectedAuthenticator?.icon" width="20" height="20")
template(v-slot:option="scope")
Expand All @@ -130,8 +128,8 @@ export default {
.row
img(:src="scope.opt.icon" width="20" height="20")
.q-ml-md {{ scope.opt.label }}
.col-2
q-btn.q-mt-xs.full-width(:disable="!selectedAuthenticator" :style="{ 'height': 'fit-content' }" :label="'Log in'" color="primary" @click="onLoginWallet(selectedAuthenticator.idx)" unelevated rounded no-caps outline)
.col
q-btn.q-mt-md.full-width.text-bold(:disable="!selectedAuthenticator" :style="{ 'height': 'fit-content' }" :label="'Log in'" color="primary" @click="onLoginWallet(selectedAuthenticator.idx)" unelevated rounded outline no-caps)
</template>

<style lang="stylus" scoped>
Expand All @@ -146,4 +144,6 @@ export default {
border-radius: 25px
width: 152px
height: 40px
.desktop-font-size
font-size: 44px !important
</style>
Loading

0 comments on commit a983af9

Please sign in to comment.