From cb1f03ce9fb0fcec67ee73530e88745f2fe1c463 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Thu, 18 Jun 2020 15:16:13 +0200
Subject: [PATCH] [deploy] CSS fixes (#8764)

* flare tag line height

* .

* fix editor overflow issue

* fix editor overflow issue

* themable actions colors

* name position
---
 app/assets/stylesheets/article-show.scss      | 25 ++++++++-----------
 app/assets/stylesheets/config/_colors.scss    |  8 ++++++
 app/assets/stylesheets/moderators.scss        |  4 ---
 app/assets/stylesheets/scaffolds.scss         |  1 -
 app/assets/stylesheets/themes/hacker.scss     |  8 ++++++
 app/assets/stylesheets/themes/minimal.scss    |  8 ++++++
 app/assets/stylesheets/themes/night.scss      |  8 ++++++
 app/assets/stylesheets/themes/pink.scss       |  8 ++++++
 .../stylesheets/views/article-form.scss       |  3 ---
 app/assets/stylesheets/views/article.scss     | 17 ++++++-------
 app/views/articles/_sticky_nav.html.erb       |  6 ++---
 app/views/moderations/actions_panel.html.erb  |  4 +--
 12 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index dfdc7cc5e..9477627cf 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -36,19 +36,23 @@
   top: var(--header-height);
   right: 0;
   height: calc(100vh - var(--header-height));
-  z-index: 200;
+  z-index: 100;
   transform: translateX(360px);
   transition: var(--transition-props);
-  &.showing {
-    transform: initial;
-  }
 
   iframe {
     height: 100%;
     border: none;
-    box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1);
     width: 360px;
   }
+
+  &.showing {
+    transform: initial;
+
+    iframe {
+      box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1);
+    }
+  }
 }
 
 .mod-actions-menu-btn {
@@ -71,19 +75,10 @@
   }
 }
 
-.actions-menu-svg {
-  color: white;
-}
-
-.mod-actions-menu-btn,
-.actions-menu-svg {
+.mod-actions-menu-btn {
   transition: 0.3s all ease;
 }
 
-.actions-menu-svg:hover {
-  color: white;
-}
-
 .flag-user-modal {
   .flag-user-modal-header {
     padding-left: var(--su-4);
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index 60ceb59ca..9d287d2d1 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -211,4 +211,12 @@
 
   // Select icon
   --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==);
+
+  // Reactions
+  --reaction-like-color: var(--accent-danger);
+  --reaction-like-bg: var(--accent-danger-a10);
+  --reaction-custom-color: var(--accent-success);
+  --reaction-custom-bg: var(--accent-success-a10);
+  --reaction-save-color: var(--accent-brand);
+  --reaction-save-bg: var(--accent-brand-a10);
 }
diff --git a/app/assets/stylesheets/moderators.scss b/app/assets/stylesheets/moderators.scss
index ede5f6273..0d7e54e2a 100644
--- a/app/assets/stylesheets/moderators.scss
+++ b/app/assets/stylesheets/moderators.scss
@@ -210,13 +210,9 @@
       color: var(--base-70);
     }
     button.close-actions-panel {
-      border: none;
-      width: 40px;
-      height: 40px;
       position: absolute;
       right: var(--su-4);
       top: var(--su-4);
-      background-color: var(--base-10);
     }
   }
   .reactions-container {
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index c026f18e4..e827fad4e 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -100,7 +100,6 @@ pre {
   color: #eff0f9;
   line-height: 1.42em;
   font-size: 13px;
-  // width: calc(100% - 25px);
   @media screen and (min-width: 380px) {
     font-size: 15px;
   }
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
index 4a3de7166..19747b39a 100644
--- a/app/assets/stylesheets/themes/hacker.scss
+++ b/app/assets/stylesheets/themes/hacker.scss
@@ -204,4 +204,12 @@
 
   // Select icon
   --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMkVGRjdCIi8+Cjwvc3ZnPg==);
+
+  // Reactions
+  --reaction-like-color: var(--accent-danger);
+  --reaction-like-bg: var(--accent-danger-a10);
+  --reaction-custom-color: var(--accent-success);
+  --reaction-custom-bg: var(--accent-success-a10);
+  --reaction-save-color: var(--accent-warning);
+  --reaction-save-bg: var(--accent-warning-a10);
 }
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
index 52c97839e..c0bb202b6 100644
--- a/app/assets/stylesheets/themes/minimal.scss
+++ b/app/assets/stylesheets/themes/minimal.scss
@@ -202,4 +202,12 @@
 
   // Select icon
   --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjN2E3YTdhIi8+Cjwvc3ZnPg==);
+
+  // Reactions
+  --reaction-like-color: var(--accent-danger);
+  --reaction-like-bg: var(--accent-danger-a10);
+  --reaction-custom-color: var(--accent-success);
+  --reaction-custom-bg: var(--accent-success-a10);
+  --reaction-save-color: var(--accent-brand);
+  --reaction-save-bg: var(--accent-brand-a10);
 }
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index 267f71ba1..8ab1dce93 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -204,4 +204,12 @@
 
   // Select icon
   --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjYzJjNmNhIi8+Cjwvc3ZnPg==);
+
+  // Reactions
+  --reaction-like-color: var(--accent-danger);
+  --reaction-like-bg: var(--accent-danger-a10);
+  --reaction-custom-color: var(--accent-success);
+  --reaction-custom-bg: var(--accent-success-a10);
+  --reaction-save-color: var(--accent-brand);
+  --reaction-save-bg: var(--accent-brand-a10);
 }
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
index 1fed9340d..f03c47860 100644
--- a/app/assets/stylesheets/themes/pink.scss
+++ b/app/assets/stylesheets/themes/pink.scss
@@ -202,4 +202,12 @@
 
   // Select icon
   --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjNTcxOTJkIi8+Cjwvc3ZnPg==);
+
+  // Reactions
+  --reaction-like-color: var(--accent-danger);
+  --reaction-like-bg: var(--accent-danger-a10);
+  --reaction-custom-color: var(--accent-success);
+  --reaction-custom-bg: var(--accent-success-a10);
+  --reaction-save-color: var(--accent-brand);
+  --reaction-save-bg: var(--accent-brand-a10);
 }
diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss
index c0fc7ef84..61b69b58e 100644
--- a/app/assets/stylesheets/views/article-form.scss
+++ b/app/assets/stylesheets/views/article-form.scss
@@ -72,9 +72,6 @@
   }
 
   &__content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
     overflow: auto;
     height: calc(
       100vh - var(--header-height) - var(--article-form-actions-height)
diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index faf325780..566c2ce52 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -341,7 +341,7 @@
   right: 0;
   bottom: 0;
   padding: var(--su-2);
-  @supports (padding-button: constant(safe-area-inset-bottom)) {
+  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
     padding-bottom: env(safe-area-inset-bottom);
   }
   display: flex;
@@ -360,9 +360,6 @@
     box-shadow: none;
     justify-content: stretch;
     top: calc(var(--header-height) + var(--layout-padding) + 6vh);
-    .static-navbar-config & {
-      top: var(--layout-padding);
-    }
   }
 }
 
@@ -423,24 +420,24 @@
   &--like {
     &:hover,
     &.user-activated {
-      --reaction-color: var(--accent-danger);
-      --reaction-bg: var(--accent-danger-a10);
+      --reaction-color: var(--reaction-like-color);
+      --reaction-bg: var(--reaction-like-bg);
     }
   }
 
   &--unicorn {
     &:hover,
     &.user-activated {
-      --reaction-color: var(--accent-success-darker);
-      --reaction-bg: var(--accent-success-a10);
+      --reaction-color: var(--reaction-custom-color);
+      --reaction-bg: var(--reaction-custom-bg);
     }
   }
 
   &--readinglist {
     &:hover,
     &.user-activated {
-      --reaction-color: var(--accent-brand);
-      --reaction-bg: var(--accent-brand-a10);
+      --reaction-color: var(--reaction-save-color);
+      --reaction-bg: var(--reaction-save-bg);
     }
   }
 }
diff --git a/app/views/articles/_sticky_nav.html.erb b/app/views/articles/_sticky_nav.html.erb
index 023efb900..0cd0d8fe9 100644
--- a/app/views/articles/_sticky_nav.html.erb
+++ b/app/views/articles/_sticky_nav.html.erb
@@ -43,11 +43,11 @@
 <div class="crayons-article-sticky grid gap-4" id="article-show-primary-sticky-nav">
   <div class="crayons-card crayons-card--secondary crayons-card--branded p-4 pt-0 hidden l:grid gap-4">
     <div class="-mt-4">
-      <a href="<%= @actor.path %>" class="flex items-end">
-        <span class="<% if @actor.class.name == "User" %>crayons-avatar crayons-avatar--xl<% elsif @actor.class.name == "Organization" %>crayons-logo crayons-logo--xl<% end %>  mr-2">
+      <a href="<%= @actor.path %>" class="flex">
+        <span class="<% if @actor.class.name == "User" %>crayons-avatar crayons-avatar--xl<% elsif @actor.class.name == "Organization" %>crayons-logo crayons-logo--xl<% end %>  mr-2 shrink-0">
           <img src="<%= ProfileImage.new(@actor).get(width: 90) %>" class="<% if @actor.class.name == "User" %>crayons-avatar__image<% elsif @actor.class.name == "Organization" %>crayons-logo__image<% end %>" alt="<%= @actor.name %> profile image">
         </span>
-        <span class="crayons-link fs-l fw-bold"><%= @actor.name %></span>
+        <span class="crayons-link fs-l fw-bold mt-5"><%= @actor.name %></span>
       </a>
     </div>
     <% if @actor.tag_line.present? %>
diff --git a/app/views/moderations/actions_panel.html.erb b/app/views/moderations/actions_panel.html.erb
index bd57a1547..3f94e19cb 100644
--- a/app/views/moderations/actions_panel.html.erb
+++ b/app/views/moderations/actions_panel.html.erb
@@ -12,8 +12,8 @@
   <header class="top-header">
     <h1>Moderate Post</h1>
     <h2>Rate the quality of this post</h2>
-    <button class="close-actions-panel circle centered-icon" type="button" title="Close moderator actions panel">
-      <%= inline_svg_tag("chevron-right.svg", aria: true, title: "Close moderator actions panel") %>
+    <button class="crayons-btn crayons-btn--secondary crayons-btn--icon-rounded close-actions-panel" type="button" title="Close moderator actions panel">
+      <%= inline_svg_tag("x.svg", aria: true, class: "crayons-icon", title: "Close moderator actions panel") %>
     </button>
   </header>