fix: PR Reviews

2022-08-22 17:27:52 +10:00 · 2022-08-22 17:27:52 +10:00 · f87d902c98
parent ef1f634e6b
commit f87d902c98
10 changed files with 108 additions and 113 deletions
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@ -203,7 +203,6 @@ $session-subtle-factor: 0.6;
 // //////////////////////////////////////////////

 // Default Components
-$session-search-input-height: 34px;
 $main-view-header-height: 63px;
 $session-left-pane-width: 300px;

--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@ -274,8 +274,8 @@ $session-compose-margin: 20px;
    justify-content: center;
    align-items: center;

-    height: $session-search-input-height;
-    width: $session-search-input-height;
+    height: var(--search-input-height);
+    width: var(--search-input-height);

    padding: 0px;
    margin: 0px;
--- a/ts/components/SessionSearchInput.tsx
+++ b/ts/components/SessionSearchInput.tsx
@ -8,6 +8,35 @@ import { getOverlayMode } from '../state/selectors/section';
 import { cleanSearchTerm } from '../util/cleanSearchTerm';
 import { SessionIconButton } from './icon';

+const StyledSearchInput = styled.div`
+  height: var(--search-input-height);
+  width: 100%;
+  margin-inline-end: 1px;
+  margin-bottom: 10px;
+  display: inline-flex;
+  flex-shrink: 0;
+
+  .session-icon-button {
+    margin: auto 10px;
+  }
+`;
+
+const StyledInput = styled.input`
+  width: inherit;
+  height: inherit;
+  border: none;
+  flex-grow: 1;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-default);
+  text-overflow: ellipsis;
+  background: none;
+  color: var(--color-text);
+
+  &:focus {
+    outline: none !important;
+  }
+`;
+
 const doTheSearch = (dispatch: Dispatch<any>, cleanedTerm: string) => {
  dispatch(search(cleanedTerm));
 };
@ -74,32 +103,3 @@ export const SessionSearchInput = () => {
    </StyledSearchInput>
  );
 };
-
-const StyledSearchInput = styled.div`
-  height: 34px; // $session-search-input-height
-  width: 100%;
-  margin-inline-end: 1px;
-  margin-bottom: 10px;
-  display: inline-flex;
-  flex-shrink: 0;
-
-  .session-icon-button {
-    margin: auto 10px;
-  }
-`;
-
-const StyledInput = styled.input`
-  width: inherit;
-  height: inherit;
-  border: none;
-  flex-grow: 1;
-  font-size: var(--font-size-sm);
-  font-family: var(--font-default);
-  text-overflow: ellipsis;
-  background: none;
-  color: var(--color-text);
-
-  &:focus {
-    outline: none !important;
-  }
-`;
--- a/ts/components/conversation/H5AudioPlayer.tsx
+++ b/ts/components/conversation/H5AudioPlayer.tsx
@ -14,6 +14,24 @@ import { getAudioAutoplay } from '../../state/selectors/userConfig';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionIcon } from '../icon';

+const StyledSpeedButton = styled.div`
+  padding: var(--margins-xs);
+  opacity: 0.6;
+  transition: none;
+
+  :hover {
+    opacity: 1;
+  }
+
+  .session-button {
+    transition: none;
+
+    &:hover {
+      color: var(--color-text-opposite);
+    }
+  }
+`;
+
 export const AudioPlayerWithEncryptedFile = (props: {
  src: string;
  contentType: string;
@ -123,21 +141,3 @@ export const AudioPlayerWithEncryptedFile = (props: {
    />
  );
 };
-
-const StyledSpeedButton = styled.div`
-  padding: var(--margins-xs);
-  opacity: 0.6;
-  transition: none;
-
-  :hover {
-    opacity: 1;
-  }
-
-  .session-button {
-    transition: none;
-
-    &:hover {
-      color: var(--color-text-opposite);
-    }
-  }
-`;
--- a/ts/components/leftpane/LeftPaneList.tsx
+++ b/ts/components/leftpane/LeftPaneList.tsx
@ -1,7 +1,7 @@
 import styled from 'styled-components';

 export const StyledLeftPaneList = styled.div`
-  height: -webkit-fill-available;
+  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: auto;
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@ -18,6 +18,21 @@ import styled from 'styled-components';
 import { SessionSearchInput } from '../../SessionSearchInput';
 import { getSearchResults, isSearching } from '../../../state/selectors/search';

+const StyledMemberListNoContacts = styled.div`
+  font-family: var(--font-font-mono);
+  background: var(--color-cell-background);
+  text-align: center;
+  padding: 20px;
+`;
+
+const StyledGroupMemberListContainer = styled.div`
+  padding: 2px 0px;
+  width: 100%;
+  max-height: 400px;
+  overflow-y: auto;
+  border: var(--border-session);
+`;
+
 const NoContacts = () => {
  return (
    <StyledMemberListNoContacts>{window.i18n('noContactsForGroup')}</StyledMemberListNoContacts>
@ -143,18 +158,3 @@ export const OverlayClosedGroup = () => {
    </div>
  );
 };
-
-const StyledMemberListNoContacts = styled.div`
-  font-family: var(--font-font-mono);
-  background: var(--color-cell-background);
-  text-align: center;
-  padding: 20px;
-`;
-
-const StyledGroupMemberListContainer = styled.div`
-  padding: 2px 0px;
-  width: 100%;
-  max-height: 400px;
-  overflow-y: auto;
-  border: var(--border-session);
-`;
--- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
@ -38,7 +38,6 @@ const StyledContactRowName = styled.div`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  /* font-weight: 600; */
  font-size: var(--font-size-lg);
 `;

@ -46,10 +45,8 @@ const StyledRowContainer = styled.div`
  display: flex;
  align-items: center;
  padding: 0 var(--margins-lg);
-
  transition: background-color var(--default-duration) linear;
  cursor: pointer;
-
  border-bottom: 1px var(--color-session-border) solid;

  &:first-child {
@ -61,22 +58,6 @@ const StyledRowContainer = styled.div`
  }
 `;

-export const ContactRow = (props: Props) => {
-  const { id, style, displayName } = props;
-
-  return (
-    <StyledRowContainer
-      style={style}
-      onClick={() => openConversationWithMessages({ conversationKey: id, messageId: null })}
-    >
-      <AvatarItem id={id} displayName={displayName} />
-      <StyledContactRowName data-testid="module-conversation__user__profile-name">
-        {displayName || id}
-      </StyledContactRowName>
-    </StyledRowContainer>
-  );
-};
-
 const StyledBreak = styled.div`
  display: flex;
  align-items: center;
@ -97,3 +78,19 @@ export const ContactRowBreak = (props: { char: string; key: string; style: CSSPr
    </StyledBreak>
  );
 };
+
+export const ContactRow = (props: Props) => {
+  const { id, style, displayName } = props;
+
+  return (
+    <StyledRowContainer
+      style={style}
+      onClick={() => openConversationWithMessages({ conversationKey: id, messageId: null })}
+    >
+      <AvatarItem id={id} displayName={displayName} />
+      <StyledContactRowName data-testid="module-conversation__user__profile-name">
+        {displayName || id}
+      </StyledContactRowName>
+    </StyledRowContainer>
+  );
+};
--- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx
@ -11,12 +11,36 @@ import {
 import { StyledLeftPaneList } from '../../LeftPaneList';
 import { ContactRow, ContactRowBreak } from './ContactRow';
 import { StyledChooseActionTitle } from './OverlayChooseAction';
-// tslint:disable: use-simple-attributes no-submodule-imports
+
+const StyledContactSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1;
+  width: 100%;
+
+  .module-conversation-list-item __header__date,
+  .module-conversation-list-item __message {
+    display: none;
+  }
+
+  .module-conversation-list-item __buttons {
+    display: flex;
+
+    .session-button {
+      font-size: var(--font-size-xs);
+      padding: 6px;
+      height: auto;
+      margin: 0px;
+      line-height: 14px;
+    }
+  }
+`;

 const renderRow = (props: ListRowProps) => {
  const { index, key, style, parent } = props;

-  // ugly, but it seems react-viurtualized do not support very well functional components just yet
+  // ugly, but it seems react-virtualized does not support very well functional components just yet
  // https://stackoverflow.com/questions/54488954/how-to-pass-prop-into-rowrender-of-react-virtualized
  const directContactsByNameWithBreaks = (parent as any).props
    .directContactsByNameWithBreaks as Array<DirectContactsByNameType | string>;
@ -83,31 +107,6 @@ const ContactListItemSection = () => {
  );
 };

-const StyledContactSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  flex: 1;
-  width: 100%;
-
-  .module-conversation-list-item __header__date,
-  .module-conversation-list-item __message {
-    display: none;
-  }
-
-  .module-conversation-list-item __buttons {
-    display: flex;
-
-    .session-button {
-      font-size: var(--font-size-xs);
-      padding: 6px;
-      height: auto;
-      margin: 0px;
-      line-height: 14px;
-    }
-  }
-`;
-
 const ContactsTitle = () => {
  const contactsCount = useSelector(getDirectContactsCount);
  if (contactsCount <= 0) {
--- a/ts/session/apis/snode_api/onions.ts
+++ b/ts/session/apis/snode_api/onions.ts
@ -804,7 +804,6 @@ async function sendOnionRequestHandlingSnodeEject({
    decodingSymmetricKey = result.decodingSymmetricKey;
  } catch (e) {
    window?.log?.warn('sendOnionRequestNoRetries error message: ', e.message);
-    // const isTimeout = (e.message && isString(e.message) && (e.message as string).toLowerCase().includes('network timeout at'))
    if (e.code === 'ENETUNREACH' || e.message === 'ENETUNREACH' || throwErrors) {
      throw e;
    }
--- a/ts/state/ducks/SessionTheme.tsx
+++ b/ts/state/ducks/SessionTheme.tsx
@ -345,6 +345,7 @@ export const SessionGlobalStyles = createGlobalStyle`

    /* CONSTANTS */
    --compositionContainerHeight: 60px;
+    --search-input-height: 34px;

    /* COLORS NOT CHANGING BETWEEN THEMES */
    --color-warning:  ${warning};