feat(ui): made general user interface simple and minimal

design-sparx · Apr 2, 2024 · 6386dd8 · 6386dd8
1 parent 178f74a
commit 6386dd8
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 36 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,16 +17,17 @@ const { VITE_APP_VAPID_KEY } = import.meta.env;
 // This is for reference purposes
 
 export const COLOR = {
-  50: '#dfefff',
-  100: '#b9d2f8',
-  200: '#90b9ef',
-  300: '#66a2e5',
-  400: '#3c8cdc',
-  500: '#2378c3',
-  600: '#175498',
-  700: '#0b366e',
-  800: '#011b45',
-  900: '#00061d',
+  50: '#e0f1ff',
+  100: '#b0d2ff',
+  200: '#7fb0ff',
+  300: '#4d8bff',
+  400: '#1e79fe',
+  500: '#076ee5',
+  600: '#0062b3',
+  700: '#004f81',
+  800: '#003650',
+  900: '#001620',
+  borderColor: '#E7EAF3B2',
 };
 
 function App() {
@@ -87,7 +88,7 @@ function App() {
             },
             Card: {
               colorBgContainer: 'none',
-              colorBorderSecondary: COLOR['100'],
+              colorBorderSecondary: COLOR['borderColor'],
             },
             Carousel: {
               colorBgContainer: COLOR['800'],

diff --git a/src/components/Card/styles.css b/src/components/Card/styles.css
@@ -1,12 +1,13 @@
 /* Glassmorphism card effect */
 .card {
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  background-color: rgba(255, 255, 255, 0.85);
-  border: 1px solid rgba(209, 213, 219, 0.3);
-  -webkit-box-shadow: 0 8px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.05);
+  /*backdrop-filter: blur(16px) saturate(180%);*/
+  /*-webkit-backdrop-filter: blur(16px) saturate(180%);*/
+  background-color: rgba(255, 255, 255, 1);
+  /*border: 1px solid rgba(209, 213, 219, 0.3);*/
+  -webkit-box-shadow: rgba(140, 152, 164, 0.075) 0 6px 12px 0;
+  -moz-box-shadow: rgba(140, 152, 164, 0.075) 0 6px 12px 0;
+  box-shadow: rgba(140, 152, 164, 0.075) 0 6px 12px 0;
+  border: 1px solid rgba(231, 234, 243, 0.7);
 }
 
 .card .ant-card-head-title {

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -13,7 +13,7 @@ type LogoProps = {
   asLink?: boolean;
   href?: string;
   bgColor?: CSSProperties['backgroundColor'];
-} & Omit<FlexProps, 'children'>;
+} & Partial<FlexProps>;
 
 const Logo = ({
   asLink,
@@ -36,7 +36,7 @@ const Logo = ({
           height={imgSize?.h || 48}
         />
         <Typography.Title
-          level={4}
+          level={5}
           type="secondary"
           style={{
             color,

diff --git a/src/layouts/app/App.tsx b/src/layouts/app/App.tsx
@@ -110,10 +110,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
       <Layout
         style={{
           minHeight: '100vh',
-          backgroundColor: 'rgba(52, 152, 219, 0.1)',
-          backgroundImage:
-            'radial-gradient(at 47% 33%, hsl(197.95, 0%, 100%) 0, transparent 59%),\n' +
-            'radial-gradient(at 82% 65%, hsl(204.07, 70%, 75%) 0, transparent 55%)',
+          backgroundColor: 'white',
         }}
       >
         <SideNav
@@ -141,8 +138,9 @@ const AppLayout = ({ children }: AppLayoutProps) => {
             style={{
               marginLeft: collapsed ? 0 : '200px',
               padding: '0 2rem 0 0',
-              background: navFill ? '#eaf5fc' : 'none',
+              background: navFill ? 'rgba(255, 255, 255, .5)' : 'none',
               backdropFilter: navFill ? 'blur(8px)' : 'none',
+              boxShadow: navFill ? '0 0 8px 2px rgba(0, 0, 0, 0.05)' : 'none',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'space-between',
@@ -200,7 +198,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
           <Content
             style={{
               margin: `0 0 0 ${collapsed ? 0 : '200px'}`,
-              background: 'rgba(52, 152, 219, 0.35)',
+              background: '#ebedf0',
               borderRadius: collapsed ? 0 : borderRadius,
               transition: 'all .25s',
               padding: '24px 32px',

diff --git a/src/layouts/app/SideNav.tsx b/src/layouts/app/SideNav.tsx
@@ -266,17 +266,16 @@ const SideNav = ({ ...others }: SideNavProps) => {
         href={PATH_LANDING.root}
         justify="center"
         gap="small"
-        imgSize={{ h: 36, w: 36 }}
+        imgSize={{ h: 28, w: 28 }}
         style={{ padding: '1rem 0' }}
       />
       <ConfigProvider
         theme={{
           components: {
             Menu: {
               itemBg: 'none',
-              subMenuItemBg: COLOR['50'],
               itemSelectedBg: COLOR['100'],
-              itemHoverBg: COLOR['100'],
+              itemHoverBg: COLOR['50'],
               itemSelectedColor: COLOR['600'],
             },
           },

diff --git a/src/layouts/guest/Guest.tsx b/src/layouts/guest/Guest.tsx
@@ -70,10 +70,7 @@ const GuestLayout = () => {
         className="layout"
         style={{
           minHeight: '100vh',
-          backgroundColor: 'rgba(52, 152, 219, 0.05)',
-          backgroundImage:
-            'radial-gradient(at 47% 33%, hsl(197.95, 0%, 100%) 0, transparent 59%),\n' +
-            'radial-gradient(at 82% 65%, hsl(204.07, 70%, 53%) 0, transparent 55%)',
+          backgroundColor: 'white',
         }}
       >
         <Header
@@ -83,6 +80,7 @@ const GuestLayout = () => {
             justifyContent: 'space-between',
             background: navFill ? 'rgba(255, 255, 255, .5)' : 'none',
             backdropFilter: navFill ? 'blur(8px)' : 'none',
+            boxShadow: navFill ? '0 0 8px 2px rgba(0, 0, 0, 0.05)' : 'none',
             gap: 12,
             position: 'sticky',
             top: 0,
@@ -133,8 +131,7 @@ const GuestLayout = () => {
         </Header>
         <Content
           style={{
-            // padding: '0 50px',
-            background: 'rgba(52, 152, 219, 0.35)',
+            background: 'rgba(255, 255, 255, 1)',
             borderRadius,
             transition: 'all .25s',
             paddingBottom: '10rem',

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -220,7 +220,7 @@ const HomePage = () => {
                 vertical={isMobile}
                 style={{ marginTop: '1.5rem' }}
               >
-                <Link to={PATH_DASHBOARD.default}>
+                <Link to={PATH_AUTH.signin}>
                   <Button
                     icon={<LoginOutlined />}
                     type="primary"