From 64b6c20676f320686c58e321b674cba757e40905 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Tue, 7 Jul 2020 17:47:33 +0200
Subject: Change styling and layout of account notes UI

---
 .../glitch/styles/components/accounts.scss         | 32 ++++++++++++++--------
 1 file changed, 20 insertions(+), 12 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles/components/accounts.scss')

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 774254a4c..c1e3ae835 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -714,42 +714,44 @@
   }
 
   &__account-note {
-    margin: 5px;
-    padding: 10px;
-    background: $ui-highlight-color;
-    color: $primary-text-color;
+    margin: 0 -5px;
+    padding: 10px 15px;
     display: flex;
     flex-direction: column;
-    border-radius: 4px;
     font-size: 14px;
     font-weight: 400;
+    border-top: 1px solid lighten($ui-base-color, 12%);
+    border-bottom: 1px solid lighten($ui-base-color, 12%);
 
     &__header {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      margin-bottom: 5px;
+      color: $darker-text-color;
     }
 
     &__content {
       white-space: pre-wrap;
-      margin-top: 5px;
+      padding: 10px 0;
     }
 
     &__buttons {
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
-      margin-top: 5px;
+      flex: 1 0;
 
       .flex-spacer {
-        flex: 0 0 20px;
+        flex: 0 0 15px;
         background: transparent;
       }
     }
 
     strong {
-      font-size: 15px;
+      font-size: 12px;
       font-weight: 500;
+      text-transform: uppercase;
     }
 
     button:hover span {
@@ -759,18 +761,24 @@
     textarea {
       display: block;
       box-sizing: border-box;
-      width: 100%;
+      width: calc(100% + 20px);
       margin: 0;
       margin-top: 5px;
-      color: $inverted-text-color;
-      background: $simple-background-color;
+      color: $secondary-text-color;
+      background: $ui-base-color;
       padding: 10px;
+      margin: 0 -10px;
       font-family: inherit;
       font-size: 14px;
       resize: none;
       border: 0;
       outline: 0;
       border-radius: 4px;
+
+      &::placeholder {
+        color: $dark-text-color;
+        opacity: 1;
+      }
     }
   }
 }
-- 
cgit 


From 0fe5deae89f140d2721e5c914b4ad06fea426623 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Tue, 7 Jul 2020 19:26:08 +0200
Subject: Change styling of account note editing buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Mélanie Chauvel (ariasuni) <perso@hack-libre.org>
---
 .../features/account/components/account_note.js    |  6 ++---
 .../glitch/styles/components/accounts.scss         | 29 ++++++++++++++++++----
 2 files changed, 27 insertions(+), 8 deletions(-)

(limited to 'app/javascript/flavours/glitch/styles/components/accounts.scss')

diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.js b/app/javascript/flavours/glitch/features/account/components/account_note.js
index 8a99bfcb8..6e5ed7703 100644
--- a/app/javascript/flavours/glitch/features/account/components/account_note.js
+++ b/app/javascript/flavours/glitch/features/account/components/account_note.js
@@ -54,11 +54,11 @@ class Header extends ImmutablePureComponent {
     if (isEditing) {
       action_buttons = (
         <div className='account__header__account-note__buttons'>
-          <button className='text-btn' tabIndex='0' onClick={this.props.onCancelAccountNote} disabled={isSubmitting}>
+          <button className='icon-button' tabIndex='0' onClick={this.props.onCancelAccountNote} disabled={isSubmitting}>
             <Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
           </button>
           <div className='flex-spacer' />
-          <button className='text-btn' tabIndex='0' onClick={this.props.onSaveAccountNote} disabled={isSubmitting}>
+          <button className='icon-button' tabIndex='0' onClick={this.props.onSaveAccountNote} disabled={isSubmitting}>
             <Icon id='check' size={15} /> <FormattedMessage id='account_note.save' defaultMessage='Save' />
           </button>
         </div>
@@ -66,7 +66,7 @@ class Header extends ImmutablePureComponent {
     } else {
       action_buttons = (
         <div className='account__header__account-note__buttons'>
-          <button className='text-btn' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
+          <button className='icon-button' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
             <Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
           </button>
         </div>
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index c1e3ae835..0fc2a11ff 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -742,8 +742,31 @@
       justify-content: flex-end;
       flex: 1 0;
 
+      .icon-button {
+        font-size: 14px;
+        padding: 2px 6px;
+        color: $darker-text-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: lighten($darker-text-color, 7%);
+    background-color: rgba($darker-text-color, 0.15);
+  }
+
+  &:focus {
+    background-color: rgba($darker-text-color, 0.3);
+  }
+
+  &[disabled] {
+    color: darken($darker-text-color, 13%);
+    background-color: transparent;
+    cursor: default;
+  }
+      }
+
       .flex-spacer {
-        flex: 0 0 15px;
+        flex: 0 0 5px;
         background: transparent;
       }
     }
@@ -754,10 +777,6 @@
       text-transform: uppercase;
     }
 
-    button:hover span {
-      text-decoration: underline;
-    }
-
     textarea {
       display: block;
       box-sizing: border-box;
-- 
cgit