From 117c52acbb6b4122a9fa4619f23c7917aac257d3 Mon Sep 17 00:00:00 2001
From: Torsten Simon <anfragen@tsgames.de>
Date: Mon, 30 Aug 2021 07:59:10 +0000
Subject: [PATCH] style: Updated some visual aspects for better understanding.

---
 public/splash.html                     | 30 +++++++++++++++++---
 src/components/RyzenAdjOptionForm.tsx  |  2 +-
 src/components/RyzenAdjOptionLabel.tsx |  4 +--
 src/components/SettingForm.tsx         |  5 +++-
 src/components/TopBar.tsx              | 14 ++++-----
 src/index.scss                         | 39 +++++++++++++++++++++++++-
 6 files changed, 78 insertions(+), 16 deletions(-)
diff --git a/public/splash.html b/public/splash.html
index 81cc5fa..b0af417 100644
--- a/public/splash.html
+++ b/public/splash.html
@@ -1,6 +1,28 @@
 <html style="margin:0 0 0 0;padding:0 0 0 0;overflow:hidden;">
-  <head></head>
-  <body style="margin:0 0 0 0;padding:0 0 0 0;overflow:hidden;">
-    <img style="margin:0 0 0 0;padding:0 0 0 0;" width="900px" height="900px" src="./splash.png"/>
-  </body>
+
+<head>
+  <script>
+    document.onreadystatechange=(e) => {
+      // use set timeout, otherwise css animation not triggering
+      setTimeout(() => document.body.classList.add('sharp'),450);
+    };
+  </script>
+  <style>
+    body {
+      transition: all 1.5s ease-in;
+      filter:blur(30px);
+    }
+    body.sharp{
+      filter: blur(0);
+    }
+  </style>
+</head>
+
+<body style="margin:0;padding:0;overflow:hidden;width:900px;height:900px;">
+  <div
+    style="position:absolute; width:900px; height: 500px; top: 200px; margin:0;padding:0; background:radial-gradient(rgba(0,0,0,.35), transparent 40%);filter:blur(50px);"
+  ></div>
+    <img style="position:absolute; margin:0;padding:0;width:900px;height:900px" src="./splash.png" />
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/components/RyzenAdjOptionForm.tsx b/src/components/RyzenAdjOptionForm.tsx
index a8dc76d..34e1b62 100644
--- a/src/components/RyzenAdjOptionForm.tsx
+++ b/src/components/RyzenAdjOptionForm.tsx
@@ -30,7 +30,7 @@ class RyzenAdjOptionForm extends React.PureComponent<RyzenAdjOptionFormProps, Ry
           }
 
           return (
-            <div className="uk-grid-small" uk-grid="">
+            <div className="uk-grid-small form-range" uk-grid="">
               <div className="uk-width-1-6">
                 <input
                   onChange={onChange(ryzenControllerAppContext).bind(this)}
diff --git a/src/components/RyzenAdjOptionLabel.tsx b/src/components/RyzenAdjOptionLabel.tsx
index 70d0c7f..58d62a5 100644
--- a/src/components/RyzenAdjOptionLabel.tsx
+++ b/src/components/RyzenAdjOptionLabel.tsx
@@ -29,9 +29,9 @@ class RyzenAdjOptionLabel extends React.PureComponent<RyzenAdjOptionLabelProps,
     return (
       <RyzenControllerAppContext.Consumer>
         {ryzenControllerAppContext => (
-          <div className="uk-grid-small" uk-grid="">
+          <div className="uk-grid-small form-label" uk-grid="">
             <div className="uk-width-expend">
-              <h2>
+              <h2 className="uk-flex uk-flex-middle">
                 <label className="uk-pointer">
                   <input
                     className="uk-margin-right uk-checkbox"
diff --git a/src/components/SettingForm.tsx b/src/components/SettingForm.tsx
index 2005707..4e35f5c 100644
--- a/src/components/SettingForm.tsx
+++ b/src/components/SettingForm.tsx
@@ -18,7 +18,10 @@ type SettingFormProps = {
 class SettingForm extends React.PureComponent<SettingFormProps> {
   render(): React.ReactNode {
     return (
-      <div uk-tooltip={this.props.setting.description || ""} className="uk-form-controls uk-form-controls-text">
+      <div
+        uk-tooltip={this.props.setting.description || ""}
+        className="uk-form-controls uk-form-controls-text settings-element"
+      >
         {this.props.setting.displayTitle ? <h4 className="uk-margin-top">{this.props.setting.name}</h4> : null}
         <label className="uk-form-label uk-pointer">
           {this.renderType(this.props.setting.type)} {this.props.setting.short_description}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 64622fc..a245cce 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -10,7 +10,7 @@ const discordText = getTranslation("topbar.discord", "Join our new discord serve
 
 function TopBar() {
   return (
-    <header>
+    <header className="app-header">
       <div
         style={{
           width: "96px",
@@ -21,19 +21,19 @@ function TopBar() {
         <img src={logo} alt="Ryzen Controller" style={{ padding: "10px" }} />
       </div>
       <Badge
-        className="uk-margin-left"
+        className="uk-margin-left badge"
         value={AppVersion.semver}
         onClick={openExternal("https://gitlab.com/ryzen-controller-team/ryzen-controller/releases")}
         background="#EE0000"
       />
       <Badge
-        className="uk-margin-left"
+        className="uk-margin-left badge"
         value={beerText}
         onClick={openExternal("https://www.patreon.com/ryzencontrollerteam")}
         background="#888888"
       />
       <Badge
-        className="uk-margin-left"
+        className="uk-margin-left badge"
         value={discordText}
         onClick={openExternal("https://discord.gg/M3hVqnT4pQ")}
         background="#888888"
@@ -41,7 +41,7 @@ function TopBar() {
       <LightModeContext.Consumer>
         {mode => (
           <Badge
-            className="uk-margin-left"
+            className="uk-margin-left badge"
             value={mode.mode === "dark" ? "🌙 Dark" : "☀️ Light"}
             onClick={mode.switch}
             background={mode.mode === "dark" ? "#888888" : "#888888"}
@@ -49,7 +49,7 @@ function TopBar() {
         )}
       </LightModeContext.Consumer>
       <Badge
-        className="uk-margin-left"
+        className="uk-margin-left badge"
         value="🌐 Language"
         onClick={() => {
           require("uikit")
@@ -73,4 +73,4 @@ function openExternal(url: string) {
   };
 }
 
-export default TopBar;
\ No newline at end of file
+export default TopBar;
diff --git a/src/index.scss b/src/index.scss
index 0d2cf52..aca665e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -24,7 +24,14 @@ html {
   .uk-tab,
   .uk-card-title,
   .uk-badge,
-  .uk-button, h1, h2, h3, h4, h5, h6, html {
+  .uk-button,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  html {
     font-family: Arial, Helvetica, sans-serif;
   }
 
@@ -58,4 +65,34 @@ html {
       }
     }
   }
+
+  // custom app related styles
+  .app-header {
+    background-color: rgba(128, 128, 128, 0.15);
+    .badge {
+      height: 35px;
+      padding: 5px 10px !important;
+    }
+  }
+  .settings-element {
+    h4 {
+      font-size: 125%;
+    }
+  }
+  .form-range {
+    display: flex;
+    align-items: center;
+    > div {
+      padding: 2px 20px;
+    }
+  }
+  .form-label {
+    h2 {
+      font-size: 130%;
+      margin: 10px 10px 0 10px;
+      > label {
+        flex-grow: 1;
+      }
+    }
+  }
 }
