From c8e446c82eae5fea2948780470cd0b1bc1d4261e Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Mon, 29 Nov 2021 23:27:11 +0800
Subject: [PATCH] chore: tidy auth icons for mobile and desktop

---
 www/pages/auth/Auth.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/www/pages/auth/Auth.tsx b/www/pages/auth/Auth.tsx
index ba7f21d798c..891282fc43b 100644
--- a/www/pages/auth/Auth.tsx
+++ b/www/pages/auth/Auth.tsx
@@ -100,10 +100,10 @@ function AuthPage() {
           <div className="grid grid-cols-12">
             <div className="mb-10 lg:mb-0 col-span-12 lg:col-span-3">
               <p className="mb-4">
-                <Space>
-                  <img src={`${basePath}/images/product/auth/google-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/facebook-icon.svg`} width={21} />
-                  <div>
+                <div className="flex items-center flex-wrap xl:w-64">
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/google-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/facebook-icon.svg`} width={21} />
+                  <div className="mb-2 mr-2">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 32.58 31.77"
@@ -116,17 +116,17 @@ function AuthPage() {
                       />
                     </svg>
                   </div>
-                  <img src={`${basePath}/images/product/auth/gitlab-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/bitbucket-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/twitter-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/apple-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/discord-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/microsoft-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/messagebird-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/twilio-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/twitch-icon.svg`} width={21} />
-                  <img src={`${basePath}/images/product/auth/spotify-icon.svg`} width={21} />
-                </Space>
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/gitlab-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/bitbucket-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/twitter-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/apple-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/discord-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/microsoft-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/messagebird-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/twilio-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/twitch-icon.svg`} width={21} />
+                  <img className="mb-2 mr-2" src={`${basePath}/images/product/auth/spotify-icon.svg`} width={21} />
+                </div>
               </p>
               <Typography.Title level={4}>All the social providers</Typography.Title>
               <Typography.Text>