Merge pull request #266 from porters-xyz/design-review-updates

Design review updates
porters-xyz · May 21, 2024 · 13c833b · 13c833b
2 parents b47c931 + 08a7b65
commit 13c833b
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 39 deletions.
diff --git a/web-portal/backend/src/apps/apps.service.ts b/web-portal/backend/src/apps/apps.service.ts
@@ -101,12 +101,8 @@ export class AppsService {
 
   async updateApp(appId: string, updateAppDto: any) {
     const updatedApp = await this.prisma.client.app.update({
-      where: {
-        id: appId, deletedAt: {
-          not: null
-        }
-      },
-      data: updateAppDto,
+      where: {id: appId, deletedAt: { not : null }},
+      data: {...updateAppDto},
     });
 
     if (!updatedApp) {
@@ -123,7 +119,7 @@ export class AppsService {
     const deletedAt = new Date()
 
     const deletedApp = await this.prisma.client.app.update({
-      where: { id: appId },
+      where: { id: appId, deletedAt: { not: null } },
       data: { deletedAt },
     });
 

diff --git a/web-portal/frontend/components/apps/appRules.tsx b/web-portal/frontend/components/apps/appRules.tsx
@@ -23,12 +23,7 @@ const AppRules: React.FC<{ rule: Partial<IRuleType> }> = ({ rule }) => {
   const values = existingData?.map((item) => (
     <Pill
       key={item.ruleId}
-      size="lg"
       m={2}
-      bg={"blue"}
-      style={{
-        color: "white",
-      }}
     >
       {item.value
         ?.replace("P1D", "Daily")

diff --git a/web-portal/frontend/components/apps/forms/allowedOriginsForm.tsx b/web-portal/frontend/components/apps/forms/allowedOriginsForm.tsx
@@ -46,12 +46,7 @@ export default function AllowedOriginsForm() {
       key={item}
       withRemoveButton
       onRemove={() => handleValueRemove(item)}
-      size="lg"
       m={2}
-      bg={"blue"}
-      style={{
-        color: "white",
-      }}
     >
       {item}
     </Pill>
@@ -65,11 +60,9 @@ export default function AllowedOriginsForm() {
           placeholder="Enter a valid Url"
           type="url"
           inputWrapperOrder={["label", "input", "description"]}
-          style={{ width: "100%" }}
           {...form.getInputProps("url")}
         />
         <Button
-          h={36}
           onClick={() => {
             if (formValidation().hasErrors) return;
             setValue((current: any) => [form.values.url, ...current]),

diff --git a/web-portal/frontend/components/apps/forms/allowedUserAgentsForm.tsx b/web-portal/frontend/components/apps/forms/allowedUserAgentsForm.tsx
@@ -44,12 +44,7 @@ export default function AllowedUserAgentsForm() {
       key={item}
       withRemoveButton
       onRemove={() => handleValueRemove(item)}
-      size="lg"
       m={2}
-      bg={"blue"}
-      style={{
-        color: "white",
-      }}
     >
       {item}
     </Pill>
@@ -66,7 +61,6 @@ export default function AllowedUserAgentsForm() {
           {...form.getInputProps("userAgent")}
         />
         <Button
-          h={36}
           onClick={() => {
             if (formValidation().hasErrors) return;
             setValue((current: any) => [form.values.userAgent, ...current]),

diff --git a/web-portal/frontend/components/apps/forms/rateLimitForm.tsx b/web-portal/frontend/components/apps/forms/rateLimitForm.tsx
@@ -75,12 +75,7 @@ export default function RateLimitForm() {
       key={val}
       withRemoveButton
       onRemove={() => handleValueRemove(val)}
-      size="lg"
       m={2}
-      bg="blue"
-      style={{
-        color: "white",
-      }}
     >
       {val
         ?.replace("P1D", "Daily")
@@ -115,7 +110,6 @@ export default function RateLimitForm() {
           {...form.getInputProps("period")}
         />
         <Button
-          h={36}
           onClick={() => {
             if (formValidation().hasErrors) return;
             if (value.some((v) => v.includes(form.values.period))) {

diff --git a/web-portal/frontend/components/common/SearchableMultiSelect.tsx b/web-portal/frontend/components/common/SearchableMultiSelect.tsx
@@ -6,6 +6,8 @@ import {
   Pill,
   PillsInput,
   useCombobox,
+  ScrollArea,
+  Text
 } from "@mantine/core";
 
 export function SearchableMultiSelect({
@@ -37,9 +39,6 @@ export function SearchableMultiSelect({
       key={item}
       withRemoveButton
       onRemove={() => handleValueRemove(item)}
-      bg="blue"
-      c="#fff"
-      size="lg"
     >
       {item}
     </Pill>
@@ -61,9 +60,15 @@ export function SearchableMultiSelect({
       store={combobox}
       onOptionSubmit={handleValueSelect}
       withinPortal={true}
+      size="md"
     >
-      <Combobox.DropdownTarget>
-        <PillsInput onClick={() => combobox.openDropdown()}>
+      <Combobox.DropdownTarget >
+        <PillsInput onClick={() => combobox.openDropdown()} size="md" styles={{
+          input: {
+            backgroundColor:'#FEFCFA'
+          },
+
+        }}>
           <Pill.Group>
             {values}
 
@@ -89,14 +94,21 @@ export function SearchableMultiSelect({
         </PillsInput>
       </Combobox.DropdownTarget>
 
-      <Combobox.Dropdown>
+      <Combobox.Dropdown style={{
+        backgroundColor:'#FEFCFA'
+      }}>
+      <ScrollArea.Autosize mah={200} type="scroll">
         <Combobox.Options>
+        <Combobox.Header>
+                    <Text fz="xs">Scroll to see more networks</Text>
+                  </Combobox.Header>
           {options.length > 0 ? (
             options
           ) : (
             <Combobox.Empty>Nothing found...</Combobox.Empty>
           )}
         </Combobox.Options>
+        </ScrollArea.Autosize>
       </Combobox.Dropdown>
     </Combobox>
   );

diff --git a/web-portal/frontend/pages/login/index.tsx b/web-portal/frontend/pages/login/index.tsx
@@ -1,9 +1,10 @@
 import background from "@frontend/public/background.png";
-import { Button, Container, Title, Box, BackgroundImage } from "@mantine/core";
+import { Button, Container, Title, Box, BackgroundImage, Stack } from "@mantine/core";
 import Image from "next/image";
 import { useWeb3Modal } from "@web3modal/wagmi/react";
 import logo from "@frontend/public/logo.png";
 import WelcomeShape from "@frontend/components/login/welcomeshape";
+import poweredByPokt from "@frontend/public/powered-by-pokt.png";
 import { useAccount, useDisconnect } from "wagmi";
 import { useAtomValue } from "jotai";
 import { sessionAtom } from "@frontend/utils/atoms";
@@ -54,7 +55,14 @@ export default function Login() {
                   : "Connect Wallet"}
             </Button>
           </WelcomeShape>
+          <Container style={{
+            position: 'absolute',
+            bottom: 30
+          }}>
+            <Image src={poweredByPokt.src} width={poweredByPokt.width*0.35} height={poweredByPokt.height*0.35} alt="Powered By Pokt Network"/>
+          </Container>
         </Container>
+
       </BackgroundImage>
     </Box>
   );

diff --git a/web-portal/frontend/public/powered-by-pokt.png b/web-portal/frontend/public/powered-by-pokt.png
diff --git a/web-portal/frontend/utils/theme.ts b/web-portal/frontend/utils/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme, rem, Button, Input } from "@mantine/core";
+import { createTheme, rem, Button, Modal, TextInput, Select, NumberInput, Textarea, Stack, Pill } from "@mantine/core";
 import { Crimson_Text, Karla, Red_Rose } from "next/font/google";
 export const crimson = Crimson_Text({
   subsets: ["latin"],
@@ -19,6 +19,24 @@ export const redRose = Red_Rose({
   weight: ["400", "600", "500", "700"],
 });
 
+
+const InputProps =  {
+  size: 'md',
+  radius: 'xs',
+  style: {
+    width: '100%',
+    fontFamily: karla.style.fontFamily,
+  },
+  styles:{
+    input: {
+      fontSize: rem(15),
+      height: rem(36),
+      backgroundColor: '#FEFCFA',
+    },
+
+  }
+}
+
 export const theme = createTheme({
   white: "#F6EEE6",
   black: "#3C2B27",
@@ -68,5 +86,75 @@ export const theme = createTheme({
         },
       },
     }),
+    TextInput: TextInput.extend({
+        defaultProps:InputProps
+    }),
+    Textarea: Textarea.extend({
+        defaultProps: {
+          size: 'md',
+          radius: 'xs',
+          style: {
+            width: '100%',
+            fontFamily: karla.style.fontFamily,
+          },
+          styles:{
+            input: {
+              fontSize: rem(15),
+              backgroundColor: '#FEFCFA',
+              height: 100,
+            },
+          }
+        }
+    }),
+    NumberInput: NumberInput.extend({
+        defaultProps:InputProps
+    }),
+    Select: Select.extend({
+        defaultProps:{
+          size: 'md',
+          radius: 'xs',
+          styles:{
+            input:{
+              backgroundColor: '#FEFCFA',
+            },
+            dropdown: {
+              backgroundColor: '#FEFCFA',
+            }
+          }
+        }
+    }),
+    Pill: Pill.extend({
+      defaultProps:{
+        size: 'xl',
+        bg:"#F9DCBF",
+        style:{
+          color: "#3C2B27",
+          fontFamily: karla.style.fontFamily,
+          fontSize: rem(15),
+          fontWeight: 500
+        }
+      }
+    }),
+    Modal: Modal.extend({
+      defaultProps: {
+        size:'lg',
+        padding: '28 44 28 44',
+        style: {
+          position: 'relative',
+          fontFamily: karla.style.fontFamily,
+        },
+        styles:{
+          title: {
+            fontWeight: 700,
+            fontSize: rem(18),
+          },
+          close: {
+            position: 'fixed',
+            top: 12,
+            right: 12
+          }
+        }
+      }
+    })
   },
 });