update ui layout

permaweb · Jun 25, 2024 · 229e79c · 229e79c
1 parent 5ed7284
commit 229e79c
Show file tree

Hide file tree

Showing 45 changed files with 390 additions and 365 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,5 +20,11 @@
 
 	<body>
 		<div id="root"></div>
+		<script
+			async
+			src="https://ackee.frogfishsolutions.io/tracker.js"
+			data-ackee-server="https://ackee.frogfishsolutions.io"
+			data-ackee-domain-id="ed1ec8ed-c962-4a59-a4e8-76914e157070"
+		></script>
 	</body>
 </html>
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,19 +1,29 @@
+import { lazy, Suspense } from 'react';
+
+import { Loader } from 'components/atoms/Loader';
 import { DOM } from 'helpers/config';
 import Navigation from 'navigation';
-import { Routes } from 'routes';
 
 import * as S from './styles';
 
+const Routes = lazy(() =>
+	import(`../routes/Routes.tsx` as any).then((module) => ({
+		default: module.default,
+	}))
+);
+
 export default function App() {
 	return (
 		<>
 			<div id={DOM.loader} />
 			<div id={DOM.notification} />
 			<div id={DOM.overlay} />
-			<Navigation />
-			<S.View>
-				<Routes />
-			</S.View>
+			<Suspense fallback={<Loader />}>
+				<Navigation />
+				<S.View className={'scroll-wrapper'}>
+					<Routes />
+				</S.View>
+			</Suspense>
 		</>
 	);
 }
diff --git a/src/app/styles.ts b/src/app/styles.ts
@@ -31,7 +31,7 @@ export const GlobalStyle = createGlobalStyle`
 
   body {
     line-height: 1;
-    background: ${(props) => props.theme.colors.view.background};
+    background: ${(props) => props.theme.colors.container.alt2.background};
   }
 
   ol, ul {
@@ -184,7 +184,7 @@ export const GlobalStyle = createGlobalStyle`
 
   .max-view-wrapper {
     width: 100%;
-    max-width: ${STYLING.cutoffs.max};
+		max-width: ${STYLING.cutoffs.max};
     margin: 0 auto;
   }
 
@@ -222,7 +222,6 @@ export const GlobalStyle = createGlobalStyle`
   .scroll-wrapper {
     overflow: auto;
 
-    scrollbar-width: thin;
     scrollbar-color: transparent transparent;
     ::-webkit-scrollbar {
       width: 8px;
@@ -247,13 +246,29 @@ export const GlobalStyle = createGlobalStyle`
 `;
 
 export const View = styled.div`
-	min-height: calc(100vh - ${STYLING.dimensions.nav.headerHeight});
-	width: calc(100vw - ${STYLING.dimensions.nav.panelWidthClosed} - 15.75px);
-	margin: ${STYLING.dimensions.nav.headerHeight} 0 0 ${STYLING.dimensions.nav.panelWidthClosed};
-	padding: 20px;
+	height: calc(100vh - ${STYLING.dimensions.nav.headerHeight} - 10px);
+	width: calc(100vw - ${STYLING.dimensions.nav.panelWidthClosed} - 20px);
+	position: absolute;
+	top: ${STYLING.dimensions.nav.headerHeight};
+	left: calc(${STYLING.dimensions.nav.panelWidthClosed} + 10px);
+	padding: 25px 10px 25px 25px;
+	overflow: auto;
+	border: 1px solid ${(props) => props.theme.colors.border.alt4};
+	background: ${(props) => props.theme.colors.view.background};
+	border-radius: ${STYLING.dimensions.radius.alt1};
+	animation: ${open} ${fadeIn1};
 	@media (max-width: ${STYLING.cutoffs.initial}) {
+		height: fit-content;
 		width: 100%;
+		position: relative;
+		top: 0;
+		left: 0;
+		padding: 20px;
 		margin: ${STYLING.dimensions.nav.headerHeight} 0 0 0;
+		border-top-left-radius: ${STYLING.dimensions.radius.alt1};
+		border-top-right-radius: ${STYLING.dimensions.radius.alt1};
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
 	}
 `;
 

diff --git a/src/assets/dark.svg b/src/assets/dark.svg
diff --git a/src/assets/docs.svg b/src/assets/docs.svg
diff --git a/src/assets/landing.svg b/src/assets/landing.svg
diff --git a/src/assets/light.svg b/src/assets/light.svg
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/assets/menu.svg b/src/assets/menu.svg
diff --git a/src/assets/u.svg b/src/assets/u.svg
diff --git a/src/assets/upload.svg b/src/assets/upload.svg
diff --git a/src/assets/user.svg b/src/assets/user.svg
diff --git a/src/components/atoms/Button/styles.ts b/src/components/atoms/Button/styles.ts
@@ -68,6 +68,7 @@ export const Primary = styled.button<{
 		}
 		svg {
 			fill: ${(props) => props.theme.colors.font.light1} !important;
+			color: ${(props) => props.theme.colors.font.light1} !important;
 		}
 	}
 	&:focus {
@@ -78,6 +79,7 @@ export const Primary = styled.button<{
 		}
 		svg {
 			fill: ${(props) => props.theme.colors.font.light1} !important;
+			color: ${(props) => props.theme.colors.font.light1} !important;
 		}
 	}
 	&:disabled {
@@ -86,6 +88,10 @@ export const Primary = styled.button<{
 		span {
 			color: ${(props) => props.theme.colors.button.primary.disabled.color} !important;
 		}
+		svg {
+			fill: ${(props) => props.theme.colors.button.primary.disabled.color} !important;
+			color: ${(props) => props.theme.colors.button.primary.disabled.color} !important;
+		}
 	}
 
 	span {
@@ -115,6 +121,12 @@ export const IconPrimary = styled.div<{
 				: props.active
 				? props.theme.colors.button.primary.active.color
 				: props.theme.colors.button.primary.color};
+		color: ${(props) =>
+			props.disabled
+				? props.theme.colors.button.primary.disabled.color
+				: props.active
+				? props.theme.colors.button.primary.active.color
+				: props.theme.colors.button.primary.color};
 	}
 `;
 
@@ -160,6 +172,12 @@ export const IconAlt1 = styled(IconPrimary)`
 				: props.active
 				? props.theme.colors.button.alt1.active.color
 				: props.theme.colors.button.alt1.color};
+		color: ${(props) =>
+			props.disabled
+				? props.theme.colors.button.alt1.disabled.color
+				: props.active
+				? props.theme.colors.button.alt1.active.color
+				: props.theme.colors.button.alt1.color};
 	}
 `;
 
@@ -210,5 +228,11 @@ export const IconAlt2 = styled(IconAlt1)`
 				: props.active
 				? props.theme.colors.button.alt2.active.color
 				: props.theme.colors.button.alt2.color};
+		color: ${(props) =>
+			props.disabled
+				? props.theme.colors.button.alt2.disabled.color
+				: props.active
+				? props.theme.colors.button.alt2.active.color
+				: props.theme.colors.button.alt2.color};
 	}
 `;
diff --git a/src/components/organisms/AssetsTable/AssetsTable.tsx b/src/components/organisms/AssetsTable/AssetsTable.tsx
@@ -233,8 +233,6 @@ export default function AssetsTable(props: { useIdAction: boolean }) {
 		} else return null;
 	}
 
-	console.log(loading);
-
 	function getAssets() {
 		if (!arProvider.walletAddress) {
 			return (

diff --git a/src/helpers/config.ts b/src/helpers/config.ts
@@ -11,6 +11,7 @@ import checkmark from 'assets/checkmark.svg';
 import close from 'assets/close.svg';
 import comments from 'assets/comments.svg';
 import copy from 'assets/copy.svg';
+import dark from 'assets/dark.svg';
 import details from 'assets/details.svg';
 import docs from 'assets/docs.svg';
 import download from 'assets/download.svg';
@@ -19,6 +20,7 @@ import fullScreen from 'assets/fullscreen.svg';
 import image from 'assets/image.svg';
 import info from 'assets/info.svg';
 import landing from 'assets/landing.svg';
+import light from 'assets/light.svg';
 import link from 'assets/link.svg';
 import logo from 'assets/logo.svg';
 import media from 'assets/media.svg';
@@ -32,7 +34,6 @@ import search from 'assets/search.svg';
 import share from 'assets/share.svg';
 import stamp from 'assets/stamp.svg';
 import theme from 'assets/theme.svg';
-import u from 'assets/u.svg';
 import upload from 'assets/upload.svg';
 import uploadGraphic from 'assets/upload-graphic.riv';
 import user from 'assets/user.svg';
@@ -76,6 +77,8 @@ export const ASSETS = {
 	details: details,
 	docs: docs,
 	download: download,
+	dark: dark,
+	light: light,
 	following: following,
 	fullScreen: fullScreen,
 	image: image,
@@ -93,7 +96,6 @@ export const ASSETS = {
 	share: share,
 	stamp: stamp,
 	theme: theme,
-	u: u,
 	upload: upload,
 	uploadGraphic: uploadGraphic,
 	user: user,
@@ -231,8 +233,8 @@ export const STYLING = {
 			max: '47.5px',
 		},
 		nav: {
-			headerHeight: '65px',
-			panelWidthClosed: '85px',
+			headerHeight: '70px',
+			panelWidthClosed: '70px',
 			panelWidthOpen: '250px',
 		},
 		radius: {

diff --git a/src/helpers/language.ts b/src/helpers/language.ts
@@ -195,6 +195,7 @@ export const language = {
 		profileExistsInfo: `It looks like you already have an account ! You can visit your profile directly by clicking View profile below.`,
 		profileUpdated: `Profile updated`,
 		profileUpdatedInfo: `Your profile has been updated.`,
+		readDocs: `Read docs`,
 		recipient: `Recipient`,
 		removeAvatar: `Remove avatar`,
 		removeBanner: `Remove banner`,

diff --git a/src/helpers/themes.ts b/src/helpers/themes.ts
@@ -6,13 +6,13 @@ export const lightTheme = {
 	negative1: '#DF4657',
 	negative2: '#EF6C82',
 	neutral1: '#FFFFFF',
-	neutral2: '#F1F1F1',
-	neutral3: '#8D8D8D',
+	neutral2: '#f1f4fa',
+	neutral3: '#90949C',
 	neutral4: '#C9C9C9',
 	neutral5: '#CCCCCC',
 	neutral6: '#F7F7F7',
 	neutral7: '#FAFAFA',
-	neutral8: '#B1B1B1',
+	neutral8: '#C8CACF',
 	neutralA1: '#0A0A0A',
 	neutralA2: '#606060',
 	neutralA3: '#5C5C5C',
@@ -49,7 +49,7 @@ export const darkTheme = {
 	neutralA1: '#FFFFFF',
 	neutralA2: '#F1F1F1',
 	neutralA3: '#E0E0E0',
-	neutralA4: '#C9C9C9',
+	neutralA4: '#D2D2D2',
 	neutralA5: '#F7F7F7',
 	neutralA6: '#FAFAFA',
 	overlay1: 'rgba(0, 0, 0, 0.5)',