Uniform left bar style and appearance

src/App.tsx

@@ -1335,6 +1335,7 @@ function App() {
               />
             </Tooltip>
           )}
+
           {authenticatedMode === 'ltc' && (
             <Tooltip
               title={
@@ -2041,6 +2042,7 @@ function App() {
             useLocalNode={useLocalNode}
           />
         )}
+
         {extState === 'authenticated' && isMainWindow && (
           <Box
             sx={{
@@ -2118,6 +2120,7 @@ function App() {
         {isShowQortalRequest && !isMainWindow && (
           <>
             <Spacer height="120px" />
+
             <Box
               sx={{
                 display: 'flex',
@@ -2213,6 +2216,7 @@ function App() {
                 dangerouslySetInnerHTML={{ __html: messageQortalRequest?.html }}
               />
             )}
+
             <Spacer height="15px" />
 
             <TextP
@@ -2290,6 +2294,7 @@ function App() {
             )}
 
             <Spacer height="29px" />
+
             <Box
               sx={{
                 display: 'flex',
@@ -2307,6 +2312,7 @@ function App() {
                   postProcess: 'capitalizeFirstChar',
                 })}
               </CustomButton>
+
               <CustomButton
                 sx={{
                   minWidth: '102px',
@@ -2577,6 +2583,7 @@ function App() {
                   postProcess: 'capitalizeFirstChar',
                 })}
               </CustomButton>
+
               <CustomButton
                 sx={{
                   minWidth: '102px',

src/components/Apps/AppsDevMode.tsx

@@ -231,11 +231,12 @@ export const AppsDevMode = ({
       <Box
         sx={{
           alignItems: 'center',
+          borderRight: `1px solid ${theme.palette.border.subtle}`,
           display: 'flex',
           flexDirection: 'column',
           gap: '25px',
           height: '100vh',
-          width: '60px',
+          width: 'auto', // must adapt to the choosen language
         }}
       >
         <ButtonBase
@@ -380,7 +381,7 @@ export const AppsDevMode = ({
             flexDirection: 'column',
             height: '100vh',
             overflow: 'auto',
-            width: '100%',
+            width: 'auto',
           }}
         >
           <Spacer height="30px" />
@@ -419,7 +420,7 @@ export const AppsDevMode = ({
               flexDirection: 'column',
               height: '100vh',
               overflow: 'auto',
-              width: '100%',
+              width: 'auto',
             }}
           >
             <Spacer height="30px" />

src/components/Apps/AppsDevModeHome.tsx

@@ -319,6 +319,7 @@ export const AppsDevModeHome = ({
             <AppCircle>
               <Add>+</Add>
             </AppCircle>
+
             <AppCircleLabel>
               {t('core:server', { postProcess: 'capitalizeFirstChar' })}
             </AppCircleLabel>

src/components/Desktop/DesktopLeftSideBar.tsx

@@ -26,7 +26,6 @@ export const DesktopSideBar = ({
   myName,
 }) => {
   const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
-
   const theme = useTheme();
   const { t } = useTranslation([
     'auth',

src/components/Group/Group.tsx

@@ -1913,7 +1913,7 @@ export const Group = ({
         setInfo={setInfoSnack}
       />
 
-      <div
+      <div // TODO use Box
         style={{
           alignItems: 'flex-start',
           display: 'flex',

src/components/Group/Settings.tsx

@@ -381,13 +381,13 @@ const ExportPrivateKey = ({ rawWallet }) => {
               setPrivateKey('');
             }}
           >
-            {t('group:action.cancel', {
+            {t('core:action.cancel', {
               postProcess: 'capitalizeFirstChar',
             })}
           </Button>
 
           <Button variant="contained" onClick={exportPrivateKeyFunc}>
-            {t('group:action.decrypt', {
+            {t('core:action.decrypt', {
               postProcess: 'capitalizeFirstChar',
             })}
           </Button>