fix: position of join button and style of disable buttons

also add a little animation to the menu button rotation

_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",

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));
         }
       }
     }

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);
   }

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
 

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>
   );
 };