Login:Src:Components: change styles

packages/login/src/components/CreateUserForm/CreateUserForm.styled.tsx

@@ -38,6 +38,7 @@ export const RegisterContainer = styled.div<{
   width: 100%;
 
   .or-label {
+    color: ${(props) => props.theme.invitePage.textColor};
     margin: 0 8px;
   }
 

packages/login/src/components/GreetingContainer/GreetingCreateUserContainer/GreetingCreateUserContainer.styled.tsx

@@ -33,7 +33,6 @@ const TABLET_WIDTH = 480;
 export const GreetingContainer = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: left;
   height: 100%;
   width: ${DESKTOP_WIDTH}px;
 

packages/login/src/components/Wizard/Wizard.styled.tsx

@@ -76,47 +76,6 @@ export const WizardFormWrapper = styled.div<{ bgPattern: string }>`
     }
   }
 
-  .invitation-info-container {
-    margin-bottom: 16px;
-    .sign-in-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-
-      margin-bottom: 16px;
-      .back-title {
-        position: absolute;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        ${(props) =>
-          props.theme.interfaceDirection === "rtl"
-            ? css`
-                right: 0;
-              `
-            : css`
-                left: 0;
-              `};
-
-        display: flex;
-        gap: 4px;
-
-        svg {
-          ${(props) =>
-            props.theme.interfaceDirection === "rtl" &&
-            " transform: rotate(180deg)"};
-        }
-
-        p {
-          color: ${(props) => props.theme.login.backTitle.color};
-        }
-
-        p:hover {
-          cursor: pointer;
-        }
-      }
-    }
   }
 `;
 

packages/login/src/components/WizardForm/WizardForm.styled.ts

@@ -110,22 +110,19 @@ export const StyledInfo = styled.div`
 
   margin-bottom: 4px;
 
+  .text {
+    color: ${(props) => props.theme.client.wizard.textColor};
+  }
+
   .machine-name {
     padding-bottom: 4px;
     padding-top: 4px;
-    padding-left: 8px;
-    ${({ theme }) =>
-      theme.interfaceDirection === "rtl"
-        ? `padding-right: 8px;`
-        : `padding-left: 8px;`}
+    padding-inline-start: 8px;
     line-height: 20px;
   }
 
   .combo-button {
-    ${({ theme }) =>
-      theme.interfaceDirection === "rtl"
-        ? `padding-right: 8px;`
-        : `padding-left: 8px;`}
+    padding-inline-start: 8px;
   }
 
   .wrapper__language-selector {
@@ -156,9 +153,6 @@ export const StyledAcceptTerms = styled.div`
   padding-bottom: 24px;
 
   .wizard-checkbox svg {
-    ${({ theme }) =>
-      theme.interfaceDirection === "rtl"
-        ? `margin-left: 8px;`
-        : `margin-right: 8px;`}
+    margin-inline-end: 8px;
   }
 `;

packages/login/src/components/WizardForm/index.tsx

@@ -411,7 +411,7 @@ function WizardForm(props: WizardFormProps) {
       )}
 
       <StyledInfo>
-        <Text color="#A3A9AE" fontWeight={400}>
+        <Text className="text" fontWeight={400}>
           {t("Common:Domain")}
         </Text>
         <Text fontWeight={600} className="machine-name">
@@ -420,7 +420,7 @@ function WizardForm(props: WizardFormProps) {
       </StyledInfo>
 
       <StyledInfo>
-        <Text color="#A3A9AE" fontWeight={400}>
+        <Text className="text" fontWeight={400}>
           {t("Common:Language")}
         </Text>
         <div className="wrapper__language-selector">
@@ -449,7 +449,7 @@ function WizardForm(props: WizardFormProps) {
       </StyledInfo>
 
       <StyledInfo>
-        <Text color="#A3A9AE" fontWeight={400}>
+        <Text className="text" fontWeight={400}>
           {t("Timezone")}
         </Text>
         <ComboBox