krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 15:48:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

update: upgrade groups sign up page (slightly)

Browse Source
This commit is contained in:
CuriousMagpie
2022-08-08 16:36:14 -04:00
parent cff6c5674f
commit 5d81c63897
1 changed files with 45 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
website/client/src/components/groups/groupPlan.vue
View File

@@ -108,7 +108,7 @@
> >
<div class="row"> <div class="row">
<h1 class="col-12 text-center purple-header"> <h1 class="col-12 text-center purple-header">
Create your Group today! Create Your Group Today!
</h1> </h1>
</div> </div>
<div class="row"> <div class="row">
@@ -117,12 +117,11 @@
class="btn btn-primary create-group" class="btn btn-primary create-group"
@click="launchModal('create-page')" @click="launchModal('create-page')"
> >
Create Your New Group Create Your New Group!
</button> </button>
</div> </div>
</div> </div>
<div class="row pricing"> <div class="row pricing justify-content-center align-items-center">
<div class="col-5">
<div class="dollar"> <div class="dollar">
$ $
</div> </div>
@@ -133,13 +132,9 @@
<div>Group Owner</div> <div>Group Owner</div>
<div>Subscription</div> <div>Subscription</div>
</div> </div>
</div>
<div class="col-1">
<div class="plus"> <div class="plus">
+ +
</div> </div>
</div>
<div class="col-6">
<div class="dollar"> <div class="dollar">
$ $
</div> </div>
@@ -154,7 +149,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -165,8 +159,8 @@
.dollar { .dollar {
position: absolute; position: absolute;
left: -1em; left: -16px;
top: 1em; top: 16px;
} }
.purple-box { .purple-box {
@@ -191,9 +185,9 @@
background: #432874; background: #432874;
background: linear-gradient(180deg, #4F2A93 0%, #432874 100%); background: linear-gradient(180deg, #4F2A93 0%, #432874 100%);
color: #fff; color: #fff;
padding: 2em; padding: 32px;
height: 340px; height: 340px;
margin-bottom: 2em; margin-bottom: 32px;
margin-left: -12px; margin-left: -12px;
margin-right: -12px; margin-right: -12px;
@@ -217,6 +211,7 @@
.box { .box {
height: 416px; height: 416px;
border-radius: 8px;
} }
h2 { h2 {
@@ -259,17 +254,19 @@
button.create-group { button.create-group {
width: 330px; width: 330px;
height: 96px; height: 96px;
border-radius: 8px;
font-size: 1.5rem;
} }
.purple-header { .purple-header {
color: #6133b4; color: #6133b4;
font-size: 48px; font-size: 48px;
margin-top: 1em; margin-top: 16px;
} }
.pricing { .pricing {
margin-top: 2em; margin-top: 32px;
margin-bottom: 4em; margin-bottom: 64px;
.dollar, .number, .name { .dollar, .number, .name {
display: inline-block; display: inline-block;
@@ -278,35 +275,37 @@
} }
.plus { .plus {
font-size: 34px; font-size: 2.125rem;
color: #a5a1ac; color: #a5a1ac;
margin-left: 16px;
margin-right: 16px;
} }
.dollar { .dollar {
margin-bottom: 1.5em; margin-bottom: 24px;
font-size: 32px; font-size: 2rem;
font-weight: bold; font-weight: bold;
} }
.name { .name {
font-size: 24px; font-size: 1.5rem;
margin-bottom: .8em; margin-left: 8px;
margin-left: .5em; margin-right: 8px;
} }
.number { .number {
font-size: 72px; font-size: 4.5rem;
font-weight: bolder; font-weight: bolder;
} }
} }
.payment-options { .payment-options {
margin-bottom: 4em; margin-bottom: 64px;
.purple-box { .purple-box {
background-color: #4f2a93; background-color: #4f2a93;
color: #fff; color: #fff;
padding: .5em; padding: 8px;
border-radius: 8px; border-radius: 8px;
width: 200px; width: 200px;
height: 215px; height: 215px;
@@ -320,7 +319,7 @@
.name { .name {
width: 100px; width: 100px;
margin-left: .3em; margin-left: 4.8px;
} }
.plus { .plus {