style: fixing style issues

.eslintrc.json

@@ -9,8 +9,10 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:jest/recommended"
   ],
+  "plugins": ["jest"],
   "rules": {
     "react/jsx-filename-extension": [0],
     "global-require": [0],

documentationwebsite/src/components/TypographyVariant/TypographyVariant.tsx

@@ -55,8 +55,12 @@ const TypographyVariant: React.FC<TypographyVariantProps> = ({
                 : metadata[key];
             return (
               <>
-                <p className={styles.metaDataKey}>{key}: </p>
-                <p className={styles.metaData}>{data}</p>
+                <p key={i} className={styles.metaDataKey}>
+                  {key}:{" "}
+                </p>
+                <p key={i} className={styles.metaData}>
+                  {data}
+                </p>
               </>
             );
           })}

documentationwebsite/src/css/custom.css

@@ -85,15 +85,15 @@ table thead tr th {
   font-size: smaller;
 }
 
+tr {
+  border-bottom: 1px solid var(--table-row-separator-color) !important;
+}
+
 tbody tr {
   background-color: transparent !important;
   font-size: 14px;
 }
 
-tr {
-  border-bottom: 1px solid var(--table-row-separator-color) !important;
-}
-
 tbody tr td {
   padding: 10px 10px;
 }

documentationwebsite/src/pages/index.tsx

@@ -82,8 +82,8 @@ function FeaturesSection() {
   ];
 
   const renderFeatureCards = (features) => {
-    return features.map((feature) => (
-      <div className="col col--4">
+    return features.map((feature, key) => (
+      <div key={key} className="col col--4">
         <div className={clsx("card", styles.featureCard)}>
           <div className={clsx("card__header", styles.featureCardTitle)}>
             <div className={styles.featureCardIcon}>{feature.icon}</div>