refactor(parameter-pane): implement the new parameter pane

src/App.tsx

@@ -89,8 +89,7 @@ function App(): React.ReactElement {
     <ThemeProvider theme={{ light: lightTheme }}>
       <Main>
         <NavBarContainer>
-          <NavBar setPage={setPage} setCurThemeMode={setCurThemeMode}
-          />
+          <NavBar setPage={setPage} setCurThemeMode={setCurThemeMode} />
         </NavBarContainer>
         {mainPageComponent}
       </Main>

src/components/ParameterComponents/ChoiceParameter.tsx

@@ -1,49 +1,61 @@
-
 import styled from 'styled-components';
-import { useState } from "react";
+import { useState } from 'react';
 
 const Container = styled.div`
   margin: 5px 0;
-`
-const Row = styled.div``
-const Col = styled.span``
+`;
+const Row = styled.div``;
+const Col = styled.span``;
 const Button = styled.button`
   -webkit-appearance: none;
   appearance: none;
-  border:none;
+  border: none;
   padding: 5px 15px;
   border-radius: calc(1rem + 5px);
   color: black;
-  background: rgb(217,217,217);
+  background: rgb(217, 217, 217);
   margin-right: 15px;
 
   &.primary {
-    background: rgb(42,40,161);
+    background: rgb(42, 40, 161);
     color: white;
   }
-`
+`;
 
 export default function ChoiceParameter(props: {
-  onChange: (value: string)=> void,
-  values: string[],
-  initValue?: string,
+  onChange: (value: string) => void;
+  values: string[];
+  initValue?: string;
 }): React.ReactElement {
-
-  const [value, setValue] = useState(props.values[0])
-  if (props.initValue != null) {
-    setValue(props.initValue)
+  const [value, setValue] = useState(props.values[0]);
+  if (props.initValue) {
+    setValue(props.initValue);
   }
   // split values into rows of 3
-  const rows: string[][] = []
-  for (let i=0; i<props.values.length; i+=3) {
-    rows.push(props.values.slice(i*3, i*3+3))
+  const rows: string[][] = [];
+  for (let i = 0; i < props.values.length; i += 3) {
+    rows.push(props.values.slice(i * 3, i * 3 + 3));
   }
 
   return (
-  <Container>
-    {rows.map((row, i) => (<Row key={`row-${i}`}>{row.map((val, i) => (<Col key={`col-${i}`}>
-      <Button data-value={val} onClick={() => {setValue(val), props.onChange(val)}} className={val === value ? 'primary' : 'default'}>{val}</Button>
-    </Col>))}</Row>))}
-  </Container>
+    <Container>
+      {rows.map((row, i) => (
+        <Row key={`row-${i}`}>
+          {row.map((val, i) => (
+            <Col key={`col-${i}`}>
+              <Button
+                data-value={val}
+                onClick={() => {
+                  setValue(val), props.onChange(val);
+                }}
+                className={val === value ? 'primary' : 'default'}
+              >
+                {val}
+              </Button>
+            </Col>
+          ))}
+        </Row>
+      ))}
+    </Container>
   );
 }

src/components/ParameterComponents/DropdownParameter.tsx

@@ -1,33 +1,39 @@
 import styled from 'styled-components';
-import { useState } from "react";
+import { useState } from 'react';
 
 const Select = styled.select`
   -webkit-appearance: none;
   appearance: none;
   width: 15rem;
   display: block;
   border: black 1px solid;
-  background: rgb(217,217,217);
+  background: rgb(217, 217, 217);
   margin: 5px 0;
   padding: 0 5px;
   height: 24px;
-`
+`;
 
 export default function DropdownParameter(props: {
-  onChange: (value: string)=> void,
-  values: string[],
-  initValue?: string,
+  onChange: (value: string) => void;
+  values: string[];
+  initValue?: string;
 }): React.ReactElement {
-
-  const [value, setValue] = useState(props.values[0])
+  const [value, setValue] = useState(props.values[0]);
   if (props.initValue) {
-    setValue(props.initValue)
+    setValue(props.initValue);
   }
   return (
-  <Select value={value} onChange={e => (setValue(e.target.value), props.onChange(e.target.value))}>
-    {props.values.map((val, i) => (
-      <option key={i} value={val} >{val}</option>
-    ))}
-  </Select>
+    <Select
+      value={value}
+      onChange={(e) => (
+        setValue(e.target.value), props.onChange(e.target.value)
+      )}
+    >
+      {props.values.map((val, i) => (
+        <option key={i} value={val}>
+          {val}
+        </option>
+      ))}
+    </Select>
   );
 }

src/components/ParameterComponents/ParameterButton.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const ParamButton = styled.button`
+  border-radius: 20px;
+  height: 35px;
+  width: 100%;
+  padding: 10px 20px 7px 20px;
+  background-color: #d9d9d9;
+  color: #464646;
+  font-size: 14px;
+  border: none;
+  cursor: pointer;
+`;
+
+export default function ParameterButton(props: {
+  label: string;
+  onClick?: () => void;
+}) {
+  return <ParamButton onClick={props.onClick}>{props.label}</ParamButton>;
+}

src/components/ParameterComponents/ParameterLabel.tsx

@@ -1,15 +1,43 @@
-import { QuestionCircleOutlined } from "@ant-design/icons";
-import { Tooltip } from "antd"
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import styled from 'styled-components';
 
+const Lab = styled.div`
+  align-items: center;
+  height: 100%;
+  display: flex;
+  font-weight: bold;
+`;
+
+const Styled = styled(Tooltip)`
+  .ant-tooltip-inner {
+    font-weight: normal;
+    color: #cfcfcf;
+  }
+`;
 
 export default function ParameterLabel(props: {
-  title: string,
-  tooltip?: string,
+  title: string;
+  tooltip?: string;
 }): React.ReactElement {
-  const tooltip: React.ReactElement[] = []
+  const tooltip: React.ReactElement[] = [];
   if (props.tooltip) {
-    tooltip.push(<Tooltip placement="right" title={props.tooltip}><QuestionCircleOutlined /></Tooltip>)
+    tooltip.push(
+      <Styled>
+        <Tooltip
+          placement="right"
+          title={props.tooltip}
+          getPopupContainer={(tn) => tn}
+        >
+          <QuestionCircleOutlined />
+        </Tooltip>
+      </Styled>,
+    );
   }
-  const label = (<div>{props.title}&nbsp;&nbsp;{tooltip}</div>)
-  return label;
+
+  return (
+    <Lab>
+      {props.title}&nbsp;&nbsp;{tooltip}
+    </Lab>
+  );
 }

src/components/ParameterComponents/SliderParameter.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { useState } from "react";
+import { useState } from 'react';
 
 const Slider = styled.input`
   -webkit-appearance: none;
@@ -11,49 +11,57 @@
   display: block;
   margin: 5px 0;
 
-  &::-webkit-slider-runnable-track{
+  &::-webkit-slider-runnable-track {
     -webkit-appearance: none;
-    background: rgb(217,217,217);
-    height:100%;
+    background: rgb(217, 217, 217);
+    height: 100%;
   }
   &::-moz-range-track {
     -webkit-appearance: none;
-    background: rgb(217,217,217);
-    height:100%;
+    background: rgb(217, 217, 217);
+    height: 100%;
   }
-  &::-webkit-slider-thumb{
+  &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background: rgb(32,32,32);
-    height:100%;
-    width:10px;
-    border:none;
-    border-radius:0;
+    background: rgb(32, 32, 32);
+    height: 100%;
+    width: 10px;
+    border: none;
+    border-radius: 0;
   }
   &::-moz-range-thumb {
     -webkit-appearance: none;
-    background: rgb(32,32,32);
-    height:100%;
-    width:10px;
-    border:none;
-    border-radius:0;
+    background: rgb(32, 32, 32);
+    height: 100%;
+    width: 10px;
+    border: none;
+    border-radius: 0;
   }
-`
+`;
 
 export default function SliderParameter(props: {
-  onChange: (value: number)=> void,
-  lowerBound: number,
-  upperBound: number,
-  initValue?: number,
+  onChange: (value: number) => void;
+  lowerBound: number;
+  upperBound: number;
+  initValue?: number;
 }): React.ReactElement {
-
-  const [value, setValue] = useState(props.lowerBound)
+  const [value, setValue] = useState(props.lowerBound);
   if (props.initValue) {
-    setValue(props.initValue)
+    setValue(props.initValue);
   }
 
   return (
-  <>
-    <Slider type="range" min={props.lowerBound} max={props.upperBound} defaultValue={value} onChange={(e) => {const val = parseFloat(e.target.value); setValue(val), props.onChange(val)}} />
-  </>
+    <>
+      <Slider
+        type="range"
+        min={props.lowerBound}
+        max={props.upperBound}
+        defaultValue={value}
+        onChange={(e) => {
+          const val = parseFloat(e.target.value);
+          setValue(val), props.onChange(val);
+        }}
+      />
+    </>
   );
 }