fix: remove second dropdown and updated UI as per figma

TERITORI · Feb 21, 2024 · a44886d · a44886d
1 parent 1580363
commit a44886d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 159 deletions.
diff --git a/packages/components/sorts/SearchInputRounded.tsx b/packages/components/sorts/SearchInputRounded.tsx
@@ -15,8 +15,8 @@ export const SearchInputRounded: React.FC<{
   return (
     <PrimaryBox
       style={{
-        padding: 10,
-        width: 313,
+        padding: layout.spacing_x1,
+        width: 471,
         flexDirection: "row",
         alignItems: "center",
         borderColor: neutral33,

diff --git a/packages/screens/Governance/GovernanceScreen.tsx b/packages/screens/Governance/GovernanceScreen.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
 
-import { PeriodDropdown } from "./components/dropdowns/PeriodDropdown";
-import { ProposalsDropdown } from "./components/dropdowns/ProposalsDropdown";
+import { StatesDropdown } from "./components/dropdowns/StatesDropdown";
 import { GovernanceBox } from "../../components/GovernanceBox/GovernanceBox";
 
 import { BrandText } from "@/components/BrandText";
@@ -69,8 +68,7 @@ export const GovernanceScreen: React.FC = () => {
           <SearchInputRounded
             handleChangeSearch={(text) => setSearchInput(text)}
           />
-          <PeriodDropdown onChange={setFilter} style={{ zIndex: 100 }} />
-          <ProposalsDropdown onChange={() => {}} style={{ zIndex: 100 }} />
+          <StatesDropdown onChange={setFilter} style={{ zIndex: 100 }} />
         </View>
       </View>
 

diff --git a/packages/screens/Governance/components/dropdowns/ProposalsDropdown.tsx b/packages/screens/Governance/components/dropdowns/ProposalsDropdown.tsx
diff --git a/...e/components/dropdowns/PeriodDropdown.tsx → ...e/components/dropdowns/StatesDropdown.tsx b/...e/components/dropdowns/PeriodDropdown.tsx → ...e/components/dropdowns/StatesDropdown.tsx
@@ -9,14 +9,14 @@ import { SVG } from "@/components/SVG";
 import { Separator } from "@/components/separators/Separator";
 import { SpacerColumn } from "@/components/spacer";
 import { useDropdowns } from "@/hooks/useDropdowns";
-import { neutral55, secondaryColor } from "@/utils/style/colors";
+import { neutral33, neutral55, secondaryColor } from "@/utils/style/colors";
 import { fontMedium14, fontSemibold14 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
 import { ProposalStatus } from "@/utils/types/gov";
 
 const def = {
   all: {
-    name: "All Periods",
+    name: "States in Period",
     filter: undefined,
   },
   voting: {
@@ -33,12 +33,12 @@ const def = {
   },
 };
 
-interface PeriodDropdownGovProps {
+interface StatesDropdownGovProps {
   style?: ViewStyle;
   onChange: (filter?: ProposalStatus) => void;
 }
 
-export const PeriodDropdown = ({ style, onChange }: PeriodDropdownGovProps) => {
+export const StatesDropdown = ({ style, onChange }: StatesDropdownGovProps) => {
   const [isDropdownOpen, setDropdownState, ref] = useDropdowns();
   const [selected, setSelected] = useState<keyof typeof def>("all");
 
@@ -55,7 +55,7 @@ export const PeriodDropdown = ({ style, onChange }: PeriodDropdownGovProps) => {
     >
       <View
         style={{
-          backgroundColor: "#292929",
+          backgroundColor: neutral33,
           borderWidth: 1,
           borderRadius: 8,
         }}
@@ -106,7 +106,7 @@ export const PeriodDropdown = ({ style, onChange }: PeriodDropdownGovProps) => {
                 width: "100%",
                 paddingHorizontal: layout.spacing_x1_5,
                 paddingBottom: layout.spacing_x1,
-                backgroundColor: "#292929",
+                backgroundColor: neutral33,
                 borderBottomEndRadius: 8,
                 borderBottomLeftRadius: 8,
                 alignItems: "flex-start",