stakwork · kevkevinpal · Nov 2, 2023 · Nov 1, 2023 · Nov 1, 2023
diff --git a/build/assets/index-636304bd.js b/build/assets/index-636304bd.js
diff --git a/build/index.html b/build/index.html
@@ -22,7 +22,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Second Brain</title>
-    <script type="module" crossorigin src="/assets/index-636304bd.js"></script>
+    <script type="module" crossorigin src="/assets/index-e8bee665.js"></script>
     <link rel="stylesheet" href="/assets/index-381991a0.css">
   </head>
   <body style="background: #000">

diff --git a/src/components/App/Helper/BoostAmt.tsx b/src/components/App/Helper/BoostAmt.tsx
@@ -1,18 +1,40 @@
-import { Text } from '~/components/common/Text'
 import styled from 'styled-components'
 import BoostIcon from '~/components/Icons/BoostIcon'
+import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
 
 type Props = {
   amt: number
 }
 export const BoostAmt = ({ amt }: Props) => (
-  <div style={{ alignSelf: 'center' }}>
-    <BoostIcon />
-
-    <StyledText color="white">{amt}</StyledText>
-  </div>
+  <Wrapper align="center" direction="row" justify="flex-start">
+    <div className="icon">
+      <BoostIcon />
+    </div>
+    <div className="value">{amt}</div>
+    <div className="text">sat</div>
+  </Wrapper>
 )
 
-const StyledText = styled(Text)`
-  padding-left: 10px;
+const Wrapper = styled(Flex)`
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  color: ${colors.GRAY7};
+  .icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    background: ${colors.GRAY7};
+    color: ${colors.BG1};
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .value {
+    margin: 0 4px 0 8px;
+    color: ${colors.white};
+  }
 `
diff --git a/src/components/App/Providers/MuiButton.ts b/src/components/App/Providers/MuiButton.ts
@@ -61,6 +61,14 @@ export const MuiButton = {
 
       '&.MuiButton-outlined': {},
     },
+    textPrimary: {
+      '& .MuiButton-endIcon': {
+        color: colors.GRAY6,
+      },
+      '& .MuiButton-startIcon': {
+        color: colors.GRAY6,
+      },
+    },
     outlined: {
       // Add your custom styles here for the outlined variant
       borderColor: colors.BUTTON1,

diff --git a/src/components/App/SideBar/TwitData/index.tsx b/src/components/App/SideBar/TwitData/index.tsx
@@ -1,95 +1,130 @@
 import { Button } from '@mui/material'
+import moment from 'moment'
+import { useState } from 'react'
 import styled from 'styled-components'
+import { Booster } from '~/components/Booster'
+import LinkIcon from '~/components/Icons/LinkIcon'
+import { Avatar } from '~/components/common/Avatar'
+import { Divider } from '~/components/common/Divider'
 import { Flex } from '~/components/common/Flex'
-import { Text } from '~/components/common/Text'
 import { useSelectedNode } from '~/stores/useDataStore'
 import { colors } from '~/utils/colors'
+import { BoostAmt } from '../../Helper/BoostAmt'
+import { Date } from '../Relevance/Episode'
 
 export const TwitData = () => {
   const selectedNode = useSelectedNode()
 
+  const {
+    date,
+    boost,
+    text,
+    name,
+    verified,
+    profile_picture: profilePicture,
+    twitter_handle: twitterHandle,
+    ref_id: refId,
+  } = selectedNode || {}
+
   const twitId: string = selectedNode?.tweet_id || ''
+  const [boostAmount, setBoostAmount] = useState<number>(boost || 0)
 
   return (
     selectedNode && (
-      <Flex direction="column" px={24} py={16}>
-        <Flex align="center" direction="row" justify="flex-start" p={10}>
-          <Text color="primaryText1">{selectedNode?.label}</Text>
-        </Flex>
-        {twitId && (
-          <>
-            <TweetContainer>
-              <Flex direction="row">
-                <ProfilePicture>
-                  <img alt="Profile" src={selectedNode.profile_picture || 'twitter_placeholder.png'} />
-                </ProfilePicture>
+      <>
+        <Flex direction="column" p={24}>
+          <Flex align="center" direction="row" pr={16}>
+            <PictureWrapper>
+              <Avatar rounded size={58} src={profilePicture || ''} 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>
 
-                <AuthorInfo>
-                  <AuthorName>{selectedNode.name}</AuthorName>
-                  <TwitterHandle>{selectedNode.twitter_handle || '@unknown_handle'}</TwitterHandle>
-                </AuthorInfo>
-              </Flex>
-              <TweetText>{selectedNode.text}</TweetText>
-            </TweetContainer>
-            <Flex align="center">
-              <a href={`https://twitter.com/Interior/status/${twitId}?open=system`}>
-                <Button>View comments </Button>
-              </a>
+          <Flex grow={1} shrink={1}>
+            <TwitText data-testid="episode-description">{text}</TwitText>
+            <Flex direction="row" justify="flex-start">
+              {!!date && <Date>{moment.unix(date).format('ll')}</Date>}
             </Flex>
-          </>
-        )}
-      </Flex>
+          </Flex>
+          <Flex align="stretch" mt={22}>
+            <a href={`https://twitter.com/Interior/status/${twitId}?open=system`}>
+              <StyledButton endIcon={<LinkIcon />}>View Tweet </StyledButton>
+            </a>
+          </Flex>
+        </Flex>
+        <StyledDivider />
+        <Flex direction="row" justify="space-between" pt={14} px={24}>
+          <BoostAmt amt={boostAmount} />
+          <Booster content={selectedNode} count={boostAmount} refId={refId} updateCount={setBoostAmount} />
+        </Flex>
+      </>
     )
   )
 }
 
-const TweetContainer = styled.div`
-  padding: 10px;
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  background: ${colors.BG1};
-`
-
-const ProfilePicture = styled.div`
-  width: 50px;
-  height: 50px;
-  border-radius: 6px;
-  overflow: hidden;
-  margin-right: 10px;
-  flex: 1 1 50px;
-  max-width: 50px;
-  margin-bottom: 16px;
-
+const PictureWrapper = styled(Flex)`
   img {
-    width: 100%;
-    height: 100%;
+    width: 64px;
+    height: 64px
+    border-radius: 50%;
+    object-fit: cover;
   }
+  margin-right: 16px;
 `
 
-const AuthorInfo = styled.div`
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  margin-bottom: 5px;
-  flex-direction: column;
+const Name = styled(Flex)`
+  color: ${colors.white};
+  font-family: Barlow;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: -0.22px;
+  .verification {
+    margin-left: 4px;
+  }
 `
 
-const AuthorName = styled.span`
+const TwitterHandle = styled(Flex)`
+  color: ${colors.GRAY7};
   font-family: Barlow;
-  font-weight: 700;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`
+
+const TwitText = styled(Flex)`
   color: ${colors.white};
+  font-family: Barlow;
+  font-size: 17px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 130%;
+  letter-spacing: -0.39px;
+  margin: 8px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
 `
 
-const TwitterHandle = styled.span`
-  color: ${colors.PRIMARY_BLUE};
+const StyledDivider = styled(Divider)`
+  margin: 0 0 6px 0;
+  opacity: 75%;
 `
 
-const TweetText = styled.p`
-  font-family: Barlow;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 21px;
-  color: ${colors.white};
+const StyledButton = styled(Button)`
+  width: 100%;
 `