Improved /security

fewlinesco · Oct 16, 2020 · 51e1687 · 51e1687
1 parent d9ab17d
commit 51e1687
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 53 deletions.
diff --git a/src/components/display/fewlines/SectionListItem/SectionListItem.tsx b/src/components/display/fewlines/SectionListItem/SectionListItem.tsx
@@ -19,33 +19,28 @@ export const SectionListItem: React.FC<SectionListItemProps> = ({
 
   return (
     <ShadowBox>
-      <Content>
-        <Link href={`/account/${sectionName.toLocaleLowerCase()}`}>
-          <NeutralLink>
-            <Flex>
-              {icon}
-              <TextBox>
-                <SectionName>{sectionName}</SectionName>
-                {text}
-              </TextBox>
-              <RightChevron />
-            </Flex>
-          </NeutralLink>
-        </Link>
-      </Content>
+      <Link href={`/account/${sectionName.toLocaleLowerCase()}`}>
+        <NeutralLink>
+          <Flex>
+            {icon}
+            <TextBox>
+              <SectionName>{sectionName}</SectionName>
+              {text}
+            </TextBox>
+            <RightChevron />
+          </Flex>
+        </NeutralLink>
+      </Link>
     </ShadowBox>
   );
 };
 
-const Content = styled.div`
-  cursor: pointer;
-`;
-
 const Flex = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: ${({ theme }) => theme.spaces.xs};
+  cursor: pointer;
 `;
 
 export const TextBox = styled.div`

diff --git a/src/components/display/fewlines/Security/Security.stories.tsx b/src/components/display/fewlines/Security/Security.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import Security from "./Security";
+import { Security } from "./Security";
 
 export default { title: "pages/Security", component: Security };
 

diff --git a/src/components/display/fewlines/Security/Security.tsx b/src/components/display/fewlines/Security/Security.tsx
@@ -6,60 +6,44 @@ import { Container } from "../Container";
 import { H1 } from "../H1/H1";
 import { H2 } from "../H2/H2";
 import { NeutralLink } from "../NeutralLink/NeutralLink";
-import RightChevron from "../RightChevron/RightChevron";
+import { RightChevron } from "../RightChevron/RightChevron";
 import { ShadowBox } from "../ShadowBox/ShadowBox";
 
 type SecurityProps = {
   isPasswordSet: boolean;
 };
 
-const Security: React.FC<SecurityProps> = ({ isPasswordSet }) => {
+export const Security: React.FC<SecurityProps> = ({ isPasswordSet }) => {
   return (
     <Container>
       <H1>Security</H1>
       <H2>Password, login history and more</H2>
-      {isPasswordSet ? (
-        <ShadowBox>
-          <Content>
-            <Link href="/account/logins">
-              <NeutralLink>
-                <Flex>
-                  <TextBox>
-                    <div>
-                      Manage your logins options, including emails, phone
-                      numbers and social logins
-                    </div>
-                  </TextBox>
-                  <RightChevron />
-                </Flex>
-              </NeutralLink>
-            </Link>
-          </Content>
-        </ShadowBox>
-      ) : (
-        <div />
-      )}
+      <ShadowBox>
+        <Link href={`/account/security/${isPasswordSet ? "update" : "set"}`}>
+          <NeutralLink>
+            <Flex>
+              <TextBox>
+                {isPasswordSet ? "Update" : "Set"} your password
+              </TextBox>
+              <RightChevron />
+            </Flex>
+          </NeutralLink>
+        </Link>
+      </ShadowBox>
     </Container>
   );
 };
 
-export default Security;
-
-const Content = styled.div`
-  cursor: pointer;
-`;
-
 const Flex = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: ${({ theme }) => theme.spaces.xs};
+  cursor: pointer;
 `;
 
 export const TextBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  max-width: 50%;
-  font-size: ${({ theme }) => theme.fontSizes.xxs};
+  font-size: ${({ theme }) => theme.fontSizes.s};
   line-height: ${({ theme }) => theme.lineHeights.title};
+  max-width: 50%;
 `;
diff --git a/src/pages/account/security/index.tsx b/src/pages/account/security/index.tsx
@@ -4,6 +4,7 @@ import React from "react";
 
 import { isUserPasswordSet } from "@lib/queries/isUserPasswordSet";
 import type { AccessToken } from "@src/@types/oauth2/OAuth2Tokens";
+import { Security } from "@src/components/display/fewlines/Security/Security";
 import { config, oauth2Client } from "@src/config";
 import { GraphqlErrors, OAuth2Error } from "@src/errors";
 import { withSSRLogger } from "@src/middleware/withSSRLogger";
@@ -17,7 +18,7 @@ type SecurityPageProps = {
 };
 
 const SecurityPage: React.FC<SecurityPageProps> = ({ isPasswordSet }) => {
-  return <SecurityPage isPasswordSet={isPasswordSet} />;
+  return <Security isPasswordSet={isPasswordSet} />;
 };
 
 export default SecurityPage;