Feature/tweet view (#411)

* fix: fix typo * feat: update tweet item, change pagination, fix missing image placehoders --------- Co-authored-by: Расул <[email protected]>
stakwork · Sep 18, 2023 · c639c9d · c639c9d
1 parent af56cff
commit c639c9d
Show file tree

Hide file tree

Showing 17 changed files with 369 additions and 168 deletions.
diff --git a/public/person_placeholder.svg b/public/person_placeholder.svg
diff --git a/public/verified_twitter.svg b/public/verified_twitter.svg
diff --git a/src/components/AddNodeModal/SourceUrl/index.tsx b/src/components/AddNodeModal/SourceUrl/index.tsx
@@ -1,12 +1,12 @@
-import React, { useState, FC } from 'react'
+import { FC, useState } from 'react'
+import { FaCheck } from 'react-icons/fa'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { colors } from '~/utils/colors'
-import { requiredRule } from '../index'
 import { TagInput } from '../TagInput'
 import { TextArea } from '../TextArea'
 import { TextInput } from '../TextInput'
-import { FaCheck } from 'react-icons/fa'
+import { requiredRule } from '../index'
 
 type Props = {
   startTime?: string

diff --git a/src/components/App/Providers/MuiButton.ts b/src/components/App/Providers/MuiButton.ts
@@ -19,7 +19,7 @@ export const MuiButton = {
       fontSize: '12px',
       fontStyle: 'normal',
       fontWeight: '400',
-      lineHeight: 'normal',
+      lineHeight: '8px',
       cursor: 'pointer',
       columnGap: '6px',
       '&:hover': {

diff --git a/src/components/App/Providers/index.tsx b/src/components/App/Providers/index.tsx
@@ -8,6 +8,7 @@ import { FC, PropsWithChildren } from 'react'
 import { ThemeProvider as StyleThemeProvider } from 'styled-components'
 import { colors } from '~/utils/colors'
 import { breakpoints } from '~/utils/media'
+import { MuiButton } from './MuiButton'
 
 const palette = createPalette({
   mode: 'dark',
@@ -16,89 +17,16 @@ const palette = createPalette({
   },
 })
 
-const MuiButton = {
-  defaultProps: {
-    disableElevation: true,
-    disableRipple: true,
-  },
-  styleOverrides: {
-    root: {
-      display: 'inline-flex',
-      padding: '12px 20px',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '10px',
-      borderRadius: '200px',
-      background: colors.BUTTON1,
-      color: 'var(--Primary-Text, #fff)',
-      fontFamily: 'Barlow',
-      fontSize: '12px',
-      fontStyle: 'normal',
-      fontWeight: '400',
-      lineHeight: 'normal',
-      cursor: 'pointer',
-      columnGap: '6px',
-      '&:hover': {
-        background: colors.BUTTON1_HOVER,
-        color: colors.GRAY3,
-        outline: 'none',
-        boxShadow: 'none',
-      },
-      '&:focus': {
-        outline: 'none',
-        boxShadow: 'none',
-        background: colors.BUTTON1_PRESS,
-        color: colors.GRAY6,
-      },
-      '&:active': {
-        outline: 'none',
-        boxShadow: 'none',
-        background: colors.BUTTON1_PRESS,
-        color: colors.GRAY6,
-      },
-      '&.MuiButton-sizeSmall': {
-        padding: '7px 16px',
-        fontSize: '11px',
-        fontWeight: 500,
-      },
-      '&.MuiButton-sizeLarge': {
-        padding: '12px 24px',
-        fontSize: '1.2rem',
-      },
-
-      '&.MuiButton-outlined': {},
-    },
-    outlined: {
-      // Add your custom styles here for the outlined variant
-      borderColor: colors.BUTTON1,
-      borderWidth: '1px',
-      backgroundColor: 'transparent',
-      '&:hover': {
-        borderColor: colors.BUTTON1_HOVER,
-        backgroundColor: 'transparent',
-        color: colors.GRAY3,
-      },
-      '&:active': {
-        backgroundColor: colors.BUTTON1_PRESS,
-        color: colors.GRAY6,
-      },
-    },
-    startIcon: {
-      // Define the size of the icon (adjust as needed)
-      fontSize: '1em',
-    },
-    endIcon: {
-      // Define the size of the icon (adjust as needed)
-      fontSize: '1em',
-    },
-  },
-}
-
 export const appTheme = createTheme({
   palette,
   components: {
     MuiButton,
   },
+  typography: {
+    button: {
+      textTransform: 'none',
+    },
+  },
   breakpoints: {
     values: {
       xs: breakpoints.small,

diff --git a/src/components/App/SideBar/Relevance/Episode/TypePerson/index.tsx b/src/components/App/SideBar/Relevance/Episode/TypePerson/index.tsx
@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+import { Avatar } from '~/components/common/Avatar'
+import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
+
+type Props = {
+  title: string
+  imageUrl?: string
+  name: string
+}
+
+export const TypePerson = ({ title, imageUrl, name }: Props) => (
+  <Flex>
+    <PictureWrapper>
+      <Avatar rounded size={64} src={imageUrl || ''} type="person" />
+    </PictureWrapper>
+    {(title || name) && <Name>{title || name}</Name>}
+  </Flex>
+)
+
+const PictureWrapper = styled(Flex)`
+  img {
+    width: 64px;
+    height: 64px
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  margin-right: 16px;
+`
+
+const Name = styled(Flex)`
+  color: ${colors.white};
+  font-family: Barlow;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 17px;
+`
diff --git a/src/components/App/SideBar/Relevance/Episode/TypeTweet/index.tsx b/src/components/App/SideBar/Relevance/Episode/TypeTweet/index.tsx
@@ -0,0 +1,91 @@
+import moment from 'moment'
+import styled from 'styled-components'
+import { Avatar } from '~/components/common/Avatar'
+import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
+import { Date } from '..'
+
+type Props = {
+  text: string
+  imageUrl?: string
+  twitterHandle?: string
+  date: number
+  name: string
+  verified: boolean
+}
+
+export const TypeTweet = ({ text, imageUrl, date, twitterHandle, name, verified }: Props) => (
+  <Flex direction="column">
+    <Flex align="center" direction="row" pr={16}>
+      <PictureWrapper>
+        <Avatar rounded size={27} src={imageUrl || ''} type="person" />
+      </PictureWrapper>
+      <Flex>
+        <Name align="center" direction="row">
+          {name}
+          {verified && (
+            <div className="verification">
+              <img alt="verified" src="verified_twitter.svg" />
+            </div>
+          )}
+        </Name>
+        {twitterHandle && <TwitterHandle>@{twitterHandle}</TwitterHandle>}
+      </Flex>
+    </Flex>
+
+    <Flex grow={1} shrink={1}>
+      <TwitText data-testid="episode-description">{text}</TwitText>
+      <Flex direction="row" justify="flex-start">
+        {Boolean(date) && <Date>{moment.unix(date).format('ll')}</Date>}
+      </Flex>
+    </Flex>
+  </Flex>
+)
+
+const PictureWrapper = styled(Flex)`
+  img {
+    width: 64px;
+    height: 64px
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  margin-right: 16px;
+`
+
+const Name = styled(Flex)`
+  color: ${colors.white};
+  font-family: Barlow;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: -0.22px;
+  .verification {
+    margin-left: 4px;
+  }
+`
+
+const TwitterHandle = styled(Flex)`
+  color: ${colors.GRAY7};
+  font-family: Barlow;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`
+
+const TwitText = styled(Flex)`
+  color: ${colors.white};
+  font-family: Barlow;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 130%;
+  letter-spacing: -0.39px;
+  margin: 8px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* Limit to two lines */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+`