Use icon

kokofixcomputers · Oct 29, 2024 · d15b0cd · d15b0cd
1 parent 57824f0
commit d15b0cd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
         "react-google-recaptcha": "^2.0.1",
         "react-hot-loader": "^4.12.21",
         "react-i18next": "^11.2.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^5.1.2",
         "react-transition-group": "^4.4.1",
         "reaptcha": "^1.7.2",

diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
@@ -5,6 +5,8 @@ import { object, string } from 'yup';
 import useFlash from '@/plugins/useFlash';
 import { useStoreState } from 'easy-peasy';
 import { Formik, FormikHelpers } from 'formik';
+import { FaDiscord } from 'react-icons/fa';
+import { MdOutlineEmail } from "react-icons/md";
 import Field from '@/components/elements/Field';
 import React, { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/elements/button/index';
@@ -107,16 +109,18 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
                             {email && (
                                 <Link to={'/auth/register'}>
                                     <Button css={tw`bg-green-500 text-white w-full mt-2 hover:bg-green-600`} size={Button.Sizes.Large}>
+                                        <MdOutlineEmail className="inline-block mr-2" />
                                         Signup with Email
                                     </Button>
                                 </Link>
                             )}
                             {discord && (
                                 <Link to={'/auth/discord'}>
-                                    <Button css={tw`bg-blue-500 text-white w-full mt-2 hover:bg-blue-600`} size={Button.Sizes.Large}>
-                                        Authenticate with Discord
-                                    </Button>
-                                </Link>
+                                <Button css={tw`bg-blue-500 text-white w-full mt-2 hover:bg-blue-600`} size={Button.Sizes.Large}>
+                                    <FaDiscord className="inline-block mr-2" />
+                                    Authenticate with Discord
+                                </Button>
+                            </Link>
                             )}
                         </div>
                     )}

diff --git a/yarn.lock b/yarn.lock
@@ -7656,6 +7656,11 @@ react-i18next@^11.2.1:
     "@babel/runtime" "^7.3.1"
     html-parse-stringify2 "2.0.1"
 
+react-icons@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
+  integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"