Merge pull request #531 from Quetzacoalt91/update-features-icons

Update features icons

_dev/src/assets/scss/abstracts/_variables.scss

@@ -128,4 +128,8 @@ $custom-control-indicator-focus-border-color: $primary-600;
 $font-family-sans-serif: "IBM Plex Sans","Open Sans",Helvetica,Arial,sans-serif;
 $headings-font-family: $font-family-sans-serif;
 
+$h1-font-size: 2rem;
+$h2-font-size: 1.5rem;
+$h3-font-size: 1.125rem;
+
 $ps-modal-padding: 1.5rem;

_dev/src/assets/scss/app.scss

@@ -66,6 +66,7 @@
   @import './components/categorymatching';
   @import './components/categorymatchingdropdown';
   @import './components/faq';
+  @import './components/features';
   @import './components/forms';
   @import './components/modal';
   @import './components/nav';

_dev/src/assets/scss/components/_features.scss

@@ -0,0 +1,23 @@
+.ps_fb_featurecard {
+  list-style: none;
+  padding-bottom: 15px;
+
+  .logo {
+    max-height: 80px;
+    max-width: 80px;
+
+    &-disabled {
+      -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+      filter: grayscale(100%);
+    }
+
+    &-sm {
+      max-height: 40px;
+      max-width: 40px;
+    }
+  }
+
+  .description {
+    display: table-cell;
+  }
+}

_dev/src/components/features/available-feature.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <li class="ps_fb_featurecard">
     <b-card no-body>
       <b-card-body
         class="p-3"
@@ -9,7 +9,6 @@
             class="mr-2 align-self-center logo d-none d-md-block"
             :src="imageUrl"
             :alt="$t(`integrate.features.${name}.name`)"
-            width="80"
           >
           <div class="description align-self-top flex-grow-1 pl-3 pr-2">
             <h3>
@@ -39,7 +38,7 @@
 import {defineComponent} from 'vue';
 
 export default defineComponent({
-  name: 'DisabledFeature',
+  name: 'AvailableFeature',
   mixins: [],
   props: {
     name: {
@@ -59,7 +58,7 @@ export default defineComponent({
   },
   computed: {
     imageUrl(): string {
-      return new URL(`/src/assets/${this.name}.png`, import.meta.url).href;
+      return new URL(`/src/assets/${this.name}.svg`, import.meta.url).href;
     },
   },
   methods: {
@@ -91,20 +90,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-  .logo {
-    float: left;
-    display: block;
-    width: 80px;
-    height: 80px;
-  }
-
-  .description {
-    display: table-cell;
-  }
-
-  .flex-grow-1 {
-    flex-grow:1
-  }
-</style>

_dev/src/components/features/enabled-feature.vue

@@ -1,5 +1,8 @@
 <template>
-  <li :class="switchActivated ? null : 'disabled'">
+  <li
+    class="ps_fb_featurecard"
+    :class="switchActivated ? null : 'disabled'"
+  >
     <b-card no-body>
       <b-card-body
         class="p-3"
@@ -8,9 +11,8 @@
           <div class="description align-self-center flex-grow-1 pl-3 pr-2">
             <span class="h1">
               <img
-                class="mr-1"
+                class="mr-1 logo-sm"
                 :src="imageUrl"
-                width="40"
               >
               {{ $t(`integrate.features.${name}.name`) }}
             </span>
@@ -148,7 +150,7 @@ export default defineComponent({
       return this.$t('configuration.app.activated');
     },
     imageUrl(): string {
-      return new URL(`/src/assets/${this.name}.png`, import.meta.url).href;
+      return new URL(`/src/assets/${this.name}.svg`, import.meta.url).href;
     },
   },
   methods: {
@@ -236,9 +238,7 @@ export default defineComponent({
       border: none !important;
       border-radius: 3px;
     }
-    .flex-grow-1 {
-      flex-grow:1
-    }
+
     .switch-input {
       &.disabled {
         background: #eee !important;

_dev/src/components/features/feature-list.vue

@@ -4,19 +4,10 @@
   </ul>
 </template>
 
-<script>
+<script lang="ts">
 import {defineComponent} from 'vue';
 
 export default defineComponent({
   name: 'FeatureList',
 });
 </script>
-
-<style lang="scss" scoped>
-  ul {
-    li {
-      list-style: none;
-      padding-bottom: 15px;
-    }
-  }
-</style>

_dev/src/components/features/unavailable-feature.vue

@@ -1,14 +1,13 @@
 <template>
-  <li>
+  <li class="ps_fb_featurecard">
     <b-card no-body>
       <b-card-body
         class="p-3"
       >
         <div class="d-flex">
           <img
-            class="mr-2 align-self-center logo d-none d-md-block"
+            class="mr-2 align-self-center logo logo-disabled d-none d-md-block"
             :src="imageUrl"
-            width="80"
           >
           <div class="description align-self-top flex-grow-1 pl-3 pr-2">
             <h3>
@@ -42,7 +41,7 @@ export default defineComponent({
   },
   computed: {
     imageUrl(): string {
-      return new URL(`/src/assets/${this.name}_disabled.png`, import.meta.url).href;
+      return new URL(`/src/assets/${this.name}.svg`, import.meta.url).href;
     },
   },
   props: {
@@ -54,20 +53,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-.logo {
-  float: left;
-  display: block;
-  height: 80px;
-  width: 80px;
-}
-
-.description {
-  display: table-cell;
-}
-
-.flex-grow-1 {
-  flex-grow:1
-}
-</style>