mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-11 13:10:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Style the community form

Browse source 
* Add custom checkboxes
* Reorganize form
* Update copy
* Update signup.hbs with new style
This commit is contained in:
Nate 2021-09-24 15:11:13 -04:00
parent 9168f64bcf
commit 0980bb1f83
4 changed files with 134 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
server/styles.css
View file

@ -83,4 +83,54 @@
margin-right: 0;
}
}
:root {
--color: white;
--disabled: #959495;
}
.checkbox {
color: var(--color);
}
.checkbox--disabled {
color: var(--disabled);
}
.checkbox__control {
width: 1.5rem;
height: 1.5rem;
border: 1px solid white;
}
.checkbox__control svg {
transform: scale(0);
transform-origin: center center;
}
.checkbox__input {
}
.checkbox__input * {
}
.checkbox__input input {
opacity: 0;
width: 1.5rem;
height: 1.5rem;
}
.checkbox__input input:focus + .checkbox__control {
box-shadow: 0 0 0 2px #000, 0 0 0 4px #3b57bc99
}
.checkbox__input input:checked + .checkbox__control svg {
transform: scale(1);
}
.checkbox__input input:disabled + .checkbox__control {
color: var(--disabled);
}
}

89
server/templates/community.hbs
View file

@ -1,40 +1,87 @@
{{#> layout }}
<div class="max-w-screen-lg p-10 mx-auto font-thin text-main lg:p-20">
<div class="max-w-screen-lg p-10 mx-auto font-thin text-main lg:p-20">
<h1 class="mb-10 font-display font-extralight">We’re building a community of passionate developers &amp; advocates.</h1>
<p class="mt-5 leading-7">Be the first to join a community of builders that want to make the future.</p>
<p class="mt-5 leading-7">We think there’s a better way to write code, and we hope to share it with you soon.</p>
<p class="mt-5 leading-7">If you would like to get involved early, sign up for the Zed Universe community below and we will let you know when it opens.</p>
<form action="/signups" method="post" class="mt-10">
<input class="block w-full p-5 mt-10 font-thin bg-transparent border border-white" type="text" id="form-email" name="email_address" required minlength="4" placeholder="Your email">
<input class="block w-full p-5 mt-5 font-thin bg-transparent border border-white" type="text" id="form-gh" name="github_login" placeholder="Github Username">
<textarea class="block w-full h-40 p-5 mt-5 font-thin leading-relaxed bg-transparent border border-white" type="text" name="about" placeholder="Tell us about yourself, and your interest Zed. What do you love or hate about your current code editor?"></textarea>
<ul>
<li class="flex flex-row mt-10 text-lg">
<input class="w-8 mt-2 mr-5" value=true name="wants_releases" type="checkbox" id="form-releases" checked>
<div class="flex-1">
<label for="wants_releases">I want to try Zed when it is available</label>
<p class="mt-1 text-sm leading-6 text-gray-400">Get updates on beta releases, and when Zed launches.</p>
<li class="flex flex-row mt-5 text-lg">
<span class="w-6 mt-2 mr-5 checkbox__input">
<input class="absolute" type="checkbox" value=true name="wants_releases">
<span class="flex items-center justify-center checkbox__control">
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
</svg>
</span>
</span>
<div class="flex-1 mt-0.5">
<label for="wants_releases">
<span class="radio__label">Let me know when there is a beta release</span>
</label>
<p class="text-sm leading-6 text-gray-400">
Get updates on early releases, and when Zed launches.
</p>
</div>
</li>
<li class="flex flex-row mt-5 text-lg">
<input class="w-8 mt-2 mr-5" value=true name="wants_updates" type="checkbox" id="form-follow">
<div class="flex-1">
<label for="wants_updates">I’m interested in following Zed's development</label>
<p class="mt-1 text-sm leading-6 text-gray-400">Receive occasional email updates on the development of Zed and it's tech</p>
<span class="w-6 mt-2 mr-5 checkbox__input">
<input class="absolute" type="checkbox" value=true name="wants_updates">
<span class="flex items-center justify-center checkbox__control">
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
</svg>
</span>
</span>
<div class="flex-1 mt-0.5">
<label for="wants_updates">
<span class="radio__label">I’m interested in following Zed's development</span>
</label>
<p class="text-sm leading-6 text-gray-400">
Receive occasional email updates on Zed's progress and the tech we are building.
</p>
</div>
</li>
<li class="flex flex-row mt-5 text-lg">
<input class="w-8 mt-2 mr-5" value=true name="wants_community" type="checkbox" id="form-community" name="community">
<div class="flex-1">
<label for="wants_community">I want to join the Zed Universe community</label>
<p class="mt-1 text-sm leading-6 text-gray-400">Join the waitlist for our alpha tester community to get early access to releases and contribute to Zed's development through testing &amp; feedback.</p>
<span class="w-6 mt-2 mr-5 checkbox__input">
<input class="absolute" type="checkbox" value=true name="wants_community">
<span class="flex items-center justify-center checkbox__control">
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M1 6.38905L4.33333 9.72239L11 0.833496" fill='none' stroke='currentColor' stroke-width="1" stroke-linecap="round"/>
</svg>
</span>
</span>
<div class="flex-1 mt-0.5">
<label for="wants_community">
<span class="radio__label">I want to test early releases & join the Zed community</span>
</label>
<p class="text-sm leading-6 text-gray-400">
Join the waitlist for our alpha tester community to get early access to releases and contribute to Zed's development through testing &amp; feedback.
</p>
</div>
</li>
</ul>
<div class="lg:flex lg:flex-row lg:mt-10">
<input class="block w-full p-5 mt-10 font-thin bg-transparent border border-white lg:mt-0 lg:mr-5" type="text" id="form-email" name="email_address" required minlength="4" placeholder="Your email">
<button href="/story" class="block mt-10 text-lg underline">Join the waitlist.</button>
<input class="block w-full p-5 mt-5 font-thin bg-transparent border border-white lg:mt-0" type="text" id="form-gh" name="github_login" placeholder="Github Username">
</div>
<textarea class="block w-full h-40 p-5 mt-5 font-thin leading-relaxed bg-transparent border border-white" type="text" name="about" placeholder="Tell us a bit about yourself, and your interest Zed. &#10;What do you love or hate about your current code editor?"></textarea>
<button class="block mt-10 text-lg font-thin opacity-100 hover:opacity-80">
Join the waitlist &rarr;
</button>
<p class="mt-10 text-sm leading-relaxed text-gray-500">
We'll never spam you &mdash; You can expect an email every 1 to 3 months from us if you sign up for updates, and occasional emails about public testing releases.
</p>
</form>
<p class="mt-20 text-sm leading-7 text-gray-500">We'll never spam your email &mdash; You can expect an email every 1 to 3 months from us if you sign up for updates, and occasional emails about public testing releases.</p>
</div>
{{/layout}}

4
server/templates/releases.hbs
View file

@ -5,7 +5,7 @@
<h1 class="mb-10 font-display font-extralight">Releases</h1>
<p class="mt-5 leading-7">Zed is currently only available on OS X.</p>
<p class="mt-5 leading-7">We are frequently shipping new versions, check back reguarly to get the most recent version. If you run into an issue you think we might not know about use the "new issue" links by the appropriate version to let us know about it.</p>
<p class="mt-5 leading-7">We are frequently shipping new versions, check back regularly to get the most recent version.</p>
{{#if releases}}
<ul class="mt-10 leading-7">
@ -14,8 +14,6 @@
<a class="text-lg leading-7 underline hover:text-gray-300" href="/releases/{{tag_name}}/{{assets.0.name}}">Zed {{name}}</a></h2>
<p class="mt-2 text-gray-400">
<a class="hover:text-white" href="https://github.com/zed-industries/zed/releases/tag/{{tag_name}}">Release Notes</a>
·
<a class="hover:text-white" href="https://github.com/zed-industries/zed/issues/new?labels=defect&title={{name}}+New+issue">New issue</a>
</p>
</li>
{{/each}}

31
server/templates/signup.hbs
View file

@ -1,19 +1,18 @@
{{#> layout }}
<div class="bg-gray-50 py-10 text-black">
<div class="container mx-auto px-8 md:px-12">
<div class=" text-6xl font-black mb-8">
THANKS
</div>
<div class="text-xl max-w-md">
<p class="mb-8">
Thanks a ton for your interest! We'll add you to our list and let you know when we have something ready
for you to try out.
</p>
<p>
<a href="/" class="font-bold text-yellow-600 hover:text-yellow-700">Back to /</a>
</p>
</div>
</div>
<div class="max-w-screen-lg p-10 mx-auto font-thin text-main lg:p-20">
<h1 class="mb-10 font-display font-extralight">Thanks for signing up!</h1>
<p class="mt-5 leading-7">
We'll add you to our list and let you know when we have something ready for you to try out.
</p>
<p class="mt-5 leading-7">
Thanks for your interest!
</p>
<a href="/" class="block mt-10 text-lg font-thin underline opacity-100 hover:opacity-80">
Back to Home
</a>
</div>
{{/layout}}
{{/layout}}