diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCard.js b/browser-extension/plugin/src/ui-components/atoms/SlurCard.js
index 62d7699f..ad086c79 100644
--- a/browser-extension/plugin/src/ui-components/atoms/SlurCard.js
+++ b/browser-extension/plugin/src/ui-components/atoms/SlurCard.js
@@ -1,18 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react'
+import SlurCardBubble from './SlurCardBubble';
import {
- List,
- Text,
+ Card, CardBody, CardFooter,
Box,
- Table,
- TableHeader,
- TableRow,
- TableCell,
- TableBody,
- Button,
Anchor,
+ DataTable,
+ Text,
} from 'grommet';
import { Alert, FormUp, FormDown } from 'grommet-icons';
-import SlurCardBubble from './SlurCardBubble';
const SlurCard = ({ data }) => {
const isDataEmpty =
@@ -21,239 +16,85 @@ const SlurCard = ({ data }) => {
data.appropriated === undefined ||
data.categories.length === 0;
- const [showMore, setShowMore] = useState(false);
+ const [showMore, setShowMore] = React.useState(false);
const toggleShowMore = () => {
setShowMore(!showMore);
};
const buttonLabel = showMore ? 'See Less' : 'See More';
const buttonIcon = showMore ? : ;
- return (
-
- {isDataEmpty ? (
-
-
-
+ const columns = [
+ {
+ property: 'name',
+ header: false,
+ render: data => {data.name},
+ },
+ {
+ property: 'value',
+ header: false,
+ render: data => {
+ return data.name === 'Categories' ? (
+
+ {data.value.map((category, categoryIndex) => (
+
+
+
+ ))}
- Add metadata for the slur
-
- ) : (
- <>
-
- {/*
-
- {data.labelMeaning}
-
-
- )
- },
- {
- name: 'Categories',
- value: (
-
- {data.categories.map(
- (category, categoryIndex) => (
-
- )
- )}
-
- )
- }
- ]}
- /> */}
-
- {/*
-
-
- Name
-
-
- Flavor
-
-
- */}
-
-
-
-
- Level of Severity
-
-
-
- {data.levelOfSeverity}
-
-
-
-
- Casual
-
-
- {data.casual === true
- ? 'Yes'
- : data.casual === false
- ? 'No'
- : ''}
-
-
-
-
-
- Appropriated
-
-
-
- {data.appropriated === true
- ? 'Yes'
- : data.appropriated === false
- ? 'No'
- : ''}
-
-
- {showMore && (
- <>
-
-
-
- If, Appropriated, Is it by
- Community or Others?
-
-
-
- {data.appropriationContext === true
- ? 'Community'
- : data.appropriationContext ===
- false
- ? 'Others'
- : ''}
-
-
-
-
-
- What Makes it Problematic?
-
-
-
-
-
- {data.labelMeaning}
-
-
-
-
-
-
-
- Categories
-
-
-
- {
-
- {data.categories.map(
- (
- category,
- categoryIndex
- ) => (
-
-
-
- )
- )}
-
- }
-
-
-
- )}
-
-
-
-
+ ) : data.value;
+ },
+ },
+ ];
+
+ const dataToShow = [
+ { name: 'Level of Severity', value: data.levelOfSeverity },
+ { name: 'Casual', value: data.casual ? 'Yes' : 'No' },
+ { name: 'Appropriated', value: data.appropriated ? 'Yes' : 'No' },
+ ];
+
+ if (showMore) {
+ dataToShow.push(
+ { name: 'If, Appropriated, Is it by Community or Others?', value: data.appropriationContext ? 'Community' : 'Others' },
+ { name: 'What Makes it Problematic?', value: data.labelMeaning },
+ { name: 'Categories', value: data.categories },
+ );
+ }
+
+ return (
+
+
+ {isDataEmpty ? (
+
+
+
+ Add metadata for the slur
-
- )}
-
+ ) : (
+
+ )}
+
+ {!isDataEmpty && (
+
+
+
+ )}
+
);
-};
+}
-export default SlurCard;
+export default SlurCard
\ No newline at end of file
diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
deleted file mode 100644
index f5ee618a..00000000
--- a/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import SlurCardBubble from './SlurCardBubble';
-import {
- Card, CardBody, CardFooter, CardHeader, List,
- Text,
- Box,
- Button,
- Anchor,
-} from 'grommet';
-
-
-const SlurCardComponent = ({ data }) => {
- return (
-
- Header
- Body
-
- )
-}
-
-export default SlurCardComponent
\ No newline at end of file
diff --git a/browser-extension/plugin/src/ui-components/atoms/Theme.jsx b/browser-extension/plugin/src/ui-components/atoms/Theme.jsx
index 7bbc4f12..fa6adbd2 100644
--- a/browser-extension/plugin/src/ui-components/atoms/Theme.jsx
+++ b/browser-extension/plugin/src/ui-components/atoms/Theme.jsx
@@ -71,7 +71,14 @@ const Theme = {
)
}
- }
+ },
+ dataTable: {
+ header: {
+ border: {
+ color: 'transparent',
+ },
+ },
+ },
};
export default Theme;
diff --git a/browser-extension/plugin/src/ui-components/pages/Slur.jsx b/browser-extension/plugin/src/ui-components/pages/Slur.jsx
index 5ee2ddff..6e1889a4 100644
--- a/browser-extension/plugin/src/ui-components/pages/Slur.jsx
+++ b/browser-extension/plugin/src/ui-components/pages/Slur.jsx
@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom';
import Api from './Api';
import { UserContext, NotificationContext } from '../atoms/AppContext';
import SlurCard from '../atoms/SlurCard';
-// import SlurCardComponent from '../atoms/SlurCardComponent';
const { getSlurAndCategory, deleteSlurAndCategory } = Api;
@@ -56,7 +55,7 @@ export function Slur() {
}, []);
return (
-
+
{isLoading ? (