Improve mobile layout (#221)

Author: medyo

src/assets/App.css

@@ -1488,6 +1488,9 @@ Modal
   border-color: var(--settings-input-border-focus-color);
 }
 @media (max-width: 768px) {
+  .extras {
+    display: none;
+  }
   .Modal {
     left: 0;
     top: 0;
@@ -1500,11 +1503,4 @@ Modal
     box-shadow: none;
     width: auto;
   }
-  .settingContent {
-    margin-top: 6px;
-  }
-  .settingRow {
-    flex-direction: column;
-    align-items: flex-start;
-  }
 }

src/components/Layout/SettingsLayout/settings.css

@@ -33,6 +33,7 @@
   font-size: 18px;
   cursor: pointer;
   text-decoration: none;
+  white-space: nowrap;
   color: var(--horizontal-tabs-layout-text-color);
 }
 .horizontalTabsLayout .navigation .link.active {

src/features/MarketingBanner/components/MarketingBanner.tsx

@@ -2,6 +2,7 @@ import DOMPurify from 'dompurify'
 import jsonPath from 'jsonpath'
 import { useEffect, useMemo, useState } from 'react'
 import { useMediaQuery } from 'react-responsive'
+import { useAuth } from 'src/features/auth'
 import {
   trackMarketingCampaignClose,
   trackMarketingCampaignOpen,
@@ -17,6 +18,7 @@ import { Campaign, MarketingConfig } from '../types'
 
 export const MarketingBanner = () => {
   const { setCampaignClosed, closedCampaigns } = useMarketingConfigStore()
+  const { isConnected } = useAuth()
   const { userSelectedTags, cards, firstSeenDate } = useUserPreferences()
   const [availableCampaigns, setAvailableCampaigns] = useState<Campaign[]>([])
   const { data: marketingConfig } = useGetMarketingConfig({
@@ -36,6 +38,7 @@ export const MarketingBanner = () => {
       userTags: userSelectedTags.map((tag) => tag.label),
       cards: cards.map((card) => card.name),
       firstSeenDate,
+      isConnected,
       usageInDays: diffBetweenTwoDatesInDays(firstSeenDate, Date.now()),
     }
   }, [userSelectedTags, firstSeenDate, cards])

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -101,6 +101,7 @@ Select styles
   padding: 20px 0px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   border-bottom: 1px solid var(--card-content-divider);
 
   .userImage {
@@ -109,6 +110,16 @@ Select styles
     border-radius: 100%;
     align-self: flex-start;
   }
+  .userDetails {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+  .userInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
   .userInfos {
     flex: 1;
     display: flex;
@@ -214,3 +225,18 @@ Select styles
 .streaks .checked:is(:has(+ .checked))::before {
   background-color: #18bc2d;
 }
+
+@media (max-width: 768px) {
+  .settingContent {
+    margin-top: 6px;
+  }
+  .settingRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .userContent {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+}

src/features/settings/components/UserSettings/UserInfo.tsx

@@ -44,21 +44,24 @@ export const UserInfo = () => {
         onClose={() => setShowLogout(false)}
         onConfirm={logout}
       />
-      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
-      <div className="userInfos">
-        <div className="userName">{user.name}</div>
-        <div className="sub">
-          {providerId == 'github.com' ? (
-            <FaGithub size={18} />
-          ) : providerId == 'google.com' ? (
-            <FcGoogle size={18} />
-          ) : null}
-          Connected with <span className="capitalize">{providerName}</span>
-        </div>
-        <div className="actions">
-          <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
-            Logout
-          </Button>
+
+      <div className="userDetails">
+        {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
+        <div className="userInfo">
+          <div className="userName">{user.name}</div>
+          <div className="sub">
+            {providerId == 'github.com' ? (
+              <FaGithub size={18} />
+            ) : providerId == 'google.com' ? (
+              <FcGoogle size={18} />
+            ) : null}
+            Connected with <span className="capitalize">{providerName}</span>
+          </div>
+          <div className="actions">
+            <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
+              Logout
+            </Button>
+          </div>
         </div>
       </div>