maintain (admin): slight UX improvement on admin pages

client/components/formbuilder.js

@@ -252,7 +252,8 @@ const FormElement = ({
         $input = (
             <Input onChange={(e) => onBcryptChange(e.target.value)} {...id} name={struct.label}
                 type="password" defaultValue={struct.value || ""}
-                placeholder={ t(struct.placeholder) } />
+                placeholder={ t(struct.placeholder) }
+                {...inputAttr} />
         );
         break;
     }

client/pages/adminpage.js

@@ -47,27 +47,24 @@ export default AdminOnly((props) => {
         <div className="component_page_admin">
             <SideMenu url={match.url} isLoading={isSaving}/>
             <div className="page_container scroll-y">
-                <CSSTransition key={location.pathname} transitionName="adminpage"
-                    transitionAppearTimeout={30000}>
-                    <Switch>
-                        <Route
-                            path={match.url + "/backend"}
-                            render={()=> <BackendPage isSaving={setIsSaving}/>}
-                        />
-                        <Route
-                            path={match.url + "/settings"}
-                            render={()=> <SettingsPage isSaving={setIsSaving}/>}
-                        />
-                        <Route
-                            path={match.url + "/logs"}
-                            render={() => <LogPage isSaving={setIsSaving}/>} />
-                        <Route
-                            path={match.url + "/about"}
-                            render={() => <AboutPage />} />
-                        <Route path={match.url + "/setup"} component={SetupPage} />
-                        <Route path={match.url} component={HomePage} />
-                    </Switch>
-                </CSSTransition>
+                <Switch>
+                    <Route
+                        path={match.url + "/backend"}
+                        render={()=> <BackendPage isSaving={setIsSaving}/>}
+                    />
+                    <Route
+                        path={match.url + "/settings"}
+                        render={()=> <SettingsPage isSaving={setIsSaving}/>}
+                    />
+                    <Route
+                        path={match.url + "/logs"}
+                        render={() => <LogPage isSaving={setIsSaving}/>} />
+                    <Route
+                        path={match.url + "/about"}
+                        render={() => <AboutPage />} />
+                    <Route path={match.url + "/setup"} component={SetupPage} />
+                    <Route path={match.url} component={HomePage} />
+                </Switch>
             </div>
         </div>
     );

client/pages/adminpage.scss

@@ -3,7 +3,7 @@
     .adminpage { max-width: 1400px; }
     .page_container{
         width: 100%;
-        background: var(--super-light);
+        background: rgb(253, 253, 252);
         padding-bottom: 150px;
         padding-left: 60px;
         padding-right: 60px;
@@ -20,10 +20,16 @@
             padding: 50px 0 0 0;
             margin-bottom: 30px;
             margin-top: 0;
-            @media screen and (max-width: 1000px) { padding: 25px 0 0 0; }
-            @media screen and (max-width: 500px) { padding: 10px 0 0 0; }
+
+            @media screen and (max-width: 1000px) { padding-top: 25px; }
+            @media screen and (max-width: 500px) { padding-top: 10px; }
             font-weight: 300;
             line-height: 1em;
+            margin-left: -60px;
+            margin-right: -60px;
+            padding-left: 60px;
+            padding-right: 60px;
+
             &:after{
                 content: "_";
                 display: block;
@@ -37,10 +43,10 @@
         }
         .sticky h2{
             position: sticky;
-            background: var(--super-light);
+            background: rgba(253, 253, 252, 0.9);
+            backdrop-filter: blur(5px);
             z-index: 2;
             top: 0;
-            opacity: 0.9;
         }
         label{
             > div{
@@ -129,7 +135,7 @@
 
 .component_menu_sidebar{
     height: 100vh;
-    background: linear-gradient(#313538, var(--dark));
+    background: linear-gradient(#2c3032, #313538);
     width: 250px;
     border-right: 2px solid var(--color);
     padding: 50px 0px 0px 40px;
@@ -206,14 +212,14 @@
     }
 }
 
-
-.adminpage-appear{
-    transition: transform 0.3s ease, opacity 0.5s ease;
-    opacity: 0;
-    transform: translateX(5px);
+@keyframes PageAdminAnimationLoaded {
+    from { transform: translateY(3px); opacity: 0;}
+    to {transform: translateY(0); opacity: 1; }
 }
-
-.adminpage-appear.adminpage-appear-active{
-    opacity: 1;
-    transform: translateX(0px);
+.component_page_admin .component_dashboard,
+.component_page_admin .component_logpage,
+.component_page_admin .component_settingspage{
+    animation-duration: 0.2s;
+    animation-fill-mode: forwards;
+    animation-name: PageAdminAnimationLoaded;
 }

client/pages/adminpage/logger.js

@@ -107,6 +107,7 @@ function LogComponent({ isSaving }) {
                     <Button className="primary">Download</Button>
                 </a>
             </div>
+            <br/><br/>
         </React.Fragment>
     );
 }

client/pages/adminpage/settings.js

@@ -70,11 +70,13 @@ export function SettingsPage({ isSaving = nop }) {
     );
 
     return (
-        <form className="sticky">
-            <FormBuilder
-                form={form}
-                onChange={onChange}
-                render={renderForm} />
-        </form>
+        <div className="component_settingspage sticky">
+            <form>
+                <FormBuilder
+                    form={form}
+                    onChange={onChange}
+                    render={renderForm} />
+            </form>
+        </div>
     );
 }