From e09e38911f795b75e5fe543111ff94817267f7f2 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 23 Aug 2022 11:02:16 +1000
Subject: [PATCH] refactor: fix PR reviews

---
 stylesheets/_session_left_pane.scss           |  5 --
 ts/components/basic/SessionToggle.tsx         | 60 +++++++++----------
 .../conversation/SessionEmojiPanel.tsx        |  2 +-
 .../dialog/OnionStatusPathDialog.tsx          | 10 ++--
 .../settings/SessionSettingListItem.tsx       |  2 +-
 .../settings/SessionSettingsHeader.tsx        | 34 +++++------
 .../settings/section/CategoryAppearance.tsx   |  2 +-
 .../settings/section/CategoryPrivacy.tsx      |  1 -
 8 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index 31d6a4792..6cbc848c0 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -118,11 +118,6 @@ $session-compose-margin: 20px;
       align-self: flex-start;
     }
 
-    .session-search-input {
-      margin: 10px $session-compose-margin 0 $session-compose-margin;
-      width: -webkit-fill-available;
-    }
-
     .session-id-editable {
       width: 90%;
 
diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx
index ffeab8846..4abd7f4ff 100644
--- a/ts/components/basic/SessionToggle.tsx
+++ b/ts/components/basic/SessionToggle.tsx
@@ -3,6 +3,36 @@ import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 
+const StyledKnob = styled.div<{ active: boolean }>`
+  position: absolute;
+  top: 0.5px;
+  left: 0.5px;
+  height: 21px;
+  width: 21px;
+  border-radius: 28px;
+  background-color: white;
+  box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.15);
+
+  transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
+
+  transform: ${props => (props.active ? 'translateX(25px)' : '')};
+`;
+
+const StyledSessionToggle = styled.div<{ active: boolean }>`
+  width: 51px;
+  height: 25px;
+  border: 1.5px solid #e5e5ea;
+  border-radius: 16px;
+  position: relative;
+
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0);
+  transition: var(--default-duration);
+
+  background-color: ${props => (props.active ? 'var(--color-accent)' : 'unset')};
+  border-color: ${props => (props.active ? 'var(--color-accent)' : 'unset')};
+`;
+
 type Props = {
   active: boolean;
   onClick: () => void;
@@ -50,33 +80,3 @@ export const SessionToggle = (props: Props) => {
     </StyledSessionToggle>
   );
 };
-
-const StyledKnob = styled.div<{ active: boolean }>`
-  position: absolute;
-  top: 0.5px;
-  left: 0.5px;
-  height: 21px;
-  width: 21px;
-  border-radius: 28px;
-  background-color: white;
-  box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.15);
-
-  transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
-
-  transform: ${props => (props.active ? 'translateX(25px)' : '')};
-`;
-
-const StyledSessionToggle = styled.div<{ active: boolean }>`
-  width: 51px;
-  height: 25px;
-  border: 1.5px solid #e5e5ea;
-  border-radius: 16px;
-  position: relative;
-
-  cursor: pointer;
-  background-color: rgba(0, 0, 0, 0);
-  transition: var(--default-duration);
-
-  background-color: ${props => (props.active ? 'var(--color-accent)' : 'unset')};
-  border-color: ${props => (props.active ? 'var(--color-accent)' : 'unset')};
-`;
diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx
index 4ed4e1888..823cadcaa 100644
--- a/ts/components/conversation/SessionEmojiPanel.tsx
+++ b/ts/components/conversation/SessionEmojiPanel.tsx
@@ -15,7 +15,7 @@ export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: 'light' |
   z-index: 5;
   opacity: 0;
   visibility: hidden;
-  transition: var(--default-duration);
+  /* transition: var(--default-duration); */
 
   button:focus {
     outline: none;
diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx
index 62077faf2..d598f08df 100644
--- a/ts/components/dialog/OnionStatusPathDialog.tsx
+++ b/ts/components/dialog/OnionStatusPathDialog.tsx
@@ -49,9 +49,7 @@ const StyledOnionDescription = styled.p`
 
 const OnionCountryDisplay = ({ labelText, snodeIp }: { snodeIp?: string; labelText: string }) => {
   const element = (hovered: boolean) => (
-    <StyledCountry key={`country-${snodeIp}`}>
-      {hovered && snodeIp ? snodeIp : labelText}
-    </StyledCountry>
+    <StyledCountry>{hovered && snodeIp ? snodeIp : labelText}</StyledCountry>
   );
   const [hoverable] = useHover(element);
 
@@ -108,7 +106,11 @@ const OnionPathModalInner = () => {
                 labelText = window.i18n('unknownCountry');
               }
               return labelText ? (
-                <OnionCountryDisplay labelText={labelText} snodeIp={snode.ip} />
+                <OnionCountryDisplay
+                  labelText={labelText}
+                  snodeIp={snode.ip}
+                  key={`country-${snode.ip}`}
+                />
               ) : null;
             })}
           </Flex>
diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx
index f247affb6..fb27f14ce 100644
--- a/ts/components/settings/SessionSettingListItem.tsx
+++ b/ts/components/settings/SessionSettingListItem.tsx
@@ -70,7 +70,7 @@ export const SessionSettingsItemWrapper = (props: {
         description={description}
         childrenDescription={childrenDescription}
       />
-      <div>{children}</div>
+      {children}
     </ComponentToRender>
   );
 };
diff --git a/ts/components/settings/SessionSettingsHeader.tsx b/ts/components/settings/SessionSettingsHeader.tsx
index f3f2b477a..f303a8b1b 100644
--- a/ts/components/settings/SessionSettingsHeader.tsx
+++ b/ts/components/settings/SessionSettingsHeader.tsx
@@ -6,6 +6,23 @@ import { SessionSettingCategory, SettingsViewProps } from './SessionSettings';
 
 type Props = Pick<SettingsViewProps, 'category'>;
 
+const StyledSettingsHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: var(--main-view-header-height);
+  background: var(--color-cell-background);
+`;
+
+const StyledHeaderTittle = styled.div`
+  line-height: var(--main-view-header-height);
+  font-weight: bold;
+  font-size: var(--font-size-lg);
+  text-align: center;
+  flex-grow: 1;
+`;
+
 export const SettingsHeader = (props: Props) => {
   const { category } = props;
 
@@ -41,20 +58,3 @@ export const SettingsHeader = (props: Props) => {
     </StyledSettingsHeader>
   );
 };
-
-const StyledSettingsHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: var(--main-view-header-height);
-  background: var(--color-cell-background);
-`;
-
-const StyledHeaderTittle = styled.div`
-  line-height: var(--main-view-header-height);
-  font-weight: bold;
-  font-size: var(--font-size-lg);
-  text-align: center;
-  flex-grow: 1;
-`;
diff --git a/ts/components/settings/section/CategoryAppearance.tsx b/ts/components/settings/section/CategoryAppearance.tsx
index 242ad1c06..168946339 100644
--- a/ts/components/settings/section/CategoryAppearance.tsx
+++ b/ts/components/settings/section/CategoryAppearance.tsx
@@ -18,7 +18,7 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
 
     return (
       <>
-        {/* add theme switching here */}
+        {/* TODO: add theme switching here */}
         <ZoomingSessionSlider />
         {isHideMenuBarSupported() && (
           <SessionToggleWithDescription
diff --git a/ts/components/settings/section/CategoryPrivacy.tsx b/ts/components/settings/section/CategoryPrivacy.tsx
index 2a852e187..540f3a916 100644
--- a/ts/components/settings/section/CategoryPrivacy.tsx
+++ b/ts/components/settings/section/CategoryPrivacy.tsx
@@ -46,7 +46,6 @@ const TypingBubbleItem = () => {
   return (
     <>
       <SpacerLG />
-
       <TypingBubble conversationType={ConversationTypeEnum.PRIVATE} isTyping={true} />
     </>
   );