feat: better styling for dropdown, better wrapping for verdict answer, remove verdict description

Author: kemuru

web/src/components/Verdict/Answer.tsx

@@ -1,17 +1,8 @@
 import React from "react";
-import styled from "styled-components";
 
 import { Answer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
 
-import { AnswerDescription, AnswerTitle, AnswerTitleAndDescription } from "../DisputePreview/DisputeContext";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-`;
+import { AnswerTitle, AnswerTitleAndDescription } from "../DisputePreview/DisputeContext";
 
 interface IAnswer {
   answer?: Answer;
@@ -24,12 +15,11 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
       {answer ? (
         <AnswerTitleAndDescription dir="auto">
           <AnswerTitle>{answer.title}</AnswerTitle>
-          <AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>
         </AnswerTitleAndDescription>
       ) : (
-        <Container>
+        <AnswerTitleAndDescription>
           {currentRuling !== 0 ? <small>Answer 0x{currentRuling}</small> : <small>Refuse to Arbitrate</small>}
-        </Container>
+        </AnswerTitleAndDescription>
       )}
     </>
   );

web/src/components/Verdict/FinalDecision.tsx

@@ -33,15 +33,15 @@ const Container = styled.div`
 
 const JuryContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   align-items: center;
   gap: 5px 7px;
-  flex: 1;
+  flex-wrap: wrap;
+
   h3 {
     line-height: 21px;
     margin-bottom: 0px;
   }
+
   > div {
     flex: 1;
   }

web/src/pages/Courts/TopSearch.tsx renamed to web/src/pages/Courts/CourtDetails/TopSearch.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from "react";
 import styled, { css } from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { Card, DropdownCascader, Searchbar } from "@kleros/ui-components-library";
 
@@ -12,9 +12,10 @@ import { useCourtTree, rootCourtToItems } from "queries/useCourtTree";
 
 import { responsiveSize } from "styles/responsiveSize";
 import { landscapeStyle } from "styles/landscapeStyle";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { StyledSkeleton } from "components/StyledSkeleton";
-import StakeMaintenanceButtons from "./StakeMaintenanceButton";
+import StakeMaintenanceButtons from "../StakeMaintenanceButton";
 
 const Container = styled.div`
   width: 100%;
@@ -57,6 +58,7 @@ const SearchResultsContainer = styled.div`
   position: absolute;
   margin-top: 45px;
   max-height: 400px;
+  border: 1px solid ${({ theme }) => theme.stroke};
   width: 100%;
   flex-direction: column;
   border-radius: 4px;
@@ -65,29 +67,54 @@ const SearchResultsContainer = styled.div`
   background-color: ${({ theme }) => theme.whiteBackground};
 `;
 
-const StyledCard = styled(Card)`
+const StyledCard = styled(Card)<{ selected: boolean }>`
+  ${hoverShortTransitionTiming}
   height: auto;
   width: 100%;
-  padding: 16px;
-  color: ${({ theme }) => theme.primaryText};
+  padding: ${({ selected }) => (selected ? "16px 13px" : "16px")};
   cursor: pointer;
+  border: none;
+  border-left: ${({ selected, theme }) => (selected ? `3px solid ${theme.primaryBlue}` : "none")};
+  background-color: ${({ selected, theme }) => (selected ? theme.mediumBlue : "transparent")};
+
+  :hover {
+    background-color: ${({ theme }) => theme.mediumBlue};
+  }
 `;
 
-function flattenCourts(court) {
-  return court ? [court, ...(court.children || []).flatMap(flattenCourts)] : [];
+const CourtParentSpan = styled.span`
+  color: ${({ theme }) => theme.secondaryText}EE;
+`;
+
+const CourtNameSpan = styled.span`
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+function flattenCourts(court, parent = null) {
+  const current = {
+    ...court,
+    parentName: parent?.name ?? null,
+  };
+  const children = (court.children || []).flatMap((child) => flattenCourts(child, current));
+  return [current, ...children];
 }
 
 const TopSearch: React.FC = () => {
   const { data } = useCourtTree();
   const navigate = useNavigate();
+  const { id: currentCourtId } = useParams();
   const items = useMemo(() => !isUndefined(data) && [rootCourtToItems(data.court)], [data]);
   const isUniversity = isKlerosUniversity();
   const [search, setSearch] = useState("");
-  const filteredCourts = useMemo(
-    () =>
-      data?.court ? flattenCourts(data.court).filter((c) => c.name.toLowerCase().includes(search.toLowerCase())) : [],
-    [data, search]
-  );
+
+  const filteredCourts = useMemo(() => {
+    if (!data?.court) return [];
+    const courts = flattenCourts(data.court).filter((c) => c.name.toLowerCase().includes(search.toLowerCase()));
+    const selectedCourt = courts.find((c) => c.id === currentCourtId);
+    if (!selectedCourt) return courts;
+
+    return [selectedCourt, ...courts.filter((c) => c.id !== currentCourtId)];
+  }, [data, search, currentCourtId]);
 
   return (
     <Container>
@@ -110,14 +137,15 @@ const TopSearch: React.FC = () => {
               <SearchResultsContainer>
                 {filteredCourts.map((court) => (
                   <StyledCard
-                    hover
                     key={court.id}
+                    selected={court.id === currentCourtId}
                     onClick={() => {
                       navigate(`/courts/${court.id}`);
                       setSearch("");
                     }}
                   >
-                    {court.name}
+                    {court.parentName && <CourtParentSpan>{court.parentName} / </CourtParentSpan>}
+                    <CourtNameSpan>{court.name}</CourtNameSpan>
                   </StyledCard>
                 ))}
               </SearchResultsContainer>

web/src/pages/Courts/CourtDetails/index.tsx

@@ -25,6 +25,7 @@ import { Divider } from "components/Divider";
 import Description from "./Description";
 import StakePanel from "./StakePanel";
 import Stats from "./Stats";
+import TopSearch from "./TopSearch";
 
 const Container = styled.div``;
 
@@ -113,6 +114,7 @@ const CourtDetails: React.FC = () => {
 
   return (
     <Container>
+      <TopSearch />
       <StyledCard>
         <CourtHeader>
           <CourtInfo>

web/src/pages/Courts/index.tsx

@@ -7,7 +7,6 @@ import { responsiveSize } from "styles/responsiveSize";
 import { Routes, Route, Navigate } from "react-router-dom";
 
 import CourtDetails from "./CourtDetails";
-import TopSearch from "./TopSearch";
 
 const Container = styled.div`
   width: 100%;
@@ -26,7 +25,6 @@ const Container = styled.div`
 const Courts: React.FC = () => {
   return (
     <Container>
-      <TopSearch />
       <Routes>
         <Route path="/:id/*" element={<CourtDetails />} />
         <Route path="*" element={<Navigate to="1" replace />} />