Cleaning the auth and css mess

ArtgenIO · Nov 30, 2021 · 1c67d05 · 1c67d05
1 parent dd59f8b
commit 1c67d05
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 72 deletions.
diff --git a/src/modules/admin/assets/antd.less b/src/modules/admin/assets/antd.less
@@ -1,12 +1,12 @@
-// Configure the AntD variables.
-@import '../../../../node_modules/antd/lib/style/themes/dark.less';
-@import '../../../../node_modules/antd/dist/antd.less';
+@import 'antd/lib/style/themes/dark.less';
+@import 'antd/dist/antd.less';
 
 // All variables ~
 // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
 
 @ag-dark: #151719;
 @ag-light-dark: #25282b;
+@ag-border: #37393f;
 @ag-white: #cfd2d9;
 
 @primary-color: #46bdc6;

diff --git a/src/modules/admin/assets/index.html b/src/modules/admin/assets/index.html
@@ -7,7 +7,7 @@
     <link rel="shortcut icon" href="/assests/favicon.ico" type="image/x-icon" />
     <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
     <link
-      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
+      href="https://fonts.googleapis.com/css?family=Gruppo|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
       rel="stylesheet"
     />
   </head>

diff --git a/src/modules/admin/assets/main.css → src/modules/admin/assets/main.less b/src/modules/admin/assets/main.css → src/modules/admin/assets/main.less
@@ -1,7 +1,12 @@
-/* Tailwind and other custom styles */
-@import url('tailwindcss/components');
-@import url('tailwindcss/utilities');
-@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
+@import './antd.less';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+:root {
+  --white: #cfd2d9;
+  --dark: #151719;
+  --border: #37393f;
+}
 
 html,
 body {
@@ -10,13 +15,12 @@ body {
 
 body {
   overflow: hidden; /* Always show the scroll, we can avoid the flickering with this */
-  color: #cfd2d9;
-
+  color: var(--white);
   font-weight: 100;
 }
 
 .wave-bg {
-  background-color: #151719;
+  background-color: var(--dark);
   background-image: url('../assets/img/waves.svg');
   background-repeat: no-repeat;
   background-position: bottom;
@@ -34,5 +38,5 @@ body {
 }
 
 .right-sider {
-  border-left: 1px solid #37393f;
+  border-left: 1px solid var(--border);
 }
diff --git a/src/modules/admin/component/root.component.tsx b/src/modules/admin/component/root.component.tsx
@@ -1,7 +1,6 @@
 import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
-import '../assets/antd.less';
-import '../assets/main.css';
+import '../assets/main.less';
 import PageComponent from '../layout/Page';
 
 export default function Root() {

diff --git a/src/modules/admin/layout/Page.tsx b/src/modules/admin/layout/Page.tsx
@@ -1,7 +1,5 @@
 import { Layout } from 'antd';
 import AuthenticationWrapperComponent from '../../authentication/component/wrapper.component';
-import '../assets/antd.less';
-import '../assets/main.css';
 import NavSide from './NavSide';
 import PageContent from './PageContent';
 import PageDrawer from './PageDrawer';

diff --git a/...hentication/component/cover.component.css → ...entication/component/cover.component.less b/...hentication/component/cover.component.css → ...entication/component/cover.component.less
@@ -1,17 +1,5 @@
-.auth-layout .cover {
-  @apply absolute  inset-0 z-0;
-}
-
-.auth-layout .misc-text {
-  @apply text-gray-400 hover:underline hover:text-gray-100;
-}
-
-.auth-layout .mobile-panel {
-  @apply fixed lg:hidden z-10 inset-0  items-center;
-}
-
-.auth-layout .subtext {
-  @apply bottom-0 absolute p-4 text-center right-0 left-0 flex justify-center space-x-4;
+.auth-layout {
+  @apply min-h-screen flex items-stretch text-white absolute top-0 left-0 right-0 bottom-0 z-50;
 }
 
 .auth-layout .left-panel {
@@ -20,26 +8,28 @@
 
 .auth-layout .right-panel {
   @apply w-full lg:w-1/2 xl:w-1/3 2xl:w-1/4 flex items-center justify-center text-center md:px-8 px-4 z-0;
-  background-color: #151719;
 
-  border-left: 1px solid #37393f;
+  background-color: var(--dark);
+  border-left: 1px solid var(--border);
 }
 
-.auth-layout .hexa {
-  @apply hidden md:flex rounded-full h-32 w-32 items-center justify-center m-auto;
+.auth-layout .cover {
+  @apply absolute inset-0 z-0;
+}
 
-  background-image: url('../../admin/assets/img/logo.png');
+.auth-layout .mobile-panel {
+  @apply fixed lg:hidden z-10 inset-0  items-center;
 }
 
-.auth-layout .logo {
-  @apply h-1 m-auto;
+.auth-layout .subtext {
+  @apply bottom-0 absolute p-4 text-center right-0 left-0 flex justify-center space-x-4;
 }
 
-.auth-layout .social svg {
-  @apply items-center rounded-md text-3xl;
+.auth-layout .logo {
+  @apply hidden md:flex rounded-full h-32 w-32 items-center justify-center m-auto;
 
-  background-color: #101010;
-  color: #cfd2d9;
+  background-image: url('../../admin/assets/img/logo.png');
+  background-size: contain;
 }
 
 .auth-layout .brand,

diff --git a/src/modules/authentication/component/cover.component.tsx b/src/modules/authentication/component/cover.component.tsx
@@ -1,18 +1,16 @@
-import './cover.component.css';
+import './cover.component.less';
 import GalaxyComponent from './galaxy.component';
 import SignInComponent from './sign-in.component';
 
 export default function AuthLayoutComponent() {
   return (
-    <section className="min-h-screen flex items-stretch text-white auth-layout absolute top-0 left-0 right-0 bottom-0 z-50">
-      <div className="left-panel hero-bg">
+    <section className="auth-layout">
+      <div className="left-panel">
         <GalaxyComponent />
         <div className="cover" />
-        <div className="w-full px-24 z-10 text-white">
-          <h1 className="text-5xl moto font-thin text-left tracking-wide">
-            Welcome back!
-          </h1>
-          <p className="text-2xl font-thin my-4 italic text-gray-400">
+        <div className="px-16 z-10 text-white">
+          <h1 className="moto text-5xl">Hello, Artisan!</h1>
+          <p className="text-2xl font-thin -mt-4 italic text-gray-400">
             Opportunities don't happen. You create them.
           </p>
         </div>
@@ -30,7 +28,7 @@ export default function AuthLayoutComponent() {
         </div>
       </div>
       <div className="right-panel">
-        <div className="mobile-panel hero-bg">
+        <div className="mobile-panel">
           <div className="cover" />
         </div>
         <div className="w-full py-6 z-20">

diff --git a/src/modules/authentication/component/sign-in.component.tsx b/src/modules/authentication/component/sign-in.component.tsx
@@ -1,11 +1,4 @@
-import {
-  FacebookOutlined,
-  GithubOutlined,
-  GoogleOutlined,
-  LinkedinOutlined,
-  MehOutlined,
-  UnlockOutlined,
-} from '@ant-design/icons';
+import { MehOutlined, UnlockOutlined } from '@ant-design/icons';
 import {
   Alert,
   Button,
@@ -51,18 +44,11 @@ export default function SignInComponent() {
 
   return (
     <>
-      <h1 className="w-full content-center" id="js-hexa">
-        <div className="hexa"></div>
-      </h1>
-      <h1 className="mb-4 w-full content-center text-5xl brand" id="js-logo">
-        Artgen Core
+      <h1 className="w-full content-center">
+        <div className="logo"></div>
       </h1>
-      <div className="py-6 space-x-2 social hidden">
-        <FacebookOutlined />
-        <GoogleOutlined />
-        <LinkedinOutlined />
-        <GithubOutlined />
-      </div>
+      <h1 className="mb-4 w-full content-center text-5xl brand">Artgen Core</h1>
+
       <Alert
         type="info"
         className="text-left mb-4"
@@ -73,8 +59,7 @@ export default function SignInComponent() {
           </>
         }
         showIcon
-      ></Alert>
-      <p className="misc-text hidden">or use your email account</p>
+      />
       <Form
         name="sign-in"
         size="large"
@@ -116,10 +101,11 @@ export default function SignInComponent() {
             className="test--sign-in"
             type="primary"
             htmlType="submit"
+            size="middle"
             block
             icon={<UnlockOutlined />}
           >
-            Sign In
+            Sign In!
           </Button>
         </Form.Item>