Feat: refactor moderation auth pages (#903)

* feat(ui): create and export moderation error card - update interfaces * feat(apps): refactor moderation auth pages - remove redundant files
AKASHAorg · Mar 3, 2021 · 75bc116 · 75bc116
1 parent e651a4f
commit 75bc116
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 91 deletions.
diff --git a/apps/moderation/src/assets/illustration-blocked.ts b/apps/moderation/src/assets/illustration-blocked.ts
diff --git a/apps/moderation/src/assets/illustration-intro.ts b/apps/moderation/src/assets/illustration-intro.ts
diff --git a/apps/moderation/src/components/prompt-authentication.tsx b/apps/moderation/src/components/prompt-authentication.tsx
@@ -3,11 +3,7 @@ import DS from '@akashaproject/design-system';
 
 import { IPromptAuthorizationProps } from './prompt-authorization';
 
-import illustration from '../assets/illustration-intro';
-
-import { ContentWrapper, PageWrapper } from './styled';
-
-const { Box, Text, Image, Button } = DS;
+const { ModerationAppErrorCard } = DS;
 
 export interface IPromptAuthenticationProps extends IPromptAuthorizationProps {
   buttonLabel?: string;
@@ -26,36 +22,16 @@ const PromptAuthentication: React.FC<IPromptAuthenticationProps> = props => {
   }, [ethAddress]);
 
   return (
-    <PageWrapper style={{ background: 'white' }}>
-      <ContentWrapper
-        pad={{ top: '0rem', horizontal: '1.2rem', bottom: '1.2rem' }}
-        margin={{ top: '-2rem' }}
-      >
-        <Box height="18.75rem" width="18.75rem" alignSelf="center">
-          <Image fit="contain" src={illustration} />
-        </Box>
-        <Text
-          weight={600}
-          margin={{ bottom: 'medium', horizontal: 'auto' }}
-          size="large"
-          textAlign="center"
-        >
-          {titleLabel}
-        </Text>
-        <Text
-          weight="normal"
-          margin={{ bottom: 'medium' }}
-          color="secondaryText"
-          size="medium"
-          textAlign="center"
-        >
-          {subtitleLabel}
-        </Text>
-        <Box width="fit-content" alignSelf="center">
-          <Button primary={true} label={buttonLabel} onClick={showLoginModal} />
-        </Box>
-      </ContentWrapper>
-    </PageWrapper>
+    <ModerationAppErrorCard
+      size={'18.75rem'}
+      errorType={'no-authentication'}
+      titleLabel={titleLabel}
+      subtitleLabel={subtitleLabel}
+      buttonLabel={buttonLabel}
+      textMarginBottom={true}
+      hasButton={true}
+      showLoginModal={showLoginModal}
+    />
   );
 };
 

diff --git a/apps/moderation/src/components/prompt-authorization.tsx b/apps/moderation/src/components/prompt-authorization.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
 import DS from '@akashaproject/design-system';
 
-import illustration from '../assets/illustration-blocked';
-
-import { ContentWrapper, PageWrapper } from './styled';
-
-const { Box, Text, Image } = DS;
+const { ModerationAppErrorCard } = DS;
 
 export interface IPromptAuthorizationProps {
   titleLabel: string;
@@ -15,30 +11,14 @@ export interface IPromptAuthorizationProps {
 const PromptAuthorization: React.FC<IPromptAuthorizationProps> = props => {
   const { titleLabel, subtitleLabel } = props;
   return (
-    <PageWrapper style={{ background: 'white' }}>
-      <ContentWrapper pad={{ top: '0rem', horizontal: '1.4rem', bottom: '1.4rem' }}>
-        <Box height="14rem" width="14rem" margin={{ bottom: 'small' }} alignSelf="center">
-          <Image fit="contain" src={illustration} />
-        </Box>
-        <Text
-          weight={600}
-          margin={{ bottom: 'large', horizontal: 'auto' }}
-          size="large"
-          textAlign="center"
-        >
-          {titleLabel}
-        </Text>
-        <Text
-          weight="normal"
-          margin={{ top: 'xsmall' }}
-          color="secondaryText"
-          size="medium"
-          textAlign="center"
-        >
-          {subtitleLabel}
-        </Text>
-      </ContentWrapper>
-    </PageWrapper>
+    <ModerationAppErrorCard
+      size={'14rem'}
+      errorType={'no-access-granted'}
+      titleLabel={titleLabel}
+      subtitleLabel={subtitleLabel}
+      textMarginTop={true}
+      imageBoxHasMargin={true}
+    />
   );
 };
 

diff --git a/apps/moderation/src/components/styled/index.ts b/apps/moderation/src/components/styled/index.ts
@@ -6,21 +6,4 @@ const StyledBox: any = styled(Box)`
   background-color: ${props => props.theme.colors.accentLight};
 `;
 
-const PageWrapper: any = styled(Box)`
-  background: ${props => props.theme.colors.modalBackgroundAlt};
-`;
-
-const ContentWrapper: any = styled(Box)`
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-  background: white;
-  border-radius: 0.5rem;
-  span {
-    letter-spacing: 0.03em;
-  }
-`;
-
-export { StyledBox, PageWrapper, ContentWrapper };
+export { StyledBox };
diff --git a/ui/design/src/components/Errors/interfaces.ts b/ui/design/src/components/Errors/interfaces.ts
@@ -25,3 +25,18 @@ export interface ErrorLoaderProps {
   devDetails?: string | React.ReactNode;
   style?: React.CSSProperties;
 }
+
+export interface IModerationAppErrorCardProps {
+  size: string;
+  errorType: string;
+  titleLabel: string;
+  subtitleLabel: string;
+  buttonLabel?: string;
+  textMarginTop?: boolean;
+  textMarginBottom?: boolean;
+  hasButton?: boolean;
+  imageBoxHasMargin?: boolean;
+  /* Path to public folder */
+  publicImgPath?: string;
+  showLoginModal?: () => void;
+}
diff --git a/ui/design/src/components/Errors/moderation-app-error-card.tsx b/ui/design/src/components/Errors/moderation-app-error-card.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Text, Image } from 'grommet';
+
+import { Button } from '../Buttons';
+
+import type { IModerationAppErrorCardProps } from './interfaces';
+import { PageWrapper, ContentWrapper } from './styled-elements';
+
+const ModerationAppErrorCard: React.FC<IModerationAppErrorCardProps> = props => {
+  const {
+    size,
+    errorType,
+    titleLabel,
+    subtitleLabel,
+    buttonLabel,
+    textMarginTop,
+    textMarginBottom,
+    hasButton,
+    imageBoxHasMargin,
+    publicImgPath = '/images',
+    showLoginModal,
+  } = props;
+
+  const handleClick = () => {
+    if (showLoginModal) {
+      showLoginModal();
+    }
+  };
+
+  return (
+    <PageWrapper>
+      <ContentWrapper pad={{ top: '0rem', horizontal: '5rem', bottom: '1.2rem' }}>
+        <Box
+          height={size}
+          width={size}
+          margin={{ ...(imageBoxHasMargin && { bottom: 'small' }) }}
+          alignSelf="center"
+        >
+          <Image fit="contain" src={`${publicImgPath}/${errorType}.png`} />
+        </Box>
+        <Text
+          weight={600}
+          margin={{ bottom: 'medium', horizontal: 'auto' }}
+          size="xlarge"
+          textAlign="center"
+        >
+          {titleLabel}
+        </Text>
+        <Text
+          weight="normal"
+          margin={{
+            ...(textMarginTop && { top: 'xsmall' }),
+            ...(textMarginBottom && { bottom: 'medium' }),
+          }}
+          color="secondaryText"
+          size="large"
+          textAlign="center"
+        >
+          {subtitleLabel}
+        </Text>
+        {hasButton && (
+          <Box width="fit-content" alignSelf="center">
+            <Button primary={true} label={buttonLabel} onClick={handleClick} />
+          </Box>
+        )}
+      </ContentWrapper>
+    </PageWrapper>
+  );
+};
+
+export default ModerationAppErrorCard;
diff --git a/ui/design/src/components/Errors/styled-elements.ts b/ui/design/src/components/Errors/styled-elements.ts
@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+import { Box } from 'grommet';
+
 import { BasicCardBox } from '../Cards';
 
 const StyledErrorCard = styled(BasicCardBox)`
@@ -14,4 +16,19 @@ const StyledImage = styled.img`
   height: auto;
   padding: 2em 0;
 `;
-export { StyledErrorCard, StyledImage };
+
+const PageWrapper: any = styled(Box)`
+  background: white;
+`;
+
+const ContentWrapper: any = styled(Box)`
+  margin: auto;
+  position: absolute;
+  top: 40%;
+  transform: translate(0, -50%);
+  border-radius: 0.5rem;
+  span {
+    letter-spacing: 0.03em;
+  }
+`;
+export { StyledErrorCard, StyledImage, PageWrapper, ContentWrapper };
diff --git a/ui/design/src/index.ts b/ui/design/src/index.ts
@@ -71,6 +71,7 @@ import TextInputField from './components/Forms/text-input-field';
 import { AppIcon, Icon, iconTypes } from './components/Icon';
 import ErrorInfoCard from './components/Errors/error-info-card';
 import ErrorLoader from './components/Errors/error-loader';
+import ModerationAppErrorCard from './components/Errors/moderation-app-error-card';
 
 import { CommentInput, SearchInput, DropSearchInput } from './components/Input';
 import {
@@ -124,6 +125,7 @@ const exported = {
   EditableAvatar,
   ErrorInfoCard,
   ErrorLoader,
+  ModerationAppErrorCard,
   AppInfoWidgetCard,
   AppsWidgetCard,
   BasicCardBox,