Change UI

Author: Stigmatoz

src/components/Dashboad.vue

@@ -57,10 +57,6 @@ function openChart(type: TypeOfChart) {
 </script>
 
 <style scoped>
-.main {
-  width: 80%;
-  margin: auto;
-}
 .chart {
   margin: 20px 0;
   width: 80%;

src/components/Limits.vue

@@ -8,6 +8,7 @@
       {{ t('limitsTip.message') }}
     </p>
     <ListWithTimeComponent :type="ListWithTime.Limits" />
+    <PromoClearYouTube />
   </div>
 </template>
 
@@ -19,6 +20,7 @@ export default {
 
 <script lang="ts" setup>
 import ListWithTimeComponent from '../components/ListWithTime.vue';
+import PromoClearYouTube from '../components/PromoClearYouTube.vue';
 import { ListWithTime } from '../utils/enums';
 import { useI18n } from 'vue-i18n';
 

src/components/Notifications.vue

@@ -32,6 +32,7 @@
         {{ t('notificationTime.description') }}
       </p>
       <ListWithTimeComponent :type="ListWithTime.Notifications" />
+      <PromoClearYouTube />
     </div>
     <div class="settings-item">
       <label class="setting-header">{{ t('notificationMessage.message') }}</label>
@@ -73,6 +74,7 @@ import {
 import { convertHHMMToSeconds, convertSecondsToHHMM } from '../utils/converter';
 import { Time } from '../utils/time';
 import ListWithTimeComponent from '../components/ListWithTime.vue';
+import PromoClearYouTube from '../components/PromoClearYouTube.vue';
 import { ListWithTime } from '../utils/enums';
 import Browser from 'webextension-polyfill';
 import { Messages } from '../utils/messages';

src/components/PromoClearYouTube.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="review-block" v-if="showReview && canShowPromo">
     <p>{{ t('promoClearYoutube.message') }}</p>
-    <img height="15" src="../assets/icons/close.svg" @click="closeBlock()" />
-    <input type="button" :value="t('promoClearYoutube.description')" @click="openStore()" />
+    <div class="btn-block">
+      <img height="15" src="../assets/icons/close.svg" @click="closeBlock()" />
+      <input type="button" :value="t('promoClearYoutube.description')" @click="openStore()" />
+    </div>
   </div>
 </template>
 
@@ -13,52 +15,59 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { injecStorage } from '../storage/inject-storage';
 import { StorageParams } from '../storage/storage-params';
 import { CHROME_STORE_CLEAR_YOUTUBE_URL } from '../utils/chrome-url';
 import { usePromoExtension } from '../compositions/usePromoExtension';
+import { computedAsync } from '@vueuse/core';
 
 const { t } = useI18n();
 
 const settingsStorage = injecStorage();
-const showReview = ref<boolean>();
+const showReview = ref<boolean>(true);
 
-const canShowPromo = computed(async () => await usePromoExtension());
+const canShowPromo = computedAsync(async () => await usePromoExtension());
 
 async function closeBlock() {
   showReview.value = false;
   await settingsStorage.saveValue(StorageParams.PROMO_CLEAR_YOUTUBE, true);
 }
 
 async function openStore() {
+  showReview.value = false;
   window.open(CHROME_STORE_CLEAR_YOUTUBE_URL, '_blank');
   await settingsStorage.saveValue(StorageParams.PROMO_CLEAR_YOUTUBE, true);
 }
 </script>
 
 <style scoped>
 .review-block {
-  width: -webkit-fill-available;
-  position: fixed;
-  bottom: 0;
-  padding: 8px 20px;
+  margin: 20px 0 20px 0;
+  padding: 10px;
   font-size: 14px;
   background-color: #efefef;
+  border-radius: 10px;
+  min-width: 655px;
+}
+.review-block .btn-block {
+  margin: 8px 5px 0 0;
+  vertical-align: top;
+  float: right;
 }
 .review-block input[type='button'] {
-  margin: 0 20px 0 0;
   float: right;
   width: auto;
 }
 .review-block p {
   display: inline-block;
-  margin: 8px;
-  font-size: 17px;
+  margin: 0 10px;
+  font-size: 16px;
+  width: 70%;
 }
 .review-block img {
-  padding: 9px 0 0 0;
+  margin-left: 8px;
   cursor: pointer;
   float: right;
 }

src/pages/Dashboard.vue

@@ -43,7 +43,9 @@
       >
 
       <div class="settings-content">
-        <WhiteList v-if="selectedTab == SettingsTab.WhiteList" />
+        <div class="main">
+          <WhiteList v-if="selectedTab == SettingsTab.WhiteList" />
+        </div>
       </div>
     </div>
 
@@ -62,7 +64,9 @@
       >
 
       <div class="settings-content">
-        <Limits v-if="selectedTab == SettingsTab.Limits" />
+        <div class="main">
+          <Limits v-if="selectedTab == SettingsTab.Limits" />
+        </div>
       </div>
     </div>
     <div class="settings-tab">
@@ -80,7 +84,9 @@
       >
 
       <div class="settings-content">
-        <DailyNotifications v-if="selectedTab == SettingsTab.Notifications" />
+        <div class="main">
+          <DailyNotifications v-if="selectedTab == SettingsTab.Notifications" />
+        </div>
       </div>
     </div>
 
@@ -99,7 +105,9 @@
       >
 
       <div class="settings-content">
-        <GeneralSettings v-if="selectedTab == SettingsTab.GeneralSettings" />
+        <div class="main">
+          <GeneralSettings v-if="selectedTab == SettingsTab.GeneralSettings" />
+        </div>
       </div>
     </div>
 
@@ -118,7 +126,9 @@
       >
 
       <div class="settings-content">
-        <About v-if="selectedTab == SettingsTab.About" />
+        <div class="main">
+          <About v-if="selectedTab == SettingsTab.About" />
+        </div>
       </div>
     </div>
   </div>
@@ -167,6 +177,10 @@ function selectTab(value: SettingsTab) {
 </script>
 
 <style scoped>
+.main {
+  width: 80%;
+  margin: auto;
+}
 .header-block .title {
   vertical-align: top;
   margin-top: 15px;