From 81d3110887e27eb40a8ce83112f1fa9cfbe12dbc Mon Sep 17 00:00:00 2001
From: "ext.sopra.ncastejon" <castejon.nicolas@gmail.com>
Date: Fri, 7 Feb 2020 15:47:51 +0100
Subject: [PATCH] Fix multiple issues with layout and mobile for downloads and
 api tabs.

---
 .../resource-queryable.component.html         |  33 ++--
 .../resource-queryable.component.scss         | 160 ++++++++++--------
 .../resource-queryable.component.ts           |   2 +
 .../resources-queryable.component.scss        |   2 +-
 .../dataset-detail.component.html             |   2 +-
 .../dataset-downloads.component.scss          |  54 +++++-
 .../resource-custom-download.component.ts     |   5 -
 .../resource-download-item.component.html     |  25 +--
 .../resource-download-item.component.scss     |  46 +++--
 9 files changed, 196 insertions(+), 133 deletions(-)

diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
index a6e9c6b6..2f88a8d6 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
@@ -16,8 +16,8 @@
          <span class="parameters-url">
            <a [href]="resource.metadataLink.url" target="_blank">{{ resource.metadataLink.url }}</a>
          </span>
-         <button type="button" (click)="copyToClipboard(resource.metadataLink.url, true)"
-           class="button is-medium tooltip" [attr.data-tooltip]="messageClipboardRoot">
+         <button type="button" (click)="copyToClipboard(resource.metadataLink.url, true)" class="button is-medium"
+           [attr.data-tooltip]="messageClipboardRoot">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
              <path fill="#818080" fill-rule="evenodd"
                d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
@@ -184,33 +184,22 @@
            </a>
          </span>
          <button type="button" (click)="copyToClipboard(queryableUrl)"
-           class="column button is-narrow-tablet is-5-mobile is-medium tooltip"
-           [attr.data-tooltip]="messageClipboard">
+           class="column button is-narrow-tablet is-5-mobile is-medium" [attr.data-tooltip]="messageClipboard">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
              <path fill="#818080" fill-rule="evenodd"
                d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
                clip-rule="evenodd" />
            </svg>
          </button>
-         <div class="column resource-download-icon is-narrow-tablet is-5-mobile" (click)="saveFile(queryableUrl)">
+         <div class="column resource-download-icon is-narrow-tablet is-5-mobile" (click)="saveFile(queryableUrl)"
+           [attr.data-tooltip]="downloadMessage">
+
            <a>
-             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
-               <g id="btn-download">
-                 <path
-                   d="M22 14c-.6 0-1 .4-1 1v5H3v-5c0-.6-.4-1-1-1s-1 .4-1 1v6c0 .6.4 1 1 1h20c.6 0 1-.4 1-1v-6c0-.6-.4-1-1-1z"
-                   class="download_x002D_color" />
-                 <path
-                   d="M11.3 16.7c.2.2.5.3.7.3s.5-.1.7-.3l6-6c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 13.6V2c0-.6-.4-1-1-1s-1 .4-1 1v11.6L6.7 9.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l6 6z"
-                   class="download_x002D_color" />
-                 <g>
-                   <path
-                     d="M22 14c-.6 0-1 .4-1 1v5H3v-5c0-.6-.4-1-1-1s-1 .4-1 1v6c0 .6.4 1 1 1h20c.6 0 1-.4 1-1v-6c0-.6-.4-1-1-1z"
-                     class="download_x002D_color" />
-                   <path
-                     d="M11.3 16.7c.2.2.5.3.7.3s.5-.1.7-.3l6-6c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 13.6V2c0-.6-.4-1-1-1s-1 .4-1 1v11.6L6.7 9.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l6 6z"
-                     class="download_x002D_color" />
-                 </g>
-               </g>
+             <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
+               <path fill="#4668AB"
+                 d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
+               <path fill="#4668AB"
+                 d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
              </svg>
            </a>
          </div>
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
index 015cbee4..4acbc9d4 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
@@ -23,78 +23,6 @@
   }
 }
 
-.root-url {
-  border-bottom: 2px solid $grey-background-color;
-  padding-bottom: 1.5rem;
-}
-
-.root-url-label {
-  text-transform: uppercase;
-}
-
-@media screen and (min-width: $tablet) {
-  .dropdown-trigger button {
-    width: 12rem;
-  }
-}
-
-.no-custom-url {
-  span {
-    color: $warning-color;
-  }
-}
-
-.title-label {
-  margin-bottom: 0.4rem;
-
-  span,
-  label {
-    color: $grey-dark-color;
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
-}
-
-.fromFeature-item {
-
-  .input {
-    width: unset;
-  }
-}
-
-.parameters-url {
-  word-break: break-all;
-}
-
-.create-request-icon {
-  svg {
-    margin-right: 1.2rem;
-    width: 16px;
-    fill: grey;
-    transform: rotate(-90deg);
-  }
-}
-
-.resource-download-icon {
-  padding: 0.5rem 0.4rem;
-  border: 1px solid $grey-super-light-color;
-  border-radius: 4px;
-
-  a {
-    display: flex;
-    justify-content: center;
-  }
-
-  svg {
-    height: 1.5rem;
-    fill: $link-color;
-  }
-
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
 .link-with-copy {
   display: flex;
 
@@ -149,10 +77,15 @@
   .button {
     font-size: 0.875rem;
     margin-left: 0.5rem;
-    height: 2.75rem;
+    height: 2.5rem;
+    width: 2.5rem;
+    position: relative;
 
     svg {
+      position: absolute;
       width: 1.25rem;
+      left: calc(50% - (1.25rem / 2));
+      top: calc(50% - (1.25rem / 2));
     }
 
     svg path {
@@ -167,6 +100,85 @@
   }
 }
 
+.root-url {
+  border-bottom: 2px solid $grey-background-color;
+  padding-bottom: 1.5rem;
+
+  a {
+    pointer-events: none;
+    cursor: default;
+    text-decoration: none;
+    color: $grey-dark-color;
+  }
+}
+
+.root-url-label {
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: $tablet) {
+  .dropdown-trigger button {
+    width: 12rem;
+  }
+}
+
+.no-custom-url {
+  span {
+    color: $warning-color;
+  }
+}
+
+.title-label {
+  margin-bottom: 0.4rem;
+
+  span,
+  label {
+    color: $grey-dark-color;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+
+.fromFeature-item {
+
+  .input {
+    width: unset;
+  }
+}
+
+.parameters-url {
+  word-break: break-all;
+}
+
+.create-request-icon {
+  svg {
+    margin-right: 1.2rem;
+    width: 16px;
+    fill: grey;
+    transform: rotate(-90deg);
+  }
+}
+
+.resource-download-icon {
+  padding: 0.5rem 0.4rem;
+  border: 1px solid $grey-super-light-color;
+  border-radius: 4px;
+
+  a {
+    display: flex;
+    justify-content: center;
+  }
+
+  svg {
+    height: 1.5rem;
+    fill: $link-color;
+  }
+
+  &:hover a {
+    opacity: 0.7;
+  }
+}
+
 .create-request {
   cursor: pointer;
   display: flex;
@@ -215,6 +227,8 @@
     .tooltip {
       margin-left: 0;
       margin-top: 0.5rem;
+      width: 2.5rem;
+      height: 2.5rem;
 
       @media screen and (min-width: $tablet) {
         margin-left: 0.5rem;
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
index 48ebcb80..883f6a66 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
@@ -20,6 +20,8 @@ export class ResourceQueryableComponent implements OnInit {
   @Input() metadata: Metadata;
   @Input() projections: Projection[];
 
+  downloadMessage = geosource.downloads.download;
+
   messageClipboard: string;
   messageClipboardRoot: string;
 
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
index 30aeb70d..9b084f67 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
@@ -102,7 +102,7 @@
   }
 }
 
-.resource-title .resource-name span:first {
+.resource-title .resource-name span:first-of-type {
 
   @media screen and (min-width: $tablet) {
     text-transform: uppercase;
diff --git a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
index ae4ce526..05a0bf80 100644
--- a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
+++ b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
@@ -65,7 +65,7 @@
           </div>
         </a>
       </li>
-      <li [routerLinkActive]="'is-active'">
+      <li [routerLinkActive]="'is-active'" *ngIf="datasetServicesList.length > 0">
         <a (click)="setPosition()" [routerLink]="[AppRoutes.resources.uri]" class="tab-link">
          <svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32">
            <path class="secondary"
diff --git a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
index 6dc03dd6..0eeed694 100644
--- a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
@@ -3,6 +3,12 @@
 
 .downloads-container {
   position: relative;
+
+  @media screen and (min-width: $tablet) {
+    max-width: unset;
+    background-color: $grey-background-color;
+  }
+
 }
 
 .blury {
@@ -15,22 +21,32 @@
   display: flex;
   flex-direction: column;
   padding: 2rem 1.25rem 1.25rem 1.25rem;
+  max-width: 100vw;
+
+  @media screen and (min-width: $tablet) {
+    max-width: unset;
+  }
 }
 
 .resources-downloadable {
   width: 100%;
-  margin-right: 2rem;
+  margin-right: 1rem;
   border-bottom: 2px solid $grey-background-color;
+  background-color: white;
 }
 
 @media screen and (min-width: $tablet) {
+
   .downloads {
     display: flex;
     flex-direction: row;
   }
 
   .resources-downloadable {
-    width: 60%;
+    width: 66%;
+    padding: 2.5rem;
+    box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+    border-radius: 8px;
   }
 }
 
@@ -50,10 +66,7 @@
 }
 
 .resource-static {
-
-  &:not(:last-of-type) {
-    border-bottom: 1px solid $grey-background-color;
-  }
+  margin-bottom: 1rem;
 }
 
 .resource-static-files {
@@ -67,9 +80,22 @@
 
 .resources-other {
   margin-top: 1rem;
+  border-bottom: 2px solid $grey-background-color;
+  background-color: white;
+
+
+  a {
+    word-break: break-all;
+  }
 
   @media screen and (min-width: $tablet) {
+    width: 33%;
     margin-top: 0;
+    box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+    border-radius: 8px;
+    align-self: flex-start;
+    padding: 2.5rem;
+    margin-left: 1rem;
   }
 }
 
@@ -101,8 +127,18 @@
   }
 }
 
-::ng-deep .downloads-container .modal-card {
-  @media screen and (min-width: $tablet) {
-    margin-top: 1rem !important;
+::ng-deep .downloads-container {
+  .modal {
+    overflow-y: auto;
+  }
+
+  .modal-card {
+    @media screen and (min-width: $tablet) {
+      margin-top: 1rem !important;
+    }
+  }
+
+  .modal-background {
+    height: 100vh;
   }
 }
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
index 088b3729..8dc0e1fc 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
@@ -57,11 +57,6 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
   saveFile(format: Format, index: number) {
     this.whichStepLoading[index] = 'loading';
 
-    this.timeOut = window.setTimeout(() => {
-      this.whichStepLoading[index] = 'cancel';
-      // tslint:disable-next-line: align
-    }, 2000);
-
     fetch(this.getQueryableUrl(format), { signal: this.signal }).then((response) => {
       // To allow the download, get the repsons as a blob
       return response.blob();
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
index a537e6ce..f47193a1 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
@@ -10,7 +10,9 @@
      </div>
    </div>
 
-   <div class="resource-download-icon" (click)="saveResource()" *ngIf="!whichStepLoading">
+   <ng-container *ngIf="isQueryable; else other">
+
+   <div class="resource-icon-download" (click)="saveResource()" *ngIf="!whichStepLoading">
      <a [attr.data-tooltip]="downloadMessage">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
          <path fill="#4668AB"
@@ -20,20 +22,23 @@
        </svg>
      </a>
    </div>
-   <div class="resource-download-icon" *ngIf="whichStepLoading">
+   <div class="resource-icon-cancel" *ngIf="whichStepLoading"
+     [attr.data-tooltip]="whichStepLoading ? abortMessage : null">
 
-     <div class="is-loading"
-       [attr.data-tooltip]="whichStepLoading === 'cancel' ? abortMessage : null">
-       <i class="fas fa-spinner fa-spin fa-2x" *ngIf="whichStepLoading === 'loading'"></i>
+     <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+       <path fill-rule="evenodd" clip-rule="evenodd"
+         d="M17 0C18.1009 0 19.0325 0.929231 19.0325 2.02741C19.0325 3.16783 18.1009 4.05483 17 4.05483C15.8567 4.05483 14.9675 3.16783 14.9675 2.02741C14.9675 0.929231 15.8567 0 17 0ZM6.37132 4.36171C7.47224 4.36171 8.40378 5.29094 8.40378 6.38912C8.40378 7.52954 7.47224 8.41653 6.37132 8.41653C5.22807 8.41653 4.33887 7.52954 4.33887 6.38912C4.33887 5.29094 5.22807 4.36171 6.37132 4.36171ZM4.06492 17.0002C4.06492 15.902 3.13337 14.9728 2.03246 14.9728C0.8892 14.9728 0 15.902 0 17.0002C0 18.1406 0.8892 19.0276 2.03246 19.0276C3.13337 19.0276 4.06492 18.1406 4.06492 17.0002ZM6.37132 25.5838C7.47224 25.5838 8.40378 26.513 8.40378 27.6112C8.40378 28.7516 7.47224 29.6386 6.37132 29.6386C5.22807 29.6386 4.33887 28.7516 4.33887 27.6112C4.33887 26.513 5.22807 25.5838 6.37132 25.5838ZM19.0327 31.9727C19.0327 30.8745 18.1011 29.9453 17.0002 29.9453C15.857 29.9453 14.9678 30.8745 14.9678 31.9727C14.9678 33.1131 15.857 34.0001 17.0002 34.0001C18.1011 34.0001 19.0327 33.1131 19.0327 31.9727ZM27.6301 25.5838C28.731 25.5838 29.6626 26.513 29.6626 27.6112C29.6626 28.7516 28.731 29.6386 27.6301 29.6386C26.4869 29.6386 25.5977 28.7516 25.5977 27.6112C25.5977 26.513 26.4869 25.5838 27.6301 25.5838ZM34.0005 17.0002C34.0005 15.902 33.0689 14.9728 31.968 14.9728C30.8247 14.9728 29.9355 15.902 29.9355 17.0002C29.9355 18.1406 30.8247 19.0276 31.968 19.0276C33.0689 19.0276 34.0005 18.1406 34.0005 17.0002Z"
+         fill="#242B3F" />
+       <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="1.2s"
+         repeatCount="indefinite" />
+     </svg>
 
-       <img *ngIf="whichStepLoading === 'cancel'" src="../../../../../../assets/img/close.svg"
-         [alt]="abortMessage" (click)=abortDownload()>
-     </div>
+     <img src="../../../../../../assets/img/close.svg" [alt]="abortMessage" (click)=abortDownload()>
    </div>
-
+   </ng-container>
 
    <ng-template #other>
-     <div class="resource-download-icon">
+     <div class="resource-icon-download">
        <a [href]="resourceUrl" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
            <path fill="#4668AB"
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
index 4af6afec..485b2645 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
@@ -30,11 +30,13 @@
   }
 }
 
-.resource-download-icon {
+.resource-icon-download {
   padding: 0.4rem 0.4rem;
   border: 1px solid $grey-super-light-color;
   border-radius: 4px;
   margin-right: 0.75rem;
+  width: 2.5rem;
+  height: 2.5rem;
 
   a {
     display: flex;
@@ -46,24 +48,44 @@
     fill: $link-color;
   }
 
-  &:hover {
+  &:hover svg {
     opacity: 0.7;
   }
 }
 
-.is-loading {
 
-  display: flex;
+.resource-icon-cancel {
+  padding: 0.4rem 0.4rem;
+  border: 1px solid $grey-super-light-color;
+  border-radius: 4px;
+  margin-right: 0.75rem;
+  position: relative;
+  width: 2.5rem;
+  height: 2.5rem;
 
-  i {
-    display: block;
-    height: 1.5rem;
-    font-size: 1.5rem;
+  a {
+    display: flex;
+  }
+
+  svg {
+    position: absolute;
+    height: 2rem;
+    width: 2rem;
+    left: calc(50% - 1rem);
+    top: calc(50% - 1rem);
+    fill: $link-color;
+    opacity: 0.6;
   }
 
   img {
-    height: 1.5rem;
-    width: 1.5rem;
-    cursor: pointer;
+    position: absolute;
+    height: 0.875rem;
+    width: 0.875rem;
+    left: calc(50% - 0.4375rem);
+    top: calc(50% - 0.4375rem);
   }
-}
+
+  &:hover img {
+    opacity: 0.6;
+  }
+}
\ No newline at end of file
-- 
GitLab