Sano Genetics Design Task

Style this table according to our brand guidelines!

by mahassan

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
<!--    <thead>
    <tr>
      <th>Study Name</th>
      <th>Run by</th>
      <th>Status</th>
      <th>Enrolled</th>
      <th></th>
    </tr>
    </thead> -->
    <div class='result' v-for='study in studies'>
      <h3>{{ study.title }}</h3>
      <h5>Run by {{ study.researcher }}</h5>
      <p :class='[status? "completed": "in-progress" ]'>{{ study.status }}</p>
      <p class="enrolled"><strong>{{ study.enrolled ? 'Enrolled' : 'Not Enrolled'}}</strong></p>
      <p v-if="study.enrolled"><button>Leave Study</button><p>
      <p v-else><button>Join Study</button></p>
    </div>
  <div>
  </div>
</div>

SCSS

$colour-light-pink: #FFF5F3;
$colour-pink: #F7D2D2;
$colour-red-orange: #F75338,;
$colour-blue: #433EA5;
$colour-burgundy: #54223B;
$colour-green: #4DB7A4;
$colour-white: #fff;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
*{
  margin: 0;
  padding: 0;
}
body{
  background: $colour-light-pink;
  font-family: 'Montserrat', sans-serif;
  .result{
    border:5px solid $colour-pink;
    border-bottom: none;
    margin:0;
    padding: 1rem;
    line-height:1.5rem;
    @media only screen and (min-width: 600px) {
      display: flex;
      }
      button{
    border: 0;
    padding:5px;
    background: $colour-pink;
    width: 100%;
      }
    }
}
      .in-progress{
        background: $colour-blue;
        color: $colour-white;
        border-radius: 10px;
        padding: 4px;
        width: 100px;
      }
      .completed {
        background: $colour-green;
        color: $colour-white;
        border-radius: 10px;
        padding: 4px;
        width: 100px;
      }
      .enrolled{
        color: $colour-red-orange;
      }
      %stats{
        
      }

Vue

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    studies: [{
        'title': 'DNA and Human Traits',
        'researcher': 'Sano Genetics',
        'status': 'Completed',
        'enrolled': true
      },
      {
        'title': 'Marmite',
        'researcher': 'Sano Genetics',
        'status': 'In Progress',
        'enrolled': true
      },
      {
        'title': 'Muscular Dystrophy',
        'researcher': 'Muscular Dystrophy UK',
        'status': 'In Progress',
        'enrolled': true
      },
      {
        'title': 'The Genetics of Autism',
        'researcher': 'Autism Research Center',
        'status': 'Not Started',
        'enrolled': false
      }
    ]
  }
})