reworked on footer & removed github icon

src/background.ts

@@ -32,7 +32,7 @@ function createWindow() {
   // Create the browser window.
   win = new BrowserWindow({
     width: 1350,
-    height: 1005,
+    height: 955,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info

src/presentation/Bootstrapping/Modules/IconBootstrapper.ts

@@ -4,15 +4,20 @@ import { faGithub } from '@fortawesome/free-brands-svg-icons';
 /** BRAND ICONS (PREFIX: fab) */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 /** REGULAR ICONS (PREFIX: far) */
-import { faFolderOpen, faFolder } from '@fortawesome/free-regular-svg-icons';
+import { faFolderOpen, faFolder, faComment, faSmile } from '@fortawesome/free-regular-svg-icons';
 /** SOLID ICONS (PREFIX: fas (default)) */
-import { faTimes, faFileDownload, faCopy, faSearch, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faFileDownload, faCopy, faSearch, faInfoCircle, faUserSecret, faDesktop, faTag, faGlobe } from '@fortawesome/free-solid-svg-icons';
 
 
 export class IconBootstrapper implements IVueBootstrapper {
     public bootstrap(vue: VueConstructor): void {
         library.add(
             faGithub,
+            faUserSecret,
+            faSmile,
+            faDesktop,
+            faGlobe,
+            faTag,
             faFolderOpen,
             faFolder,
             faTimes,

src/presentation/Scripts/Cards/CardListItem.vue

@@ -75,10 +75,7 @@ export default class CardListItem extends StatefulVue {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
-
+@import "@/presentation/styles/media.scss";
-$big-screen-width: 991px;
-$medium-screen-width: 767px;
-$small-screen-width: 380px;
 
 $card-padding: 30px;
 $card-margin: 15px;

src/presentation/TheFooter/DownloadUrlList.vue

@@ -1,6 +1,11 @@
 <template>
-  <span v-bind:class="{ 'unsupported': !hasCurrentOsDesktopVersion, 'supported': hasCurrentOsDesktopVersion }">
+  <span 
-    For desktop:
+    class="container"
+    v-bind:class="{ 'container_unsupported': !hasCurrentOsDesktopVersion, 'container_supported': hasCurrentOsDesktopVersion }">
+    <span class="description">
+      <font-awesome-icon class="description__icon" :icon="['fas', 'desktop']"  />
+      <span class="description__text">For desktop:</span>
+    </span>
     <span class="urls">
       <span class="urls__url" v-for="os of supportedDesktops" v-bind:key="os">
         <DownloadUrlListItem :operatingSystem="os" />
@@ -33,15 +38,31 @@ export default class DownloadUrlList extends Vue {
 </script>
 
 <style scoped lang="scss">
-.unsupported {
+@import "@/presentation/styles/media.scss";
-  font-size: 0.85em;
+
-}
+.container {
-.supported {
+  display:flex;
-  font-size: 1em;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  &_unsupported {
+    opacity: 0.9;
+  }
+  &_supported {
+    font-size: 1em;
+  }
+  .description {
+    &__icon {
+      margin-right: 0.5em;
+    }
+    &__text {
+      margin-right: 0.3em;
+    }
+  }
 }
 .urls {
   &__url {
     &:not(:first-child)::before {
+      opacity: 0.5;
       content: "|";
       font-size: 0.6rem;
       padding: 0 5px;

src/presentation/TheFooter/TheFooter.vue

@@ -2,18 +2,37 @@
   <div>
     <div class="footer">
       <div class="footer__section">
-        <div class="item">
+        <span v-if="isDesktop" class="footer__section__item">
-          <a :href="releaseUrl" target="_blank">{{ version }}</a>
+          <font-awesome-icon class="icon" :icon="['fas', 'globe']"  />
-        </div>
+          <span>Online version at <a href="https://privacy.sexy" target="_blank">https://privacy.sexy</a></span>
-        <div class="item">
+        </span>
-          <a @click="$modal.show(modalName)">Privacy</a>
+        <span v-else class="footer__section__item">
-        </div>
+          <DownloadUrlList />
+        </span>
       </div>
       <div class="footer__section">
-        <span v-if="isDesktop">
+        <div class="footer__section__item">
-          Online version at <a href="https://privacy.sexy" target="_blank">https://privacy.sexy</a>
+          <a :href="feedbackUrl" target="_blank">
-        </span>
+            <font-awesome-icon class="icon" :icon="['far', 'smile']"  />
-        <DownloadUrlList v-else />
+            <span>Feedback</span>
+          </a>
+        </div>
+        <div class="footer__section__item">
+          <a :href="repositoryUrl" target="_blank">
+            <font-awesome-icon class="icon" :icon="['fab', 'github']"  />
+            <span>Source Code</span>
+          </a>
+        </div>
+        <div class="footer__section__item">
+          <a :href="releaseUrl" target="_blank">
+            <font-awesome-icon class="icon" :icon="['fas', 'tag']"  />
+            <span>v{{ version }}</span>
+          </a>
+        </div>
+        <div class="footer__section__item">
+          <font-awesome-icon class="icon" :icon="['fas', 'user-secret']"  />
+          <a @click="$modal.show(modalName)">Privacy</a>
+        </div>
       </div>
     </div>
     <modal :name="modalName" height="auto" :scrollable="true" :adaptive="true">
@@ -45,7 +64,9 @@ export default class TheFooter extends StatefulVue {
   public readonly isDesktop: boolean;
 
   public version: string = '';
+  public repositoryUrl: string = '';
   public releaseUrl: string = '';
+  public feedbackUrl: string = '';
 
   constructor() {
     super();
@@ -54,8 +75,10 @@ export default class TheFooter extends StatefulVue {
 
   public async mounted() {
     const state = await this.getCurrentStateAsync();
-    this.version = `v${state.app.version}`;
+    this.version = state.app.version;
+    this.repositoryUrl = state.app.repositoryUrl;
     this.releaseUrl = `${state.app.repositoryUrl}/releases/tag/${state.app.version}`;
+    this.feedbackUrl = `${state.app.repositoryUrl}/issues`;
   }
 }
 </script>
@@ -63,26 +86,33 @@ export default class TheFooter extends StatefulVue {
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 @import "@/presentation/styles/fonts.scss";
+@import "@/presentation/styles/media.scss";
 
-$medium-screen-width: 767px;
+.icon {
-
+  margin-right: 0.5em;
+  text-decoration: none;
+}
 
 .footer {
   display: flex;
   justify-content: space-between;
-  @media screen and (max-width: $medium-screen-width) {  
+  @media (max-width: $big-screen-width) {  
     flex-direction: column;
     align-items: center;
   }
-  flex-wrap: wrap;
   &__section {
     display: flex;
+    @media (max-width: $big-screen-width) {  
+      justify-content: space-around;
+      width:100%;  
+      &:not(:first-child) {
+        margin-top: 0.7em;
+      }
+    }
+    flex-wrap: wrap;
     color: $dark-gray;
     font-size: 1rem;
     font-family: $normal-font;
-    &:not(:first-child) {
-      padding-top: 3px;
-    }
     a {
       color:inherit;
       text-decoration: underline;
@@ -91,10 +121,18 @@ $medium-screen-width: 767px;
         opacity: 0.8;
       }
     }
-
+    &__item:not(:first-child) {
-    .item:not(:first-child)::before {
+      &::before {
-      content: "|";
+        content: "|";
-      padding: 0 5px;
+        padding: 0 5px;
+      }
+      @media (max-width: $big-screen-width) {  
+        margin-top: 3px;
+        &::before {
+          content: "";
+          padding: 0;
+        }
+      }
     }
   }
 }

src/presentation/TheHeader.vue

@@ -1,10 +1,7 @@
 <template>
     <div id="container">
       <h1 class="child title" >{{ title }}</h1>
-      <h2 class="child subtitle">{{ subtitle }}</h2>
+      <h2 class="child subtitle">Enforce privacy & security on Windows</h2>
-      <a :href="repositoryUrl" target="_blank" class="child github" >
-          <font-awesome-icon :icon="['fab', 'github']" size="3x"  />
-      </a>
     </div>
 </template>
 
@@ -16,13 +13,10 @@ import { StatefulVue } from './StatefulVue';
 export default class TheHeader extends StatefulVue {
   public title = '';
   public subtitle = '';
-  public repositoryUrl = '';
 
   public async mounted() {
     const state = await this.getCurrentStateAsync();
     this.title = state.app.name;
-    this.subtitle = 'Enforce privacy & security on Windows';
-    this.repositoryUrl = state.app.repositoryUrl;
   }
 }
 </script>
@@ -56,13 +50,6 @@ export default class TheHeader extends StatefulVue {
     font-weight: 500;
     line-height: 1.2;
   }
-  .github {
-    color:inherit;
-    cursor: pointer;
-    &:hover {
-        opacity: 0.9;
-    }
-  }
 }
  
 </style>

src/presentation/styles/colors.scss

@@ -1,8 +1,8 @@
 $white: #fff;
 $light-gray: #eceef1;
-$gray: darken(#eceef1, 30%);
+$gray: darken($light-gray, 30%);
 $dark-gray: #616f86;
-$slate: darken(#eceef1, 70%);
+$slate: darken($light-gray, 70%);
 $dark-slate: #2f3133;
 $accent: #1abc9c;
 $black: #000

src/presentation/styles/media.scss

@@ -0,0 +1,3 @@
+$big-screen-width: 992px;
+$medium-screen-width: 768px;
+$small-screen-width: 380px;