update html opts

dashboard/src/components/porter/Select.tsx

@@ -25,20 +25,26 @@ const Select: React.FC<Props> = ({
   setValue,
 }) => {
   return (
-    <Block width={width}>
+    <Block width={width || ""}>
       {label && <Label>{label}</Label>}
       <SelectWrapper>
         <i className="material-icons">arrow_drop_down</i>
         <StyledSelect
           onChange={(e) => {
-            setValue(e.target.value);
+            if (setValue) {
+              setValue(e.target.value);
+            }
           }}
-          width={width}
-          height={height}
+          width={width || ""}
+          placeholder="Nothing"
+          height={height || ""}
           hasError={(error && true) || error === ""}
           disabled={disabled ? disabled : false}
-          value={value}
+          value={""}
         >
+          <Option value="" disabled selected>
+            Select your option
+          </Option>
           {options.map((option, i) => {
             return (
               <option value={option.value} key={i}>
@@ -61,6 +67,10 @@ const Select: React.FC<Props> = ({
 
 export default Select;
 
+const Option = styled.option`
+  color: red;
+`;
+
 const Block = styled.div<{
   width: string;
 }>`

dashboard/src/main/auth/Register.tsx

@@ -16,6 +16,7 @@ import Input from "components/porter/Input";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import Link from "components/porter/Link";
+import Select from "components/porter/Select";
 
 type Props = {
   authenticate: () => void;
@@ -289,6 +290,27 @@ const Register: React.FC<Props> = ({
               error={(companyNameError && "")}
             />
             <Spacer y={1} />
+            <Select
+              options={[
+                {
+                  label: "right",
+                  value: "UHOH",
+                },
+                {
+                  label: "ok",
+                  value: "OK",
+                }
+              ]}
+              label="Where did you hear about us? (optional)"
+              value={""}
+              setValue={(x) => {
+                setCompanyName(x);
+                setCompanyNameError(false);
+              }}
+              width="100%"
+              height="40px"
+            />
+            <Spacer y={1} />
             <Input
               type="email"
               placeholder="Email"

dashboard/webpack.config.js

@@ -53,7 +53,7 @@ module.exports = () => {
       template: path.resolve(__dirname, "src", "hosted.index.html"),
       intercomAppId: `${env.INTERCOM_APP_ID}`,
       hotjarId: `${env.HOTJAR_ID}`,
-      posthogKey: `${env.POSTHOG_API_KEY}`,
+      posthogKey: `${process.env.POSTHOG_API_KEY}`,
       intercomSrc: `${process.env.INTERCOM_SRC}`,
       segmentWriteKey: `${process.env.SEGMENT_WRITE_KEY}`,
       segmentKey: `${process.env.SEGMENT_PUBLIC_KEY}`,