From be8a30aed6459e8e8a4532c1ea55e7d3c39502ce Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Thu, 26 Nov 2020 12:43:08 +0100
Subject: [PATCH] style for messages, show answer count on detailed status

---
 .../mastodon/components/status_action_bar.js  |   4 +-
 .../components/account_authorize.js           |   2 +-
 .../status/components/detailed_status.js      |   8 +
 .../styles/bliss/_general_overrides.scss      |  23 ++
 app/javascript/styles/bliss/accounts.scss     |   3 +-
 app/javascript/styles/bliss/components.scss   | 221 +++++++++---------
 app/javascript/styles/bliss/dashboard.scss    |  10 +
 app/javascript/styles/bliss/variables.scss    |   3 +-
 8 files changed, 160 insertions(+), 114 deletions(-)

diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 0b2797763..82b4152a4 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -373,7 +373,7 @@ class StatusActionBar extends ImmutablePureComponent {
     );
     let countAnswers = status.get('replies_count') * 1;
 
-    const enableSoMuchAnswersWOW = true;
+    const enableSoMuchAnswersWOW = false;
     if (enableSoMuchAnswersWOW) {
       countAnswers += Math.floor(Math.random() * Math.floor(500000));
     }
@@ -381,7 +381,7 @@ class StatusActionBar extends ImmutablePureComponent {
     return (
       <div className='status__action-bar'>
         <IconButton
-          className='status__action-bar-button'
+          className='status__action-bar-button reply_button'
           title={replyTitle}
           icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
           onClick={this.handleReplyClick}
diff --git a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js
index e6fddfd6b..807460111 100644
--- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js
+++ b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js
@@ -35,7 +35,7 @@ class AccountAuthorize extends ImmutablePureComponent {
           <Permalink
             href={account.get('url')}
             to={`/accounts/${account.get('id')}`}
-            className='detailed-status__display-name'
+            className='status__display-name'
           >
             <div className='account-authorize__avatar'><Avatar
               account={account}
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index c2b883f7f..da495733e 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -16,6 +16,7 @@ import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
 import AnimatedNumber from 'mastodon/components/animated_number';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
+import IconButton from '../../../components/icon_button';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
@@ -249,6 +250,13 @@ class DetailedStatus extends ImmutablePureComponent {
             <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
               <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
             </a>{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink}
+            ·
+            <Icon id='reply' />
+            <span>
+
+            <AnimatedNumber value={status.get('replies_count')} />
+            </span>
+
           </div>
         </div>
       </div>
diff --git a/app/javascript/styles/bliss/_general_overrides.scss b/app/javascript/styles/bliss/_general_overrides.scss
index a8b415870..a552577b8 100644
--- a/app/javascript/styles/bliss/_general_overrides.scss
+++ b/app/javascript/styles/bliss/_general_overrides.scss
@@ -1,3 +1,5 @@
+@import './variables';
+
 .columns-area__panels {
 
   background: url('../images/elephant_ui_plane.svg') no-repeat left bottom fixed, url('../images/logo_cipherbliss.png') no-repeat right bottom fixed;
@@ -107,6 +109,27 @@
   }
 }
 
+
+.status__content,
+.status_info,
+.status__content__read-more-button,
+.display-name{
+  margin-left: 1em;
+}
+
+.status__wrapper, .detailed-status__wrapper{
+  .status__action-bar{
+    opacity: 0;
+    transition: all ease 0.5s;
+  }
+  &:hover{
+    .status__action-bar{
+
+      opacity: 1;
+      transition: all ease 0.2s;
+    }
+  }
+}
 .status__content__read-more-button {
   .fa{
     float:left;
diff --git a/app/javascript/styles/bliss/accounts.scss b/app/javascript/styles/bliss/accounts.scss
index 2c78e81be..e0cee5280 100644
--- a/app/javascript/styles/bliss/accounts.scss
+++ b/app/javascript/styles/bliss/accounts.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 .card {
   & > a {
     display: block;
@@ -33,7 +34,7 @@
       border-radius: 4px 4px 0 0;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (max-width: $no-columns-breakpoint) {
       height: 200px;
     }
 
diff --git a/app/javascript/styles/bliss/components.scss b/app/javascript/styles/bliss/components.scss
index 596259957..1e1fe4698 100644
--- a/app/javascript/styles/bliss/components.scss
+++ b/app/javascript/styles/bliss/components.scss
@@ -22,7 +22,7 @@
 
 .link-button {
   display: block;
-  font-size: 15px;
+  font-size: 1em;
   line-height: 20px;
   color: $ui-highlight-color;
   border: 0;
@@ -135,7 +135,7 @@
   &.button-secondary {
     color: $darker-text-color;
     background: transparent;
-    padding: 3px 15px;
+    padding: 3px 1em;
     border: 1px solid $ui-primary-color;
 
     &:active,
@@ -447,7 +447,7 @@
       outline: 0;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (max-width: $no-columns-breakpoint) {
       font-size: 16px;
     }
   }
@@ -468,7 +468,7 @@
       all: unset;
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (max-width: $no-columns-breakpoint) {
       height: 100px !important; // prevent auto-resize textarea
       resize: vertical;
     }
@@ -778,11 +778,10 @@
 .status__content--with-action {
   cursor: pointer;
 }
-
 .status__content,
 .reply-indicator__content {
   position: relative;
-  font-size: 15px;
+  font-size: 1em;
   line-height: 20px;
   word-wrap: break-word;
   font-weight: 400;
@@ -926,7 +925,7 @@
 
 .status__content__read-more-button {
   display: block;
-  font-size: 15px;
+  font-size: 1em;
   line-height: 20px;
   color: lighten($ui-highlight-color, 8%);
   border: 0;
@@ -963,7 +962,7 @@
   text-align: center;
   line-height: inherit;
   margin: 0;
-  padding: 15px;
+  padding: 1em;
   box-sizing: border-box;
   width: 100%;
   clear: both;
@@ -994,7 +993,6 @@
     }
   }
 }
-
 .status {
   padding: 8px 10px;
   padding-left: 68px;
@@ -1003,6 +1001,7 @@
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: auto;
 
+
   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
     // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
@@ -1051,7 +1050,6 @@
 
     .status__content {
       color: $inverted-text-color;
-
       a {
         color: $highlight-text-color;
       }
@@ -1102,7 +1100,7 @@
 }
 
 .status__info {
-  font-size: 15px;
+  font-size: 1em;
 }
 
 .status-check-box {
@@ -1165,7 +1163,7 @@
 .status__action-bar {
   align-items: center;
   display: flex;
-  margin-left: 2.4em;
+  height: 3.5em;
 
   &__counter {
     display: inline-flex;
@@ -1187,15 +1185,19 @@
 }
 
 .status__action-bar-button {
-  margin-right: 18px;
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+  //&.reply_button{
+    width : 20% !important;
+  //}
 }
 
-.status__action-bar-dropdown {
-  height: 23.15px;
-  width: 23.15px;
+.dropdown-menu {
+  height: 23.1em;
+  width: 23.1em;
 }
 
-.detailed-status__action-bar-dropdown {
+.detailed-status__action-bar-dropdown , .status__action-bar-dropdown {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
@@ -1242,7 +1244,7 @@
 }
 
 .detailed-status__meta {
-  margin-top: 15px;
+  margin-top: 1em;
   color: $dark-text-color;
   font-size: 14px;
   line-height: 18px;
@@ -1372,7 +1374,7 @@
       color: $primary-text-color;
       text-shadow: 1px 1px 2px $base-shadow-color;
       font-weight: 700;
-      font-size: 15px;
+      font-size: 1em;
     }
   }
 }
@@ -1505,7 +1507,7 @@ a .account__avatar {
 
   strong {
     display: block;
-    font-size: 15px;
+    font-size: 1em;
     font-weight: 500;
     color: $primary-text-color;
 
@@ -1522,7 +1524,7 @@ a .account__avatar {
 
   .detailed-status__display-name {
     display: block;
-    margin-bottom: 15px;
+    margin-bottom: 1em;
     overflow: hidden;
   }
 }
@@ -1575,14 +1577,15 @@ a.account__display-name {
 }
 
 .detailed-status .button.logo-button {
-  margin-bottom: 15px;
+  margin-bottom: 1em;
 }
 
 .detailed-status__display-name {
   color: $secondary-text-color;
   display: block;
   line-height: 24px;
-  margin-bottom: 15px;
+  margin-bottom: 1em;
+  margin-left: -3em;
   overflow: hidden;
 
   strong,
@@ -1651,7 +1654,7 @@ a.account__display-name {
   padding: 8px 0 0;
   cursor: default;
   color: $darker-text-color;
-  font-size: 15px;
+  font-size: 1em;
   line-height: 22px;
   position: relative;
 
@@ -1854,7 +1857,7 @@ a.account__display-name {
   background: $ui-secondary-color;
   padding: 4px 0;
   border-radius: 4px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
   z-index: 9999;
 
   ul {
@@ -1950,7 +1953,7 @@ a.account__display-name {
     background: $ui-secondary-color;
     padding: 4px 0;
     border-radius: 4px;
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
+    box-shadow: 0 0 1em rgba($base-shadow-color, 0.4);
     min-width: 140px;
     position: relative;
   }
@@ -2035,7 +2038,7 @@ a.account__display-name {
     &__main {
       box-sizing: border-box;
       width: 100%;
-      max-width: 600px;
+      max-width: $main-col-size-max;
       flex: 0 0 auto;
       display: flex;
       flex-direction: column;
@@ -2114,7 +2117,7 @@ a.account__display-name {
 .drawer__tab {
   display: block;
   flex: 1 1 auto;
-  padding: 15px 5px 13px;
+  padding: 1em 5px 13px;
   color: $darker-text-color;
   text-decoration: none;
   text-align: center;
@@ -2169,7 +2172,7 @@ a.account__display-name {
 .tabs-bar__link {
   display: block;
   flex: 1 1 auto;
-  padding: 15px 10px;
+  padding: 1em 10px;
   padding-bottom: 13px;
   color: $primary-text-color;
   text-decoration: none;
@@ -2205,7 +2208,7 @@ a.account__display-name {
   }
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (min-width: $no-columns-breakpoint) {
   .tabs-bar__link {
     span {
       display: inline;
@@ -2251,12 +2254,12 @@ a.account__display-name {
   .search__input {
     line-height: 18px;
     font-size: 16px;
-    padding: 15px;
+    padding: 1em;
     padding-right: 30px;
   }
 
   .search__icon .fa {
-    top: 15px;
+    top: 1em;
   }
 
   .scrollable {
@@ -2274,12 +2277,12 @@ a.account__display-name {
 
   @media screen and (min-width: 630px) {
     .detailed-status {
-      padding: 15px;
+      padding: 1em 1em 1em 5em;
 
       .media-gallery,
       .video-player,
       .audio-player {
-        margin-top: 15px;
+        margin-top: 1em;
       }
     }
 
@@ -2289,29 +2292,29 @@ a.account__display-name {
 
     .navigation-bar,
     .compose-form {
-      padding: 15px;
+      padding: 1em;
     }
 
     .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-      padding-top: 15px;
+      padding-top: 1em;
     }
 
-    .status {
-      padding: 15px 15px 15px (48px + 15px * 2);
-      min-height: 48px + 2px;
+    .status{
+      padding: 1em 1em 1em 5em;
+      min-height: 5em;
 
       &__avatar {
-        left: 15px;
-        top: 17px;
+        left: 1em;
+        top: 1.25em;
       }
 
       &__content {
-        padding-top: 5px;
+        padding-top: 1em;
       }
 
       &__prepend {
-        margin-left: 48px + 15px * 2;
-        padding-top: 15px;
+        margin-left: calc(48px + 2em);
+        padding-top: 1em;
       }
 
       &__prepend-icon-wrapper {
@@ -2327,7 +2330,7 @@ a.account__display-name {
     }
 
     .account {
-      padding: 15px 10px;
+      padding: 1em 10px;
 
       &__header__bio {
         margin: 0 -10px;
@@ -2336,8 +2339,8 @@ a.account__display-name {
 
     .notification {
       &__message {
-        margin-left: 48px + 15px * 2;
-        padding-top: 15px;
+        margin-left: calc(48px + 1em * 2);
+        padding-top: 1em;
       }
 
       &__favourite-icon-wrapper {
@@ -2354,7 +2357,7 @@ a.account__display-name {
 
       .account__avatar-wrapper {
         margin-left: 17px;
-        margin-right: 15px;
+        margin-right: 1em;
       }
     }
   }
@@ -2399,13 +2402,13 @@ a.account__display-name {
   }
 }
 
-@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
+@media screen and (max-width: $no-columns-breakpoint + (285px * 1) + (10px * 1)) {
   .columns-area__panels__pane--compositional {
     display: none;
   }
 }
 
-@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
+@media screen and (min-width: $no-columns-breakpoint + (285px * 1) + (10px * 1)) {
   .floating-action-button,
   .tabs-bar__link.optional {
     display: none;
@@ -2416,13 +2419,13 @@ a.account__display-name {
   }
 }
 
-@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
+@media screen and (max-width: $no-columns-breakpoint + (285px * 2) + (10px * 2)) {
   .columns-area__panels__pane--navigational {
     display: none;
   }
 }
 
-@media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
+@media screen and (min-width: $no-columns-breakpoint + (285px * 2) + (10px * 2)) {
   .tabs-bar {
     display: none;
   }
@@ -2637,7 +2640,7 @@ a.account__display-name {
   line-height: inherit;
   border: 0;
   text-align: unset;
-  padding: 15px;
+  padding: 1em;
   margin: 0;
   z-index: 3;
   outline: 0;
@@ -2663,7 +2666,7 @@ a.account__display-name {
   }
 
   &:last-child {
-    padding: 0 15px 0 0;
+    padding: 0 1em 0 0;
   }
 }
 
@@ -2680,7 +2683,7 @@ a.account__display-name {
   cursor: pointer;
   flex: 0 0 auto;
   font-size: 16px;
-  padding: 15px;
+  padding: 1em;
   position: absolute;
   right: 0;
   top: -48px;
@@ -2797,7 +2800,7 @@ a.account__display-name {
   color: $primary-text-color;
   display: block;
   font-size: 16px;
-  padding: 15px;
+  padding: 1em;
   text-decoration: none;
 
   &:hover,
@@ -2989,7 +2992,7 @@ a.account__display-name {
     outline: 0;
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: $no-columns-breakpoint) {
     font-size: 16px;
   }
 }
@@ -3224,7 +3227,7 @@ a.status-card.compact:hover {
   text-align: center;
   line-height: inherit;
   margin: 0;
-  padding: 15px;
+  padding: 1em;
   box-sizing: border-box;
   width: 100%;
   clear: both;
@@ -3242,7 +3245,7 @@ a.status-card.compact:hover {
 .timeline-hint {
   text-align: center;
   color: $darker-text-color;
-  padding: 15px;
+  padding: 1em;
   box-sizing: border-box;
   width: 100%;
   cursor: default;
@@ -3302,7 +3305,7 @@ a.status-card.compact:hover {
     }
 
     span {
-      font-size: 15px;
+      font-size: 1em;
       font-weight: 400;
     }
   }
@@ -3352,7 +3355,7 @@ a.status-card.compact:hover {
   & > button {
     margin: 0;
     border: 0;
-    padding: 15px 0 15px 15px;
+    padding: 1em 0 1em 1em;
     color: inherit;
     background: transparent;
     font: inherit;
@@ -3399,7 +3402,7 @@ a.status-card.compact:hover {
   color: $darker-text-color;
   cursor: pointer;
   font-size: 16px;
-  padding: 0 15px;
+  padding: 0 1em;
 
   &:hover {
     color: lighten($darker-text-color, 7%);
@@ -3446,7 +3449,7 @@ a.status-card.compact:hover {
 
 .column-header__collapsible-inner {
   background: lighten($ui-base-color, 8%);
-  padding: 15px;
+  padding: 1em;
 }
 
 .column-header__setting-btn {
@@ -3733,7 +3736,7 @@ a.status-card.compact:hover {
 
 .column-settings__outer {
   background: lighten($ui-base-color, 8%);
-  padding: 15px;
+  padding: 1em;
 }
 
 .column-settings__section {
@@ -3746,7 +3749,7 @@ a.status-card.compact:hover {
 
 .column-settings__hashtags {
   .column-settings__row {
-    margin-bottom: 15px;
+    margin-bottom: 1em;
   }
 
   .column-select {
@@ -3771,7 +3774,7 @@ a.status-card.compact:hover {
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (max-width: $no-columns-breakpoint) {
         font-size: 16px;
       }
     }
@@ -3848,7 +3851,7 @@ a.status-card.compact:hover {
 
 .column-settings__row {
   .text-btn {
-    margin-bottom: 15px;
+    margin-bottom: 1em;
   }
 }
 
@@ -3889,7 +3892,7 @@ a.status-card.compact:hover {
   background: $ui-base-color;
   text-align: center;
   padding: 20px;
-  font-size: 15px;
+  font-size: 1em;
   font-weight: 400;
   cursor: default;
   display: flex;
@@ -4183,7 +4186,7 @@ a.status-card.compact:hover {
 .privacy-dropdown__dropdown {
   position: absolute;
   background: $simple-background-color;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
   border-radius: 4px;
   margin-left: 40px;
   overflow: hidden;
@@ -4284,7 +4287,7 @@ a.status-card.compact:hover {
   @include search-input;
 
   display: block;
-  padding: 15px;
+  padding: 1em;
   padding-right: 30px;
   line-height: 18px;
   font-size: 16px;
@@ -4307,7 +4310,7 @@ a.status-card.compact:hover {
     background: lighten($ui-base-color, 4%);
   }
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: $no-columns-breakpoint) {
     font-size: 16px;
   }
 }
@@ -4372,7 +4375,7 @@ a.status-card.compact:hover {
 .search-results__header {
   color: $dark-text-color;
   background: lighten($ui-base-color, 2%);
-  padding: 15px;
+  padding: 1em;
   font-weight: 500;
   font-size: 16px;
   cursor: default;
@@ -4391,7 +4394,7 @@ a.status-card.compact:hover {
     border-bottom: 1px solid lighten($ui-base-color, 8%);
     cursor: default;
     display: flex;
-    padding: 15px;
+    padding: 1em;
     font-weight: 500;
     font-size: 16px;
     color: $dark-text-color;
@@ -4536,7 +4539,7 @@ a.status-card.compact:hover {
   font-size: 24px;
   height: 20vmax;
   margin: auto 0;
-  padding: 30px 15px;
+  padding: 30px 1em;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -4705,8 +4708,8 @@ a.status-card.compact:hover {
 
 .display-case {
   text-align: center;
-  font-size: 15px;
-  margin-bottom: 15px;
+  font-size: 1em;
+  margin-bottom: 1em;
 
   &__label {
     font-weight: 500;
@@ -4812,7 +4815,7 @@ a.status-card.compact:hover {
 }
 
 .boost-modal__status-header {
-  font-size: 15px;
+  font-size: 1em;
 }
 
 .boost-modal__status-time {
@@ -5017,7 +5020,7 @@ a.status-card.compact:hover {
         color: $inverted-text-color;
         display: flex;
         padding: 12px 16px;
-        font-size: 15px;
+        font-size: 1em;
         align-items: center;
         text-decoration: none;
 
@@ -5114,11 +5117,11 @@ a.status-card.compact:hover {
 }
 
 .report-modal__target {
-  padding: 15px;
+  padding: 1em;
 
   .media-modal__close {
     top: 14px;
-    right: 15px;
+    right: 1em;
   }
 }
 
@@ -5377,7 +5380,7 @@ a.status-card.compact:hover {
   }
 
   .video-player__controls {
-    padding: 0 15px;
+    padding: 0 1em;
     padding-top: 10px;
     background: transparent;
   }
@@ -5440,7 +5443,7 @@ a.status-card.compact:hover {
     right: 0;
     box-sizing: border-box;
     background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
-    padding: 0 15px;
+    padding: 0 1em;
     opacity: 0;
     transition: opacity .1s ease;
 
@@ -5800,11 +5803,11 @@ a.status-card.compact:hover {
       }
 
       .display-name {
-        margin-left: 15px;
+        margin-left: 1em;
         text-align: left;
 
         strong {
-          font-size: 15px;
+          font-size: 1em;
           color: $primary-text-color;
           font-weight: 500;
           overflow: hidden;
@@ -5831,12 +5834,12 @@ a.status-card.compact:hover {
       .accounts-table__count {
         width: 33.33%;
         flex: 0 0 auto;
-        padding: 15px 0;
+        padding: 1em 0;
       }
 
       .account__header__content {
         box-sizing: border-box;
-        padding: 15px 10px;
+        padding: 1em 10px;
         border-bottom: 1px solid lighten($ui-base-color, 8%);
         width: 100%;
         min-height: 18px + 30px;
@@ -5903,7 +5906,7 @@ a.status-card.compact:hover {
     display: block;
     flex: 1 1 auto;
     color: $darker-text-color;
-    padding: 15px 0;
+    padding: 1em 0;
     font-size: 14px;
     font-weight: 500;
     text-align: center;
@@ -5960,7 +5963,7 @@ a.status-card.compact:hover {
   background: $ui-base-color;
 
   &__column {
-    padding: 10px 15px;
+    padding: 10px 1em;
   }
 
   .radio-button {
@@ -6148,7 +6151,7 @@ noscript {
     padding: 10px;
 
     .hint {
-      margin-bottom: 15px;
+      margin-bottom: 1em;
     }
 
     .embed-modal__html {
@@ -6163,7 +6166,7 @@ noscript {
       color: $primary-text-color;
       font-size: 14px;
       margin: 0;
-      margin-bottom: 15px;
+      margin-bottom: 1em;
       border-radius: 4px;
 
       &::-moz-focus-inner {
@@ -6180,7 +6183,7 @@ noscript {
         background: lighten($ui-base-color, 4%);
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (max-width: $no-columns-breakpoint) {
         font-size: 16px;
       }
     }
@@ -6233,7 +6236,7 @@ noscript {
 }
 
 .column-inline-form {
-  padding: 15px;
+  padding: 1em;
   padding-right: 0;
   display: flex;
   justify-content: flex-start;
@@ -6272,7 +6275,7 @@ noscript {
   background: $ui-base-color;
   flex-direction: column;
   border-radius: 8px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
   width: 380px;
   overflow: hidden;
 
@@ -6281,7 +6284,7 @@ noscript {
   }
 
   h4 {
-    padding: 15px 0;
+    padding: 1em 0;
     background: lighten($ui-base-color, 13%);
     font-weight: 500;
     font-size: 16px;
@@ -6298,7 +6301,7 @@ noscript {
 
     &.backdrop {
       width: calc(100% - 60px);
-      box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+      box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
       border-radius: 0 0 0 8px;
     }
   }
@@ -6326,7 +6329,7 @@ noscript {
   background: $ui-base-color;
   flex-direction: column;
   border-radius: 8px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: 2px 4px 1em rgba($base-shadow-color, 0.4);
   width: 380px;
   overflow: hidden;
 
@@ -6585,7 +6588,7 @@ noscript {
     margin: 0 -5px;
 
     .account__header__content {
-      padding: 20px 15px;
+      padding: 20px 1em;
       padding-bottom: 5px;
       color: $primary-text-color;
 
@@ -6637,7 +6640,7 @@ noscript {
   }
 
   &__account-note {
-    padding: 15px;
+    padding: 1em;
     padding-bottom: 10px;
     color: $primary-text-color;
     font-size: 14px;
@@ -6691,7 +6694,7 @@ noscript {
     background: lighten($ui-base-color, 2%);
     border-bottom: 1px solid darken($ui-base-color, 4%);
     font-weight: 500;
-    padding: 15px;
+    padding: 1em;
     font-size: 16px;
     cursor: default;
 
@@ -6704,7 +6707,7 @@ noscript {
   &__item {
     display: flex;
     align-items: center;
-    padding: 15px;
+    padding: 1em;
     border-bottom: 1px solid lighten($ui-base-color, 8%);
 
     &:last-child {
@@ -6748,7 +6751,7 @@ noscript {
       line-height: 36px;
       font-weight: 500;
       text-align: right;
-      padding-right: 15px;
+      padding-right: 1em;
       margin-left: 5px;
       color: $secondary-text-color;
     }
@@ -6801,7 +6804,7 @@ noscript {
   &__content {
     flex: 1 1 auto;
     padding: 10px 5px;
-    padding-right: 15px;
+    padding-right: 1em;
     overflow: hidden;
 
     &__info {
@@ -6812,14 +6815,14 @@ noscript {
     }
 
     &__relative-time {
-      font-size: 15px;
+      font-size: 1em;
       color: $darker-text-color;
-      padding-left: 15px;
+      padding-left: 1em;
     }
 
     &__names {
       color: $darker-text-color;
-      font-size: 15px;
+      font-size: 1em;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -6889,9 +6892,9 @@ noscript {
   &__item {
     box-sizing: border-box;
     width: 100%;
-    padding: 15px;
+    padding: 1em;
     position: relative;
-    font-size: 15px;
+    font-size: 1em;
     line-height: 20px;
     word-wrap: break-word;
     font-weight: 400;
@@ -6920,7 +6923,7 @@ noscript {
   }
 
   &__pagination {
-    padding: 15px;
+    padding: 1em;
     color: $darker-text-color;
     position: absolute;
     bottom: 3px;
@@ -6940,7 +6943,7 @@ noscript {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 15px;
+  margin-top: 1em;
   margin-left: -2px;
   width: calc(100% - (90px - 33px));
 
diff --git a/app/javascript/styles/bliss/dashboard.scss b/app/javascript/styles/bliss/dashboard.scss
index 6172a5945..49dc49876 100644
--- a/app/javascript/styles/bliss/dashboard.scss
+++ b/app/javascript/styles/bliss/dashboard.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 .dashboard__counters {
   display: flex;
   flex-wrap: wrap;
@@ -88,4 +89,13 @@
         transition: opacity ease 0.1s;
       }
   }
+  .timelines{
+    a{
+      display: inline-block;
+      width : 20%;
+    }
+    span{
+      display: none;
+    }
+  }
 }
diff --git a/app/javascript/styles/bliss/variables.scss b/app/javascript/styles/bliss/variables.scss
index 21d2039ca..2c3c7e327 100644
--- a/app/javascript/styles/bliss/variables.scss
+++ b/app/javascript/styles/bliss/variables.scss
@@ -24,7 +24,8 @@ $media-modal-media-max-width: 100%;
 // put margins on top and bottom of image to avoid the screen covered by image.
 $media-modal-media-max-height: 80%;
 
-$no-gap-breakpoint: 415px;
+$no-gap-breakpoint: 600px;
+$main-col-size-max: 800px;
 /************************
   END bliss specific variables
  ************************/