From 36c31a1f84bcc3125d034b138083ab154ae13b84 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 1 Dec 2021 14:09:14 +0300
Subject: [PATCH] Fix ShowMore and paddings in Comments (#461)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/theme/styles/_layouts.scss           | 25 +++--------------
 .../src/components/ShowMore.svelte            | 28 ++++++++++++++-----
 .../src/components/TxView.svelte              |  2 +-
 .../activity/TxCommentCreate.svelte           |  6 ++--
 4 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index ac5ae1f5a8..cf6486393a 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -80,25 +80,15 @@ table {
   border-spacing: 0;
 }
 
-// input:-webkit-autofill,
-// input:-webkit-autofill:hover,
-// input:-webkit-autofill:focus,
-// input:-webkit-autofill:active {
-//   -webkit-animation: autofill 0s forwards;
-// }
- 
-// @-webkit-keyframes autofill {
-//   100% {
-//     background: transparent;
-//     color: inherit;
-//   }
-// }
-
 /* Common */
 * {
   --modal-padding: 1.5rem;
 }
 
+p:first-child { margin-block-start: 0; } // First and last padding
+p:last-child { margin-block-end: 0; }
+
+/* Flex */
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
 .flex-grow { flex-grow: 1; }
@@ -181,13 +171,6 @@ table {
   &:hover .icon { color: var(--theme-caption-color); }
 }
 
-/* Tables */
-// .activity-table > tr:last-child > .no-icon-cell {
-//   min-height: auto;
-//   height: auto;
-//   &::after { content: none; }
-// }
-
 /* Margins & Paddings */
 .step-lr75 + .step-lr75 { margin-left: .75rem; }
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
diff --git a/plugins/activity-resources/src/components/ShowMore.svelte b/plugins/activity-resources/src/components/ShowMore.svelte
index 7e0e271b22..ae039ea804 100644
--- a/plugins/activity-resources/src/components/ShowMore.svelte
+++ b/plugins/activity-resources/src/components/ShowMore.svelte
@@ -52,7 +52,7 @@
     &.crop {
       overflow: hidden;
       max-height: 15rem;
-      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
+      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .9) 2.5rem, rgba(0, 0, 0, 1) 3rem);
     }
   }
 
@@ -63,8 +63,9 @@
     bottom: 0;
     margin: 0 auto;
     padding: .5rem 1rem;
-    width: fit-content;
+    width: max-content;
 
+    font-weight: 500;
     font-size: .75rem;
     color: var(--theme-caption-color);
     background: var(--theme-card-bg);
@@ -72,20 +73,33 @@
     box-shadow: 0px 8px 15px rgba(0, 0, 0, .1);
     backdrop-filter: blur(120px);
     border-radius: 2.5rem;
+    user-select: none;
     cursor: pointer;
 
-    opacity: .3;
-    transform: scale(.9);
+    opacity: .9;
+    transform: scale(.97);
     transition: opacity .1s ease-in-out, transform .1s ease-in-out;
     &:hover {
       opacity: 1;
       transform: scale(1);
     }
     &:active {
-      opacity: .9;
-      transform: scale(.95);
+      opacity: .95;
+      transform: scale(.99);
     }
 
-    &.outter { bottom: -2.25rem; }
+    &.outter {
+      bottom: -1.85rem;
+      opacity: .7;
+      transform: scale(.80);
+      &:hover {
+        opacity: 1;
+        transform: scale(.83);
+      }
+      &:active {
+        opacity: .95;
+        transform: scale(.82);
+      }
+    }
   }
 </style>
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index 4470744940..f2c82baa66 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -265,7 +265,7 @@
 
   .menuOptions {
     margin-left: .5rem;
-    opacity: .6;
+    opacity: .8;
     cursor: pointer;
     &:hover { opacity: 1; }
   }
diff --git a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
index f4cf824285..96cdb183f3 100644
--- a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
@@ -40,7 +40,7 @@
   let refInput: ReferenceInput
 </script>
 
-<div class:editing={editing}>
+<div class:editing>
   {#if edit}
     <ReferenceInput bind:this={refInput} content={value.message} on:message={onMessage} showSend={false}/>
     <div class='flex-row-reverse safari-gap-2 reverse'>
@@ -55,7 +55,5 @@
 </div>
 
 <style lang="scss">
-  .editing {
-    border: 1px solid var(--primary-button-focused-border);
-  }
+  .editing { border: 1px solid var(--primary-button-focused-border); }
 </style>