From d106a91363f4d730ec29ebfabf3ad22cb77f5bfd Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Wed, 5 Feb 2020 17:58:51 +0100
Subject: [PATCH] fixs for light style

---
 .../mastodon/components/status_action_bar.js  | 43 +++++-----
 app/javascript/styles/bliss.scss              | 65 +++++++-------
 app/javascript/styles/bliss/variables.scss    | 86 ++++++++++---------
 .../styles/mastodon-light/diff.scss           | 50 +++++++++++
 .../styles/mastodon-light/variables.scss      |  6 +-
 app/javascript/styles/mastodon/variables.scss | 34 +++-----
 6 files changed, 170 insertions(+), 114 deletions(-)

diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index f3ec1725a..4143f2b64 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -41,14 +41,19 @@ const messages = defineMessages({
   unmute               : { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
   unblock              : { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
 });
-
+const ObfuscateCountReplies = false;
 const obfuscatedCount = count => {
-  if (count < 0) {
-    return 0;
-  } else if (count <= 1) {
-    return count;
+  if (ObfuscateCountReplies) {
+
+    if (count < 0) {
+      return 0;
+    } else if (count <= 1) {
+      return count;
+    } else {
+      return '1+';
+    }
   } else {
-    return '1+';
+    return count;
   }
 };
 
@@ -105,7 +110,7 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   };
   handleReplyUnderClick = () => {
-    this.props.showReplyFormUnder = true;
+    console.info('hop show');
   };
 
   handleShareClick = () => {
@@ -235,6 +240,7 @@ class StatusActionBar extends ImmutablePureComponent {
   render() {
     const { status, relationship, intl, withDismiss } = this.props;
 
+    console.log('this.props', this.props);
     const mutingConversation = status.get('muted');
     const anonymousAccess = !me;
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -374,25 +380,22 @@ class StatusActionBar extends ImmutablePureComponent {
     return (
       <div className='status__action-bar'>
         <div className='status__action-bar__counter'>
-          <IconButton
-            className='status__action-bar-button'
-            title={replyTitle}
-            icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
-            onClick={this.handleReplyClick}
-          />
+
           <IconButton
             className='status__action-bar-button reply_under'
             title={replyTitle}
             icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
             onClick={this.handleReplyUnderClick}
           />
-          {this.props.showReplyFormUnder && (
-            <span >
-              yes
-            </span >
-          )}
-          <span className='status__action-bar__counter__label'>{obfuscatedCount(status.get('replies_count'))}</span >
-          <span className='status__action-bar__counter__label'>({status.get('replies_count')})</span >
+          {/*{this.state.showReplyFormUnder && (*/}
+          {/*  <span >*/}
+          {/*    yes*/}
+          {/*  </span >*/}
+          {/*)}*/}
+          {/*<span className='status__action-bar__counter__label'>{obfuscatedCount(status.get('replies_count'))}</span >*/}
+          <span className='status__action-bar__counter__label'>
+            {obfuscatedCount(status.get('replies_count'))}
+          </span >
         </div >
         <IconButton
           className='status__action-bar-button'
diff --git a/app/javascript/styles/bliss.scss b/app/javascript/styles/bliss.scss
index 762aa1a06..c1c56c1d3 100644
--- a/app/javascript/styles/bliss.scss
+++ b/app/javascript/styles/bliss.scss
@@ -1,32 +1,37 @@
-@import 'bliss/variables';
-@import 'bliss/mixins';
-@import 'bliss/variables';
-@import 'fonts/roboto';
-@import 'fonts/roboto-mono';
-@import 'fonts/montserrat';
-
-@import 'bliss/reset';
-@import 'bliss/messaging';
-@import 'bliss/basics';
-@import 'bliss/containers';
-@import 'bliss/lists';
-@import 'bliss/footer';
-@import 'bliss/compact_header';
-@import 'bliss/widgets';
-@import 'bliss/forms';
-@import 'bliss/accounts';
-@import 'bliss/statuses';
-@import 'bliss/boost';
-@import 'bliss/components';
-@import 'bliss/polls';
-@import 'bliss/introduction';
-@import 'bliss/modal';
-@import 'bliss/emoji_picker';
-@import 'bliss/about';
-@import 'bliss/tables';
-@import 'bliss/admin';
-@import 'bliss/dashboard';
-@import 'bliss/rtl';
-@import 'bliss/accessibility';
+//@import 'mastodon/variables';
+@import 'mastodon-light/variables';
+@import 'application';
+@import 'mastodon-light/diff';
+
+
+//@import 'bliss/variables';
+//@import 'bliss/mixins';
+//@import 'fonts/roboto';
+//@import 'fonts/roboto-mono';
+//@import 'fonts/montserrat';
+//
+//@import 'bliss/reset';
+//@import 'bliss/messaging';
+//@import 'bliss/basics';
+//@import 'bliss/containers';
+//@import 'bliss/lists';
+//@import 'bliss/footer';
+//@import 'bliss/compact_header';
+//@import 'bliss/widgets';
+//@import 'bliss/forms';
+//@import 'bliss/accounts';
+//@import 'bliss/statuses';
+//@import 'bliss/boost';
+//@import 'bliss/components';
+//@import 'bliss/polls';
+//@import 'bliss/introduction';
+//@import 'bliss/modal';
+//@import 'bliss/emoji_picker';
+//@import 'bliss/about';
+//@import 'bliss/tables';
+//@import 'bliss/admin';
+//@import 'bliss/dashboard';
+//@import 'bliss/rtl';
+//@import 'bliss/accessibility';
 
 
diff --git a/app/javascript/styles/bliss/variables.scss b/app/javascript/styles/bliss/variables.scss
index 7b84e6e7d..c39d2e27b 100644
--- a/app/javascript/styles/bliss/variables.scss
+++ b/app/javascript/styles/bliss/variables.scss
@@ -1,46 +1,29 @@
 // Commonly used web colors
-$black: #111; // Black
-$white: #fff; // White
-$success-green: #6bbd77 !default; // Padua
-$error-red: #d4839b !default; // Cerise
-$warning-red: #528dc8 !default; // Sunset Orange
-$gold-star: #98c6ff !default; // Dark Goldenrod
+//$black: #000; // Black
+//$white: #fff; // White
+//$success-green: #6bbd77 !default; // Padua
+//$error-red: #d4839b !default; // Cerise
+//$warning-red: #528dc8 !default; // Sunset Orange
+//$gold-star: #98c6ff !default; // Dark Goldenrod
 
-// Values from the classic Mastodon UI
-$classic-base-color: #282c37; // Midnight Express
-$classic-primary-color: #9baec8; // Echo Blue
-$classic-secondary-color: #d9e1e8; // Pattens Blue
-$classic-highlight-color: #2b90d9; // Summer Sky
+/************************
+  BEGIN bliss specific variables
+************************/
 
-// Variables for defaults in UI
-$base-shadow-color: $black !default;
-$base-overlay-background: $black !default;
-$base-border-color: $white !default;
-$simple-background-color: $white !default;
-$valid-value-color: $success-green !default;
-$error-value-color: $error-red !default;
+//$black: #000; // Black
+//$white: #fff; // White
+//$success-green: #6bbd77 !default; // Padua
+//$error-red: red !default; // Cerise
+//$warning-red: orange !default; // Sunset Orange
+//$gold-star: #98c6ff !default; // Dark Goldenrod
 
-// Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default; // Darkest
-$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default; // Lighter
-$ui-secondary-color: $classic-secondary-color !default; // Lightest
-$ui-highlight-color: $classic-highlight-color !default;
 
-// Variables for texts
-$primary-text-color: $white !default;
-$darker-text-color: $ui-primary-color !default;
-$dark-text-color: $ui-base-lighter-color !default;
-$secondary-text-color: $ui-secondary-color !default;
-$highlight-text-color: $ui-highlight-color !default;
-$action-button-color: $ui-base-lighter-color !default;
-// For texts on inverted backgrounds
-$inverted-text-color: $ui-base-color !default;
-$lighter-text-color: $ui-base-lighter-color !default;
-$light-text-color: $ui-primary-color !default;
+// Variables for components
+$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%;
+// fix
 
-// Language codes that uses CJK fonts
-$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
 
 // Variables for components
 $media-modal-media-max-width: 100%;
@@ -48,7 +31,30 @@ $media-modal-media-max-width: 100%;
 $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 415px;
+/************************
+  END bliss specific variables
+ ************************/
 
-$font-sans-serif: 'mastodon-font-sans-serif' !default;
-$font-display: 'mastodon-font-display' !default;
-$font-monospace: 'mastodon-font-monospace' !default;
+/************************
+light color set
+ */
+//$ui-base-color: $classic-secondary-color !default;
+//$ui-base-lighter-color: #b0c0cf !default;
+//$ui-primary-color: #9bcbed !default;
+//$ui-secondary-color: $classic-base-color !default;
+//$ui-highlight-color: #2b90d9 !default;
+//
+//$primary-text-color: $black !default;
+//$darker-text-color: $classic-base-color !default;
+//$dark-text-color: #444b5d !default;
+//$action-button-color: #606984 !default;
+//
+//$inverted-text-color: $black !default;
+//$lighter-text-color: $classic-base-color !default;
+//$light-text-color: #444b5d !default;
+//
+////Newly added colors
+//$account-background-color: $white !default;
+/**
+end light color set
+ */
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 05e52966b..a8b270b90 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -774,3 +774,53 @@ html {
 .audio-player .video-player__time-total {
   color: $primary-text-color;
 }
+
+body,
+.tabs-bar__wrapper {
+  background: #9baec8 !important;
+}
+
+a {
+  color: #0b97c4;
+
+  &.column-link {
+    color: #222;
+  }
+}
+
+.search__input,
+.compose-form .compose-form__buttons-wrapper {
+  background: $classic-secondary-color;
+}
+
+.search__input, {
+  &:focus {
+    color: white;
+  }
+}
+
+.compose-form__publish-button-wrapper {
+  .button {
+    width: 100%;
+    display: block;
+    float: none;
+  }
+}
+
+.links-started__footer {
+  a, li {
+    display: inline-block;
+    float: left;
+
+    margin-right: 2ch;
+
+  }
+
+  ul li {
+    list-style-type: none;
+  }
+
+  p {
+    float: left;
+  }
+}
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index cf0e40371..61c75d5bb 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -1,6 +1,6 @@
 // Dependent colors
 $black: #000000;
-$white: #ffffff;
+$white: #eeeeee;
 
 $classic-base-color: #282c37;
 $classic-primary-color: #9baec8;
@@ -13,10 +13,10 @@ $success-green: lighten(#3c754d, 8%);
 $base-overlay-background: $white !default;
 $valid-value-color: $success-green !default;
 
-$ui-base-color: $classic-secondary-color !important;
+$ui-base-color: $base-overlay-background !default;
 $ui-base-lighter-color: #b0c0cf;
 $ui-primary-color: #9bcbed;
-$ui-secondary-color: $classic-base-color !default;
+$ui-secondary-color: $classic-secondary-color !default;
 $ui-highlight-color: #2b90d9;
 
 $primary-text-color: $black !default;
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 71a46d10f..edc443a0d 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -1,18 +1,18 @@
 // Commonly used web colors
-$black: #000000;            // Black
-$white: #ffffff;            // White
-$success-green: #79bd9a !default;    // Padua
-$error-red: #df405a !default;        // Cerise
-$warning-red: #ff5050 !default;      // Sunset Orange
-$gold-star: #ca8f04 !default;        // Dark Goldenrod
+$black: #000000; // Black
+$white: #ffffff; // White
+$success-green: #79bd9a !default; // Padua
+$error-red: #df405a !default; // Cerise
+$warning-red: #ff5050 !default; // Sunset Orange
+$gold-star: #ca8f04 !default; // Dark Goldenrod
 
 $red-bookmark: $warning-red;
 
 // Values from the classic Mastodon UI
-$classic-base-color: #282c37;         // Midnight Express
-$classic-primary-color: #9baec8;      // Echo Blue
-$classic-secondary-color: #d9e1e8;    // Pattens Blue
-$classic-highlight-color: #2b90d9;    // Summer Sky
+$classic-base-color: #282c37; // Midnight Express
+$classic-primary-color: #9baec8; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #2b90d9; // Summer Sky
 
 // Variables for defaults in UI
 $base-shadow-color: $black !default;
@@ -23,10 +23,10 @@ $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;
 
 // Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-color: $classic-base-color !default; // Darkest
 $ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default;            // Lighter
-$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
 $ui-highlight-color: $classic-highlight-color !default;
 
 // Variables for texts
@@ -41,14 +41,6 @@ $inverted-text-color: $ui-base-color !default;
 $lighter-text-color: $ui-base-lighter-color !default;
 $light-text-color: $ui-primary-color !default;
 
-// custom sheet made on https://www.cipherbliss.com
-// Commonly used web colors
-$black: #fff; // Black
-$white: #000; // White
-$success-green: #6bbd77 !default; // Padua
-$error-red: #d4839b !default; // Cerise
-$warning-red: #528dc8 !default; // Sunset Orange
-$gold-star: #00ec84 !default; // Dark Goldenrod
 
 // User Interface Colors
 $ui-base-color: #313644; // Midnight Express