gabrielkheisa/ryzen-controller
1
0
Fork 0
mirror of https://gitlab.com/ryzen-controller-team/ryzen-controller.git synced 2024-12-22 10:03:28 +07:00
Code Issues Projects Releases Wiki Activity

feat: Interface re-styling by @danielderbenev.

Browse Source
This commit is contained in:
Daniel Derbenev 2020-03-27 09:40:45 +00:00 committed by Quentin “Storm1er” Decaunes
parent f8134daae3
commit c54ed5aedf
5 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@ -24,15 +24,5 @@
<body style="min-height:100vh;"> <body style="min-height:100vh;">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

BIN
src/assets/icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 27 KiB

2
src/components/SysInfoCards.tsx
View File

@ -34,7 +34,7 @@ function SysInfoCards() {
const gpu = sysInfoContext.graphics; const gpu = sysInfoContext.graphics;
const bios = sysInfoContext.bios; const bios = sysInfoContext.bios;
return ( return (
<div className="uk-margin-small-right uk-margin-small-left uk-flex uk-flex-center uk-flex-around uk-flex-wrap"> <div className="uk-margin-small-right uk-margin-small-left uk-flex uk-flex-left uk-flex-wrap">
<Card title={basicInfoTitleText}> <Card title={basicInfoTitleText}>
{system === false || mem === false || bios === false ? ( {system === false || mem === false || bios === false ? (
<div uk-spinner=""></div> <div uk-spinner=""></div>

14
src/components/TopBar.tsx
View File

@ -13,8 +13,8 @@ function TopBar() {
<header> <header>
<div <div
style={{ style={{
width: "128px", width: "96px",
height: "128px", height: "96px",
display: "inline-block", display: "inline-block",
}} }}
> >
@ -36,27 +36,27 @@ function TopBar() {
className="uk-margin-left" className="uk-margin-left"
value={discordText} value={discordText}
onClick={openExternal("https://discord.gg/EahayUv")} onClick={openExternal("https://discord.gg/EahayUv")}
background="#7289da" background="#888888"
/> />
<LightModeContext.Consumer> <LightModeContext.Consumer>
{mode => ( {mode => (
<Badge <Badge
className="uk-margin-left" className="uk-margin-left"
value={mode.mode === "dark" ? "☀️" : "🌙"} value={mode.mode === "dark" ? "🌙 Dark" : "☀️ Light"}
onClick={mode.switch} onClick={mode.switch}
background={mode.mode === "dark" ? "#FFF" : "#000"} background={mode.mode === "dark" ? "#888888" : "#888888"}
/> />
)} )}
</LightModeContext.Consumer> </LightModeContext.Consumer>
<Badge <Badge
className="uk-margin-left" className="uk-margin-left"
value="🌐" value="🌐 Language"
onClick={() => { onClick={() => {
require("uikit") require("uikit")
.modal(document.getElementById("locale-selector-modal")) .modal(document.getElementById("locale-selector-modal"))
.show(); .show();
}} }}
background="rgba(0, 0, 0, 0)" background="#888888"
/> />
</header> </header>
); );

34
src/index.scss
View File

@ -10,8 +10,40 @@ html {
cursor: pointer; cursor: pointer;
} }
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
.uk-tab,
.uk-card-title,
.uk-badge,
.uk-button, h1, h2, h3, h4, h5, h6, html {
font-family: Arial, Helvetica, sans-serif;
}
.uk-h2 {
font-size: 23px;
line-height: 0.3;
}
.uk-card-title {
font-weight: 600;
}
.uk-badge {
height: 28px;
border-radius: 5px;
}
.uk-modal { .uk-modal {
background-color: rgba(50, 50, 50, 0.6); background-color: rgba(0, 0, 0, 0.75);
.uk-modal-dialog { .uk-modal-dialog {
background-color: #1e87f0; background-color: #1e87f0;