diff --git a/src/assets/App.css b/src/assets/App.css index bb4551f9..82e9e262 100644 --- a/src/assets/App.css +++ b/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; - } } diff --git a/src/components/Layout/SettingsLayout/settings.css b/src/components/Layout/SettingsLayout/settings.css index 63f79bc3..d98e4b31 100644 --- a/src/components/Layout/SettingsLayout/settings.css +++ b/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 { diff --git a/src/features/MarketingBanner/components/MarketingBanner.tsx b/src/features/MarketingBanner/components/MarketingBanner.tsx index 4f7d6001..40ab0aaf 100644 --- a/src/features/MarketingBanner/components/MarketingBanner.tsx +++ b/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([]) 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]) diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css index ac030e82..4a84d57b 100644 --- a/src/features/settings/components/GeneralSettings/generalSettings.css +++ b/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; + } +} diff --git a/src/features/settings/components/UserSettings/UserInfo.tsx b/src/features/settings/components/UserSettings/UserInfo.tsx index 62eae324..e004cb1a 100644 --- a/src/features/settings/components/UserSettings/UserInfo.tsx +++ b/src/features/settings/components/UserSettings/UserInfo.tsx @@ -44,21 +44,24 @@ export const UserInfo = () => { onClose={() => setShowLogout(false)} onConfirm={logout} /> - {user?.imageURL && } -
-
{user.name}
-
- {providerId == 'github.com' ? ( - - ) : providerId == 'google.com' ? ( - - ) : null} - Connected with {providerName} -
-
- + +
+ {user?.imageURL && } +
+
{user.name}
+
+ {providerId == 'github.com' ? ( + + ) : providerId == 'google.com' ? ( + + ) : null} + Connected with {providerName} +
+
+ +
diff --git a/src/lib/interceptors/DefaultRequestInterceptor.ts b/src/lib/interceptors/DefaultRequestInterceptor.ts index 8683e376..4d8a2ad9 100644 --- a/src/lib/interceptors/DefaultRequestInterceptor.ts +++ b/src/lib/interceptors/DefaultRequestInterceptor.ts @@ -12,7 +12,7 @@ export async function DefaultRequestInterceptor(config: InternalAxiosRequestConf const token = await getUserToken() if (token) { - config.headers.authorization = `Bearer ${token}` + config.headers.Authorization = `Bearer ${token}` } }