User confirmation ui

Gemfile.lock

@@ -307,8 +307,5 @@ DEPENDENCIES
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
 
-RUBY VERSION
-   ruby 2.3.0p0
-
 BUNDLED WITH
    1.12.5

app/assets/javascripts/users.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/application.scss

@@ -13,3 +13,10 @@
  */
 @import "bootstrap-sprockets";
 @import "bootstrap";
+
+@import url(https://fonts.googleapis.com/css?family=Raleway|Quicksand);
+@import "default_theme/partials/variables";
+@import "default_theme/partials/body";
+@import "default_theme/partials/typography";
+@import "default_theme/partials/cards";
+@import "default_theme/partials/inputs";

app/assets/stylesheets/default_theme/partials/_body.scss

@@ -0,0 +1,4 @@
+body {
+  background-color: $background-color;
+  text-align: center;
+}

app/assets/stylesheets/default_theme/partials/_cards.scss

@@ -0,0 +1,37 @@
+.card {
+  background-color: #FFF;
+  margin: 20px auto;
+  padding: 30px;
+  border-radius: 10px;
+  &--body {
+    @extend .card  !optional;
+    width: 800px;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+  }
+  &--recipient {
+    @extend .card  !optional;
+    margin: 20px 18px;
+    display: inline-block;
+    width: $card-recipient-width;
+    background-color: #FFF;
+    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16);
+    padding: 10px 0;
+    cursor: pointer;
+    &--details {
+      background-color: $input-background-color;
+      padding: 10px 0;
+      margin: 10px 0;
+    }
+
+    &:hover {
+      box-shadow: 0px 0px 6px 0px $input-click-color;
+    }
+    &--selected {
+      background-color: $input-click-color;
+    }
+  }
+  &--container {
+    width: 840px;
+    margin: 0 auto;
+  }
+}

app/assets/stylesheets/default_theme/partials/_inputs.scss

@@ -0,0 +1,81 @@
+input {
+  font-size: 18px;
+  font-family: $body-font-family;
+  width: 296px;
+  height: 48px;
+  padding: 0 10px;
+  margin: 14px;
+  &[type="password"] {
+    background-color: $input-background-color;
+    border: none;
+    text-align: center;
+    color: $soft-gray;
+    &:focus {
+      outline: none;
+    }
+  }
+  &[type="submit"] {
+    background-color: #EACC96;
+    color: #FFF;
+    border: none;
+  }
+  &[type="text"] {
+    background-color: $input-background-color;
+    border: none;
+    text-align: center;
+    color: $soft-gray;
+    &:focus {
+      outline: none;
+    }
+    & ~ span {
+      display: inline-block;
+      top: 35%;
+      font-family: $body-font-family;
+      font-size: 16px;
+    }
+  }
+  &[type="radio"] {
+    position: absolute;
+    visibility: hidden;
+    &:active {
+      box-shadow: none;
+    }
+  }
+}
+
+label {
+  color: rgba(0,0,0,.45);
+  font-size: 18px;
+  font-family: $input-background-color;
+}
+.toggle {
+  width: 700px;
+  display: inline-block;
+  & > a {
+    border: none;
+    border-radius: 0;
+    padding: 20px;
+    background-color: $input-background-color;
+    cursor: pointer;
+    color: $soft-gray;
+
+    &:hover:not(.checked), &:active:not(.checked), &:focus:not(.checked) {
+      background-color: darken($input-background-color, 20%) !important;
+      outline: none;
+      & ~ .checked {
+        background-color: $input-toggle-color;
+      }
+    }
+
+    & ~ .checked {
+      background-color: $input-toggle-color;
+      box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+      cursor: default;
+      color: #FFF;
+    }
+  }
+}
+
+.text--input--note {
+  position: relative;
+}

app/assets/stylesheets/default_theme/partials/_typography.scss

@@ -0,0 +1,22 @@
+h1 {
+  font-size: 38px;
+  font-family: $heading-font-family;
+}
+
+h2 {
+  font-size: 26px;
+  font-family: $heading-font-family;
+  &.decorated {
+    @extend h2  !optional;
+    margin: 20px auto;
+    padding: 20px 0px;
+    width: 296px;
+    border-top: solid 1px $soft-gray;
+    border-bottom: solid 1px $soft-gray;
+  }
+}
+
+p {
+  font-size: 18px;
+  font-family: $body-font-family;
+}

app/assets/stylesheets/default_theme/partials/_variables.scss

@@ -0,0 +1,19 @@
+// Default Colors
+$input-background-color:      rgba(200,192,169, .2);
+$body-background-color:       rgb(255,255,255);
+$input-click-color:           rgb(234,204,150);
+$background-color:            #FBF4ED;
+$input-toggle-color:          rgba(200,192,169, .92);
+$secondary-color:             rgba(200,192,166, .45);
+$thrird-color:                rgba(200,192,166, .75);
+
+//Default Fonts
+$body-font-family:            'Raleway', sans-serif;
+$heading-font-family:         'Quicksand', sans-serif;
+
+//Font colors
+$soft-gray:                   rgba( 0 , 0 , 0 , .45);
+
+$card-body-width:             800px;
+$card-recipient-width:        240px;
+$card-body-padding-sides:     40px;

app/assets/stylesheets/users.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the users controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/controllers/users_controller.rb

@@ -0,0 +1,9 @@
+class UsersController < ApplicationController
+  def edit
+    @user = User.new
+  end
+
+  def update
+    redirect_to :signup
+  end
+end

app/helpers/users_helper.rb

@@ -0,0 +1,2 @@
+module UsersHelper
+end

app/views/layouts/application.html.erb

@@ -10,6 +10,8 @@
 
   <p class="notice"><%= notice %></p>
   <p class="alert"><%= alert %></p>
+  <%= image_tag asset_url("christmas_logo.png"), alt: "Logo", class: "header--logo" %>
+  <h1>Very Long Organization Name</h1>
 
   <%= yield %>
 

app/views/users/edit.html.erb

@@ -0,0 +1,103 @@
+<section class="card--body">
+  <h2 class="">Signup to Share Happiness</h2>
+  <h2 class="decorated">Signup to Share Happiness</h2>
+  <p>
+    Welcome <strong>Mary</strong>!
+    <br>
+    If you're feeling kind and want to sign up for this campaign, please create a password.
+  </p>
+
+  <%= form_for @user, url: 'signup' do |f| %>
+    <%= label_tag :password %>
+    <br>
+    <%= password_field_tag :password %>
+    <br>
+    <%= label_tag :password_confirmation %>
+    <br>
+    <%= password_field_tag :password_confirmation  %>
+    <br>
+    <%= f.submit %>
+  <% end %>
+
+  <div class="btn-group btn-group-justified toggle" role="group" aria-label="...">
+    <a type="radio" name="gender" class="btn btn-default">Boy</a>
+    <a type="radio" name="gender" class="btn btn-default checked">Girl</a>
+  </div>
+  <div class="btn-group btn-group-justified toggle" role="group">
+    <a type="radio" role="group" name="age-group" class="btn btn-default">0-5</a>
+    <a type="radio" role="group" name="age-group" class="btn btn-default checked">6-11</a>
+    <a type="radio" role="group" name="age-group" class="btn btn-default">12-15</a>
+    <a type="radio" role="group" name="age-group" class="btn btn-default">16-18</a>
+    <a type="radio" role="group" name="age-group" class="btn btn-default">Adult</a>
+  </div>
+  <div class="text--input--note">
+    <input type="text" name="gift" placeholder="Enter Specific Items">
+    <span style="position: absolute;">(optional)</span>
+  </div>
+</section>
+<section class="card--container">
+  <div class="card--recipient">
+    <div class="card--recipient--details">
+      <span>John</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>Male</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>17</span>
+    </div>
+    <p>
+      Hoping to get:
+      <br>
+      lalala
+    </p>
+  </div>
+  <div class="card--recipient">
+    <div class="card--recipient--details">
+      <span>John</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>Male</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>17</span>
+    </div>
+    <p>
+      Hoping to get:
+      <br>
+      lalala
+    </p>
+  </div>
+  <div class="card--recipient">
+    <div class="card--recipient--details">
+      <span>John</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>Male</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>17</span>
+    </div>
+    <p>
+      Hoping to get:
+      <br>
+      lalala
+    </p>
+  </div>
+  <div class="card--recipient">
+    <div class="card--recipient--details">
+      <span>John</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>Male</span>
+    </div>
+    <div class="card--recipient--details">
+      <span>17</span>
+    </div>
+    <p>
+      Hoping to get:
+      <br>
+      lalala
+    </p>
+  </div>
+</section>

config/routes.rb

@@ -8,6 +8,9 @@
   # You can have the root of your site routed with "root"
   root 'pages#home'
 
+  get 'users/signup' => 'users#edit', as: :signup
+  post 'users/signup' => 'users#update'
+
   # Example of regular route:
   #   get 'products/:id' => 'catalog#view'
 

spec/controllers/users_controller_spec.rb

@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe UsersController, type: :controller do
+
+end

spec/helpers/users_helper_spec.rb

@@ -0,0 +1,15 @@
+require 'rails_helper'
+
+# Specs in this file have access to a helper object that includes
+# the UsersHelper. For example:
+#
+# describe UsersHelper do
+#   describe "string concat" do
+#     it "concats two strings with spaces" do
+#       expect(helper.concat_strings("this","that")).to eq("this that")
+#     end
+#   end
+# end
+RSpec.describe UsersHelper, type: :helper do
+  pending "add some examples to (or delete) #{__FILE__}"
+end