refactor: landing page

frontend/.env.example

@@ -36,4 +36,7 @@ AZURE_CLIENT_ID=
 AZURE_CLIENT_SECRET=
 
 # azure tenant ID
-AZURE_TENANT_ID=
+AZURE_TENANT_ID=
+
+#enable only login via sso
+NEXT_PUBLIC_LOGIN_SSO_ONLY=false

frontend/next.config.js

@@ -12,7 +12,8 @@ module.exports = {
 		NEXT_PUBLIC_NEXTAUTH_URL: process.env.NEXT_PUBLIC_NEXTAUTH_URL,
 		NEXT_PUBLIC_ENABLE_AZURE: process.env.NEXT_PUBLIC_ENABLE_AZURE,
 		NEXT_PUBLIC_ENABLE_GIT: process.env.NEXT_PUBLIC_ENABLE_GIT,
-		NEXT_PUBLIC_ENABLE_GOOGLE: process.env.NEXT_PUBLIC_ENABLE_GOOGLE
+		NEXT_PUBLIC_ENABLE_GOOGLE: process.env.NEXT_PUBLIC_ENABLE_GOOGLE,
+		NEXT_PUBLIC_LOGIN_SSO_ONLY: process.env.NEXT_PUBLIC_LOGIN_SSO_ONLY,
 	},
 	serverRuntimeConfig: {
 		AZURE_CLIENT_ID: process.env.AZURE_CLIENT_ID,

frontend/src/components/Primitives/Tab.tsx

@@ -5,7 +5,6 @@ import { styled } from '@/styles/stitches/stitches.config';
 import Flex from './Flex';
 
 const StyledTabs = styled(TabsPrimitive.Root, {
-  width: '$500',
   boxShadow: '0px 4px 54px rgba(0, 0, 0, 0.5)',
   borderRadius: '$12',
   backgroundColor: '$white',

frontend/src/components/Primitives/Toast.tsx

@@ -37,7 +37,7 @@ const StyledToast = styled(ToastPrimitive.Root, {
   boxShadow: '0px 4px 16px -4px rgba(18, 25, 34, 0.2)',
   display: 'flex',
   height: '$56',
-  width: '$455',
+  width: '$362',
   justifyContent: 'space-between',
   alignItems: 'center',
   direction: 'raw',

frontend/src/components/auth/ForgotPassword/EmailSent.tsx

@@ -13,12 +13,7 @@ import { toastState } from '@/store/toast/atom/toast.atom';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 
 const MainContainer = styled('form', Flex, {
-  width: '$500',
-  backgroundColor: '$white',
-  boxShadow: '0px 4px 54px rgba(0, 0, 0, 0.5)',
-  borderRadius: '$12',
-  py: '$48',
-  px: '$32',
+  width: '100%',
 });
 
 interface EmailSentProps {

frontend/src/components/auth/ForgotPassword/ResetPassword.tsx

@@ -17,12 +17,7 @@ import { NewPassword } from '@/types/user/user';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 
 const MainContainer = styled('form', Flex, {
-  width: '$500',
-  backgroundColor: '$white',
-  boxShadow: '0px 4px 54px rgba(0, 0, 0, 0.5)',
-  borderRadius: '$12',
-  py: '$48',
-  px: '$32',
+  width: '100%',
 });
 
 interface ResetPasswordProps {

frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx

@@ -18,12 +18,7 @@ import { ToastStateEnum } from '@/utils/enums/toast-types';
 import EmailSent from './EmailSent';
 
 const MainContainer = styled('form', Flex, {
-  width: '$500',
-  backgroundColor: '$white',
-  boxShadow: '0px 4px 54px rgba(0, 0, 0, 0.5)',
-  borderRadius: '$12',
-  py: '$48',
-  px: '$32',
+  width: '100%',
 });
 
 const GoBackWrapper = styled(Flex, {

frontend/src/components/auth/LoginForm/LoginSSO.tsx

@@ -0,0 +1,37 @@
+import Button from '@/components/Primitives/Button';
+import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Flex';
+import { styled } from '@/styles/stitches/stitches.config';
+import { NEXT_PUBLIC_ENABLE_AZURE } from '@/utils/constants';
+import Icon from '@/components/icons/Icon';
+
+const StyledFlex = styled(Flex, { width: '100%' });
+
+type LoginSSOProps = {
+  handleLoginAzure: () => void;
+};
+
+const LoginSSO = ({ handleLoginAzure }: LoginSSOProps) => (
+  <StyledFlex direction="column">
+    <Text css={{ mt: '$24' }} heading="1">
+      Welcome
+    </Text>
+    <Text css={{ mt: '$8', color: '$primary500' }} size="md">
+      Choose your preferred login method.
+    </Text>
+    <Flex align="center" direction="column" justify="center" css={{ mt: '$32' }}>
+      {NEXT_PUBLIC_ENABLE_AZURE && (
+        <Button
+          variant="primaryOutline"
+          onClick={handleLoginAzure}
+          css={{ display: 'flex', width: '100%', fontWeight: '$regular' }}
+        >
+          <Icon css={{ width: '$60', height: '$60' }} name="microsoft" />
+          Login with Microsoft
+        </Button>
+      )}
+    </Flex>
+  </StyledFlex>
+);
+
+export default LoginSSO;