🎨 Improved cross-theme widget styling and options

src/components/Widgets/NewsHeadlines.vue

@@ -7,7 +7,7 @@
       <span class="date">{{ article.published | date }}</span>
     </div>
     <p class="description">{{ article.description }}</p>
-    <img class="thumbnail" v-if="article.image" :src="article.image" alt="Thumbnail" />
+    <img class="thumbnail" v-if="article.image && !hideImages" :src="article.image" alt="Image" />
   </div>
 </div>
 </template>
@@ -46,6 +46,9 @@ export default {
     keywords() {
       return this.options.keywords ? `&keywords=${this.options.keywords}` : '';
     },
+    hideImages() {
+      return this.options.hideImages;
+    },
     endpoint() {
       return `${widgetApiEndpoints.news}?apiKey=${this.apiKey}`
       + `${this.country}${this.category}${this.lang}${this.count}`;

src/components/Widgets/WidgetBase.vue

@@ -1,10 +1,11 @@
 <template>
   <div :class="`widget-base ${ loading ? 'is-loading' : '' }`">
     <!-- Update and Full-Page Action Buttons  -->
-    <Button :click="update" class="action-btn update-btn" v-if="!loading">
+    <Button :click="update" class="action-btn update-btn" v-if="!hideControls && !loading">
       <UpdateIcon />
     </Button>
-    <Button :click="fullScreenWidget" class="action-btn open-btn" v-if="!error && !loading">
+    <Button :click="fullScreenWidget"
+      class="action-btn open-btn" v-if="!hideControls && !error && !loading">
       <OpenIcon />
     </Button>
     <!-- Loading Spinner -->
@@ -457,6 +458,9 @@ export default {
     widgetRef() {
       return `widget-${this.widgetType}-${this.index}`;
     },
+    hideControls() {
+      return this.widget.hideControls;
+    },
   },
   methods: {
     /* Calls update data method on widget */
@@ -485,7 +489,7 @@ export default {
 @import '@/styles/media-queries.scss';
 .widget-base {
   position: relative;
-  padding-top: 0.75rem;
+  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
   // Refresh and full-page action buttons
   button.action-btn  {
     height: 1rem;

src/components/Workspace/WebContent.vue

@@ -26,7 +26,7 @@ iframe {
   height: calc(100% - var(--header-height));
   width: calc(100% - var(--side-bar-width));
   border: none;
-  background: white;
+  background: var(--workspace-web-content-background);
 }
 
 .web-content.hide {