minor UI/UX work

src/App.vue

@@ -4,9 +4,25 @@
     <v-main>
       <router-view />
     </v-main>
-    <v-footer class="legal">
-      <router-link to="/privacy">Privacy Policy</router-link>
-      <router-link to="/tos">Terms of Service</router-link>
+    <v-footer class="text-center">
+      <v-row>
+        <v-col cols="12">
+          <div class="legal py-2">
+            <router-link to="/privacy">Privacy Policy</router-link>
+            <router-link to="/tos">Terms of Service</router-link>
+          </div>
+        </v-col>
+        <v-col cols="12">
+          This tool uses <a href="https://github.com/bellingcat/auto-archiver">Bellingcat's Auto Archiver</a> to
+          archive online content. 
+          <br/>For more information see
+          <a href="https://github.com/bellingcat/auto-archiver">our Github repository</a>
+          and the <a
+            href="https://www.bellingcat.com/resources/2022/09/22/preserve-vital-online-content-with-bellingcats-auto-archiver-tool/">associated
+            article</a>.
+        </v-col>
+      </v-row>
+
     </v-footer>
   </v-app>
 </template>
@@ -31,13 +47,10 @@ export default {
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
-  /* height: 100vh; */
 }
 
 .pane-l {
   max-width: 1200px;
-  /* margin-left: auto;
-  margin-right: auto; */
 }
 
 .bg {
@@ -52,11 +65,17 @@ html {
   margin-left: 2em;
   margin-right: 2em;
   color: inherit !important;
+  font-weight: 500;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 0.2em 0.4em;
 }
 
-.legal {
-  justify-content: center;
-  max-height: 50px;
+footer, .v-footer, .v-footer div {
+  margin: 0px;
+  padding: 0px;
+}
+.v-footer {
+  max-height: 125px;
 }
 
 ol,

src/components/ArchiveUrl.vue

@@ -20,7 +20,8 @@
               density="compact" :disabled="!groupsLoaded"></v-select>
           </v-col>
           <v-col cols="12" md="4" class="text-right">
-            <v-btn @click="archiveUrl" color="primary" :disabled="!validUrl || loadingGroups || loadingArchive || (!public && group == -1)">
+            <v-btn @click="archiveUrl" color="primary"
+              :disabled="!validUrl || loadingGroups || loadingArchive || (!public && group == -1)">
               Archive
             </v-btn>
           </v-col>
@@ -32,14 +33,16 @@
               Archive in progress task id = <code>{{ taskId }}</code>
             </p>
             <v-alert color="success" icon="mdi-information" v-if="archiveResult">
-              Archived successfully with id {{ taskId }} available <a :href="getUrlFromResult(archiveResult)" target="_blank">here</a>.
+              Archived successfully with id {{ taskId }} available <a :href="getUrlFromResult(archiveResult)"
+                target="_blank">here</a>.
             </v-alert>
             <v-alert color="warning" icon="mdi-alert" v-if="archiveFailure">
-              Failure: {{archiveFailure}} 
+              Failure: {{ archiveFailure }}
             </v-alert>
             <p v-if="validUrl">
-              You can <strong v-if="archiveFailure">still</strong> <router-link :to="`/urls?url=${encodeURIComponent(url)}`"
-                target="_blank"><v-icon>mdi-open-in-new</v-icon> search for archives</router-link> of
+              You can <strong v-if="archiveFailure">still</strong> <router-link
+                :to="`/urls?url=${encodeURIComponent(url)}`" target="_blank"><v-icon>mdi-open-in-new</v-icon> search for
+                archives</router-link> of
               this URL.
             </p>
           </v-col>
@@ -65,7 +68,7 @@ export default {
       groupsLoaded: false,
       availableGroups: [],
 
-      url: "",
+      url: "https://t.me/cnn_world_news/34794",
       public: true,
       group: -1,
       loadingArchive: false,
@@ -95,11 +98,9 @@ export default {
       if (!val) this.loadGroups();
     },
     url(val) {
-      if (this.validUrl) {
-        this.archiveResult = null;
-        this.archiveFailure = null;
-        this.taskId = null;
-      }
+      this.archiveResult = null;
+      this.archiveFailure = null;
+      this.taskId = null;
     },
   },
   methods: {
@@ -134,7 +135,6 @@ export default {
           return response.json();
         })
         .then(res => {
-          console.log("archiveUrl response", res);
           this.taskId = res.id;
           this.showSnackbar(`Your URL is being archived with id ${this.taskId}!`, "green");
           this.pollForArchiveResults();

src/components/NavBar.vue

@@ -33,7 +33,7 @@
       </template>
       <v-list>
         <v-list-item to="urls">
-          <v-btn prepend-icon="mdi-link" variant="plain">URL</v-btn>
+          <v-btn prepend-icon="mdi-magnify" variant="plain">Search Archives</v-btn>
         </v-list-item>
         <v-list-item to="sheets">
           <v-btn prepend-icon="mdi-table-large" variant="plain">Sheet</v-btn>

src/views/HomeView.vue

@@ -2,11 +2,6 @@
   <v-container class="pane" fluid>
     <v-row>
       <v-col>
-        <v-alert color="#f2d97c" icon="mdi-alert">
-          This is a prototype demo service provided on a
-          best-effort basis. <br />Do not use for mission critical or sensitive
-          data.
-        </v-alert>
         <v-alert color="orange" icon="mdi-information" v-if="user && !user.active">
           To use this tool you need a Google account and <strong>permission from the Bellingcat team</strong>.<br />
           You can do so HERE: TODO.
@@ -16,21 +11,17 @@
             <v-card-title class="text-center">
               Welcome to the Auto Archiver Setup Tool
             </v-card-title>
+            <v-alert color="#f2d97c" icon="mdi-alert">
+              This is a prototype demo service provided on a
+              best-effort basis. <br />Do not use for mission critical or sensitive
+              data.
+            </v-alert>
             <p>
-              This tool can be used to archive digital content via single <router-link to="/urls">URLs</router-link> or
-              <router-link to="/sheets">Google sheets</router-link>.
+              This tool can be used to archive digital content via single URL or Google Sheets, you can also <router-link to="/urls">search for archive content</router-link>.
             </p>
             <p v-if="!user || !user.active">
               To use this tool you need a Google account and <strong>permission from the Bellingcat team</strong>.
             </p>
-            <p>
-              This tool uses <a href="https://github.com/bellingcat/auto-archiver">Bellingcat's Auto Archiver</a> to
-              archive online content. For more information about the Auto Archiver see
-              <a href="https://github.com/bellingcat/auto-archiver">our Github repository</a>
-              and the <a
-                href="https://www.bellingcat.com/resources/2022/09/22/preserve-vital-online-content-with-bellingcats-auto-archiver-tool/">associated
-                article</a>.
-            </p>
           </v-card-text>
         </v-card>
       </v-col>

src/views/PrivacyView.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="pane">
     <h2>Bellingcat Privacy Policy</h2>
     <p>
       Your privacy is important to us. It is Bellingcat&#39;s policy to respect

src/views/TOSView.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="pane">
     <h2>Bellingcat Terms of Service</h2>
     <p>
       These Terms of Service govern your use of the website located at