PR feedback changes

src/script/auth/component/Layout.styles.ts

@@ -29,7 +29,7 @@ export const leftSectionCss: CSSObject = {
   padding: '6rem 3.75rem',
   position: 'relative',
   minHeight: '42rem',
-  [media.tablet]: {
+  [media.tabletDown]: {
     display: 'none',
   },
 };

src/script/auth/page/CustomBackend.styles.tsx

@@ -0,0 +1,40 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+import {media} from '@wireapp/react-ui-kit';
+
+export const logoCss: CSSObject = {
+  marginBottom: '80px',
+  display: 'none',
+  [media.tabletDown]: {
+    display: 'unset',
+  },
+};
+
+export const headerCss: CSSObject = {fontSize: '1.5rem', marginBottom: '1rem'};
+
+export const buttonContainerCss: CSSObject = {
+  marginTop: '2rem',
+  gap: '1rem',
+  display: 'flex',
+};
+
+export const containerCss: CSSObject = {width: '100%', maxWidth: '23rem'};

src/script/auth/page/CustomBackend.tsx

@@ -22,11 +22,12 @@ import {useState} from 'react';
 import {pathWithParams} from '@wireapp/commons/lib/util/UrlUtil';
 import {useLocation, useNavigate} from 'react-router-dom';
 
-import {Button, ButtonVariant, Container, Muted, QUERY, QueryKeys, Text, useMatchMedia} from '@wireapp/react-ui-kit';
+import {Button, ButtonVariant, Container, Muted, Text} from '@wireapp/react-ui-kit';
 
 import {LogoFullIcon} from 'Components/Icon';
 import {t} from 'Util/LocalizerUtil';
 
+import {buttonContainerCss, containerCss, headerCss, logoCss} from './CustomBackend.styles';
 import {Page} from './Page';
 
 import {QUERY_KEY, ROUTE} from '../route';
@@ -36,7 +37,6 @@ import {getSearchParams, navigateTo} from '../util/urlUtil';
 export const CustomBackend = () => {
   const navigate = useNavigate();
   const {state} = useLocation();
-  const isTablet = useMatchMedia(QUERY[QueryKeys.TABLET_DOWN]);
   const config = state?.config as BackendConfig;
   const [isDetailVisible, setIsDetailVisible] = useState(false);
 
@@ -96,17 +96,9 @@ export const CustomBackend = () => {
 
   return (
     <Page withSideBar>
-      <Container centerText verticalCenter style={{width: '100%', maxWidth: '22rem'}}>
-        {isTablet && (
-          <LogoFullIcon
-            aria-hidden="true"
-            width={102}
-            height={33}
-            style={{marginBottom: '80px'}}
-            data-uie-name="ui-wire-logo"
-          />
-        )}
-        <Text block center css={{fontSize: '1.5rem'}}>
+      <Container centerText verticalCenter css={containerCss}>
+        <LogoFullIcon aria-hidden="true" width={102} height={33} css={logoCss} data-uie-name="ui-wire-logo" />
+        <Text block center css={headerCss}>
           {t('redirectHeader')}
         </Text>
         <Text block center>
@@ -126,13 +118,7 @@ export const CustomBackend = () => {
         <Text css={{textDecoration: 'underline', cursor: 'pointer'}} onClick={toggleDetails}>
           {isDetailVisible ? t('redirectHideDetails') : t('redirectShowDetails')}
         </Text>
-        <div
-          css={{
-            marginTop: '2rem',
-            gap: '1rem',
-            display: 'flex',
-          }}
-        >
+        <div css={buttonContainerCss}>
           <Button css={{flex: '1'}} onClick={navigateToIndex} variant={ButtonVariant.SECONDARY}>
             {t('redirectCancel')}
           </Button>