Merge pull request #2075 from Shoaibdev7/implement-tabs-design

[SourceTable]: Implement Tabs Design According to Figma
stakwork · Aug 27, 2024 · c66c664 · c66c664
2 parents 5875a76 + 3f27188
commit c66c664
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 25 deletions.
diff --git a/public/svg-icons/ContentIcon.svg b/public/svg-icons/ContentIcon.svg
diff --git a/src/components/Icons/ContentIcon.tsx b/src/components/Icons/ContentIcon.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable */
+import React from 'react';
+
+const ContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 56 56"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.75129 14.5773L28 1.1547L51.2487 14.5773V41.4226L28 54.8453L4.75129 41.4226V14.5773Z"
+      stroke="#47505E"
+      stroke-width="2"
+    />
+    <path
+      d="M51.5956 14.4722L28.0001 28.0003M28.0001 28.0003L4.40457 14.4722M28.0001 28.0003L28.0001 55.3711"
+      stroke="#47505E"
+      stroke-width="2"
+    />
+  </svg>
+);
+
+export default ContentIcon;
diff --git a/src/components/SourcesTableModal/SourcesView/Content/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Content/Table/index.tsx
@@ -1,13 +1,14 @@
-import { Button, styled, Table as MaterialTable, TableRow } from '@mui/material'
+import { Button, Table as MaterialTable, styled, TableRow } from '@mui/material'
 import React from 'react'
-import { StyledTableCell, StyledTableHead } from '../../common'
-import { TopicRow } from './TableRow'
 import { Flex } from '~/components/common/Flex'
-import { useModal } from '~/stores/useModalStore'
+import { Text } from '~/components/common/Text'
+import ContentIcon from '~/components/Icons/ContentIcon'
 import PlusIcon from '~/components/Icons/PlusIcon'
 import { Node } from '~/network/fetchSourcesData'
-import { Text } from '~/components/common/Text'
+import { useModal } from '~/stores/useModalStore'
 import { colors } from '~/utils'
+import { StyledTableCell, StyledTableHead } from '../../common'
+import { TopicRow } from './TableRow'
 
 interface TableProps {
   nodes: Node[]
@@ -23,10 +24,13 @@ export const Table: React.FC<TableProps> = ({ nodes }) => {
   return !nodes || nodes?.length === 0 ? (
     <>
       <AddContentSection>
-        <Subtitle align="center" direction="row" justify="space-between">
-          <Text className="subtitle">Contribute to the graph by adding content.</Text>
+        <IconWrapper>
+          <ContentIcon />
+        </IconWrapper>
+        <Subtitle>
+          <Text className="subtitle">Contribute to the graph by adding your first content.</Text>
         </Subtitle>
-        <Flex>
+        <Flex justify="center">
           <Button
             color="secondary"
             onClick={handleAddContent}
@@ -64,16 +68,19 @@ const AddContentSection = styled(Flex)`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 100px auto;
+  margin: 150px auto;
   width: 100%;
+  flex-direction: column;
 `
 
 const Subtitle = styled(Flex)`
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-  margin-bottom: 30px;
+  max-width: 200px;
+  margin-bottom: 25px;
+  text-align: center;
 
   .subtitle {
     color: ${colors.GRAY3};
@@ -84,3 +91,13 @@ const Subtitle = styled(Flex)`
     line-height: normal;
   }
 `
+
+const IconWrapper = styled(Flex)`
+  margin-bottom: 20px;
+
+  svg {
+    fill: none;
+    height: 60px;
+    width: 60px;
+  }
+`
diff --git a/src/components/SourcesTableModal/SourcesView/Content/index.tsx b/src/components/SourcesTableModal/SourcesView/Content/index.tsx
@@ -3,9 +3,7 @@ import { Button } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
-import { Heading } from '~/components/SourcesTableModal/SourcesView/common'
 import { Flex } from '~/components/common/Flex'
-import { Text } from '~/components/common/Text'
 import { Node, getNodeContent } from '~/network/fetchSourcesData'
 import { colors } from '~/utils/colors'
 import { Table } from './Table'
@@ -50,9 +48,6 @@ export const Content = () => {
 
   return (
     <Wrapper direction="column" justify="flex-end">
-      <Heading align="center" direction="row" justify="space-between">
-        <Text className="title">Content I&apos;ve added to the graph</Text>
-      </Heading>
       <TableWrapper align="center" justify={loading ? 'center' : 'flex-start'}>
         {loading ? (
           <ClipLoader color={colors.white} />

diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
@@ -1,9 +1,11 @@
 import { Table as MaterialTable, TableBody, TableRow } from '@mui/material'
 import React, { useState } from 'react'
-import { MdCheck, MdClose, MdOutlineModeEdit } from 'react-icons/md'
+import { MdCheck, MdClose } from 'react-icons/md'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { BaseTextInput } from '~/components/BaseTextInput'
+import DeleteIcon from '~/components/Icons/DeleteIcon'
+import EditIcon from '~/components/Icons/EditIcon'
 import NoFilterResultIcon from '~/components/Icons/NoFilterResultIcon'
 import ConfirmPopover from '~/components/common/ConfirmPopover'
 import { Flex } from '~/components/common/Flex'
@@ -15,7 +17,6 @@ import { RadarRequest, Sources } from '~/types'
 import { colors } from '~/utils/colors'
 import { StyledTableCell, StyledTableHead, StyledTableRow } from '../../common'
 import { TWITTER_LINK, sourcesMapper } from '../../constants'
-import DeleteIcon from '~/components/Icons/DeleteIcon'
 
 type Props = {
   data: Sources[] | undefined
@@ -209,9 +210,10 @@ const EditableCell: React.FC<EditableCellProps> = ({ value, onSave, id, children
         </EditModeCellWrapper>
       ) : (
         <EditableCellWrapper direction="row">
-          {children}
+          <div className="name">{children}</div>
+          <div className="spacer" />
           <IconWrapper onClick={() => setEditing(true)}>
-            <MdOutlineModeEdit data-testid={`edit-icon-${id}`} size={20} />
+            <EditIcon data-testid={`edit-icon-${id}`} />
           </IconWrapper>
         </EditableCellWrapper>
       )}
@@ -246,6 +248,7 @@ const IconWrapper = styled(Flex)`
   background: transparent;
   align-items: center;
   justify-content: center;
+  display: flex;
   &.centered {
     margin: 0 auto;
   }
@@ -276,21 +279,25 @@ const NoResultWrapper = styled(Flex)`
     letter-spacing: 0em;
     color: ${colors.GRAY6};
   }
+
+  svg {
+    color: ${colors.GRAY6};
+  }
 `
 
 const EditableCellWrapper = styled(Flex)`
   display: flex;
   padding: 4px;
   position: relative;
+  width: 100%;
+  align-items: center;
 
-  ${IconWrapper} {
-    visibility: hidden;
+  .name {
+    flex: 1;
   }
 
-  &:hover {
-    ${IconWrapper} {
-      visibility: visible;
-    }
+  .spacer {
+    flex: 1;
   }
 `
 
@@ -305,6 +312,9 @@ const StyledLink = styled.a`
   &:visited {
     color: ${colors.white};
   }
+  &:hover {
+    color: ${colors.SOURCE_TABLE_LINK};
+  }
 `
 
 const ClipLoaderWrapper = styled(Flex)`

diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx
@@ -100,6 +100,7 @@ export const colors = {
   SEEDQUESTION: 'rgba(47, 58, 89, 1)',
   SEEDQUESTION_HOVER: 'rgba(38, 42, 58, 1)',
   COLLAPSE_BUTTON: 'rgba(48, 51, 66, 1)',
+  SOURCE_TABLE_LINK: 'rgba(171, 204, 254, 1)',
   AI_HIGHLIGHT: 'rgba(0, 123, 255, 0.1)',
 } as const