From 444282e2eca80c38c758926170568dafad5cdf48 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 29 Aug 2022 16:28:37 +1000
Subject: [PATCH] fix: position of join button and style of disable buttons

also add a little animation to the menu button rotation
---
 _locales/en/messages.json                        |  4 ++--
 stylesheets/_session.scss                        | 16 ++--------------
 ts/components/button/MenuButton.tsx              |  2 ++
 ts/components/icon/SessionIcon.tsx               |  1 +
 .../leftpane/overlay/OverlayCommunity.tsx        |  6 +++---
 5 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 66698ad49..05faf8aac 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -355,7 +355,7 @@
   "invalidGroupNameTooShort": "Please enter a group name",
   "invalidGroupNameTooLong": "Please enter a shorter group name",
   "pickClosedGroupMember": "Please pick at least 1 group member",
-  "closedGroupMaxSize": "A closed group cannot have more than 100 members",
+  "closedGroupMaxSize": "A group cannot have more than 100 members",
   "noBlockedContacts": "No blocked contacts",
   "userAddedToModerators": "User added to moderator list",
   "userRemovedFromModerators": "User removed from moderator list",
@@ -369,7 +369,7 @@
   "closedGroupInviteOkText": "Retry invitations",
   "closedGroupInviteSuccessTitlePlural": "Group Invitations Completed",
   "closedGroupInviteSuccessTitle": "Group Invitation Succeeded",
-  "closedGroupInviteSuccessMessage": "Successfully invited closed group members",
+  "closedGroupInviteSuccessMessage": "Successfully invited group members",
   "notificationForConvo": "Notifications",
   "notificationForConvo_all": "All",
   "notificationForConvo_disabled": "Disabled",
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 29131282f..261ab006b 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -108,18 +108,6 @@ textarea {
       background: var(--color-clickable-hovered);
     }
 
-    &.green,
-    &.white,
-    &.primary,
-    &.secondary,
-    &.success,
-    &.danger,
-    &.warning {
-      &.disabled {
-        filter: brightness(60%);
-      }
-    }
-
     &.green {
       background-color: var(--color-accent-button);
       color: var(--color-text-opposite);
@@ -183,10 +171,10 @@ textarea {
     &.white,
     &.green {
       &.disabled {
-        filter: brightness(60%);
+        @include transparent-background(var(--color-text-subtle));
 
         &:hover {
-          filter: brightness(60%);
+          @include transparent-background(var(--color-text-subtle));
         }
       }
     }
diff --git a/ts/components/button/MenuButton.tsx b/ts/components/button/MenuButton.tsx
index c1626f30a..66762fd1e 100644
--- a/ts/components/button/MenuButton.tsx
+++ b/ts/components/button/MenuButton.tsx
@@ -20,6 +20,8 @@ const StyledMenuButton = styled.button`
   height: 33px;
   cursor: pointer;
 
+  transition: var(--default-duration);
+
   :hover {
     background: var(--hover-bg-color);
   }
diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx
index bbebe5ab5..bb52ac0fd 100644
--- a/ts/components/icon/SessionIcon.tsx
+++ b/ts/components/icon/SessionIcon.tsx
@@ -131,6 +131,7 @@ const Svg = React.memo(styled.svg<StyledSvgProps>`
   border-radius: ${props => (props.borderRadius ? props.borderRadius : '')};
   filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
   padding: ${props => (props.iconPadding ? props.iconPadding : '')};
+  transition: inherit;
 `);
 //tslint:enable no-unnecessary-callback-wrapper
 
diff --git a/ts/components/leftpane/overlay/OverlayCommunity.tsx b/ts/components/leftpane/overlay/OverlayCommunity.tsx
index 666dac439..0a0f68cc8 100644
--- a/ts/components/leftpane/overlay/OverlayCommunity.tsx
+++ b/ts/components/leftpane/overlay/OverlayCommunity.tsx
@@ -52,7 +52,6 @@ export const OverlayCommunity = () => {
     }
   }
 
-  // FIXME autofocus inputref on mount
   useKey('Escape', closeOverlay);
 
   const title = window.i18n('joinOpenGroup');
@@ -76,8 +75,6 @@ export const OverlayCommunity = () => {
         />
       </div>
 
-      <SessionSpinner loading={loading} />
-      <SessionJoinableRooms onRoomClicked={closeOverlay} />
       <SessionButton
         buttonColor={SessionButtonColor.Green}
         buttonType={SessionButtonType.BrandOutline}
@@ -85,6 +82,9 @@ export const OverlayCommunity = () => {
         disabled={!groupUrl}
         onClick={onEnterPressed}
       />
+
+      <SessionSpinner loading={loading} />
+      <SessionJoinableRooms onRoomClicked={closeOverlay} />
     </div>
   );
 };