refactor: UI fixes and alignments

- Updating logo - Fixing top spacing in pages and modals - Aligning icons
pokt-foundation · Nov 13, 2023 · cfcdb87 · cfcdb87
1 parent 36b6006
commit cfcdb87
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 40 deletions.
diff --git a/app/components/AccountDrawer/AccountDrawer.tsx b/app/components/AccountDrawer/AccountDrawer.tsx
@@ -11,7 +11,7 @@ import {
 import { Link, LinkProps, useFetcher } from "@remix-run/react"
 import React, { useState } from "react"
 import {
-  LuBook,
+  LuBookOpen,
   LuLeaf,
   LuLifeBuoy,
   LuSmile,
@@ -68,7 +68,7 @@ const drawerExternalLinks = [
   {
     label: "Documentation",
     to: DOCS_PATH,
-    icon: <LuBook size={18} />,
+    icon: <LuBookOpen size={18} />,
   },
   {
     label: "Support",

diff --git a/app/components/GroveLogo/GroveLogo.tsx b/app/components/GroveLogo/GroveLogo.tsx
@@ -8,51 +8,51 @@ function GroveLogo({ icon }: GroveLogoProps) {
   return icon ? (
     <svg
       fill="none"
-      height="18"
-      viewBox="0 0 14 18"
-      width="14"
+      height="28"
+      viewBox="0 0 22 28"
+      width="22"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g fill="#808B95">
-        <path d="M7 5.679V4.04a.6.6 0 00-.3-.52L4.477 2.233a.904.904 0 00-1.357.781V4.66a.6.6 0 00.302.52l2.224 1.28a.904.904 0 001.355-.782v.001z"></path>
-        <path d="M7 8.544V6.902a.6.6 0 01.299-.52l3.353-1.96a.903.903 0 011.36.78v1.677a.602.602 0 01-.302.521L8.355 9.326A.903.903 0 017 8.544z"></path>
-        <path d="M7 2.853v-1.64a.6.6 0 01.296-.518l.958-.567a.903.903 0 011.364.776v1.654a.601.601 0 01-.3.521l-.962.555A.904.904 0 017 2.853z"></path>
-        <path d="M6.987 11.376V9.739a.6.6 0 00-.298-.519L1.665 6.287a.904.904 0 00-1.36.779v1.666c0 .214.115.413.3.52l5.026 2.905a.904.904 0 001.356-.781z"></path>
-        <path d="M7 14.211v-1.635a.6.6 0 01.299-.52l5.03-2.936a.904.904 0 011.36.776l.005 1.659a.602.602 0 01-.3.523l-5.037 2.915A.904.904 0 017 14.212z"></path>
-        <path d="M6.229 14.6l.481.293c.18.109.29.303.29.514v1.69a.904.904 0 01-1.359.78l-.486-.284a.601.601 0 01-.299-.52v-1.702a.904.904 0 011.373-.77z"></path>
-      </g>
+      <path
+        d="M11 8.833V6.285a.934.934 0 00-.465-.81L7.08 3.474a1.403 1.403 0 00-2.107 1.214v2.56c0 .335.178.644.469.81l3.454 1.99a1.404 1.404 0 002.105-1.216L11 8.833zM11.001 13.29v-2.554c0-.333.176-.64.463-.808l5.21-3.048a1.403 1.403 0 012.112 1.212V10.7c0 .335-.18.645-.47.812l-5.211 2.996a1.403 1.403 0 01-2.103-1.218H11zM11.001 4.437V1.886c0-.331.174-.637.459-.805l1.487-.883a1.403 1.403 0 012.12 1.208V3.98a.936.936 0 01-.468.81l-1.492.863A1.403 1.403 0 0111 4.437zM10.98 17.695V15.15a.935.935 0 00-.462-.807L2.714 9.779a1.404 1.404 0 00-2.112 1.212v2.591c0 .334.178.643.467.81l7.805 4.518a1.403 1.403 0 002.107-1.215zM11.001 22.106v-2.544c0-.332.176-.64.463-.807l7.813-4.568a1.404 1.404 0 012.112 1.207l.01 2.58a.937.937 0 01-.467.813l-7.823 4.535A1.404 1.404 0 0111 22.107zM9.803 22.711l.748.455c.28.17.45.473.45.8v2.628a1.404 1.404 0 01-2.11 1.213l-.756-.44a.935.935 0 01-.464-.809V23.91a1.404 1.404 0 012.132-1.199z"
+        fill="#389F58"
+      ></path>
     </svg>
   ) : (
     <svg
       fill="none"
-      height="12"
-      viewBox="0 0 39 12"
-      width="39"
+      height="28"
+      viewBox="0 0 95 28"
+      width="95"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M24.754.658h-2.07l1.75 8.065h4.055l1.75-8.065h-2.043L26.708 7.53c-.054.249-.412.249-.465 0L24.753.658z"
-        fill="#808B95"
+        d="M10.4 8.833V6.285a.934.934 0 00-.467-.81L6.48 3.474a1.403 1.403 0 00-2.108 1.214v2.56c0 .335.178.644.469.81l3.454 1.99A1.404 1.404 0 0010.4 8.833v.001zM10.4 13.29v-2.554c0-.333.176-.64.463-.808l5.209-3.048a1.403 1.403 0 012.112 1.212V10.7c0 .335-.179.645-.469.812l-5.212 2.996A1.403 1.403 0 0110.4 13.29zM10.4 4.437V1.886c0-.331.174-.637.458-.805l1.488-.883a1.403 1.403 0 012.119 1.208V3.98a.935.935 0 01-.467.81l-1.493.863a1.403 1.403 0 01-2.106-1.216zM10.38 17.695V15.15a.935.935 0 00-.464-.807L2.112 9.779A1.404 1.404 0 000 10.991v2.591c0 .334.178.643.467.81l7.806 4.518a1.403 1.403 0 002.106-1.215zM10.4 22.106v-2.544c0-.332.176-.64.463-.807l7.812-4.568a1.404 1.404 0 012.112 1.207l.01 2.58a.936.936 0 01-.466.813l-7.824 4.535a1.404 1.404 0 01-2.108-1.215zM9.202 22.711l.748.455c.28.17.45.473.45.8v2.628a1.404 1.404 0 01-2.11 1.213l-.756-.44a.935.935 0 01-.465-.809V23.91a1.404 1.404 0 012.133-1.199z"
+        fill="#389F58"
+      ></path>
+      <path
+        d="M71.6 4.965h-3.494l2.954 13.64h6.847l2.955-13.64h-3.449L74.9 16.59c-.092.42-.695.42-.786 0L71.6 4.965z"
+        fill="#fff"
       ></path>
       <path
         clipRule="evenodd"
-        d="M22.524 4.692c0 2.227-1.815 4.032-4.055 4.032-2.24 0-4.055-1.805-4.055-4.032 0-2.228 1.816-4.033 4.055-4.033 2.24 0 4.055 1.805 4.055 4.033zm-1.88.017a2.152 2.152 0 01-2.158 2.146 2.153 2.153 0 01-2.158-2.146c0-1.184.966-2.146 2.158-2.146s2.159.961 2.159 2.146z"
-        fill="#808B95"
+        d="M67.836 11.788c0 3.766-3.066 6.82-6.849 6.82-3.782 0-6.847-3.053-6.847-6.82 0-3.767 3.066-6.82 6.847-6.82 3.783 0 6.85 3.053 6.85 6.82zm-3.174.03a3.637 3.637 0 01-3.645 3.628 3.638 3.638 0 01-3.645-3.628 3.638 3.638 0 013.645-3.63 3.637 3.637 0 013.645 3.63z"
+        fill="#fff"
         fillRule="evenodd"
       ></path>
       <path
-        d="M11.684 3.939v4.793H9.69V3.035A2.372 2.372 0 0112.068.67h2.346v1.983l-2.85-.014a.188.188 0 00-.171.268l.107.223c.121.253.184.528.184.809z"
-        fill="#808B95"
+        d="M49.529 10.514v8.107H46.16V8.985c0-2.21 1.799-4 4.017-4h3.962V8.34l-4.813-.024a.317.317 0 00-.29.454l.182.377c.205.427.31.893.31 1.367z"
+        fill="#fff"
       ></path>
       <path
         clipRule="evenodd"
-        d="M8.416.66H6.422v.985c0 .111-.144.164-.223.086A3.621 3.621 0 003.622.66C1.622.66 0 2.272 0 4.26c0 1.99 1.622 3.602 3.622 3.602a3.62 3.62 0 002.577-1.071c.079-.08.223-.026.223.085v2.127c0 .197-.16.355-.357.355H1.137v1.983h4.901a2.372 2.372 0 002.379-2.365V.66zM4.281 6.442c1.227 0 2.157-.927 2.157-2.147 0-1.22-.995-2.21-2.222-2.21-1.227 0-2.222.989-2.222 2.21 0 1.22 1.059 2.147 2.287 2.147z"
-        fill="#808B95"
+        d="M44.01 4.968h-3.369v1.668c0 .188-.243.277-.375.144a6.111 6.111 0 00-4.352-1.811c-3.379 0-6.117 2.727-6.117 6.09 0 3.365 2.738 6.092 6.116 6.092a6.11 6.11 0 004.353-1.812c.132-.133.375-.043.375.144v3.599a.6.6 0 01-.602.6h-8.321v3.354h8.276a4.009 4.009 0 004.017-4V4.968h-.001zm-6.984 9.782c2.072 0 3.644-1.569 3.644-3.632a3.746 3.746 0 00-3.753-3.738 3.745 3.745 0 00-3.753 3.738c0 2.063 1.789 3.632 3.862 3.632z"
+        fill="#fff"
         fillRule="evenodd"
       ></path>
       <path
-        d="M38.182 4.888c.153 0 .28-.12.278-.272a3.944 3.944 0 00-.089-.747c-.392-1.805-2.03-3.21-3.965-3.21a4.054 4.054 0 00-3.97 3.203 4.064 4.064 0 00-.085.83c0 2.227 1.815 4.032 4.055 4.032a4.056 4.056 0 003.817-2.666h-2.116c-.397.5-1.011.82-1.701.82a2.165 2.165 0 01-2.161-1.988h4.621l1.317-.001zm-1.93-1.02h-2.558c-.281 0-.56.064-.813.185l-.224.106a.189.189 0 01-.27-.167.603.603 0 01.087-.289c.047-.079.098-.155.155-.229.41-.536 1.07-.909 1.776-.909a2.169 2.169 0 011.992 1.305l-.146-.001z"
-        fill="#808B95"
+        d="M94.278 12.12a.46.46 0 00.47-.46 6.69 6.69 0 00-.15-1.264c-.663-3.053-3.429-5.428-6.698-5.428a6.839 6.839 0 00-3.384.89 6.833 6.833 0 00-3.318 4.526 6.89 6.89 0 00-.145 1.404c0 3.766 3.066 6.82 6.849 6.82a6.85 6.85 0 006.446-4.51h-3.574a3.658 3.658 0 01-2.873 1.386 3.657 3.657 0 01-3.65-3.361h7.805l2.224-.002h-.002zm-3.26-1.724h-4.32a3.19 3.19 0 00-1.371.311l-.38.18a.32.32 0 01-.456-.282c.002-.114.027-.265.149-.489.078-.133.165-.263.26-.387v-.002c.693-.904 1.809-1.536 3-1.536a3.663 3.663 0 013.364 2.207l-.246-.002z"
+        fill="#fff"
       ></path>
     </svg>
   )

diff --git a/app/components/LinkTabs/LinkTabs.tsx b/app/components/LinkTabs/LinkTabs.tsx
@@ -25,7 +25,7 @@ const LinkTabs = ({ routes }: LinkTabsProps) => {
             content: '""',
             display: "block",
             width: "100%",
-            borderBottom: `2px solid ${theme.colors.gray[8]}`,
+            borderBottom: `1px solid ${theme.colors.gray[8]}`,
             position: "absolute",
             bottom: 11,
             opacity: "50%",

diff --git a/app/components/ModalHeader/ModalHeader.tsx b/app/components/ModalHeader/ModalHeader.tsx
@@ -11,7 +11,7 @@ type ModalHeaderProps = {
 const ModalHeader = ({ title, subtitle, onDiscard }: ModalHeaderProps) => {
   return (
     <Box>
-      <Flex align="center" justify="space-between" mb={12} mt={32}>
+      <Flex align="center" justify="space-between" mb={12}>
         <Text fw={600} fz="21px">
           {title}
         </Text>

diff --git a/app/hooks/useModals.tsx b/app/hooks/useModals.tsx
@@ -18,6 +18,7 @@ const useModals = () => {
     overlayOpacity: 0.8,
     overlayBlur: 3,
     padding: "md",
+    styles: { body: { marginTop: "90px" } },
   }
 
   const openConfirmationModal = (modalProps: OpenConfirmModal) =>

diff --git a/app/routes/account.$accountId.$appId/view.tsx b/app/routes/account.$accountId.$appId/view.tsx
@@ -47,7 +47,7 @@ export default function AppIdLayoutView({
   ]
 
   return (
-    <Container fluid pt={16} px={0}>
+    <Container fluid px={0}>
       <Stack spacing="xl">
         <ApplicationHeader app={app} userRole={userRole} />
         <LinkTabs routes={routes} />

diff --git a/app/routes/account.$accountId.settings.plan/view.tsx b/app/routes/account.$accountId.settings.plan/view.tsx
@@ -1,10 +1,4 @@
-import {
-  Alert,
-  Box,
-  Button,
-  MantineTheme,
-  Stack,
-} from "@pokt-foundation/pocket-blocks"
+import { Alert, Box, Button, MantineTheme, Stack } from "@pokt-foundation/pocket-blocks"
 import { LuAlertCircle, LuRepeat } from "react-icons/lu"
 import AutoScalePlanLatestInvoiceCard from "./components/AutoScalePlanLatestInvoiceCard"
 import AutoScalePlanOverviewCard from "./components/AutoScalePlanOverviewCard"

diff --git a/app/routes/account.$accountId.settings/view.tsx b/app/routes/account.$accountId.settings/view.tsx
@@ -41,7 +41,7 @@ export default function AccountSettingsLayoutView({
   }, [account])
 
   return (
-    <Container fluid pt={16} px={0}>
+    <Container fluid px={0}>
       <Stack spacing={32}>
         <Stack spacing="xs">
           <Title order={3}>Settings & members</Title>

diff --git a/app/routes/account_.$accountId.$appId.update/route.tsx b/app/routes/account_.$accountId.$appId.update/route.tsx
@@ -146,7 +146,7 @@ export default function UpdateApp() {
   const { app } = data
 
   return fetcher.state === "idle" ? (
-    <Box maw={860} mx="auto">
+    <Box maw={860} mt={90} mx="auto">
       <AppForm
         app={app}
         onSubmit={(formData) =>

diff --git a/app/routes/account_.$accountId.create/components/AppForm/AppForm.tsx b/app/routes/account_.$accountId.create/components/AppForm/AppForm.tsx
@@ -61,7 +61,7 @@ const AppForm = ({ app, onSubmit }: AppFormProps) => {
   return (
     <Stack>
       <Box>
-        <Flex align="center" justify="space-between" my="32px">
+        <Flex align="center" justify="space-between">
           <Text fw={600} fz="21px">
             {label} your application
           </Text>

diff --git a/app/routes/user/route.tsx b/app/routes/user/route.tsx
@@ -77,7 +77,7 @@ export default function UserAccount() {
       hasPendingInvites={pendingAccounts.length > 0}
       user={user}
     >
-      <Container fluid pt={16} px={0}>
+      <Container fluid px={0}>
         <Button
           compact
           color="gray"