Merge pull request #73 from Lissy93/REFACTOR_ui-improvments

Refactor UI improvments

src/components/LinkItems/Item.vue

@@ -214,6 +214,7 @@ export default {
   &:hover {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
+    color: var(--item-text-color-hover);
     position: relative;
     .tile-title span.text {
       white-space: pre-wrap;
@@ -278,12 +279,14 @@ export default {
 
 /* Specify layout for alternate sized icons */
 .item {
+  /* Small Tile Specific Themes */
   &.size-small {
     display: flex;
     flex-direction: row-reverse;
     justify-content: flex-end;
     align-items: center;
     height: 2rem;
+    padding-top: 4px;
     div img, div svg.missing-image {
       width: 2rem;
     }
@@ -298,6 +301,7 @@ export default {
       }
     }
   }
+  /* Medium Tile Specific Themes */
   &.size-medium {
     display: flex;
     flex-direction: column;
@@ -312,14 +316,42 @@ export default {
       max-width: 160px;
     }
   }
+  /* Large Tile Specific Themes */
   &.size-large {
-    height: 100px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    text-align: left;
+    overflow: hidden;
+    align-items: center;
+    max-height: 6rem;
+    margin: 0.2rem;
+    padding: 0.5rem;
+    img {
+      padding: 0.1rem 0.25rem;
+    }
+    .tile-title {
+      height: auto;
+      padding: 0.1rem 0.25rem;
+      span.text {
+        position: relative;
+        font-weight: bold;
+        font-size: 1.1rem;
+        width: 100%;
+      }
+      p.description {
+        display: block;
+        margin: 0;
+        white-space: pre-wrap;
+        font-size: .9em;
+        text-overflow: ellipsis;
+      }
+    }
   }
-
   p.description {
-    display: none;
+    display: none; // By default, we don't show the description
   }
-  &:before {
+  &:before { // Certain themes (e.g. material) show css animated fas icon on hover
     display: none;
     font-family: FontAwesome;
     content: var(--open-icon, "\f054") !important;

src/components/PageStrcture/Footer.vue

@@ -36,7 +36,7 @@ footer {
   text-align: center;
   color: var(--medium-grey);
   opacity: var(--dimming-factor);
-  background: var(--background-darker);
+  background: var(--footer-background);
   margin-top: 1.5rem;
   border-top: 1px solid var(--outline-color);
   @include tablet-down {

src/components/Settings/SearchBar.vue

@@ -83,7 +83,7 @@ export default {
     background: var(--search-container-background);
     label {
         display: inline;
-        color: var(--settings-text-color);
+        color: var(--search-label-color);
         margin: 0.5rem;
         display: inline;
     }