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) => {
);
};
-
-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) => (
-