From 4e6572a042a84b3cfe543763f61d722d4c2155a9 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 19 Nov 2019 12:26:07 +0300
Subject: [PATCH] replace ds-icon with base-icon

---
 webapp/assets/styles/main.scss                  |  2 +-
 webapp/components/Avatar/Avatar.spec.js         |  2 +-
 webapp/components/AvatarMenu/AvatarMenu.vue     |  6 +++---
 .../CategoriesSelect/CategoriesSelect.vue       |  2 +-
 webapp/components/Category/index.vue            | 16 ++++++++++++++--
 webapp/components/Comment/Comment.vue           |  2 +-
 webapp/components/CommentList/CommentList.vue   |  2 +-
 webapp/components/ContentMenu.vue               |  4 ++--
 webapp/components/DeleteData/DeleteData.vue     |  3 ++-
 .../DropdownFilter/DropdownFilter.vue           | 15 ++++++++++++---
 webapp/components/FilterPosts/FilterPosts.vue   |  2 +-
 webapp/components/LocaleSwitch/LocaleSwitch.vue | 10 +++++++---
 .../NotificationsTable/NotificationsTable.vue   |  4 ++--
 webapp/components/PostCard/PostCard.vue         |  4 ++--
 webapp/components/SearchInput.vue               |  6 +++---
 webapp/components/TeaserImage/TeaserImage.vue   |  2 +-
 webapp/components/Upload/index.vue              |  2 +-
 webapp/components/User/User.vue                 | 17 ++++++++++++++---
 webapp/components/_new/generic/BaseIcon.vue     |  2 +-
 webapp/pages/admin/categories.vue               |  2 +-
 webapp/pages/moderation/index.vue               |  6 +++---
 webapp/pages/post/_id/_slug/more-info.vue       |  5 +----
 webapp/pages/profile/_id/_slug.vue              |  2 +-
 webapp/pages/settings/my-social-media.vue       |  4 ++--
 24 files changed, 78 insertions(+), 44 deletions(-)

diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index 5c4964688..b59399b02 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -160,7 +160,7 @@ hr {
     align-content: center;
     align-items: center;
 
-    .ds-icon {
+    .base-icon {
       padding-right: $space-xx-small;
     }
   }
diff --git a/webapp/components/Avatar/Avatar.spec.js b/webapp/components/Avatar/Avatar.spec.js
index 626e584c9..3de402a54 100644
--- a/webapp/components/Avatar/Avatar.spec.js
+++ b/webapp/components/Avatar/Avatar.spec.js
@@ -25,7 +25,7 @@ describe('Avatar.vue', () => {
   it('renders an icon', () => {
     expect(
       Wrapper()
-        .find('.ds-icon')
+        .find('.base-icon')
         .exists(),
     ).toBe(true)
   })
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 393963997..a7f31bfef 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -12,7 +12,7 @@
         @click.prevent="toggleMenu"
       >
         <hc-avatar :user="user" />
-        <ds-icon size="xx-small" name="angle-down" />
+        <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
     <template #popover="{ closeMenu }">
@@ -33,13 +33,13 @@
             :parents="item.parents"
             @click.native="closeMenu(false)"
           >
-            <ds-icon :name="item.route.icon" />
+            <base-icon :name="item.route.icon" />
             {{ item.route.name }}
           </ds-menu-item>
         </ds-menu>
         <hr />
         <nuxt-link class="logout-link" :to="{ name: 'logout' }">
-          <ds-icon name="sign-out" />
+          <base-icon name="sign-out" />
           {{ $t('login.logout') }}
         </nuxt-link>
       </div>
diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index cbe46b890..ab6108419 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -9,7 +9,7 @@
             :primary="isActive(category.id)"
             :disabled="isDisabled(category.id)"
           >
-            <ds-icon :name="category.icon" />
+            <base-icon :name="category.icon" />
             {{ $t(`contribution.category.name.${category.slug}`) }}
           </ds-button>
         </ds-flex-item>
diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue
index acc35772a..a6410d750 100644
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <ds-tag>
-    <ds-icon size="large" :name="icon" />
+  <ds-tag class="category-tag">
+    <base-icon :name="icon" />
     {{ name }}
   </ds-tag>
 </template>
@@ -14,3 +14,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.category-tag {
+  display: inline-flex;
+  align-items: center;
+
+  > .base-icon {
+    margin-right: $space-xx-small;
+    font-size: $font-size-base;
+  }
+}
+</style>
diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index 2da0df5fa..06816e5bf 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -3,7 +3,7 @@
     <ds-card>
       <ds-space margin-bottom="base" />
       <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
-        <ds-icon name="ban" />
+        <base-icon name="ban" />
         {{ this.$t('comment.content.unavailable-placeholder') }}
       </ds-text>
       <ds-space margin-bottom="base" />
diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue
index df008e9ee..888c167e9 100644
--- a/webapp/components/CommentList/CommentList.vue
+++ b/webapp/components/CommentList/CommentList.vue
@@ -2,7 +2,7 @@
   <div id="comments">
     <h3 style="margin-top: -10px;">
       <span>
-        <ds-icon name="comments" />
+        <base-icon name="comments" />
         <ds-tag
           v-if="post.comments.length"
           style="margin-top: -4px; margin-left: -12px; position: absolute;"
diff --git a/webapp/components/ContentMenu.vue b/webapp/components/ContentMenu.vue
index 521a8ed6e..03303f7ec 100644
--- a/webapp/components/ContentMenu.vue
+++ b/webapp/components/ContentMenu.vue
@@ -3,7 +3,7 @@
     <template slot="default" slot-scope="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
-          <ds-icon name="ellipsis-v" />
+          <base-icon name="ellipsis-v" />
         </ds-button>
       </slot>
     </template>
@@ -16,7 +16,7 @@
           :parents="item.parents"
           @click.stop.prevent="openItem(item.route, toggleMenu)"
         >
-          <ds-icon :name="item.route.icon" />
+          <base-icon :name="item.route.icon" />
           {{ item.route.name }}
         </ds-menu-item>
       </ds-menu>
diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue
index f6e6d47f0..27aa3a28b 100644
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@@ -5,7 +5,7 @@
       <ds-container>
         <ds-flex>
           <ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+            <base-icon name="warning" class="delete-warning-icon" />
           </ds-flex-item>
           <ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
             <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
@@ -134,6 +134,7 @@ export default {
 <style lang="scss">
 .delete-warning-icon {
   color: $color-danger;
+  font-size: $font-size-xxx-large;
 }
 
 .checkbox-container {
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index c24cf18bc..2a3637f41 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -9,9 +9,9 @@
       href="#"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon style="margin-right: 2px;" name="filter" />
-      <label for="dropdown">{{ selected }}</label>
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <base-icon name="filter" />
+      <label class="label" for="dropdown">{{ selected }}</label>
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </a>
     <ds-menu
       slot="popover"
@@ -59,7 +59,16 @@ export default {
   height: 100%;
   padding: $space-xx-small;
   color: $text-color-soft;
+
+  > .label {
+    margin: 0 $space-xx-small;
+  }
 }
+
+.dropdown-arrow {
+  font-size: $font-size-xx-small;
+}
+
 .dropdown-menu {
   user-select: none;
   display: flex;
diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
index 1dd0fa737..b83e99fd8 100644
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -8,7 +8,7 @@
       slot-scope="{ toggleMenu }"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon size="xx-small" name="angle-down" />
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </ds-button>
     <template slot="popover">
       <ds-container>
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
index 38334621e..f95c1c032 100644
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -7,9 +7,9 @@
       href="#"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon style="margin-right: 2px;" name="globe" />
-      {{ current.code.toUpperCase() }}
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <base-icon name="globe" />
+      <span class="label">{{ current.code.toUpperCase() }}</span>
+      <base-icon class="dropdown-arrow" name="angle-down" />
     </a>
     <ds-menu
       slot="popover"
@@ -124,6 +124,10 @@ export default {
   height: 100%;
   padding: $space-xx-small;
   color: $text-color-soft;
+
+  > .label {
+    margin: 0 $space-xx-small;
+  }
 }
 
 nav.locale-menu-popover {
diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 6a9d9b033..caf30d6c0 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -1,12 +1,12 @@
 <template>
   <ds-table v-if="notifications && notifications.length" :data="notifications" :fields="fields">
     <template #icon="scope">
-      <ds-icon
+      <base-icon
         v-if="scope.row.from.post"
         name="comment"
         v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
       />
-      <ds-icon
+      <base-icon
         v-else
         name="bookmark"
         v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
diff --git a/webapp/components/PostCard/PostCard.vue b/webapp/components/PostCard/PostCard.vue
index f368fadbb..1fc7cf280 100644
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@@ -47,13 +47,13 @@
         <div style="display: inline-block; float: right">
           <!-- Shouts Count -->
           <span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
-            <ds-icon name="bullhorn" />
+            <base-icon name="bullhorn" />
             <small>{{ post.shoutedCount }}</small>
           </span>
           &nbsp;
           <!-- Comments Count -->
           <span :style="{ opacity: post.commentsCount ? 1 : 0.5 }">
-            <ds-icon name="comments" />
+            <base-icon name="comments" />
             <small>{{ post.commentsCount }}</small>
           </span>
           <!-- Menu -->
diff --git a/webapp/components/SearchInput.vue b/webapp/components/SearchInput.vue
index 098b30610..b1b967355 100644
--- a/webapp/components/SearchInput.vue
+++ b/webapp/components/SearchInput.vue
@@ -47,11 +47,11 @@
                     <ds-text size="small" color="softer" class="search-meta">
                       <span style="text-align: right;">
                         <b>{{ option.commentsCount }}</b>
-                        <ds-icon name="comments" />
+                        <base-icon name="comments" />
                       </span>
                       <span style="width: 36px; display: inline-block; text-align: right;">
                         <b>{{ option.shoutedCount }}</b>
-                        <ds-icon name="bullhorn" />
+                        <base-icon name="bullhorn" />
                       </span>
                     </ds-text>
                   </ds-flex-item>
@@ -239,7 +239,7 @@ export default {
     white-space: nowrap;
     word-wrap: none;
 
-    .ds-icon {
+    .base-icon {
       vertical-align: sub;
     }
   }
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index d7ba0e7d8..e14c55c4e 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -27,7 +27,7 @@
           'hc-drag-marker-update-post': contribution,
         }"
       >
-        <ds-icon name="image" size="xxx-large" />
+        <base-icon name="image" />
       </div>
     </div>
   </vue-dropzone>
diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue
index 3f84f8a7c..ac6d4db7f 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@@ -12,7 +12,7 @@
         <slot></slot>
         <div class="hc-attachments-upload-area">
           <div class="hc-drag-marker">
-            <ds-icon v-if="hover" name="image" size="xxx-large" />
+            <base-icon v-if="hover" name="image" />
           </div>
         </div>
       </div>
diff --git a/webapp/components/User/User.vue b/webapp/components/User/User.vue
index 2e5b7e501..81d004ca8 100644
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@@ -11,10 +11,10 @@
         <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
           <hc-avatar class="avatar" :user="user" />
           <div>
-            <ds-text>
+            <ds-text class="userinfo">
               <b class="username">{{ userName | truncate(18) }}</b>
               <ds-text v-if="dateTime" size="small" color="soft">
-                <ds-icon name="clock" />
+                <base-icon name="clock" />
                 <client-only>
                   <hc-relative-date-time :date-time="dateTime" />
                 </client-only>
@@ -39,7 +39,7 @@
           style="margin-top: 5px"
           bold
         >
-          <ds-icon name="map-marker" />
+          <base-icon name="map-marker" />
           {{ user.location.name }}
         </ds-text>
         <ds-flex style="margin-top: -10px">
@@ -156,6 +156,17 @@ export default {
   vertical-align: middle;
 }
 
+.userinfo {
+  display: flex;
+  align-items: center;
+
+  > .ds-text {
+    display: flex;
+    align-items: center;
+    margin-left: $space-xx-small;
+  }
+}
+
 .user {
   white-space: nowrap;
   position: relative;
diff --git a/webapp/components/_new/generic/BaseIcon.vue b/webapp/components/_new/generic/BaseIcon.vue
index 66b0571de..5e87e30ca 100644
--- a/webapp/components/_new/generic/BaseIcon.vue
+++ b/webapp/components/_new/generic/BaseIcon.vue
@@ -39,7 +39,7 @@ export default {
   display: inline-flex;
 
   > .svg {
-    height: 1em;
+    height: 1.2em;
     fill: currentColor;
   }
 }
diff --git a/webapp/pages/admin/categories.vue b/webapp/pages/admin/categories.vue
index 23aa4d606..c72506e64 100644
--- a/webapp/pages/admin/categories.vue
+++ b/webapp/pages/admin/categories.vue
@@ -2,7 +2,7 @@
   <ds-card :header="$t('admin.categories.name')">
     <ds-table :data="Category" :fields="fields" condensed>
       <template slot="icon" slot-scope="scope">
-        <ds-icon :name="scope.row.icon" />
+        <base-icon :name="scope.row.icon" />
       </template>
     </ds-table>
   </ds-card>
diff --git a/webapp/pages/moderation/index.vue b/webapp/pages/moderation/index.vue
index f5dd06a57..57c7ccab4 100644
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@@ -5,17 +5,17 @@
       <!-- Icon -->
       <template slot="type" slot-scope="scope">
         <ds-text color="soft">
-          <ds-icon
+          <base-icon
             v-if="scope.row.type === 'Post'"
             v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
             name="bookmark"
           />
-          <ds-icon
+          <base-icon
             v-else-if="scope.row.type === 'Comment'"
             v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
             name="comments"
           />
-          <ds-icon
+          <base-icon
             v-else-if="scope.row.type === 'User'"
             v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
             name="user"
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index dae3021aa..fa690c354 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -3,10 +3,7 @@
     <h2 style="margin-bottom: .2em;">{{ $t('post.moreInfo.title') }}</h2>
     <p>{{ $t('post.moreInfo.description') }}</p>
     <ds-space />
-    <h3>
-      <!-- <ds-icon name="compass" /> -->
-      {{ $t('post.moreInfo.titleOfCategoriesSection') }}
-    </h3>
+    <h3>{{ $t('post.moreInfo.titleOfCategoriesSection') }}</h3>
     <hc-category
       v-for="category in post.categories"
       :key="category.id"
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index b0d6a8d11..2eecf0beb 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -34,7 +34,7 @@
               {{ userSlug }}
             </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">
-              <ds-icon name="map-marker" />
+              <base-icon name="map-marker" />
               {{ user.location.name }}
             </ds-text>
             <ds-text align="center" color="soft" size="small">
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index cf8537aa5..677c4423d 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -25,7 +25,7 @@
               </a>
               <span class="divider">|</span>
               <a name="edit" @click="handleEditSocialMedia(link)">
-                <ds-icon
+                <base-icon
                   :aria-label="$t('actions.edit')"
                   class="icon-button"
                   name="edit"
@@ -33,7 +33,7 @@
                 />
               </a>
               <a name="delete" @click="handleDeleteSocialMedia(link)">
-                <ds-icon
+                <base-icon
                   :aria-label="$t('actions.delete')"
                   class="icon-button"
                   name="trash"