refactor: fix PR reviews

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%;
 

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

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;

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>

ts/components/settings/SessionSettingListItem.tsx

@@ -70,7 +70,7 @@ export const SessionSettingsItemWrapper = (props: {
         description={description}
         childrenDescription={childrenDescription}
       />
-      <div>{children}</div>
+      {children}
     </ComponentToRender>
   );
 };

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;
-`;

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

ts/components/settings/section/CategoryPrivacy.tsx

@@ -46,7 +46,6 @@ const TypingBubbleItem = () => {
   return (
     <>
       <SpacerLG />
-
       <TypingBubble conversationType={ConversationTypeEnum.PRIVATE} isTyping={true} />
     </>
   );