migrate topics components to mui material

AletheiaFact · Jan 18, 2025 · b6ec068 · b6ec068
1 parent 2fe958f
commit b6ec068
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/src/components/topics/TagDisplay.style.tsx b/src/components/topics/TagDisplay.style.tsx
@@ -1,7 +1,7 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import styled from "styled-components";
 
-const TagDisplayStyled = styled(Col)`
+const TagDisplayStyled = styled(Grid)`
     margin: 16px 16px 12px 16px;
     margin-bottom: 12px;
     display: flex;

diff --git a/src/components/topics/TagDisplay.tsx b/src/components/topics/TagDisplay.tsx
@@ -17,7 +17,7 @@ const TagDisplay = ({ handleClose, tags, setShowTopicsForm }: ITagDisplay) => {
     const [isLoggedIn] = useAtom(isUserLoggedIn);
 
     return (
-        <TagDisplayStyled>
+        <TagDisplayStyled item>
             <TagsList
                 tags={tags}
                 editable={isLoggedIn}

diff --git a/src/components/topics/TagsList.tsx b/src/components/topics/TagsList.tsx
@@ -1,9 +1,9 @@
-import { Col, Tag } from "antd";
+import { Chip, Grid } from "@mui/material";
+import { CloseOutlined } from "@mui/icons-material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import colors from "../../styles/colors";
 import router from "next/router";
-
 interface TagsListProps {
     tags: any[];
     editable?: boolean;
@@ -23,29 +23,29 @@ const TagsList = ({ tags, editable = false, handleClose }: TagsListProps) => {
     };
 
     return (
-        <Col>
+        <Grid item padding={1}>
             {tags.length <= 0 && <span>{t("topics:noTopics")}</span>}
 
             {tags &&
                 tags.map((tag) => (
-                    <Tag
+                    <Chip
+                        label={(tag?.label || tag).toUpperCase()}
                         key={tag?.value || tag}
-                        color={colors.secondary}
-                        closable={editable}
-                        onClose={() => handleClose(tag?.value || tag)}
+                        onClick={() => handleTagClick(tag?.label || tag)}
+                        onDelete={editable ? () => handleClose(tag?.value || tag) : undefined}
+                        deleteIcon={<CloseOutlined style={{fontSize: 15, color: colors.white}}/>}
                         style={{
+                            backgroundColor: colors.secondary,
+                            color: colors.white,
                             borderRadius: 32,
                             padding: "4px 10px 2px",
                             marginTop: 4,
                             marginBottom: 4,
                             cursor: "pointer",
                         }}
-                        onClick={() => handleTagClick(tag?.label || tag)}
-                    >
-                        {(tag?.label || tag).toUpperCase()}
-                    </Tag>
+                    />
                 ))}
-        </Col>
+        </Grid>
     );
 };
 

diff --git a/src/components/topics/TopicForm.tsx b/src/components/topics/TopicForm.tsx
@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import FormControl from "@mui/joy/FormControl";
@@ -94,7 +94,7 @@ const TopicForm = ({
 
     return (
         <form onSubmit={handleSubmit(handleOnSubmit)}>
-            <Col style={{ display: "flex" }}>
+            <Grid item style={{ display: "flex" }}>
                 <Controller
                     control={control}
                     name="topics"
@@ -103,7 +103,7 @@ const TopicForm = ({
                     }}
                     render={({ field: { onChange, value } }) => (
                         <CssVarsProvider>
-                            <FormControl sx={{ width: 655 }}>
+                            <FormControl sx={{ width: "100%" }}>
                                 <Autocomplete
                                     freeSolo
                                     multiple
@@ -148,7 +148,7 @@ const TopicForm = ({
                 >
                     {t("topics:addTopicsButton")}
                 </AletheiaButton>
-            </Col>
+            </Grid>
 
             <TopicInputErrorMessages errors={errors} />
         </form>