refactoring slur index page UI

tattle-made · Oct 2, 2023 · c5f78b1 · c5f78b1
1 parent 9eee2fe
commit c5f78b1
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 40 deletions.
diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCard.js b/browser-extension/plugin/src/ui-components/atoms/SlurCard.js
@@ -0,0 +1,65 @@
+import { Box, Text } from 'grommet';
+import SlurCardBubble from './SlurCardBubble';
+
+const SlurCard = ({ data }) => {
+    return (
+        <Box>
+            <Box direction="row" justify="start" align="center">
+                <Text margin={{ left: 'xsmall' }} color="#71797E">
+                    Level of Severity:
+                </Text>
+                <Text margin={{ left: 'medium' }}>
+                    {data.level_of_severity}
+                </Text>
+            </Box>
+            <Box direction="row" justify="start" align="center">
+                <Text margin={{ left: 'xsmall' }} color="#646464">
+                    Casual:
+                </Text>
+                <Text margin={{ left: 'medium' }}>
+                    {data.casual ? 'Yes' : 'No'}
+                </Text>
+            </Box>
+            <Box direction="row" justify="start" align="center">
+                <Text margin={{ left: 'xsmall' }} color="#646464">
+                    Appropriated:
+                </Text>
+                <Text margin={{ left: 'medium' }}>
+                    {data.appropriated ? 'Yes' : 'No'}
+                </Text>
+            </Box>
+            {data.appropriationContext && (
+                <Box direction="row" justify="start" align="center">
+                    <Text margin={{ left: 'xsmall' }} color="#646464">
+                        If, Appropriated, Is it by Community or Others?:
+                    </Text>
+                    <Text margin={{ left: 'medium' }}>
+                        {data.appropriationContext === 'Community'
+                            ? 'Community'
+                            : 'Others'}
+                    </Text>
+                </Box>
+            )}
+            {data.labelMeaning && (
+                <Box direction="row" justify="start" align="center">
+                    <Text margin={{ left: 'xsmall' }} color="#646464">
+                        What Makes it Problematic?:
+                    </Text>
+                    <Text margin={{ left: 'medium' }}>{data.labelMeaning}</Text>
+                </Box>
+            )}
+            <Box direction="column">
+                <Text margin={{ left: 'xsmall' }} color="#646464">
+                    Categories:
+                </Text>
+                <Box direction="row" gap="medium" margin={{top: 'medium', left: 'xsmall'}}>
+                    {data.categories.map((category, categoryIndex) => (
+                        <SlurCardBubble key={categoryIndex} data={category} />
+                    ))}
+                </Box>
+            </Box>
+        </Box>
+    );
+};
+
+export default SlurCard;
diff --git a/browser-extension/plugin/src/ui-components/atoms/SlurCardBubble.js b/browser-extension/plugin/src/ui-components/atoms/SlurCardBubble.js
@@ -0,0 +1,19 @@
+import { Box, Text } from 'grommet';
+
+const SlurCardBubble = ({ data }) => {
+    return(
+        <Box>
+        {" "}
+        <Box
+          round={"small"}
+          background="#E7A85F"
+          pad={"xsmall"}
+          width={"fit-content"}
+        >
+          <Text size={"xsmall"}>{data.category}</Text>{" "}
+        </Box>
+      </Box>
+    )
+}
+
+export default SlurCardBubble;
diff --git a/browser-extension/plugin/src/ui-components/pages/Slur.jsx b/browser-extension/plugin/src/ui-components/pages/Slur.jsx
@@ -4,6 +4,7 @@ import { Add } from 'grommet-icons';
 import { useNavigate } from 'react-router-dom';
 import Api from './Api';
 import { UserContext } from '../atoms/AppContext';
+import SlurCard from '../atoms/SlurCard';
 
 const { getSlurAndCategory, deleteSlurAndCategory } = Api;
 
@@ -95,13 +96,17 @@ export function Slur() {
                             </Box>
                             <Box
                                 key={index}
-                                background="light-2"
+                                background="#FAE6C9"
                                 pad="medium"
-                                round="small"
+                                round="medium"
                                 width="medium"
                                 elevation="small"
                             >
-                                <Box direction="row" justify="end">
+                                <Box direction="row" justify="between" gap="small" align='center'>
+                                    <Text size='large'>
+                                        <strong>{slur.label}</strong>
+                                    </Text>
+                                    <Box direction='row' gap='medium'>
                                     <Button
                                         id="slur-edit-button"
                                         label="Edit"
@@ -112,47 +117,17 @@ export function Slur() {
                                     <Button
                                         id="slur-delete-button"
                                         label="Delete"
+                                        // color="#FFDBD0"
                                         onClick={() =>
                                             handleDeleteSlur(slur.id)
                                         }
                                     />
+                                    </Box>
                                 </Box>
-                                <Text>
-                                    <strong>Label:</strong> {slur.label}
-                                </Text>
-                                <Text>
-                                    <strong>Level of Severity:</strong>{' '}
-                                    {slur.level_of_severity}
-                                </Text>
-                                <Text>
-                                    <strong>Casual:</strong>{' '}
-                                    {slur.casual ? 'Yes' : 'No'}
-                                </Text>
-
-                                <Text>
-                                    <strong>Appropriated:</strong>{' '}
-                                    {slur.appropriated ? 'Yes' : 'No'}
-                                </Text>
-                                {slur.appropriationContext && (
-                                    <Text>
-                                        <strong>
-                                            If, Appropriated, Is it by Community
-                                            or Others?:
-                                        </strong>{' '}
-                                        {slur.appropriationContext ===
-                                        'Community'
-                                            ? 'Community'
-                                            : 'Others'}
-                                    </Text>
-                                )}
-                                {slur.labelMeaning && (
-                                    <Text>
-                                        <strong>
-                                            What Makes it Problematic?:
-                                        </strong>{' '}
-                                        {slur.labelMeaning}
-                                    </Text>
-                                )}
+                                <Box margin={{ top: 'large' }}>
+                                    <SlurCard data={slur}/>
+                                </Box>
+                                {/* <Text>
                                 <Text>
                                     <strong>Categories:</strong>
                                     <ul>
@@ -164,7 +139,7 @@ export function Slur() {
                                             )
                                         )}
                                     </ul>
-                                </Text>
+                                </Text> */}
                             </Box>
                         </>
                     ))