style(ui): minor ui iteration (#2909)

packages/ui/src/assets/icons/radio-button-icon.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="9" cy="9" r="8" stroke="currentcolor" stroke-width="2"/>
-  <circle cx="9" cy="9" r="9" fill="currentcolor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75691 7.99955C4.36639 8.39008 4.36639 9.02324 4.75691 9.41377L7.58534 12.2422C7.97586 12.6327 8.60903 12.6327 8.99955 12.2422L13.2422 7.99955C13.6327 7.60903 13.6327 6.97586 13.2422 6.58534C12.8517 6.19481 12.2185 6.19481 11.828 6.58534L8.29245 10.1209L6.17112 7.99955C5.7806 7.60903 5.14744 7.60903 4.75691 7.99955Z" fill="white"/>
-</svg>

packages/ui/src/components/BrandingHeader/index.module.scss

@@ -1,6 +1,6 @@
 @use '@/scss/underscore' as _;
 
-$logo-height: 50px;
+$logo-height: 40px;
 
 .container {
   width: 100%;

packages/ui/src/components/Checkbox/index.tsx

@@ -2,21 +2,16 @@ import type { InputHTMLAttributes, Ref } from 'react';
 import { forwardRef } from 'react';
 
 import CheckBox from '@/assets/icons/checkbox-icon.svg';
-import RadioButton from '@/assets/icons/radio-button-icon.svg';
-import usePlatform from '@/hooks/use-platform';
 
 import * as styles from './index.module.scss';
 
 type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
 
 const Checkbox = ({ disabled, ...rest }: Props, ref: Ref<HTMLInputElement>) => {
-  const { isMobile } = usePlatform();
-  const Icon = isMobile ? RadioButton : CheckBox;
-
   return (
     <div className={styles.checkbox}>
       <input type="checkbox" disabled={disabled} {...rest} ref={ref} readOnly />
-      <Icon className={styles.icon} />
+      <CheckBox className={styles.icon} />
     </div>
   );
 };

packages/ui/src/components/Input/phoneInput.module.scss

@@ -35,7 +35,7 @@
     }
 
     > svg {
-      color: var(--color-brand-default);
+      color: var(--color-type-secondary);
       margin-left: _.unit(1);
       width: 16px;
       height: 16px;

packages/ui/src/components/TextLink/index.module.scss

@@ -11,9 +11,13 @@
   }
 
   &.primary {
+    font: var(--font-label-2);
+  }
+
+  &.primary,
+  &.inlinePrimary {
     color: var(--color-brand-default);
     text-decoration: none;
-    font: var(--font-label-2);
 
     &:active {
       color: var(--color-brand-hover);
@@ -29,11 +33,13 @@
 
 :global(body.desktop) {
   .link {
-    &.primary:hover {
+    &.primary:hover,
+    &.inlinePrimary:hover {
       color: var(--color-brand-hover);
     }
 
-    &.primary:focus-visible {
+    &.primary:focus-visible,
+    &.inlinePrimary:focus-visible {
       outline: _.border(var(--color-overlay-brand-focused));
     }
 

packages/ui/src/components/TextLink/index.tsx

@@ -12,7 +12,7 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
   children?: ReactNode;
   text?: TFuncKey;
   icon?: ReactNode;
-  type?: 'primary' | 'secondary';
+  type?: 'primary' | 'secondary' | 'inlinePrimary';
 } & Partial<LinkProps>;
 
 const TextLink = ({ className, children, text, icon, type = 'primary', to, ...rest }: Props) => {

packages/ui/src/containers/AppNotification/index.module.scss

@@ -10,6 +10,7 @@
     top: _.unit(6);
     left: _.unit(5);
     right: _.unit(5);
+    margin: 0 auto;
   }
 }
 

packages/ui/src/containers/OtherMethodsLink/index.tsx

@@ -37,6 +37,7 @@ const OtherMethodsLink = ({ methods, template, search, flow, className }: Props)
         <TextLink
           key={identifier}
           className={styles.signInMethodLink}
+          type="inlinePrimary"
           text={`input.${SignInMethodsKeyMap[identifier]}`}
           to={{ pathname: `/${flow}/${identifier}`, search }}
         />

packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModalContent/index.tsx

@@ -32,6 +32,7 @@ const TermsOfUseConfirmModalContent = ({ cancel }: ModalContentRenderProps) => {
         link: (
           <TextLink
             key={t('description.terms_of_use')}
+            type="inlinePrimary"
             text="description.terms_of_use"
             {...linkProps}
           />

packages/ui/src/containers/VerificationCode/index.module.scss

@@ -17,10 +17,6 @@
 
   .message {
     font: var(--font-body-2);
-
-    > span {
-      color: var(--color-brand-default);
-    }
   }
 
   .message,