✨ Fix many visual issues on viewer share by link.

frontend/resources/styles/common/framework.scss

@@ -25,7 +25,7 @@
     flex-shrink: 0;
   }
   &.btn-small {
-    font-size: $fs12;
+    font-size: $fs13;
     padding: .7rem 1rem;
     line-height: 1.15;
   }

frontend/resources/styles/main/partials/viewer-header.scss

@@ -9,6 +9,10 @@
   z-index: 12;
   justify-content: space-between;
 
+  a {
+    font-size: $fs13;
+  }
+
   .main-icon {
     align-items: center;
     background-color: $color-gray-60;
@@ -85,9 +89,13 @@
     align-items: center;
     display: flex;
     width: 300px;
-    justify-content: space-between;
+    justify-content: flex-end;
     position: relative;
 
+    > * {
+      margin-left: $big;
+    }
+
     .btn-share {
       display: flex;
       align-items: center;
@@ -107,6 +115,10 @@
       padding: 0.4rem 1rem;
     }
 
+    .btn-primary.btn-small {
+      height: 25px;
+    }
+
     .btn-fullscreen {
       align-items: center;
       background-color: $color-gray-60;
@@ -134,23 +146,25 @@
   }
 
   .share-link-dropdown {
-    position: absolute;
+    background-color: $color-white;
-    left: -180px;
+    border-radius: $br-small;
-    top: 45px;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-
-    background-color: $color-gray-50;
     display: flex;
     flex-direction: column;
-
+    left: -180px;
+    position: absolute;
     padding: 1rem;
+    top: 45px;
     width: 400px;
 
     .share-link-title {
-      font-size: 18px;
+      color: $color-black;
+      font-size: $fs15;
       padding-bottom: 1rem;
     }
 
     .share-link-subtitle {
+      color: $color-gray-40;
       padding-bottom: 1rem;
     }
 
@@ -168,111 +182,50 @@
     }
 
     .share-link-input {
-      display: flex;
+      border: 1px solid $color-gray-20;
-      justify-content: space-between;
-      padding: $small;
-      align-items: center;
-      border: 1px solid $color-gray-30;
       border-radius: 3px;
+      display: flex;
+      height: 40px;
+      justify-content: space-between;
       margin-bottom: 1rem;
+      padding: 9px $small;
+      overflow: hidden;
 
       .link {
+        color: $color-gray-50;
+        line-height: 1.5;
         user-select: all;
+        overflow: hidden;
       }
 
-      svg {
+      .link-button {
-        width: 20px;
+        color: $color-primary-dark;
-        height: 20px;
+        cursor: pointer;
-        fill: $color-gray-20;
+        flex-shrink: 0;
-        stroke: $color-gray-20;
+        font-size: $fs15;
+
+        &:hover {
+          color: $color-black;
+        }
       }
     }
 
+    &:before {
+      background-color: $color-white;
+      content: "";
+      height: 16px;
+      left: 53%;
+      position: absolute;
+      transform: rotate(45deg);
+      top: -5px;
+      width: 16px;
+    }
+
   }
 
-  .zoom-widget {
+  .zoom-dropdown {
-    cursor: pointer;
+    left : 150px;
-
+    top: 45px;
-    align-items: center;
-    display: flex;
-    position: relative;
-
-    .input-container {
-      display: flex;
-    }
-
-    span {
-      color: $color-gray-10;
-      font-size: $fs15;
-      margin-left: $x-small;
-    }
-
-    .dropdown-button svg {
-      fill: $color-gray-10;
-      height: 10px;
-      width: 10px;
-    }
-
-    .zoom-dropdown {
-      position: absolute;
-      right: -25px;
-      top: 45px;
-      z-index: 12;
-      width: 150px;
-
-      background-color: $color-white;
-      border-radius: $br-small;
-      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-
-      li {
-        color: $color-gray-60;
-        cursor: pointer;
-        font-size: $fs12;
-        display: flex;
-        padding: $small;
-
-        span {
-          color: $color-gray-40;
-          font-size: $fs12;
-          margin-left: auto;
-        }
-
-        &:hover {
-          background-color: $color-primary-lighter;
-        }
-
-      }
-    }
-
-    .add-zoom,
-    .remove-zoom {
-      align-items: center;
-      background-color: $color-gray-60;
-      border-radius: $br-small;
-      cursor: pointer;
-      color: $color-gray-20;
-      display: flex;
-      opacity: 0;
-      flex-shrink: 0;
-      font-size: $fs20;
-      font-weight: bold;
-      height: 20px;
-      justify-content: center;
-      width: 20px;
-
-      &:hover {
-        color: $color-primary;
-      }
-
-    }
-
-    &:hover {
-      .add-zoom,
-      .remove-zoom {
-        opacity: 100%;
-      }
-    }
-
   }
 
   .users-zone {

frontend/src/uxbox/main/ui/viewer/header.cljs

@@ -67,10 +67,10 @@
         delete #(st/emit! dv/delete-share-link)
         href (.-href js/location)]
     [:*
-     [:span.btn-share.tooltip.tooltip-bottom
+     [:span.btn-primary.btn-small
       {:alt "Share link"
        :on-click #(swap! show-dropdown? not)}
-      i/exit]
+      "Share link"]
 
      [:& dropdown {:show @show-dropdown?
                    :on-close #(swap! show-dropdown? not)
@@ -80,8 +80,8 @@
        [:div.share-link-input
         (if (string? token)
           [:span.link (str href "&token=" token)]
-          [:span "Share link will apear here"])
+          [:span.link-placeholder "Share link will apear here"])
-        i/chain]
+          [:span.link-button "Copy link"]]
        [:span.share-link-subtitle "Anyone with the link will have access"]
        [:div.share-link-buttons
         (if (string? token)
@@ -126,9 +126,11 @@
         [:span.btn-primary {:on-click on-edit} "Edit page"])
       [:& zoom-widget {:zoom (:zoom local)}]
       [:span.btn-fullscreen.tooltip.tooltip-bottom
-       {:alt "Full screen"
+       {:alt "Full Screen"
         :on-click toggle-fullscreen}
-       i/full-screen]
+       (if fullscreen?
+         i/full-screen-off
+         i/full-screen)]
       ]]))