Merge branch 'replace-icons' into 'develop'

Replace LineAwesome with Tabler icons in some places

See merge request soapbox-pub/soapbox-fe!915

app/styles/about.scss

@@ -690,6 +690,11 @@ $fluid-breakpoint: $maximum-width + 20px;
 
       .otp-form-overlay__close {
         align-self: flex-end;
+
+        .svg-icon {
+          height: 20px;
+          width: 20px;
+        }
       }
     }
   }

app/styles/accounts.scss

@@ -456,6 +456,11 @@ a .account__avatar {
   display: flex;
   flex-direction: row;
   padding: 10px 0;
+
+  &__button .svg-icon {
+    height: 20px;
+    width: 20px;
+  }
 }
 
 .account__section-headline {

app/styles/chats.scss

@@ -214,11 +214,18 @@
     position: absolute;
     top: -8px;
     right: -8px;
+    height: 20px;
+    padding: 1px;
     background: var(--background-color);
     border-radius: 999px;
     opacity: 0;
     pointer-events: none;
     transition: 0.2s;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 

app/styles/components/admin.scss

@@ -185,8 +185,10 @@
   }
 
   &__actions {
-    margin-left: auto;
     display: flex;
+    align-items: center;
+    height: fit-content;
+    margin-left: auto;
 
     .icon-button {
       padding-left: 10px;
@@ -195,6 +197,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > .svg-icon {
+          height: 20px;
+          width: 20px;
+        }
       }
     }
   }

app/styles/components/columns.scss

@@ -286,7 +286,8 @@
 .column-link {
   background: var(--brand-color--med);
   color: var(--primary-text-color);
-  display: block;
+  display: flex;
+  align-items: center;
   font-size: 16px;
   padding: 15px;
   text-decoration: none;
@@ -318,7 +319,7 @@
   }
 }
 
-.column-link__icon {
+.svg-icon.column-link__icon {
   display: inline-block;
   margin-right: 5px;
 }
@@ -814,12 +815,19 @@
 }
 
 .timeline-filter-message {
+  display: flex;
+  align-items: center;
   background-color: var(--brand-color--faint);
   color: var(--primary-text-color);
   padding: 15px 20px;
 
   .icon-button {
-    margin-right: 8px;
+    margin: 2px 8px 2px 0;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 

app/styles/components/datepicker.scss

@@ -19,6 +19,11 @@
 
   &__cancel {
     padding-left: 10px;
+
+    .svg-icon {
+      height: 24px;
+      width: 24px;
+    }
   }
 
   &--error .react-datepicker__input-container {

app/styles/components/modal.scss

@@ -199,6 +199,8 @@
   position: absolute;
   right: 8px;
   top: 8px;
+  height: 48px;
+  width: 48px;
   z-index: 100;
   color: #fff;
 }
@@ -693,6 +695,8 @@
   .media-modal__close {
     top: 19px;
     right: 15px;
+    height: 20px;
+    width: 20px;
   }
 }
 

app/styles/components/reply-indicator.scss

@@ -18,7 +18,11 @@
 
 .reply-indicator__cancel {
   float: right;
-  line-height: 24px;
+
+  .svg-icon {
+    height: 20px;
+    width: 20px;
+  }
 }
 
 .reply-indicator__display-name {

app/styles/components/wtf-panel.scss

@@ -159,6 +159,10 @@
 
   &__menu {
     margin-left: auto;
+
+    > div {
+      height: 18px;
+    }
   }
 }
 

app/styles/polls.scss

@@ -167,6 +167,15 @@
     margin-right: 10px;
     font-size: 14px;
   }
+
+  &__cancel {
+    height: 20px;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
+  }
 }
 
 .compose-form__poll-wrapper {

app/styles/ui.scss

@@ -239,6 +239,11 @@
     font-size: 14px;
     font-weight: 500;
   }
+
+  &__buttons .svg-icon {
+    height: 18px;
+    width: 18px;
+  }
 }
 
 .domain__wrapper {