Proposals UI update (#579)

* initial commit

* new banner finished

* updated filter ui

* remove config tab

* proposal tab fixes - off chain poll added

* button validation

* fix styling discrepancy

---------

Co-authored-by: fabiolalombardim <lombardifabiola@hotmail.com>

src/modules/creator/deployment/steps/Config.tsx

@@ -61,7 +61,8 @@ const CustomFormikTextField = withStyles({
     "& .MuiInput-underline:after": {
       borderBottom: "none !important"
     }
-  }
+  },
+  disabled: {}
 })(FormikTextField)
 
 const CustomInputContainer = styled(Grid)(({ theme }) => ({

src/modules/explorer/components/AllProposalsList.tsx

@@ -1,19 +1,22 @@
-import { Collapse, Grid, IconButton, styled, Typography } from "@material-ui/core"
+import { Collapse, Grid, styled, Theme, Typography } from "@material-ui/core"
 import { ProposalItem } from "modules/explorer/pages/User"
-import React, { useCallback, useEffect, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 import { Proposal, ProposalStatus } from "services/services/dao/mappers/proposal/types"
 import { ContentContainer } from "./ContentContainer"
-import { Dropdown } from "./Dropdown"
+import { ProposalFilter } from "./ProposalsFilter"
 
 const TableContainer = styled(ContentContainer)({
   width: "100%"
 })
 
-const TableHeader = styled(Grid)({
+const TableHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({
   padding: "16px 46px",
-  minHeight: 34
-})
+  minHeight: 34,
+  [theme.breakpoints.down("sm")]: {
+    gap: 10
+  }
+}))
 
 const ProposalsFooter = styled(Grid)({
   padding: "16px 46px",
@@ -31,13 +34,13 @@ interface Props {
 
 export const AllProposalsList: React.FC<Props> = ({ currentLevel, proposals, title, showFooter, rightItem }) => {
   const [filteredProposal, setFilteredProposals] = useState(proposals)
-  const [filter, setFilter] = useState("All")
+  const [filter, setFilter] = useState("all")
 
   const filterProposals = useCallback(
     (status?: any) => {
-      if (status === "All") {
+      if (status === "all") {
         return setFilteredProposals(proposals)
-      } else if (status !== "All" && status !== undefined) {
+      } else if (status !== "all" && status !== undefined) {
         const filtered = proposals.filter(proposal => proposal["cachedStatus"]?.status === status)
         setFilteredProposals(filtered)
       } else {
@@ -65,32 +68,11 @@ export const AllProposalsList: React.FC<Props> = ({ currentLevel, proposals, tit
       <Grid container direction="column" wrap={"nowrap"}>
         <TableHeader item container justifyContent="space-between" alignItems="center">
           <Grid item>
-            <Typography variant="body2" style={{ fontWeight: "500" }} color="textPrimary">
+            <Typography variant="body1" style={{ fontWeight: "500" }} color="textPrimary">
               {title}
             </Typography>
           </Grid>
-          {proposals.length ? (
-            <Grid item>
-              <IconButton aria-label="expand row" size="small">
-                <Dropdown
-                  options={[
-                    { name: "All", value: "All" },
-                    { name: ProposalStatus.ACTIVE, value: ProposalStatus.ACTIVE },
-                    { name: ProposalStatus.DROPPED, value: ProposalStatus.DROPPED },
-                    { name: ProposalStatus.EXECUTABLE, value: ProposalStatus.EXECUTABLE },
-                    { name: ProposalStatus.EXECUTED, value: ProposalStatus.EXECUTED },
-                    { name: ProposalStatus.EXPIRED, value: ProposalStatus.EXPIRED },
-                    { name: ProposalStatus.NO_QUORUM, value: ProposalStatus.NO_QUORUM },
-                    { name: ProposalStatus.PASSED, value: ProposalStatus.PASSED },
-                    { name: ProposalStatus.PENDING, value: ProposalStatus.PENDING },
-                    { name: ProposalStatus.REJECTED, value: ProposalStatus.REJECTED }
-                  ]}
-                  value={"All"}
-                  onSelected={filterProposalByStatus}
-                />{" "}
-              </IconButton>
-            </Grid>
-          ) : null}
+          {proposals.length ? <ProposalFilter filterProposalByStatus={filterProposalByStatus} /> : null}
         </TableHeader>
         {filteredProposal.length ? (
           <Grid

src/modules/explorer/components/CodeCollapse.tsx

@@ -58,7 +58,7 @@ export const CodeCollapse: React.FC<Props> = ({ code }) => {
         >
           <ProposalCodeEditorInput
             label=""
-            containerStyle={{ marginTop: "8px" }}
+            containerstyle={{ marginTop: "8px" }}
             insertSpaces
             ignoreTabKey={false}
             tabSize={4}

src/modules/explorer/components/ConfigProposalFormLambda.tsx

@@ -39,7 +39,7 @@ const CheckIcon = styled(CheckOutlined)({
   fontSize: 169
 })
 
-const codeEditorContainerStyles = {
+const codeEditorcontainerstyles = {
   marginTop: "8px"
 }
 
@@ -87,7 +87,7 @@ enum LambdaProposalState {
 const codeEditorPlaceholder = {
   addLambda: `Write Michelson Code for Lambda's Implementation
 
-Eg:- 
+Eg:-
 
 (Left (Left (Pair (Pair { DROP ;
     NIL operation ;
@@ -102,7 +102,7 @@ Eg:-
   `,
   lambdaExecuteArgumentsCode: `Write Michelson Code for the input Paramerers of your Lambda
 
-Eg:- 
+Eg:-
 
 {
   "prim": "pair",
@@ -127,7 +127,7 @@ Eg:-
 `,
   lambdaExecuteParams: `Enter the values for the given params in a JSON/JavaScript Object format.
 
-Eg:- 
+Eg:-
 
 {
   xtz_transfer_type: {
@@ -259,7 +259,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
       <>
         <ProposalCodeEditorInput
           label="Implementation"
-          containerStyle={codeEditorContainerStyles}
+          containerstyle={codeEditorcontainerstyles}
           insertSpaces
           ignoreTabKey={false}
           tabSize={4}
@@ -282,7 +282,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
         </ProposalFormInput>
         <ProposalCodeEditorInput
           label="Implementation"
-          containerStyle={codeEditorContainerStyles}
+          containerstyle={codeEditorcontainerstyles}
           insertSpaces
           ignoreTabKey={false}
           tabSize={4}
@@ -305,7 +305,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
         </ProposalFormInput>
         <ProposalCodeEditorInput
           label="Implementation"
-          containerStyle={codeEditorContainerStyles}
+          containerstyle={codeEditorcontainerstyles}
           insertSpaces
           ignoreTabKey={false}
           tabSize={4}
@@ -318,7 +318,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
         />
         <ProposalCodeEditorInput
           label="Lambda Arguments Code"
-          containerStyle={codeEditorContainerStyles}
+          containerstyle={codeEditorcontainerstyles}
           insertSpaces
           ignoreTabKey={false}
           tabSize={4}
@@ -331,7 +331,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
         />
         <ProposalCodeEditorInput
           label="Lambda Params"
-          containerStyle={codeEditorContainerStyles}
+          containerstyle={codeEditorcontainerstyles}
           insertSpaces
           ignoreTabKey={false}
           tabSize={4}
@@ -352,7 +352,7 @@ export const ProposalFormLambda: React.FC<Props> = ({ open, handleClose, action
         open={open}
         onClose={handleClose}
         title={ProposalAction[action] + " Lambda Proposal"}
-        template="lambda"
+        template="md"
       >
         {state === LambdaProposalState.write_action ? (
           <>

src/modules/explorer/components/NavigationMenu.tsx

@@ -133,12 +133,6 @@ const getPages = (daoId: string): Page[] => [
     name: "User",
     icon: UserIcon,
     href: `/explorer/dao/${daoId}/user`
-  },
-  {
-    pathId: "config",
-    name: "Config",
-    icon: ConfigIcon,
-    href: `/explorer/dao/${daoId}/config`
   }
 ]