Adds additional safeguards for edge cases, and improves theme coverage

src/components/LinkItems/IframeModal.vue

@@ -2,7 +2,8 @@
   <modal :name="name" :resizable="true" width="80%" height="80%" @closed="$emit('closed')">
     <div slot="top-right" @click="hide()">Close</div>
     <a @click="hide()" class="close-button" title="Close">x</a>
-    <iframe :src="url" @keydown.esc="close" class="frame"/>
+    <iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/>
+    <div v-else class="no-url">No URL Specified</div>
   </modal>
 </template>
 
@@ -35,6 +36,16 @@ export default {
   border: none;
 }
 
+.no-url {
+  margin: 4rem auto;
+  width: fit-content;
+  font-size: 2rem;
+  padding: 0.5rem;
+  border: 1px dashed #ff0000;
+  border-radius: 3px;
+  background: #f4f2f2;
+}
+
 .close-button {
   position: absolute;
   right: 0;
@@ -46,7 +57,6 @@ export default {
   border-left: 1px solid var(--primary);
   border-bottom: 1px solid var(--primary);
   cursor: pointer;
-
   &:hover {
     background: var(--background);
     color: var(--primary);

src/components/LinkItems/Item.vue

@@ -96,7 +96,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 
 .item {
   flex-grow: 1;
@@ -200,7 +200,7 @@ export default {
     justify-content: flex-end;
     align-items: center;
     height: 2rem;
-    img {
+    div img, div svg.missing-image {
       width: 2rem;
     }
     .tile-title {
@@ -217,8 +217,8 @@ export default {
     flex-direction: column;
     align-items: center;
     height: auto;
-    img {
-      width: 2rem;
+    div img, div svg.missing-image {
+      width: 2.5rem;
       margin-bottom: 0.25rem;
     }
     .tile-title {

src/components/LinkItems/ItemIcon.vue

@@ -1,9 +1,16 @@
 <template>
-  <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
-  <img v-else-if="icon" :src="iconPath" :class="`tile-icon ${size}`" />
+  <div>
+    <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
+    <img v-else-if="icon" :src="iconPath" @error="imageNotFound"
+      :class="`tile-icon ${size} ${broken ? 'broken' : ''}`"
+    />
+    <BrokenImage v-if="broken" class="missing-image" />
+  </div>
 </template>
 
 <script>
+import BrokenImage from '@/assets/interface-icons/broken-icon.svg';
+import ErrorHandler from '@/utils/ErrorHandler';
 
 export default {
   name: 'Icon',
@@ -12,6 +19,9 @@ export default {
     url: String, // Used for fetching the favicon
     size: String, // Either small, medium or large
   },
+  components: {
+    BrokenImage,
+  },
   computed: {
     iconType: function iconType() {
       return this.determineImageType(this.icon);
@@ -20,6 +30,11 @@ export default {
       return this.getIconPath(this.icon, this.url);
     },
   },
+  data() {
+    return {
+      broken: false,
+    };
+  },
   methods: {
     /* Check if a string is in a URL format. Used to identify tile icon source */
     isUrl(str) {
@@ -72,6 +87,11 @@ export default {
       else imgType = 'none';
       return imgType;
     },
+    /* Called when the path to the image cannot be resolved */
+    imageNotFound() {
+      this.broken = true;
+      ErrorHandler(`The path to '${this.icon}' could not be resolved`);
+    },
   },
 };
 </script>
@@ -80,6 +100,7 @@ export default {
   .tile-icon {
       width: 60px;
       filter: var(--item-icon-transform);
+      &.broken { display: none; }
   }
   i.fas, i.fab, i.far, i.fal, i.fad {
     font-size: 2rem;
@@ -99,4 +120,11 @@ export default {
       fill: currentColor;
     }
   }
+
+  .missing-image {
+    width: 3.5rem;
+    path {
+      fill: currentColor;
+    }
+  }
 </style>

src/components/Settings/KeyboardShortcutInfo.vue

@@ -76,12 +76,12 @@ export default {
   padding: 0.1em 0.3em;
   z-index: 10;
   border-radius: 12px;
-  border: 1px solid var(--background-darker);
+  border: 1px solid var(--welcome-popup-background);
   -webkit-box-shadow: 2px 1px 5px #130f23;
   box-shadow: 2px 1px 5px #130f23;
-  border: 1px solid var(--primary);
-  color: var(--primary);
-  background: var(--background-darker);
+  border: 1px solid var(--welcome-popup-text-color);
+  color: var(--welcome-popup-text-color);
+  background: var(--welcome-popup-background);
   cursor: default;
   opacity: 0.94;
   @include phone {
@@ -91,9 +91,9 @@ export default {
     position: absolute;
     top: -35px;
     left: 20px;
-    border: 1px solid var(--primary);
-    color: var(--primary);
-    background: var(--background-darker);
+    border: 1px solid var(--welcome-popup-text-color);
+    color: var(--welcome-popup-text-color);
+    background: var(--welcome-popup-background);
     padding: 4px;
     border-radius: var(--curve-factor);
   }
@@ -108,7 +108,7 @@ export default {
     border: 1px solid transparent;
     cursor: pointer;
     &:hover {
-      border: 1px solid var(--primary);
+      border: 1px solid var(--welcome-popup-text-color);
       opacity: var(--dimming-factor);
     }
   }

src/components/Settings/SettingsContainer.vue

@@ -75,6 +75,7 @@ export default {
     align-items: center;
     align-items: stretch;
     background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
+    box-shadow: var(--settings-container-shadow);
   }
   .options-container {
     display: flex;