backed-fi · hemulin · Dec 6, 2023
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Mandala - Security tokens mediator</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/mandala.png b/frontend/public/mandala.png
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -8,22 +8,29 @@ export const DashboardLayout = () => {
     <Box>
       <NavigationBar />
 
-      <Box
-        sx={{
-          display: "grid",
-        }}
-      >
-        {/* This is so that the sidebar stays here */}
-
+      <Box sx={{ display: "grid" }}>
         <Box
           sx={{
             paddingTop: "80px",
             minHeight: "100vh",
-            backgroundColor: "#f2f4f8",
+            position: "relative",
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundImage: "url(/mandala.png)",
+              backgroundSize: "cover",
+              opacity: 0.15,
+              zIndex: -1,
+            },
           }}
         >
           <Box
             sx={{
+              position: "relative",
               padding: "3rem",
               height: "100%",
             }}

diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx
@@ -19,6 +19,7 @@ export const NavigationBar: React.FC = ({ ...props }) => {
       {...props}
       sx={({ zIndex }) => ({
         zIndex: zIndex.drawer + 1,
+        backgroundColor: "#39429b",
       })}
     >
       <Box

diff --git a/frontend/src/pages/account/pages/LoginPage.tsx b/frontend/src/pages/account/pages/LoginPage.tsx
@@ -84,10 +84,26 @@ export const LoginPage: React.FC = () => {
         loading={loading}
         variant="contained"
         onClick={form.handleSubmit(onLogin)}
+        sx={{
+          backgroundColor: "#39429b",
+          '&:hover': {
+            backgroundColor: "#1976d2",
+          },
+        }}
       >
         Login
       </LoadingButton>
-      <Button onClick={() => navigate("/accounts/register")}>Register</Button>
+      <Button 
+        sx={{
+          color: '#39429b',
+          backgroundColor: "#fff",
+          '&:hover': {
+            backgroundColor: "#fff",
+          },
+        }}
+        onClick={() => navigate("/accounts/register")}>
+          Register
+      </Button>
     </Box>
   );
 };
diff --git a/frontend/src/pages/account/pages/RegisterPage.tsx b/frontend/src/pages/account/pages/RegisterPage.tsx
@@ -75,6 +75,12 @@ export const RegisterPage: React.FC = () => {
         loading={loading}
         variant="contained"
         onClick={form.handleSubmit(onRegister)}
+        sx={{
+          backgroundColor: "#39429b",
+          '&:hover': {
+            backgroundColor: "#1976d2",
+          },
+        }}
       >
         Register
       </LoadingButton>

diff --git a/frontend/src/pages/admin/pages/OrdersPage.tsx b/frontend/src/pages/admin/pages/OrdersPage.tsx
@@ -108,23 +108,40 @@ export const OrdersPage: React.FC = () => {
         }}
       >
         {!signer && (
-          <Button onClick={connectWallet}>Connect your wallet</Button>
+          <Button
+            sx={{
+              backgroundColor: "#39429b",
+              '&:hover': {
+                backgroundColor: "#1976d2",
+              },
+              color: "#fff"
+            }}
+            onClick={connectWallet}>
+            Connect your wallet
+          </Button>
         )}
 
         {signer && (
           <React.Fragment>
-            <Typography
+            <Button
               sx={{
                 fontSize: "24px",
                 fontWeight: "700",
+                backgroundColor: "#39429b",
+                opacity: ".7",
+                '&:hover': {
+                  backgroundColor: "#1976d2",
+                },
                 ...(tokenDetails && {
                   cursor: "pointer",
                 }),
+                color: '#fff',
+                marginBottom: "1rem",
               }}
               onClick={() => setTokenDetails(null as any)}
             >
               {tokenDetails ? "Go back to asset selection" : "Select an asset"}
-            </Typography>
+            </Button>
 
             {!tokenDetails &&
               SUPPORTED_ASSETS.map((supportedToken) => (
@@ -136,6 +153,7 @@ export const OrdersPage: React.FC = () => {
                     padding: "1rem",
                     width: "400px",
                     border: "1px solid #D9D9D9",
+                    backgroundColor: "#82a8d9",
                   }}
                   onClick={loadToken(
                     ASSETS[supportedToken as "LFT" | "LFN"].address!
@@ -154,7 +172,7 @@ export const OrdersPage: React.FC = () => {
                     sx={{
                       fontSize: "14px",
                       fontWeight: "500",
-                      opacity: ".5",
+                      opacity: ".8",
                     }}
                   >
                     {ASSETS[supportedToken as "LFT" | "LFN"].address}
@@ -167,6 +185,8 @@ export const OrdersPage: React.FC = () => {
                 sx={{
                   width: "100%",
                   maxWidth: "1024px",
+                  borderRadius: "1rem",
+                  backgroundColor: "#D3D3D3",
                 }}
                 rows={tokenDetails.epochList}
                 columns={[

diff --git a/frontend/src/pages/client/pages/HoldingsPage.tsx b/frontend/src/pages/client/pages/HoldingsPage.tsx
@@ -60,18 +60,26 @@ export const HoldingsPage: React.FC = () => {
         }}
       >
         {!signer && (
-          <Button variant="contained" onClick={web3Context.connectWallet}>
+          <Button 
+          sx={{
+            backgroundColor: "#39429b",
+            '&:hover': {
+              backgroundColor: "#1976d2",
+            },
+          }}
+          variant="contained" onClick={web3Context.connectWallet}>
             Connect your wallet
           </Button>
         )}
         {SUPPORTED_ASSETS.map((supportedToken) => (
           <Box
             sx={{
-              borderRadius: "4px",
+              borderRadius: "1rem",
               marginTop: "1rem",
               padding: "1rem",
               width: "400px",
               border: "1px solid #D9D9D9",
+              backgroundColor: "#82a8d9",
             }}
           >
             <Typography
@@ -87,7 +95,7 @@ export const HoldingsPage: React.FC = () => {
               sx={{
                 fontSize: "14px",
                 fontWeight: "500",
-                opacity: ".5",
+                opacity: ".8",
               }}
             >
               {ASSETS[supportedToken as "LFT" | "LFN"].address}
@@ -96,8 +104,7 @@ export const HoldingsPage: React.FC = () => {
               <Typography
                 sx={{
                   fontSize: "14px",
-                  fontWeight: "500",
-                  opacity: ".5",
+                  fontWeight: "700",
                 }}
               >
                 Balance: {new Intl.NumberFormat('en-US').format(Number(balances[supportedToken]))} {supportedToken}

diff --git a/frontend/src/pages/client/pages/PastTransactionsPage.tsx b/frontend/src/pages/client/pages/PastTransactionsPage.tsx
@@ -44,7 +44,7 @@ export const PastTransactionsPage: React.FC = () => {
         token: asset
       })))
     }
-    x = x.sort((a,b) => a.createdAt.getTime() - b.createdAt.getTime())
+    x = x.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())
     setHistory(x);
   };
 
@@ -58,16 +58,18 @@ export const PastTransactionsPage: React.FC = () => {
     if (signer) {
       fetchHistory();
     }
-  // eslint-disable-next-line
+    // eslint-disable-next-line
   }, [signer]);
 
   const columns: GridColDef[] = [
     { field: 'createdAt', type: 'dateTime', headerName: 'Created at', width: 260 },
     { field: 'token', headerName: 'For Token', width: 130 },
     { field: 'side', headerName: 'Side', width: 130 },
-    { field: 'amount', headerName: 'Traded with', width: 130, renderCell: (params) => {
+    {
+      field: 'amount', headerName: 'Traded with', width: 130, renderCell: (params) => {
         return <>{params.row.amount} {params.row.amountCurrency}</>
-    }, }
+      },
+    }
     // {
     //   field: 'fullName',
     //   headerName: 'Full name',
@@ -87,12 +89,34 @@ export const PastTransactionsPage: React.FC = () => {
         }}
       >
         {!signer && (
-          <Button variant="contained" onClick={web3Context.connectWallet}>
+          <Button
+            sx={{
+              backgroundColor: "#39429b",
+              '&:hover': {
+                backgroundColor: "#1976d2",
+              },
+            }}
+            variant="contained" onClick={web3Context.connectWallet}>
             Connect your wallet
           </Button>
         )}
         {signer && history && (
-        <DataGrid rows={history} columns={columns} />
+          <DataGrid
+            sx={{
+              borderRadius: "1rem",
+              backgroundColor: "#82a8d9",
+              '& .MuiDataGrid-columnHeaders': {
+                justifyContent: 'center',
+                alignItems: 'center',
+              },
+              '& .MuiDataGrid-columnHeaderTitle': {
+                fontWeight: 'bold',
+                fontSize: '1rem',
+                textAlign: 'center'
+              },
+            }}
+            rows={history}
+            columns={columns} />
         )}
       </Box>
     </AuthenticatedOnly>

diff --git a/frontend/src/pages/client/pages/components/InteractionsWidget.tsx b/frontend/src/pages/client/pages/components/InteractionsWidget.tsx
@@ -157,7 +157,7 @@ export const InteractionsWidget: React.FC = () => {
   }, [web3Context]);
 
   return (
-    <Card sx={{ width: 350 }}>
+    <Card sx={{ width: 350, borderRadius: "0.8rem" }}>
       <CardContent>
         <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
           <Tabs value={value} onChange={handleChange}>
@@ -195,7 +195,14 @@ export const InteractionsWidget: React.FC = () => {
       <CardActions>
         {!signer && (
           <Button
-            sx={{ width: "100%" }}
+            sx=
+            {{ 
+              width: "100%", 
+              backgroundColor: "#39429b",
+              '&:hover': {
+                backgroundColor: "#1976d2",
+              },
+            }}
             variant="contained"
             onClick={web3Context.connectWallet}
           >
@@ -221,7 +228,13 @@ export const InteractionsWidget: React.FC = () => {
             >
               <LoadingButton
                 loading={loading}
-                sx={{ width: "100%" }}
+                sx={{ 
+                  width: "100%",
+                  backgroundColor: "#39429b",
+                  '&:hover': {
+                    backgroundColor: "#1976d2",
+                  },
+                }}
                 variant="contained"
                 onClick={form.handleSubmit(confirm)}
               >