Bruh

- Fixed alternate login methods text centering.
- Fixed background, it is now consistent.
- Fixed unnecessary .is-full-screen classes which added extra height everywhere.
- Fixed 2FA enter button centering.
- Made profile pic upload look better and changed the layout.
- Changed various margins to be more unified (user page, etc.).
- Fixed the weird line-height bs.

src/App.js

@@ -47,7 +47,7 @@ function App() {
   if (loading) return null;
 
   return (
-    <div className='app is-full-screen'>
+    <div className='app'>
 
       <div className='background'>
 

src/css/index.css

@@ -18,6 +18,22 @@
   --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
 }
 
+.w-100{
+  width: 100% !important;
+}
+
+.w-auto{
+  width: auto !important;
+}
+
+.f-s0{
+  flex-shrink: 0;
+}
+
+.f-g{
+  flex-grow: 1;
+}
+
 hr{
   margin: 1.5rem 0;
 }
@@ -83,7 +99,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .pageTitle{
-  margin: 4px;
+  margin: 7px;
 }
 
 .flex {
@@ -112,7 +128,7 @@ tbody tr:hover {
 }
 
 .is-full-screen {
-  height: 100%;
+  height: inherit;
   min-height: unset;
 }
 
@@ -121,20 +137,34 @@ tbody tr:hover {
   box-shadow: 0 1px 3px #00000085;
 }
 
-.bg-triangles{
+body:before{
+  content: ' ';
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
   background: url(../img/background.svg);
+  background-repeat: no-repeat;
+  background-position: 50% 0;
   background-size: cover;
+  z-index: -1000;
 }
 
 .dir-column{
+  display: flex;
   flex-direction: column;
 }
 
 .dir-row{
+  display: flex;
   flex-direction: row;
 }
 
 .flex-wrap{
+  display: flex;
   flex-wrap: wrap;
 }
 
@@ -585,6 +615,10 @@ tbody tr:hover {
   margin-left: auto !important;
 }
 
+.ml-20{
+  margin-left: 20px !important;
+}
+
 .iconButton{
   padding: 0.5rem;
 }
@@ -633,3 +667,65 @@ tbody tr:hover {
 .tooltip:focus .tooltiptext {
   visibility: visible;
 }
+.drop-container {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px dashed #555;
+  color: var(--font-color);
+  cursor: pointer;
+  transition: background .2s ease-in-out, border .2s ease-in-out;
+}
+
+.drop-container:hover {
+  background: rgba(238, 238, 238, 0.048);
+  border-color: var(--bg-color)
+}
+
+.drop-container input[type=file]{
+  width: auto !important;
+}
+
+.drop-container input[type=file]:focus{
+  border: none !important;
+}
+
+.drop-title {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  transition: color .2s ease-in-out;
+}
+
+input[type=file] {
+  width: 350px;
+  max-width: 100%;
+  padding: 5px;
+  border: none !important;
+}
+
+input[type=file]::file-selector-button {
+  background: var(--color-lightGrey);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--color-darkGrey);
+  cursor: pointer;
+  display: inline-block;
+  font-size: var(--font-size);
+  line-height: 1;
+  padding: 1rem 2.5rem;
+  text-align: center;
+  text-decoration: none;
+  transform: scale(1);
+  transition: opacity .2s ease;
+}
+
+input[type=file]::file-selector-button:hover {
+  opacity: .8;
+}

src/css/pages/Home.css

@@ -4,3 +4,7 @@
     margin: 10px;
     background-color: var(--background-secondary);
 }
+.pfp-wrapper{
+    gap: 20px;
+    flex-wrap: wrap;
+}

src/css/pages/Login.css

@@ -1,5 +1,9 @@
 .third-party-login{
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 14px;
 }
 input{
     margin-bottom: 1rem;
@@ -35,4 +39,9 @@ input{
 }
 .main-content.login{
     margin-top: 0;
+    height: 100%;
+    min-height: 100vh;
+}
+.main-content.login>div:first-child{
+    height: calc(100vh - 55.6px)
 }

src/pages/Home.js

@@ -89,15 +89,24 @@ const Profile = () => {
         
         <div className="col-6-lg col-12">
             <h3>Profile</h3>
-
+            <div className="dir-row pfp-wrapper">
+                <div className="w-auto f-s0">
                     <p><b>Profile Picture</b></p>
                     <img width={256} height={256} src={`/api/users/${user.id}/avatar`} />
-            <form>
-                <input type='file' accept='image/*' />
-                <button className="button primary">Submit</button>
+                </div>
+                <div className="f-g">
+                    <p><b>Change Profile Picture</b></p>
+                    <form className="f-g">
+                        <label htmlFor="pfp_upload" className="drop-container">
+                            <span className="drop-title">Drop your file here</span>
+                            or
+                            <input type="file" id="pfp_upload" accept="image/*" required></input>
+                        </label>
+                        <button className="button primary mt-3">Submit</button>
                     </form>
-
-            <h4>3rd party connections</h4>
+                </div>
+            </div>
+            <h4 className="mt-5">Third party connections</h4>
             <ThirdPartyConnections user={user} />
 
         </div>
@@ -122,7 +131,7 @@ const Profile = () => {
                 <button className="button primary">Save</button>
             </form>
             
-            <p className="mb-0 mt-4"><b>Two Factor:</b> {user.twoFactor ? 'enabled' : 'disabled'}</p>
+            <p className="mb-0 mt-5"><b>Two Factor:</b> {user.twoFactor ? 'enabled' : 'disabled'}</p>
             <TwoFactorControls user={user} />
 
         </div>

src/pages/Login.js

@@ -113,16 +113,15 @@ const TwoFactor = () => {
         <div className="card mb-3 is-center dir-column">
             <h2>Verification Code</h2>
             {fail ? <p className="mt-0">Invalid code</p> : null}
-            <form>
+            <form className="is-center dir-column">
                 <input autoComplete='off' placeholder='Your 2FA code...' required id='2faCode' type='password' />
-                <button className="button primary m-3" onClick={twoFactorClick}>Enter</button>
+                <button className="button primary mt-1 mb-3" onClick={twoFactorClick}>Enter</button>
             </form>
         </div>
     </div>;
 };
 
 const Login = () => {
-    document.body.classList.add('bg-triangles');
 
     return <div className="row is-center is-full-screen is-marginless">
         <div className='loginWrapper col-6 col-6-md col-3-lg'>

src/pages/Users.js

@@ -55,7 +55,7 @@ const Permissions = ({ perms }) => {
     }
 
     return <div>
-        <h4>Permissions </h4>
+        <h3>Permissions</h3>
         <ul className="tree">
             {elements}
         </ul>
@@ -121,7 +121,7 @@ const User = ({ user }) => {
                     }}>Back</button>
                     <h2 className="userId">User {user.id}</h2>
                 </div>
-                <div className="userActionButtons">
+                <div className="userActionButtons mt-4">
                     {user.disabled ? <button className="button success">Enable</button> : <button className="button error">Disable</button>}
                     <button className="button error">Delete</button>
                 </div>
@@ -141,7 +141,7 @@ const User = ({ user }) => {
                     <option>Bob</option>
                 </select>
 
-                <h3>Applications</h3>
+                <h3 className="mt-5">Applications</h3>
                 <Routes>
                     <Route path='/' element={<ApplicationList apps={apps} />} />
                     <Route path='/applications/:appid' element={<ApplicationWrapper />} />