Merge pull request #65 from massalabs/61-refactor-frequency-component

Add style
massalabs · Aug 18, 2024 · fa0b33e · fa0b33e
2 parents 18c5b7a + 36e70e1
commit fa0b33e
Show file tree

Hide file tree

Showing 13 changed files with 299 additions and 200 deletions.
diff --git a/front/index.html b/front/index.html
@@ -4,9 +4,15 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
     <title>Massa Tips</title>
   </head>
-  <body class="bg-secondary">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/front/public/bg-grey-syntra.svg b/front/public/bg-grey-syntra.svg
diff --git a/front/public/bg-white-syntra.svg b/front/public/bg-white-syntra.svg
diff --git a/front/src/assets/logo-syntra.svg b/front/src/assets/logo-syntra.svg
diff --git a/front/src/components/ConnectWalletPopup/ConnectButton.tsx b/front/src/components/ConnectWalletPopup/ConnectButton.tsx
@@ -15,7 +15,7 @@ export function ConnectButton() {
       <Button
         disabled={isFetching}
         variant="secondary"
-        customClass="h-[54px] relative"
+        customClass="h-[54px] text-primary"
         onClick={() => setOpen(true)}
       >
         {truncateAddress(connectedAccount?.address)}
@@ -30,7 +30,7 @@ export function ConnectButton() {
         <Button
           variant="secondary"
           disabled={isFetching}
-          customClass="h-[54px] relative"
+          customClass="h-[54px]"
           onClick={() => setOpen(true)}
         >
           {Intl.t('connect-wallet.title')}
@@ -41,7 +41,7 @@ export function ConnectButton() {
   }
   return (
     <>
-      <div className="absolute top-10 right-10">
+      <div className="top-10 right-10 shadow-md rounded-lg border-primary border ">
         {connectedAccount ? <ConnectedWallet /> : <NotConnectedWallet />}
       </div>
 

diff --git a/front/src/components/NumericInput.tsx b/front/src/components/NumericInput.tsx
@@ -19,7 +19,9 @@ export function NumericInput(props: NumericInputProps) {
   return (
     <div>
       <NumericFormat
-        className={'default-input w-full h-14 p-5 border-none focus:ring-2'}
+        className={
+          'default-input w-full h-14 p-5 border-none focus:ring-1 focus:ring-primary focus:outline-none'
+        }
         decimalScale={0}
         allowNegative={false}
         placeholder={placeholder}

diff --git a/front/src/components/RecipientAddressInput.tsx b/front/src/components/RecipientAddressInput.tsx
@@ -15,5 +15,12 @@ export function RecipientAddressInput({
     onAddressChange(e.target.value);
   }
 
-  return <Input error={error} value={value} onChange={onChange} />;
+  return (
+    <Input
+      error={error}
+      value={value}
+      onChange={onChange}
+      customClass="border-none p-5 mb-0 h-14 focus:ring-1 focus:ring-primary focus:outline-none"
+    />
+  );
 }
diff --git a/front/src/components/scheduleTable.tsx b/front/src/components/scheduleTable.tsx
@@ -9,73 +9,73 @@ interface ScheduleTableProps {
 
 const ScheduleTable: React.FC<ScheduleTableProps> = ({ schedules }) => {
   return (
-    <div className="h-full p-10 ">
-      <table className="min-w-full divide-y divide-gray-200 overflow-hidden rounded-2xl shadow-xl">
+    <div className=" p-10">
+      <table className="min-w-full  overflow-hidden rounded-2xl shadow-lg bg-secondary">
         <thead>
-          <tr className="bg-[#ebfdc5]">
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          <tr className="bg-primary text-white">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               ID
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Token Address
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Spender
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Recipient
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Amount
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Interval
             </th>
-            <th className="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-2 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Occurrences
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Remaining
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               Tolerance
             </th>
-            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="px-6 py-6 text-left text-xs font-medium uppercase tracking-wider">
               History
             </th>
           </tr>
         </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
+        <tbody className="text-sm divide-y divide-zinc-300">
           {schedules.map((schedule) => (
             <tr key={schedule.id.toString()}>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {schedule.id.toString()}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {truncateAddress(schedule.tokenAddress)}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {truncateAddress(schedule.spender)}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {truncateAddress(schedule.recipient)}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {formatAmount(schedule.amount, 18).preview}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {schedule.interval.toString()}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {schedule.occurrences.toString()}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {schedule.remaining.toString()}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {schedule.tolerance.toString()}
               </td>
-              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <td className="px-6 py-4 whitespace-nowrap ">
                 {schedule.history.map((h, index) => (
                   <div key={index}>
                     Period: {h.period.toString()}, Thread: {h.thread.toString()}

diff --git a/front/src/const/contracts.ts b/front/src/const/contracts.ts
@@ -1,2 +1,2 @@
 export const schedulerAddress =
-  'AS12SvAUDheGvHDbjYP9onpEmgTesuiU3uRyxMCSNe4HbS1FuPSNF';
+  'AS1M8wRz3nyjGdHPeZ7oodyrek5aT8BXaqZEBqANTtcaFEESt2rE';
diff --git a/front/src/index.css b/front/src/index.css
@@ -1,40 +1,47 @@
 #root {
   height: 100vh;
   width: 100vw;
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  font-family: 'Roboto', sans-serif;
   font-weight: 400;
-  color-scheme: light dark;
-
-  /* color: rgba(255, 255, 255, 0.87); */
-  /* background-color: #242424; */
-
+  font-style: normal;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #986a6ac8 #0055ff00;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+#root::-webkit-scrollbar {
+  width: 6px;
+}
+
+#root::-webkit-scrollbar-track {
+  background: #f3f4f6;
 }
-a:hover {
-  color: #535bf2;
+
+#root::-webkit-scrollbar-thumb {
+  background-color: #7d899a;
+  border-radius: 3px; /* Adjusted for thinner scrollbar */
+  border: none; /* Removed border for cleaner look */
 }
 
 body {
-  background-image: url('/background.png');
-  background-repeat: no-repeat;
-  background-size: cover;
   margin: 0;
-  display: flex;
-  place-items: center;
+  padding: 0; /* Added to ensure no default padding */
   min-width: 320px;
   min-height: 100vh;
 }
 
+.main {
+  background-image: url('/bg-grey-syntra.svg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+}
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -51,22 +58,8 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
   button {
     background-color: #f9f9f9;
   }