Repository: CryptoBlades/cryptoblades
File: frontend/src/components/Banner.vue (Vue)

Code before:
<template>
  <div>
    <div v-if="!hidden" class="banner">
        <span class="text">{{text}}</span>
        <a :href="link" class="link" target="_blank" rel="noopener noreferrer">
          <button class="button" @click="hidden=true">{{linkText}}</button>
        </a>
        <svg @click="hidden=true" class="closeBtn" width="27.667" height="27.667" viewBox="0 0 27.667 27.667">
            <g id="Group_831" data-name="Group 831" transform="translate(-293 -654)">
              <rect id="Rectangle_904" data-name="Rectangle 904" width="1.043" height="6.777" rx="0.521" transform="translate(300.248 661.878) rotate(-45)"/>
              <rect id="Rectangle_905" data-name="Rectangle 905" width="1.043" height="7.771" rx="0.521" transform="translate(306.171 667.8) rotate(-45)"/>
              <rect id="Rectangle_906" data-name="Rectangle 906" width="1.043" height="15.64" rx="0.521" transform="translate(311.703 661.409) rotate(45)"/>
              <path id="Subtraction_2" data-name="Subtraction 2"
                d="M13.834,27.667A13.837,13.837,0,0,1,8.449,1.087,13.837,13.837,0,0,1,19.219,26.58,13.752,13.752,0,0,1,13.834,27.667Zm0-26.6A12.772,
                12.772,0,0,0,8.864,25.6,12.772,12.772,0,0,0,18.8,2.069,12.7,12.7,0,0,0,13.834,1.065Z"
                transform="translate(293 654)"/>
            </g>
        </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ['text', 'linkText', 'link'],
  data() {
    return {
      hidden: false,
    };
  },
};

</script>

Review comment (suggestion):
I'm not sure what are the requirements in this task, but are we sure we want it always showing, even after user dismisses it (on component rerender, so, coming to the site for the second time), seems a bit aggressive. We could store the hidden in localStorage and save that user dismissed it, but as I mentioned before, I do not know what the requirements here are

Code after:
<template>
  <div>
    <div v-if="!hidden" class="banner">
        <span class="text">{{text}}</span>
        <a :href="link" class="link" target="_blank" rel="noopener noreferrer">
          <button class="button">{{linkText}}</button>
        </a>
        <svg @click="hide" class="closeBtn" width="27.667" height="27.667" viewBox="0 0 27.667 27.667">
            <g id="Group_831" data-name="Group 831" transform="translate(-293 -654)">
              <rect id="Rectangle_904" data-name="Rectangle 904" width="1.043" height="6.777" rx="0.521" transform="translate(300.248 661.878) rotate(-45)"/>
              <rect id="Rectangle_905" data-name="Rectangle 905" width="1.043" height="7.771" rx="0.521" transform="translate(306.171 667.8) rotate(-45)"/>
              <rect id="Rectangle_906" data-name="Rectangle 906" width="1.043" height="15.64" rx="0.521" transform="translate(311.703 661.409) rotate(45)"/>
              <path id="Subtraction_2" data-name="Subtraction 2"
                d="M13.834,27.667A13.837,13.837,0,0,1,8.449,1.087,13.837,13.837,0,0,1,19.219,26.58,13.752,13.752,0,0,1,13.834,27.667Zm0-26.6A12.772,
                12.772,0,0,0,8.864,25.6,12.772,12.772,0,0,0,18.8,2.069,12.7,12.7,0,0,0,13.834,1.065Z"
                transform="translate(293 654)"/>
            </g>
        </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ['text', 'linkText', 'link'],
  data() {
    return {
      hidden: false,
    };
  },
  created() {
    if(localStorage.getItem('bannerHidden') === 'true'){
      this.hidden = true;