Migrating some small miscellaneous components

src/components/Footer/AletheiaSocialMediaFooter.tsx

@@ -1,4 +1,4 @@
-import { Col, Divider, Row } from "antd";
+import { Grid, Divider } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import colors from "../../styles/colors";
@@ -13,18 +13,18 @@ const AletheiaSocialMediaFooter = () => {
     const { t } = useTranslation();
     const [nameSpace] = useAtom(currentNameSpace);
     return (
-        <Row
-            justify="center"
+        <Grid container
+            justifyContent="center"
             style={{
                 padding: "10px 0",
             }}
         >
-            <Col span={24}>
+            <Grid item xs={12}>
                 <h3 style={{ fontSize: "23px", color: colors.white }}>
                     {t("footer:socialMedia")}
                 </h3>
-            </Col>
-            <Col span={24}>
+            </Grid>
+            <Grid item xs={12}>
                 {localConfig.footer.socialMedias.some((url) => url !== "") ? (
                     localConfig.footer.socialMedias.map(
                         (url) =>
@@ -46,15 +46,16 @@ const AletheiaSocialMediaFooter = () => {
                 ) : (
                     <AletheiaSocialMediaIcons />
                 )}
-            </Col>
-            <Col style={{ width: "324px", margin: "10px auto" }}>
-                <Divider
+            </Grid>
+            <Grid item style={{ width: "324px", margin: "30px auto" }}>
+                <Divider flexItem
+                    variant="fullWidth"
                     style={{
                         backgroundColor: colors.white,
                     }}
                 />
-            </Col>
-        </Row>
+            </Grid>
+        </Grid>
     );
 };
 

src/components/PartialReviewWarning.tsx

@@ -1,18 +1,17 @@
-import { Col } from "antd";
-import Text from "antd/lib/typography/Text";
+import { Grid, Typography } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import colors from "../styles/colors";
 
 const PartialReviewWarning = () => {
     const { t } = useTranslation();
     return (
-        <Col offset={3} span={14}>
-            <Text type="danger">* </Text>
+        <Grid item marginLeft={20} style={{ display: "flex", padding: 10 }} xs={7}>
+            <Typography variant="body1" style={{ color: colors.error, fontSize: 16 }}>* </Typography>
             <span style={{ color: colors.neutral }}>
                 {t("claimReview:partialReviewWarning")}
             </span>
-        </Col>
+        </Grid>
     );
 };
 

src/components/Personality/PersonalityCard.tsx

@@ -140,9 +140,9 @@ const PersonalityCard = ({
                     <Grid container
                         columnSpacing={summarized ? 0 : 1.5}
                         style={{
+                            alignContent: summarized ? "center": undefined,
                             width: "100%",
-                            padding: "15px",
-                            paddingBottom: 0,
+                            padding: "12px",
                         }}
                     >
                         <PersonalityCardAvatar

src/components/Personality/PersonalityCreateSearch.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Form, Row } from "antd";
+import { FormControl, FormLabel, Grid } from '@mui/material';
 import InputSearch from "../Form/InputSearch";
 import api from "../../api/personality";
 import { useTranslation } from "next-i18next";
@@ -106,28 +106,30 @@ const PersonalityCreateSearch = ({
     );
 
     return (
-        <Row style={{ marginTop: "10px" }}>
-            <Form
+        <Grid container style={{ gap: 15, margin: "15px 0" }}>
+            <FormControl
                 style={{
                     width: "100%",
                 }}
-                layout="vertical"
             >
-                <Form.Item
-                    label={<Label>{t("personalityCreateForm:name")}</Label>}
+                <FormLabel
                     style={{
                         width: "100%",
                         color: colors.blackSecondary,
                         fontSize: "14px",
                         lineHeight: "21px",
+                        marginBottom: "5px",
                     }}
                 >
-                    <InputSearch
-                        placeholder={t("header:search_placeholder")}
-                        callback={handleInputSearch}
-                    />
-                </Form.Item>
-            </Form>
+                    <Label>
+                        {t("personalityCreateForm:name")}
+                    </Label>
+                </FormLabel>
+                <InputSearch
+                    placeholder={t("header:search_placeholder")}
+                    callback={handleInputSearch}
+                />
+            </FormControl>
             {isLoading ? (
                 <Loading />
             ) : (
@@ -148,7 +150,7 @@ const PersonalityCreateSearch = ({
                     />
                 </>
             )}
-        </Row>
+        </Grid>
     );
 };
 

src/components/Personality/PersonalitySearchResultSection.tsx

@@ -1,4 +1,4 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material";
 import React from "react";
 
 import Label from "../Label";
@@ -14,7 +14,7 @@ const PersonalitySearchResultSection = ({
     const isCreatingClaim = selectPersonality !== null;
 
     return personalities.length ? (
-        <Row
+        <Grid container
             style={{
                 marginTop: "10px",
                 width: "100%",
@@ -37,7 +37,7 @@ const PersonalitySearchResultSection = ({
                         />
                     )
             )}
-        </Row>
+        </Grid>
     ) : null;
 };
 

src/components/Search/OverlaySearchResults.tsx

@@ -1,4 +1,4 @@
-import { Row } from "antd";
+import { Grid } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import router from "next/router";
 import React from "react";
@@ -62,7 +62,7 @@ const OverlaySearchResults = () => {
     };
 
     return (
-        <Row
+        <Grid container
             className="main-content"
             style={{
                 position: "absolute",
@@ -94,7 +94,7 @@ const OverlaySearchResults = () => {
                     );
                 })
             )}
-        </Row>
+        </Grid>
     );
 };
 

src/components/Search/SearchOverlay.tsx

@@ -78,7 +78,7 @@ const SearchOverlay = () => {
     }, [nameSpace]);
 
     return (
-        <OverlayGrid container namespace={nameSpaceProp} xs={0.5} sm={4} md={5}>
+        <OverlayGrid container item namespace={nameSpaceProp} xs={0.5} sm={4} md={5}>
             {!router.pathname.includes("/home-page") && (
                 <div
                     className={`input-container ${

src/stories/components/typography/Label.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Form } from "antd";
+import { FormControl, FormLabel } from "@mui/material";
 import AletheiaInput from "../../../components/AletheiaInput";
 import Label from "../../../components/Label";
 
@@ -23,17 +23,16 @@ export const Default: ComponentStory<typeof Label> = (args) => (
 
 
 const TemplateWithInput: ComponentStory<any> = (args) => (
-    <Form.Item
-        label={
+    <FormControl style={{ display: "flex", flexDirection: "row", gap: 10 }} >
+        <FormLabel>
             <Label>
-                {args.children}
+                {args.children}:
             </Label>
-        }
-    >
+        </FormLabel>
         <AletheiaInput
             placeholder={args.inputPlaceholder}
         />
-    </Form.Item>
+    </FormControl>
 )
 
 export const WithInput = TemplateWithInput.bind({})

src/stories/components/typography/Subtitle.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Typography } from "antd";
+import { Typography } from "@mui/material";
 import Paragraph from "../../../components/Paragraph";
 import Subtitle from "../../../components/Subtitle";
 
@@ -21,7 +21,7 @@ const Template: ComponentStory<typeof Subtitle> = (args) => (
 
 const ComparisonTemplate: ComponentStory<typeof Subtitle> = (args) => (
     <>
-        <Typography.Title>{args.title}</Typography.Title>
+        <Typography variant="h1" fontWeight={600} fontSize={38}>{args.title}</Typography>
         <Subtitle>{args.subtitle}</Subtitle>
         <Paragraph>{args.paragraph}</Paragraph>
     </>