feat: Use new design for signed out pane in preferences (#734)

app/assets/javascripts/preferences/panes/account/Authentication.tsx

@@ -3,7 +3,6 @@ import { Button } from '@/components/Button';
 import {
   PreferencesGroup,
   PreferencesSegment,
-  Subtitle,
   Text,
   Title,
 } from '@/preferences/components';
@@ -11,6 +10,7 @@ import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
+import AccountIllustration from '../../../../svg/il-account.svg';
 
 export const Authentication: FunctionComponent<{
   application: WebApplication;
@@ -32,32 +32,27 @@ export const Authentication: FunctionComponent<{
     <PreferencesGroup>
       <PreferencesSegment>
         <div className="flex flex-col items-center px-12">
+          <AccountIllustration className="mb-3" />
           <Title>You're not signed in</Title>
-          <Subtitle className="text-center">
+          <Text className="text-center mb-3">
             Sign in to sync your notes and preferences across all your devices
             and enable end-to-end encryption.
-          </Subtitle>
-          <div className="min-h-3" />
-          <div className="flex flex-row w-full">
-            <Button
-              type="primary"
-              onClick={clickSignIn}
-              label="Sign in"
-              className="flex-grow"
-            />
-            <div className="min-w-3" />
-            <Button
-              type="primary"
-              onClick={clickRegister}
-              label="Register"
-              className="flex-grow"
-            />
-          </div>
-          <div className="min-h-3" />
-          <Text className="text-center">
-            Standard Notes is free on every platform, and comes standard with
-            sync and encryption.
           </Text>
+          <Button
+            type="primary"
+            label="Create free account"
+            onClick={clickRegister}
+            className="mb-3"
+          />
+          <div className="text-input">
+            Already have an account?{' '}
+            <button
+              className="border-0 p-0 bg-default color-info underline cursor-pointer"
+              onClick={clickSignIn}
+            >
+              Sign in
+            </button>
+          </div>
         </div>
       </PreferencesSegment>
     </PreferencesGroup>

app/assets/stylesheets/_sn.scss

@@ -24,6 +24,10 @@
   display: none;
 }
 
+.underline {
+  text-decoration: underline;
+}
+
 .hover\:underline:hover {
   text-decoration: underline;
 }

app/assets/svg/il-account.svg

@@ -0,0 +1,25 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="60" fill="#F4F5F7" />
+  <g filter="url(#filter0_d_118_16)">
+    <rect x="31" y="31" width="58" height="58" rx="4" fill="white" />
+    <rect x="64" y="45" width="17" height="4" rx="2" fill="#BBBEC4" />
+    <rect x="64" y="51" width="17" height="4" rx="2" fill="#BBBEC4" />
+    <rect x="64" y="57" width="17" height="4" rx="2" fill="#BBBEC4" />
+    <path
+      d="M54 45C55.9891 45 57.8968 45.7902 59.3033 47.1967C60.7098 48.6032 61.5 50.5109 61.5 52.5C61.5 54.4891 60.7098 56.3968 59.3033 57.8033C57.8968 59.2098 55.9891 60 54 60C52.0109 60 50.1032 59.2098 48.6967 57.8033C47.2902 56.3968 46.5 54.4891 46.5 52.5C46.5 50.5109 47.2902 48.6032 48.6967 47.1967C50.1032 45.7902 52.0109 45 54 45ZM54 61.875C59.0063 61.875 69 64.3687 69 69.375V75H39V69.375C39 64.3687 48.9937 61.875 54 61.875Z"
+      fill="#BBBEC4" />
+  </g>
+  <defs>
+    <filter id="filter0_d_118_16" x="19" y="23" width="82" height="82" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha" />
+      <feOffset dy="4" />
+      <feGaussianBlur stdDeviation="6" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_118_16" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_118_16" result="shape" />
+    </filter>
+  </defs>
+</svg>