Repository: sunner/ChatALL
File: src/components/Notification/UpdateNotificationModal.vue (Vue)

Code before:
<template>
  <div id="snackbar" class="text-center">
    <v-snackbar color="#fff" :vertical="true" :timeout="-1" multi-line v-model="snackbar">
      <span class="text-black text-center font-weight-bold">
        {{ $t('updates.updateAvailable') }}
      </span>
      <span class="text-black text-center">
        {{ $t('updates.currentVersion') }}: {{ versions.current }}
      </span>
      <span class="text-black text-center">
        {{ $t('updates.latestVersion') }}: {{ versions.latest }}
      </span>
      <template v-slot:actions>
        <v-btn prepend-icon="mdi-github" color="#062aaa" variant="tonal" @click="install" class="update-notification-btn">
          {{ $t('updates.downloadFromGitHub') }}
        </v-btn>
        <v-btn  color="red" variant="outlined" @click="skip" class="update-notification-btn">
          {{ $t('updates.skipThisVersion') }}
        </v-btn>
        <v-btn flat class="text-black update-notification-btn" variant="text" @click="snackbar = false">
          {{ $t('updates.close') }}
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { compare } from 'compare-versions';
const { shell } = window.require("electron");

const versions = JSON.parse(localStorage.getItem("chatall-versions"));
const snackbar = ref(false);
if (versions?.latest && versions?.current && compare(versions.latest, versions.current, '>')) {
  if (!versions?.skip || compare(versions.latest, versions.skip, '>')) {
    snackbar.value = true;
  }
}


Review comment (suggestion):
Two suggestions:

1. Move the download button up. It is better to show it in main content in my opinion.
2. Using `color="primary"`

Code after:
<template>
  <div id="snackbar" class="text-center">
    <v-snackbar color="#fff" :vertical="true" :timeout="-1" multi-line v-model="snackbar">
      <span class="text-black text-center font-weight-bold">
        {{ $t('updates.updateAvailable') }}
      </span>
      <span class="text-black text-center">
        {{ $t('updates.currentVersion') }}: {{ versions.current }}
      </span>
      <span class="text-black text-center">
        {{ $t('updates.latestVersion') }}: {{ versions.latest }}
      </span>
      <v-btn prepend-icon="mdi-github" color="primary" variant="tonal" @click="openReleasePage">
        {{ $t('updates.downloadFromGitHub') }}
      </v-btn>
      <template v-slot:actions>
        <v-btn color="primary" @click="skip">
          {{ $t('updates.skipThisVersion') }}
        </v-btn>
        <v-btn color="primary" @click="snackbar = false">
          {{ $t('updates.close') }}
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { compare } from 'compare-versions';
const { shell } = window.require("electron");

const versions = JSON.parse(localStorage.getItem("chatall-versions"));
const snackbar = ref(false);
if (versions?.latest && versions?.current && compare(versions.latest, versions.current, '>')) {
  if (!versions?.skip || compare(versions.latest, versions.skip, '>')) {
    snackbar.value = true;
  }
}