Removed unnecessary flex
This commit is contained in:
Daniel Cojocea committed
1 parent
cd87d6ad0d
commit
7dc51f3bbc
4 files changed
+276
-268
No files matched your search
@@ -34,3 +34,9 @@
|
||||
.settings .config-box .MuiStack-root {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--env-var-spacing-4);
|
||||
}
|
||||
@@ -19,104 +19,102 @@ const Settings = () => {
|
||||
}}
|
||||
>
|
||||
<form className="settings-form" noValidate spellCheck="false">
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">General Settings</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small, mb: theme.gap.xs }}>
|
||||
<Typography component="span">Display timezone</Typography>- The
|
||||
timezone of the dashboard you publicly display.
|
||||
</Typography>
|
||||
<Typography>
|
||||
<Typography component="span">Server timezone</Typography>- The
|
||||
timezone of your server.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
{/* TODO - build select component */}
|
||||
<Field
|
||||
type="text"
|
||||
id="display-timezone"
|
||||
label="Display timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Field
|
||||
type="text"
|
||||
id="server-timezone"
|
||||
label="Server timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">General Settings</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small, mb: theme.gap.xs }}>
|
||||
<Typography component="span">Display timezone</Typography>- The
|
||||
timezone of the dashboard you publicly display.
|
||||
</Typography>
|
||||
<Typography>
|
||||
<Typography component="span">Server timezone</Typography>- The
|
||||
timezone of your server.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
{/* TODO - build select component */}
|
||||
<Field
|
||||
type="text"
|
||||
id="display-timezone"
|
||||
label="Display timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Field
|
||||
type="text"
|
||||
id="server-timezone"
|
||||
label="Server timezone"
|
||||
placeholder="America / Toronto"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">History and monitoring</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small }}>
|
||||
Define here for how long you want to keep the data. You can also
|
||||
remove all past data.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Field
|
||||
type="text"
|
||||
id="history-monitoring"
|
||||
label="The days you want to keep monitoring history."
|
||||
isOptional={true}
|
||||
optionalLabel="0 for infinite"
|
||||
placeholder="90"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Box>
|
||||
<Typography component="h1">History and monitoring</Typography>
|
||||
<Typography sx={{ mt: theme.gap.small }}>
|
||||
Define here for how long you want to keep the data. You can also
|
||||
remove all past data.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack gap={theme.gap.xl}>
|
||||
<Field
|
||||
type="text"
|
||||
id="history-monitoring"
|
||||
label="The days you want to keep monitoring history."
|
||||
isOptional={true}
|
||||
optionalLabel="0 for infinite"
|
||||
placeholder="90"
|
||||
value=""
|
||||
onChange={() => console.log("Disabled")}
|
||||
/>
|
||||
<Box>
|
||||
<Typography>Clear all stats. This is irreversible.</Typography>
|
||||
<Button
|
||||
level="error"
|
||||
label="Clear all stats"
|
||||
sx={{ mt: theme.gap.small }}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">About</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography component="h2">Uptime Genie v1.0.0</Typography>
|
||||
<Typography
|
||||
sx={{ mt: theme.gap.xs, mb: theme.gap.medium, opacity: 0.6 }}
|
||||
>
|
||||
Developed by Bluewave Labs.
|
||||
</Typography>
|
||||
<Link
|
||||
level="secondary"
|
||||
url="https://github.com/bluewave-labs"
|
||||
label="https://github.com/bluewave-labs"
|
||||
<Typography>Clear all stats. This is irreversible.</Typography>
|
||||
<Button
|
||||
level="error"
|
||||
label="Clear all stats"
|
||||
sx={{ mt: theme.gap.small }}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Button level="primary" label="Save" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
className="config-box"
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
gap={theme.gap.xxl}
|
||||
>
|
||||
<Box>
|
||||
<Typography component="h1">About</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography component="h2">Uptime Genie v1.0.0</Typography>
|
||||
<Typography
|
||||
sx={{ mt: theme.gap.xs, mb: theme.gap.medium, opacity: 0.6 }}
|
||||
>
|
||||
Developed by Bluewave Labs.
|
||||
</Typography>
|
||||
<Link
|
||||
level="secondary"
|
||||
url="https://github.com/bluewave-labs"
|
||||
label="https://github.com/bluewave-labs"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack direction="row" justifyContent="flex-end">
|
||||
<Button level="primary" label="Save" />
|
||||
</Stack>
|
||||
</form>
|
||||
</Box>
|
||||
|
||||
Reference in new issue
Block a user