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

Code before:
<template>
  <div class="wrapper">
    <div class="mainWrapper">
      <div class="arenaSignup">
        <h1 class="title">
          {{$t('pvp.arenaSignUp')}}
        </h1>
        <p>
          {{$t('pvp.enterAndWin')}}
          ($SKILL).</p>
        <div class="buttonsWrapper">
          <div class="buttonWrapper">
            <pvp-button
              class="pvpButton"
              @click="handleEnterArenaClick"
              :buttonText="$t('pvp.enterArena')"
            />
          </div>
          <div class="buttonWrapperSecondary">
            <pvp-button
              @click="leaveArena"
              :disabled="loading"
              :buttonText="$t('pvp.leaveArena')"
              :secondary="true"
            />
          </div>
        </div>
        <div class="bottomWrapper">
          <div class="bottomWrapperNav">
            <button @click="setTab(0)" :class="tab === 0 && 'active'">
              {{$t('pvp.equipment')}}
            </button>
            <button @click="setTab(1)" :class="tab === 1 && 'active'">
              {{$t('pvp.duelHistory')}}
            </button>
          </div>
          <div class="bottomWrapperInner">
            <div v-if="tab === 0" class="bottomWeapons">
              <pvp-weapon
                v-if="activeWeaponWithInformation.weaponId"
                :weapon="activeWeaponWithInformation.information"
                :weaponId="activeWeaponWithInformation.weaponId"
              />
              <br/>
              <pvp-shield
                v-if="activeShieldWithInformation.shieldId"
                :shield="activeShieldWithInformation.information"
                :shieldId="activeShieldWithInformation.shieldId"
              />

Review comment (suggestion):
Just so you know, if you have boolean props you can just add it without anything iirc
so, instead of `:secondary="true"` you should be able to use `secondary`

Code after:
<template>
  <div class="wrapper">
    <div class="mainWrapper">
      <div class="arenaSignup">
        <h1 class="title">
          {{$t('pvp.arenaSignUp')}}
        </h1>
        <p>
          {{$t('pvp.enterAndWin')}}
          ($SKILL).</p>
        <div class="buttonsWrapper">
          <div class="buttonWrapper">
            <pvp-button
              class="pvpButton"
              @click="handleEnterArenaClick"
              :buttonText="$t('pvp.enterArena')"
            />
          </div>
          <div class="buttonWrapperSecondary">
            <pvp-button
              @click="leaveArena"
              :disabled="loading"
              :buttonText="$t('pvp.leaveArena')"
              secondary
            />
          </div>
        </div>
        <div class="bottomWrapper">
          <div class="bottomWrapperNav">
            <button @click="setTab(0)" :class="tab === 0 && 'active'">
              {{$t('pvp.equipment')}}
            </button>
            <button @click="setTab(1)" :class="tab === 1 && 'active'">
              {{$t('pvp.duelHistory')}}
            </button>
          </div>
          <div class="bottomWrapperInner">
            <div v-if="tab === 0" class="bottomWeapons">
              <pvp-weapon
                v-if="activeWeaponWithInformation.weaponId"
                :weapon="activeWeaponWithInformation.information"
                :weaponId="activeWeaponWithInformation.weaponId"
              />
              <br/>
              <pvp-shield
                v-if="activeShieldWithInformation.shieldId"
                :shield="activeShieldWithInformation.information"
                :shieldId="activeShieldWithInformation.shieldId"
              />