From e2455ec3f9fac1a16221a2b273fd5c82d05088e8 Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Fri, 19 Aug 2022 14:01:20 -0700 Subject: [PATCH 1/7] Add demonstratory zoom out button --- frontend/src/components/App.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index 5d6bdbfc..b2a1f889 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -13,6 +13,7 @@ import i18n from "./i18n"; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import SchoolIcon from '@mui/icons-material/School'; +import ZoomOutIcon from '@mui/icons-material/ZoomOut'; export default class App extends Component { constructor(props) { @@ -20,10 +21,11 @@ export default class App extends Component { this.state = { dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches, openLearn: false, + theme: {typography: { fontSize: 14 }}, } } - lightTheme = createTheme({}); + lightTheme = createTheme ({}); darkTheme = createTheme({ palette: { @@ -34,13 +36,25 @@ export default class App extends Component { }, }); + onZoomOutClick = () => { + this.setState(({theme}) => ({ + theme: { + ...theme, + typography: { + fontSize: this.state.theme.typography.fontSize - 1, + }, + } + })); + } + render() { return ( - + this.setState({openLearn:false})}/> + this.setState({openLearn:true})}> this.setState({dark:!this.state.dark})}> {this.state.dark ? :} From a777ecb9898e97ecf8522397bed63588d6895206 Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Fri, 19 Aug 2022 15:26:14 -0700 Subject: [PATCH 2/7] Scale avatar width and R. Pass theme as prop to class components. --- frontend/src/components/App.js | 2 +- frontend/src/components/HomePage.js | 10 +++++----- frontend/src/components/UserGenPage.js | 16 +++++++++++++++- frontend/static/css/index.css | 6 ++++++ 4 files changed, 27 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index b2a1f889..c68af5d3 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -60,7 +60,7 @@ export default class App extends Component { {this.state.dark ? :} - + diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js index e3fae635..184e6d3d 100644 --- a/frontend/src/components/HomePage.js +++ b/frontend/src/components/HomePage.js @@ -44,11 +44,11 @@ export default class HomePage extends Component {
- }/> - }/> - }/> - }/> - }/> + }/> + }/> + }/> + }/> + }/>
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js index c1eef8f2..fcdbd99d 100644 --- a/frontend/src/components/UserGenPage.js +++ b/frontend/src/components/UserGenPage.js @@ -181,6 +181,7 @@ class UserGenPage extends Component { render() { const { t, i18n} = this.props; + const fontSize = this.props.theme.typography.fontSize; return ( @@ -200,6 +201,7 @@ class UserGenPage extends Component { +<<<<<<< HEAD
+ >>>>>> Scale avatar width and R. Pass theme as prop to class components. />
@@ -319,7 +331,9 @@ class UserGenPage extends Component { - +
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css index 44dde160..c9395a30 100644 --- a/frontend/static/css/index.css +++ b/frontend/static/css/index.css @@ -87,6 +87,12 @@ input[type=number] { left: -16px; } +.newAvatar { + border-radius: 50%; + border: 2px solid #555; + filter: drop-shadow(1px 1px 1px #000000); +} + .profileAvatar { border: 0.5px solid #555; filter: drop-shadow(0.5px 0.5px 0.5px #000000); From 7b4dca44f82993ed3b249ffaca63d06beb37f2d7 Mon Sep 17 00:00:00 2001 From: "F. Mitjans" Date: Thu, 25 Aug 2022 19:45:02 -0400 Subject: [PATCH 3/7] Add page settings button --- frontend/src/components/App.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index c68af5d3..023b8866 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -14,12 +14,15 @@ import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import SchoolIcon from '@mui/icons-material/School'; import ZoomOutIcon from '@mui/icons-material/ZoomOut'; +import ZoomInIcon from '@mui/icons-material/ZoomIn'; +import SettingsIcon from '@mui/icons-material/Settings'; export default class App extends Component { constructor(props) { super(props); this.state = { dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches, + expandedSettings: false, openLearn: false, theme: {typography: { fontSize: 14 }}, } @@ -36,12 +39,20 @@ export default class App extends Component { }, }); - onZoomOutClick = () => { + onSettingsClick = () => { + this.setState({ + expandedSettings: ! this.state.expandedSettings + }) + } + + onZoomClick = (direction) => { + let zoomChange; + direction === "out" ? zoomChange = -1 : zoomChange = 1; this.setState(({theme}) => ({ theme: { ...theme, typography: { - fontSize: this.state.theme.typography.fontSize - 1, + fontSize: this.state.theme.typography.fontSize + zoomChange, }, } })); @@ -54,11 +65,13 @@ export default class App extends Component { this.setState({openLearn:false})}/> - - this.setState({openLearn:true})}> - this.setState({dark:!this.state.dark})}> + this.setState({expandedSettings: !this.state.expandedSettings})}> + this.onZoomClick("in")}> + this.onZoomClick("out")}> + this.setState({dark:!this.state.dark})}> {this.state.dark ? :} + this.setState({openLearn:true})}> From 5d09200e179acd580606474cb744e428c09b9e7e Mon Sep 17 00:00:00 2001 From: "F. Mitjans" Date: Thu, 25 Aug 2022 21:07:28 -0400 Subject: [PATCH 4/7] Finish scaling UserGenPage --- frontend/src/components/UserGenPage.js | 54 ++++++++++++-------------- 1 file changed, 24 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js index fcdbd99d..91f1b822 100644 --- a/frontend/src/components/UserGenPage.js +++ b/frontend/src/components/UserGenPage.js @@ -182,44 +182,36 @@ class UserGenPage extends Component { render() { const { t, i18n} = this.props; const fontSize = this.props.theme.typography.fontSize; + const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14 return (
- - {!this.state.loadingRobot && this.state.avatarUrl ? + + {!this.state.loadingRobot && this.state.avatarUrl ?
{this.state.nickname && getCookie("sessionid") ? -
- {this.state.nickname} + : ""} -<<<<<<< HEAD -
- + - >>>>>> Scale avatar width and R. Pass theme as prop to class components. + height: `${195*fontSizeFactor}px`, + width: `${200*fontSizeFactor}px`}} />
@@ -240,7 +232,7 @@ class UserGenPage extends Component { } - +
@@ -266,7 +258,7 @@ class UserGenPage extends Component { disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded} onClick={()=> saveAsJson(this.state.nickname+'.json', this.createJsonFile())} > - + @@ -278,7 +270,7 @@ class UserGenPage extends Component { disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded} onClick={()=> (copyToClipboard(getCookie('robot_token')) & this.props.setAppState({copiedToken:true}))} > - + @@ -286,7 +278,9 @@ class UserGenPage extends Component {
, endAdornment: - + + + , }} /> @@ -295,14 +289,14 @@ class UserGenPage extends Component { {this.state.tokenHasChanged ? :
@@ -318,11 +312,11 @@ class UserGenPage extends Component { - + -
+
-
+
@@ -332,7 +326,7 @@ class UserGenPage extends Component { From cad000d838b71c5d7fbe321270f61563dc4dcb70 Mon Sep 17 00:00:00 2001 From: "F. Mitjans" Date: Thu, 1 Sep 2022 00:05:20 -0400 Subject: [PATCH 5/7] Make Bottom Bar scale with fontsize --- frontend/src/components/BottomBar.js | 27 +++++++++++++-------------- frontend/src/components/HomePage.js | 8 +++++--- frontend/static/css/index.css | 2 -- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js index 01ccc126..152c5c58 100644 --- a/frontend/src/components/BottomBar.js +++ b/frontend/src/components/BottomBar.js @@ -149,11 +149,15 @@ bottomBarDesktop =()=>{ const { t } = this.props; var hasRewards = this.props.earnedRewards > 0 ? true: false; var hasOrder = this.props.activeOrderId > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false; - + const fontSize = this.props.theme.typography.fontSize; + const fontSizeFactor = fontSize / 14; // default fontSize is 14 + const typographyProps = { + primaryTypographyProps: {fontSize: fontSize}, + secondaryTypographyProps: {fontSize: fontSize * 12/14} + } return( - + -
@@ -162,7 +166,7 @@ bottomBarDesktop =()=>{ title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+ (hasOrder ? t("You have an active order"):"")} > - + 0 & !this.props.profileShown) ? "": null} color="primary"> { @@ -212,8 +215,7 @@ bottomBarDesktop =()=>{ @@ -232,8 +234,7 @@ bottomBarDesktop =()=>{ @@ -248,8 +249,7 @@ bottomBarDesktop =()=>{ @@ -264,8 +264,7 @@ bottomBarDesktop =()=>{ diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js index 184e6d3d..7bf59fb6 100644 --- a/frontend/src/components/HomePage.js +++ b/frontend/src/components/HomePage.js @@ -40,9 +40,11 @@ export default class HomePage extends Component { } render() { + const fontSize = this.props.theme.typography.fontSize; + const fontSizeFactor = fontSize / 14; // default fontSize is 14 return ( -
+
}/> }/> @@ -51,8 +53,8 @@ export default class HomePage extends Component { }/>
-
- +
+
); diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css index c9395a30..3df760db 100644 --- a/frontend/static/css/index.css +++ b/frontend/static/css/index.css @@ -61,8 +61,6 @@ input[type=number] { .bottomBar { position: fixed; bottom: 0; - width: 100%; - height: 40px; } .amboss{ From af062a46dfad1f237850232df6e876006863fbf6 Mon Sep 17 00:00:00 2001 From: "F. Mitjans" Date: Thu, 1 Sep 2022 23:25:36 -0400 Subject: [PATCH 6/7] Make Maker page scale with fontsize --- .../src/components/AutocompletePayments.js | 73 +++++++++---------- frontend/src/components/MakerPage.js | 48 ++++++------ frontend/src/components/RangeSlider.js | 10 +-- 3 files changed, 65 insertions(+), 66 deletions(-) diff --git a/frontend/src/components/AutocompletePayments.js b/frontend/src/components/AutocompletePayments.js index 949166da..62bc9974 100644 --- a/frontend/src/components/AutocompletePayments.js +++ b/frontend/src/components/AutocompletePayments.js @@ -18,7 +18,7 @@ const Root = styled('div')( color: ${ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)' }; - font-size: 14px; + font-size: ${14/16}em; `, ); @@ -26,21 +26,20 @@ const Label = styled('label')( ({ theme , error}) => ` color: ${theme.palette.mode === 'dark' ? (error? '#f44336': '#cfcfcf') : (error? '#dd0000':'#717171')}; align: center; - padding: 0 0 4px; line-height: 1.5; f44336 display: block; - font-size: 13px; + font-size: ${13/16}em; `, ); const InputWrapper = styled('div')( ({ theme , error}) => ` - width: 244px; - min-height: 44px; - max-height: 124px; + width: ${244/16}em; + min-height: ${44/16}em; + max-height: ${124/16}em; border: 1px solid ${theme.palette.mode === 'dark' ? (error? '#f44336': '#434343') : (error? '#dd0000':'#c4c4c4')}; background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; - border-radius: 4px; + border-radius: ${4/16}em; padding: 1px; display: flex; flex-wrap: wrap; @@ -59,17 +58,17 @@ const InputWrapper = styled('div')( color: ${ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.65)' : 'rgba(0,0,0,.85)' }; - height: 30px; + height: ;${30/16}em box-sizing: border-box; - padding: 4px 6px; + padding: ${4/16}em ${6/16}em; width: 0; - min-width: 30px; - font-size: 15px; + min-width: ${30/16}em; + font-size: ${15/16}em; flex-grow: 1; border: 0; margin: 0; outline: 0; - max-height: 124px; + max-height: ${124/16}em; } `, ); @@ -78,8 +77,8 @@ function Tag(props) { const { label, icon, onDelete, ...other } = props; return (
-
- +
+
{label} @@ -97,16 +96,16 @@ const StyledTag = styled(Tag)( ({ theme }) => ` display: flex; align-items: center; - height: 34px; - margin: 2px; - line-height: 22px; + height: ${34/16}em; + margin: ${2/16}em; + line-height: ${22/16}em; background-color: ${ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#fafafa' }; border: 1px solid ${theme.palette.mode === 'dark' ? '#303030' : '#e8e8e8'}; border-radius: 2px; box-sizing: content-box; - padding: 0 4px 0 10px; + padding: 0 ${4/16}em 0 ${10/16}em; outline: 0; overflow: hidden; @@ -119,13 +118,13 @@ const StyledTag = styled(Tag)( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - font-size: 15px; + font-size: ${15/16}em; } & svg { - font-size: 15px; + font-size: ${15/16}em; cursor: pointer; - padding: 4px; + padding: ${4/16}em; } `, ); @@ -134,31 +133,31 @@ const ListHeader = styled('span')( ({ theme }) => ` color: ${theme.palette.mode === 'dark' ? '#90caf9' : '#1976d2'}; align: left; - line-height:10px; - max-height: 10px; + line-height: ${10/16}em; + max-height: ${10/16}em; display: inline-block; background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#ffffff'}; - font-size: 12px; + font-size: ${12/16}em; pointer-events: none; `, ); const Listbox = styled('ul')( ({ theme }) => ` - width: 244px; + width: ${244/16}em; margin: 2px 0 0; padding: 0; position: absolute; list-style: none; background-color: ${theme.palette.mode === 'dark' ? '#141414' : '#fff'}; overflow: auto; - max-height: 250px; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + max-height: ${250/16}em; + border-radius: ${4/16}em; + box-shadow: 0 ${2/16}em ${8/16}em rgba(0, 0, 0, 0.15); z-index: 999; & li { - padding: 5px 12px; + padding: ${5/16}em ${12/16}em; display: flex; & span { @@ -205,7 +204,7 @@ export default function AutocompletePayments(props) { focused="true", setAnchorEl, } = useAutocomplete({ - sx: {width:'200px', align:'left'}, + sx: {width: `${200/16}em`, align:'left'}, id: 'payment-methods', multiple: true, options: props.optionsType=="fiat" ? paymentMethods : swapDestinations, @@ -237,7 +236,7 @@ export default function AutocompletePayments(props) { return ( -
+
@@ -251,23 +250,23 @@ export default function AutocompletePayments(props) { {groupedOptions.length > 0 ? ( -
+
{props.listHeaderText+" "}
{groupedOptions.map((option, index) => (
  • -
    +
    • ))} {val != null? (val.length > 2 ? - + :null) :null} @@ -275,7 +274,7 @@ export default function AutocompletePayments(props) { //Here goes what happens if there is no groupedOptions (getInputProps().value.length > 0 ? - + :null) } diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js index 54beb3b4..8a8897c6 100644 --- a/frontend/src/components/MakerPage.js +++ b/frontend/src/components/MakerPage.js @@ -302,9 +302,9 @@ class MakerPage extends Component { StandardMakerOptions = () => { const { t } = this.props; return( - + -
    +
    {t("Buy or Sell Bitcoin?")} @@ -313,13 +313,13 @@ class MakerPage extends Component { } checkedIcon={}/>} + control={} checkedIcon={}/>} label={this.state.type == 0 ? {t("Buy")}: {t("Buy")}} labelPlacement="end" /> } checkedIcon={}/>} + control={} checkedIcon={}/>} label={this.state.type == 1 ? {t("Sell")}: {t("Sell")}} labelPlacement="end" /> @@ -329,7 +329,7 @@ class MakerPage extends Component { -
    +