From 52f19ef847ac0a8c98b4d24526c71bccb7eaf436 Mon Sep 17 00:00:00 2001
From: Trevor Farlow <trevdor@users.noreply.github.com>
Date: Wed, 11 Jan 2023 13:04:17 -0700
Subject: [PATCH] Fix overlap of version info and server URL (#441)
---
.../src/components/manager/ConfigServer.js | 17 ++++++++++---
.../src/components/manager/ManagementApp.js | 25 +++++++++++++------
packages/loot-design/src/components/common.js | 6 ++---
.../src/components/manager/BudgetList.js | 4 ++-
4 files changed, 37 insertions(+), 15 deletions(-)
diff --git a/packages/desktop-client/src/components/manager/ConfigServer.js b/packages/desktop-client/src/components/manager/ConfigServer.js
index dc30f8df6..865a762f3 100644
--- a/packages/desktop-client/src/components/manager/ConfigServer.js
+++ b/packages/desktop-client/src/components/manager/ConfigServer.js
@@ -161,9 +161,10 @@ export default function ConfigServer() {
<View
style={{
- marginTop: 15,
flexDirection: 'row',
- justifyContent: 'center'
+ flexFlow: 'row wrap',
+ justifyContent: 'center',
+ marginTop: 15
}}
>
{currentUrl ? (
@@ -174,12 +175,20 @@ export default function ConfigServer() {
<>
<Button
bare
- style={{ color: colors.n4, marginRight: 15 }}
+ style={{
+ color: colors.n4,
+ margin: 5,
+ marginRight: 15
+ }}
onClick={onSameDomain}
>
Use {window.location.origin.replace(/https?:\/\//, '')}
</Button>
- <Button bare style={{ color: colors.n4 }} onClick={onSkip}>
+ <Button
+ bare
+ style={{ color: colors.n4, margin: 5 }}
+ onClick={onSkip}
+ >
Don't use a server
</Button>
diff --git a/packages/desktop-client/src/components/manager/ManagementApp.js b/packages/desktop-client/src/components/manager/ManagementApp.js
index 3f0f362c5..cbbe068d8 100644
--- a/packages/desktop-client/src/components/manager/ManagementApp.js
+++ b/packages/desktop-client/src/components/manager/ManagementApp.js
@@ -7,6 +7,7 @@ import { createBrowserHistory } from 'history';
import * as actions from 'loot-core/src/client/actions';
import { View, Text } from 'loot-design/src/components/common';
import { colors } from 'loot-design/src/style';
+import tokens from 'loot-design/src/tokens';
import useServerVersion from '../../hooks/useServerVersion';
import LoggedInUser from '../LoggedInUser';
@@ -25,14 +26,18 @@ function Version() {
return (
<Text
style={{
- position: 'absolute',
- bottom: 0,
- right: 0,
color: colors.n7,
- margin: 15,
- marginRight: 17,
':hover': { color: colors.n2 },
- zIndex: 5001
+ margin: 15,
+ marginLeft: 17,
+ [`@media (min-width: ${tokens.breakpoint_medium})`]: {
+ position: 'absolute',
+ bottom: 0,
+ right: 0,
+ marginLeft: 15,
+ marginRight: 17,
+ zIndex: 5001
+ }
}}
href={'https://actualbudget.com/blog/' + window.Actual.ACTUAL_VERSION}
>
@@ -210,7 +215,13 @@ class ManagementApp extends React.Component {
>
<Switch>
<Route exact path="/config-server" component={null} />
- <Route exact path="/" component={LoggedInUser} />
+ <Route
+ exact
+ path="/"
+ render={() => (
+ <LoggedInUser style={{ padding: '4px 7px' }} />
+ )}
+ />
</Switch>
</View>
</>
diff --git a/packages/loot-design/src/components/common.js b/packages/loot-design/src/components/common.js
index fe8dd64fc..dbffd6ca4 100644
--- a/packages/loot-design/src/components/common.js
+++ b/packages/loot-design/src/components/common.js
@@ -101,7 +101,7 @@ export function Link({ style, children, ...nativeProps }) {
{...css(
{
textDecoration: 'none',
- color: styles.text,
+ color: styles.textColor,
backgroundColor: 'transparent',
border: 0,
cursor: 'pointer',
@@ -873,8 +873,8 @@ export function Modal({
borderRadius: 4,
backgroundColor: 'white',
opacity: isHidden ? 0 : 1,
- [`@media (min-width: ${tokens.breakpoint_medium})`]: {
- minWidth: 500
+ [`@media (min-width: ${tokens.breakpoint_narrow})`]: {
+ minWidth: tokens.breakpoint_narrow
}
},
styles.shadowLarge,
diff --git a/packages/loot-design/src/components/manager/BudgetList.js b/packages/loot-design/src/components/manager/BudgetList.js
index c0e6c93b8..b8e540129 100644
--- a/packages/loot-design/src/components/manager/BudgetList.js
+++ b/packages/loot-design/src/components/manager/BudgetList.js
@@ -172,7 +172,9 @@ function File({ file, onSelect, onDelete }) {
<FileState file={file} />
</View>
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+ <View
+ style={{ flex: '0 0 auto', flexDirection: 'row', alignItems: 'center' }}
+ >
{file.encryptKeyId && (
<Key
style={{
--
GitLab