From f6ca7ef2b1f358f145e9123372f714557dd4d65a Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 12 Nov 2021 22:51:29 +0530
Subject: [PATCH] feat: Use new design for signed out pane in preferences
 (#734)

---
 .../panes/account/Authentication.tsx          | 41 ++++++++-----------
 app/assets/stylesheets/_sn.scss               |  4 ++
 app/assets/svg/il-account.svg                 | 25 +++++++++++
 3 files changed, 47 insertions(+), 23 deletions(-)
 create mode 100644 app/assets/svg/il-account.svg

diff --git a/app/assets/javascripts/preferences/panes/account/Authentication.tsx b/app/assets/javascripts/preferences/panes/account/Authentication.tsx
index 72e1e27f6..42a5050d0 100644
--- a/app/assets/javascripts/preferences/panes/account/Authentication.tsx
+++ b/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>
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 86134d453..8d827f80e 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -24,6 +24,10 @@
   display: none;
 }
 
+.underline {
+  text-decoration: underline;
+}
+
 .hover\:underline:hover {
   text-decoration: underline;
 }
diff --git a/app/assets/svg/il-account.svg b/app/assets/svg/il-account.svg
new file mode 100644
index 000000000..0b31b807f
--- /dev/null
+++ b/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>
\ No newline at end of file