From d5887f99542c0c950bc026af011b1c00863d2176 Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Wed, 28 Sep 2022 11:41:34 +0500
Subject: [PATCH] feat(ott-2680): fix styles

---
 .../AuthServiceApp/components/Login/index.tsx | 24 +++++++++----------
 .../components/Login/styled.tsx               | 23 +++++-------------
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/features/AuthServiceApp/components/Login/index.tsx b/src/features/AuthServiceApp/components/Login/index.tsx
index 88a36a83..089db6f4 100644
--- a/src/features/AuthServiceApp/components/Login/index.tsx
+++ b/src/features/AuthServiceApp/components/Login/index.tsx
@@ -4,7 +4,7 @@ import { RecoveryPopup } from 'features/AuthServiceApp/components/RecoveryPopup'
 import { client } from 'features/AuthServiceApp/config/clients'
 
 import { PAGES } from '../../config/pages'
-// import { AuthProviders } from '../../config/authProviders'
+import { AuthProviders } from '../../config/authProviders'
 import { LanguageSelect } from '../LanguageSelect'
 import { PasswordInput } from '../PasswordInput'
 import { Input } from '../../../../components/Input'
@@ -26,11 +26,11 @@ import {
 } from '../../styled'
 import {
   RegisterButton,
-  // AuthButtonsContainer,
-  // AuthButton,
-  // AuthButtonText,
-  // AuthButtonImage,
-  // ContinueWith,
+  AuthButtonsContainer,
+  AuthButton,
+  AuthButtonText,
+  AuthButtonImage,
+  ContinueWith,
 } from './styled'
 import { CompanyInfo } from '../../../CompanyInfo'
 
@@ -41,7 +41,7 @@ const Login = () => {
     email,
     formError,
     formRef,
-    // handleAuthButtonClick,
+    handleAuthButtonClick,
     handleModalOpen,
     handleSubmit,
     isFetching,
@@ -121,21 +121,21 @@ const Login = () => {
             <RegisterButton to={`${PAGES.registration}${window.location.search}`}>
               <T9n t='register' />
             </RegisterButton>
-            {/* <ContinueWith t='or_continue_with' />
+            <ContinueWith t='or_continue_with' />
             <AuthButtonsContainer>
               <AuthButton onClick={handleAuthButtonClick(AuthProviders.Google)}>
                 <AuthButtonImage authProvider={AuthProviders.Google} />
                 <AuthButtonText>Google</AuthButtonText>
-              </AuthButton> */}
-            {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.Facebook)}>
+              </AuthButton>
+              {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.Facebook)}>
                 <AuthButtonImage authProvider={AuthProviders.Facebook} />
                 <AuthButtonText>Facebook</AuthButtonText>
               </AuthButton> */}
-            {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.AppleID)}>
+              {/* <AuthButton onClick={handleAuthButtonClick(AuthProviders.AppleID)}>
                 <AuthButtonImage authProvider={AuthProviders.AppleID} />
                 <AuthButtonText>Apple ID</AuthButtonText>
               </AuthButton> */}
-            {/* </AuthButtonsContainer> */}
+            </AuthButtonsContainer>
           </ButtonsBlock>
           <Container>
             <ForgotPass onClick={handleModalOpen}>
diff --git a/src/features/AuthServiceApp/components/Login/styled.tsx b/src/features/AuthServiceApp/components/Login/styled.tsx
index 560c25cd..3d3012a5 100644
--- a/src/features/AuthServiceApp/components/Login/styled.tsx
+++ b/src/features/AuthServiceApp/components/Login/styled.tsx
@@ -7,8 +7,6 @@ import { isMobileDevice } from 'config/userAgent'
 import { outlineButtonStyles } from 'features/Common/Button'
 import { T9n } from 'features/T9n'
 
-import { visuallyHidden } from 'components/VisuallyHidden'
-
 import { AuthProviders } from '../../config/authProviders'
 
 type TAuthButtonImage = {
@@ -63,14 +61,12 @@ export const AuthButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 154px;
+  width: 100%;
   height: 50px;
   border-radius: 5px;
 
   ${isMobileDevice
     ? css`
-       width: 100%;
-       justify-content: flex-start;
        height: 44px;
        border-radius: 10px;
       `
@@ -79,28 +75,21 @@ export const AuthButton = styled.button`
 
 export const AuthButtonText = styled.span`
   opacity: 0.8;
-
-  ${isMobileDevice ? '' : visuallyHidden};
+  font-size: 20px;
 `
 
 export const AuthButtonImage = styled.div<TAuthButtonImage>`
   background-repeat: no-repeat;
   background-position: center;
-  width: 100%;
-  height: 32px;
-
-  ${isMobileDevice
-    ? css`
-       width: 45%;
-       margin-right: 20px;
-       background-position: right;
-      `
-    : ''}
+  margin-right: 20px;
+  background-position: right;
 
   ${({ authProvider }) => {
     switch (authProvider) {
       case AuthProviders.Google:
         return css`
+            width: 32px;
+            height: 32px;
             background-image: url(/images/oauth/google.svg);
           `