From adefb80bb67e88b5cb4a12e606a3cdb2915c63bf Mon Sep 17 00:00:00 2001
From: Roman Drozd <roman@drozd.it>
Date: Mon, 20 Dec 2021 02:44:47 +0100
Subject: [PATCH] Put additional styles logic closer to styles

---
 app/src/components/Containers/Me.js   | 162 +++++++++++++-------------
 app/src/components/Containers/Peer.js |   2 +-
 2 files changed, 81 insertions(+), 83 deletions(-)

diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js
index 3e3adb07..c044f99d 100644
--- a/app/src/components/Containers/Me.js
+++ b/app/src/components/Containers/Me.js
@@ -178,14 +178,90 @@ const Me = (props) =>
 		classes
 	} = props;
 
-	// eslint-disable-next-line no-unused-vars
-	const width = style.width;
+	// const width = style.width;
 
-	// eslint-disable-next-line no-unused-vars
-	const height = style.height;
+	// const height = style.height;
 
 	const size = style.size;
 
+	const [ buttonSize, setButtonSize ] = useState('large');
+
+	const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState(
+
+		{
+			flexDirection : 'row'
+		}
+	);
+
+	const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState(
+		{
+			fontSize : '1.5vh'
+		}
+	);
+
+	useEffect(() =>
+	{
+		switch (size)
+		{
+			case 'smallest':
+				setButtonSize('small');
+
+				setControlsAdditionalStyles({
+					flexDirection : 'row',
+					alignItems    : 'flex-start'
+
+				});
+
+				setMeTagAdditionalStyles({
+					fontSize : '0em'
+				});
+
+				break;
+
+			case 'small':
+				setButtonSize('small');
+
+				setControlsAdditionalStyles({
+					flexDirection : 'column'
+				});
+
+				setMeTagAdditionalStyles({
+					fontSize : '2.0em'
+				});
+
+				break;
+
+			case 'medium':
+				setButtonSize('medium');
+
+				setControlsAdditionalStyles({
+					flexDirection : 'column'
+				});
+
+				setMeTagAdditionalStyles({
+					fontSize : '2.5em'
+				});
+
+				break;
+
+			case 'large':
+				setButtonSize('large');
+
+				setControlsAdditionalStyles({
+					flexDirection : 'column'
+				});
+
+				setMeTagAdditionalStyles({
+					fontSize : '3.0em'
+				});
+
+				break;
+
+			default:
+
+		}
+	}, [ size ]);
+
 	const videoVisible = (
 		Boolean(webcamProducer) &&
 		!webcamProducer.locallyPaused &&
@@ -361,84 +437,6 @@ const Me = (props) =>
 		return () => clearInterval(poll);
 	}, [ roomClient, advancedMode ]);
 
-	const [ buttonSize, setButtonSize ] = useState('large');
-
-	const [ controlsAdditionalStyles, setControlsAdditionalStyles ] = useState(
-
-		{
-			flexDirection : 'row'
-		}
-	);
-
-	const [ meTagAdditionalStyles, setMeTagAdditionalStyles ] = useState(
-		{
-			fontSize : '1.5vh'
-		}
-	);
-
-	useEffect(() =>
-	{
-		switch (size)
-		{
-			case 'smallest':
-				setButtonSize('small');
-
-				setControlsAdditionalStyles({
-					flexDirection : 'row',
-					alignItems    : 'flex-start'
-
-				});
-
-				setMeTagAdditionalStyles({
-					fontSize : '1.5em'
-				});
-
-				break;
-
-			case 'small':
-				setButtonSize('small');
-
-				setControlsAdditionalStyles({
-					flexDirection : 'column'
-				});
-
-				setMeTagAdditionalStyles({
-					fontSize : '2.0em'
-				});
-
-				break;
-
-			case 'medium':
-				setButtonSize('medium');
-
-				setControlsAdditionalStyles({
-					flexDirection : 'column'
-				});
-
-				setMeTagAdditionalStyles({
-					fontSize : '2.5em'
-				});
-
-				break;
-
-			case 'large':
-				setButtonSize('large');
-
-				setControlsAdditionalStyles({
-					flexDirection : 'column'
-				});
-
-				setMeTagAdditionalStyles({
-					fontSize : '3.0em'
-				});
-
-				break;
-
-			default:
-
-		}
-	}, [ size ]);
-
 	// menu
 	const [ menuAnchorElement, setMenuAnchorElement ] = React.useState(null);
 	const [ showAudioAnalyzer, setShowAudioAnalyzer ] = React.useState(null);
diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js
index e1c57ce8..a382c2ea 100644
--- a/app/src/components/Containers/Peer.js
+++ b/app/src/components/Containers/Peer.js
@@ -252,7 +252,7 @@ const Peer = (props) =>
 				});
 
 				setVideoInfoAdditionalStyles({
-					fontSize : '1.5em'
+					fontSize : '0em'
 				});
 
 				break;