Adjustments on responsiveness

Author: rafaelcamargo

website/src/scripts/components/btn/btn.js

@@ -10,7 +10,7 @@ export default {
   computed: {
     classes() {
       return {
-        [`btn-${this.theme}`]: ['primary'].includes(this.theme),
+        [`btn-${this.theme}`]: ['primary', 'secondary'].includes(this.theme),
         [`btn-${this.size}`]: ['small'].includes(this.size)
       };
     },

website/src/scripts/components/btn/btn.test.js

@@ -17,6 +17,11 @@ describe('Btn', () => {
     expect(wrapper.classes()).toContain('btn-primary');
   });
 
+  it('should render a secondary btn', () => {
+    const wrapper = createComponent({theme: 'secondary'});
+    expect(wrapper.classes()).toContain('btn-secondary');
+  });
+
   it('should render a small btn', () => {
     const wrapper = createComponent({size: 'small'});
     expect(wrapper.classes()).toContain('btn-small');

website/src/scripts/components/credits/credits.html

@@ -1,8 +1,14 @@
 <footer class="credits">
   <p>
-    Criada por <a href="https://github.com/filipedeschamps" target="_blank">Felipe Deschamps</a>
-    e mantida por essa bela comunidade de
+    Criada por <a href="https://github.com/filipedeschamps" target="_blank">Felipe Deschamps</a>.
+    <br>
+    Mantida por essa bela comunidade de
     <a href="https://github.com/filipedeschamps/cep-promise/graphs/contributors" target="_blank">colaboradores</a>.
+  </p>
+  <a class="credits-contribute-button-link" href="https://github.com/filipedeschamps/cep-promise" target="_blank">
+    <btn>Contribua</btn>
+  </a>
+  <p>
     Website criado por <a href="https://rafaelcamargo.com" target="_blank">Rafael Camargo</a>.
   </p>
 </footer>

website/src/scripts/components/credits/credits.js

@@ -1,7 +1,11 @@
 import '@styles/credits.styl';
+import btn from '@scripts/components/btn/btn';
 import template from './credits.html';
 
 export default {
   name: 'credits',
+  components: {
+    btn
+  },
   template
 };

website/src/scripts/components/credits/credits.test.js

@@ -11,13 +11,13 @@ describe('Credits', () => {
     expect(wrapper.classes()).toEqual(['credits']);
   });
 
-  it('should contain one paragraph', () => {
+  it('should contain two paragraph', () => {
     const wrapper = mountComponent();
-    expect(wrapper.findAll('p').length).toEqual(1);
+    expect(wrapper.findAll('p').length).toEqual(2);
   });
 
-  it('should contain three links', () => {
+  it('should contain four links', () => {
     const wrapper = mountComponent();
-    expect(wrapper.findAll('a').length).toEqual(3);
+    expect(wrapper.findAll('a').length).toEqual(4);
   });
 });

website/src/scripts/components/intro/intro.html

@@ -7,6 +7,9 @@ <h1>Simplicidade deslumbrante.</h1>
         <router-link :to="{name: 'trial'}">
           <btn theme="primary">Experimente</btn>
         </router-link>
+        <router-link :to="{name: 'use'}">
+          <btn theme="secondary">Use</btn>
+        </router-link>
       </div>
     </row-item>
     <row-item size="6">

website/src/styles/_native.styl

@@ -36,6 +36,7 @@ input
   border 1px solid $color-grey
   outline 0
   border-radius(3px)
+  box-sizing(border-box)
   &:focus,
   &:active
     border 1px solid alpha($color-blue, .3)

website/src/styles/_variables.styl

@@ -36,3 +36,11 @@ $path-images = '../images/'
 
 // ANIMATION
 $animation-ease-default = cubic-bezier(0.080, 0.690, 0.485, 0.990)
+
+// BREAKPOINTS
+$screen-xs-max = 767px
+$screen-sm-min = 768px
+$screen-sm-max = 1024px
+$screen-md-min = 1025px
+$screen-md-max = 1439px
+$screen-lg-min = 1440px

website/src/styles/btn.styl

@@ -4,6 +4,7 @@
 .btn
   position relative
   padding 0 15px
+  min-width 100px
   color $color-blue
   background-color transparent
   font-size $font-size-sm
@@ -37,3 +38,11 @@
     &:active
       background-color $color-blue-dark
       color $color-lightest
+  &.btn-secondary
+    background-color transparent
+    color alpha($color-lightest, 0.7)
+    border-color alpha($color-lightest, 0.7)
+    &:hover,
+    &:active
+      background-color transparent
+      color alpha($color-lightest, 0.7)

website/src/styles/credits.styl

@@ -10,3 +10,19 @@
   border 1px solid $color-grey
   border-radius(6px)
   box-sizing(border-box)
+  .credits-contribute-button-link
+    display none
+
++breakpoint('xs')
+  .credits
+    margin 50px auto 20px
+    width 100%
+    border 0
+    border-top 1px solid $color-grey
+    border-radius(0)
+    p
+      &:not(:first-child)
+        margin-top 30px
+    .credits-contribute-button-link
+      display inline-block
+      margin-top 15px