Web: Icon added, styles corrected.

packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js

@@ -133,6 +133,11 @@ export const RegisterContainer = styled.div`
         text-overflow: ellipsis;
         overflow: hidden;
         left: 0;
+        display: flex;
+        gap: 4px;
+        p {
+          color: ${(props) => props.theme.login.backTitle.color};
+        }
       }
     }
   }

packages/client/src/pages/Confirm/sub-components/createUser.js

@@ -1,4 +1,5 @@
 import SsoReactSvgUrl from "PUBLIC_DIR/images/sso.react.svg?url";
+import ArrowIcon from "PUBLIC_DIR/images/arrow.left.react.svg?url";
 
 import React, { useEffect, useState, useCallback } from "react";
 import { withTranslation, Trans } from "react-i18next";
@@ -24,13 +25,14 @@ import {
 } from "@docspace/shared/api/people";
 import {
   createPasswordHash,
-  getProviderTranslation,
   getOAuthToken,
   getLoginLink,
 } from "@docspace/shared/utils/common";
 import { login } from "@docspace/shared/utils/loginUtils";
 import { PROVIDERS_DATA } from "@docspace/shared/constants";
 import { combineUrl } from "@docspace/shared/utils/combineUrl";
+import { IconButton } from "@docspace/shared/components/icon-button";
+import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 
 import { getPasswordErrorMessage } from "@docspace/shared/utils/getPasswordErrorMessage";
 import DocspaceLogo from "SRC_DIR/components/DocspaceLogoWrapper";
@@ -55,13 +57,17 @@ const RegistrationFormGreeting = ({ email, t, setRegistrationForm, type }) => {
   const onClickBack = () => {
     setRegistrationForm(false);
   };
+
   return (
     <div className="greeting-container">
       <div className="back-sign-in-container">
         {type === "LinkInvite" && (
-          <Text fontWeight={600} onClick={onClickBack} className="back-button">
-            {t("Back")}
-          </Text>
+          <div className="back-button">
+            <IconButton size={16} iconName={ArrowIcon} onClick={onClickBack} />
+            <Text fontWeight={600} onClick={onClickBack}>
+              {t("Back")}
+            </Text>
+          </div>
         )}
 
         <Text fontWeight={600} fontSize={"16px"}>
@@ -78,7 +84,7 @@ const RegistrationFormGreeting = ({ email, t, setRegistrationForm, type }) => {
             email,
           }}
           components={{
-            1: <Link type="page" isHovered={false} />,
+            1: <ColorTheme tag="a" themeId={ThemeId.Link} isHovered={false} />,
           }}
         />
       </Text>

packages/login/src/client/components/StyledLogin.ts

@@ -80,12 +80,17 @@ export const LoginFormWrapper = styled.div`
       position: relative;
 
       margin-bottom: 16px;
-      p:first-child {
+      .back-title {
         position: absolute;
         max-width: 60px;
         text-overflow: ellipsis;
         overflow: hidden;
         left: 0;
+        display: flex;
+        gap: 4px;
+        p {
+          color: ${(props) => props.theme.login.backTitle.color};
+        }
       }
     }
   }

packages/login/src/client/components/sub-components/EmailContainer.tsx

@@ -1,12 +1,13 @@
 import { Trans } from "react-i18next";
 import React from "react";
 
-import ArrowIcon from "PUBLIC_DIR/images/arrow.right.react.svg";
+import ArrowIcon from "PUBLIC_DIR/images/arrow.left.react.svg?url";
 
 import { EmailInput } from "@docspace/shared/components/email-input";
 import { FieldContainer } from "@docspace/shared/components/field-container";
 import { Text } from "@docspace/shared/components/text";
 import { Link } from "@docspace/shared/components/link";
+import { IconButton } from "@docspace/shared/components/icon-button";
 
 interface IEmailContainer {
   emailFromInvitation?: string;
@@ -43,10 +44,12 @@ const EmailContainer = ({
     return (
       <div className="invitation-info-container">
         <div className="sign-in-container">
-          <Text fontWeight={600} onClick={onClickBack}>
-            {t("Back")}
-          </Text>
-
+          <div className="back-title">
+            <IconButton size={16} iconName={ArrowIcon} onClick={onClickBack} />
+            <Text fontWeight={600} onClick={onClickBack}>
+              {t("Back")}
+            </Text>
+          </div>
           <Text fontWeight={600} fontSize={"16px"}>
             {t("Common:LoginButton")}
           </Text>

packages/shared/themes/base.ts

@@ -2829,6 +2829,10 @@ export const getBaseTheme = () => {
         border: `1px solid ${lightErrorStatus}`,
         color: lightErrorStatus,
       },
+
+      backTitle: {
+        color: "#A3A9AE",
+      },
     },
 
     facebookButton: {

packages/shared/themes/dark.ts

@@ -2807,6 +2807,10 @@ const Dark: TTheme = {
       border: `1px solid ${darkErrorStatus}`,
       color: darkErrorStatus,
     },
+
+    backTitle: {
+      color: "#A3A9AE",
+    },
   },
 
   facebookButton: {

public/images/arrow.left.react.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.93938 7.08476C4.15833 7.86581 4.15833 9.13214 4.93938 9.91319L10.2323 15.2061L11.6465 13.7919L6.35359 8.49898L11.6465 3.20608L10.2323 1.79187L4.93938 7.08476Z" fill="#A3A9AE"/>
+</svg>