Add Header Design

.yarnrc.yml

@@ -1 +1 @@
-enableTransparentWorkspaces: false
+enableTransparentWorkspaces: false

packages/formstr-app/react-app.d.ts

@@ -0,0 +1,10 @@
+declare module "*.svg" {
+  import * as React from "react";
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}

packages/formstr-app/src/components/Header/index.css

@@ -1,6 +1,13 @@
 .header-menu::before {
-    content: none;
+  content: none;
+}
+
+.ant-menu-horizontal,
+.ant-menu-item::after,
+.ant-menu-submenu::after {
+  border: none !important;
+}
+
+.ant-menu-item-selected {
+  color: rgb(255, 42, 0) !important;
 }
-.header-menu {
-    justify-content: space-around;
-}

packages/formstr-app/src/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import { Layout, Menu, Row, Col } from "antd";
+import { Layout, Menu, Row, Col, Button } from "antd";
 import { Link, useLocation } from "react-router-dom";
 import "./index.css";
 import { ReactComponent as Logo } from "../../formstr.svg";
@@ -7,6 +7,10 @@ export const NostrHeader = () => {
   const location = useLocation();
   const { Header } = Layout;
   const getSelectedTab = () => {
+    console.log("locaaation", location.pathname);
+    if (location.pathname === "/myForms") {
+      return "/myForms";
+    }
     if (location.pathname === "/forms/new") {
       return "/forms/new";
     }
@@ -21,19 +25,38 @@ export const NostrHeader = () => {
         <Row justify="space-between">
           <Col md={3}>
             <div style={{ paddingTop: 15 }}>
-              <Logo />
+              <Link to="/myForms">
+                <Logo />
+              </Link>
             </div>
           </Col>
           <Col md={9}>
-            <Menu mode="horizontal" theme="light" defaultSelectedKeys={["2"]}>
+            <Menu
+              mode="horizontal"
+              theme="light"
+              defaultSelectedKeys={[getSelectedTab()]}
+            >
               <Menu.Item key="/global">
                 <Link to="global">Global Feed</Link>
               </Menu.Item>
               <Menu.Item key="/myForms">
                 <Link to="myForms">My Forms</Link>
               </Menu.Item>
               <Menu.Item key="/forms/new">
-                <Link to="forms/new">Create Form</Link>
+                <Button
+                  type="primary"
+                  style={{
+                    backgroundImage:
+                      "linear-gradient(to top, rgb(255, 81, 47) 0%, rgb(238, 132, 80) 99%, rgb(255, 42, 0) 100%)",
+                    transition: "0.5s",
+                    backgroundSize: "200% auto",
+                    color: "white",
+                    boxShadow: "0 0 20px #eee",
+                    borderRadius: "5px",
+                  }}
+                >
+                  <Link to="forms/new">Create Form</Link>
+                </Button>
               </Menu.Item>
             </Menu>
           </Col>

packages/formstr-app/src/components/MyForms/Drafts.tsx

@@ -39,64 +39,61 @@ export const Draft = (props: DraftProps) => {
       {(formDrafts || []).map((draft: Draft, index: number) => {
         return (
           <>
-            {formDrafts && (
-              <Card
-                title={draft.formSpec.name}
-                //style={gridStyle}
-                type="inner"
-                key={draft.tempId}
-                extra={
-                  <div style={{ display: "flex" }}>
-                    <div
-                      title="share"
-                      style={{ marginLeft: "10px", marginBottom: "15px" }}
+            <Card
+              title={draft.formSpec.name}
+              type="inner"
+              key={draft.tempId}
+              extra={
+                <div style={{ display: "flex" }}>
+                  <div
+                    title="share"
+                    style={{ marginLeft: "10px", marginBottom: "15px" }}
+                  >
+                    <Button
+                      icon={<ShareAltOutlined />}
+                      onClick={() => {
+                        setIsShareModalOpen(true);
+                        setShareDraft(draft);
+                      }}
+                      size="small"
+                    />
+                  </div>
+                  <div title="edit" style={{ marginLeft: "10px" }}>
+                    <Link
+                      to="/forms/new"
+                      state={{
+                        formSpec: draft.formSpec,
+                        tempId: draft.tempId,
+                      }}
+                      style={{ textDecoration: "none", color: "black" }}
                     >
-                      <Button
-                        icon={<ShareAltOutlined />}
-                        onClick={() => {
-                          setIsShareModalOpen(true);
-                          setShareDraft(draft);
-                        }}
-                        size="small"
-                      />
-                    </div>
-                    <div title="edit" style={{ marginLeft: "10px" }}>
-                      <Link
-                        to="/forms/new"
-                        state={{
-                          formSpec: draft.formSpec,
-                          tempId: draft.tempId,
-                        }}
-                        style={{ textDecoration: "none", color: "black" }}
-                      >
-                        <EditFilled />
-                      </Link>
-                    </div>
-                    <div title="delete" style={{ marginLeft: "10px" }}>
-                      <DeleteFilled onClick={() => handleDraftDelete(index)} />
-                    </div>
+                      <EditFilled />
+                    </Link>
+                  </div>
+                  <div title="delete" style={{ marginLeft: "10px" }}>
+                    <DeleteFilled onClick={() => handleDraftDelete(index)} />
                   </div>
-                }
-              >
-                {draft.formSpec.description || "No description"}
-              </Card>
-            )}
-            {!formDrafts && (
-              <div>
-                {" "}
-                <Text>
-                  Hi there! You don't have any drafts yet, click{" "}
-                  <Link to="/forms/new">
-                    {" "}
-                    <Button>Here</Button>{" "}
-                  </Link>{" "}
-                  to create one!
-                </Text>
-              </div>
-            )}
+                </div>
+              }
+            >
+              {draft.formSpec.description || "No description"}
+            </Card>
           </>
         );
       })}
+      {(!formDrafts || formDrafts.length === 0) && (
+        <div>
+          {" "}
+          <Text>
+            Hi there! You don't have any drafts yet, click{" "}
+            <Link to="/forms/new">
+              {" "}
+              <Button>Here</Button>{" "}
+            </Link>{" "}
+            to create one!
+          </Text>
+        </div>
+      )}
       <Modal
         title="Share Draft"
         open={isShareModalOpen}

packages/formstr-app/src/components/MyForms/index.js

@@ -1,10 +1,7 @@
 import { Card, Typography, Button, Modal } from "antd";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import {
-  constructFormUrl,
-  constructResponseUrl,
-} from "../../utils/utility";
+import { constructFormUrl, constructResponseUrl } from "../../utils/utility";
 import { MyFormTabsList, MyFormTab } from "../../constants";
 import { getPastUserForms } from "@formstr/sdk";
 import { Draft } from "./Drafts";
@@ -152,23 +149,24 @@ const MyForms = () => {
               {savedTab === "nostr" &&
                 (nostrForms || []).map((form) => {
                   let formCreds = form[1];
-                  return (<Card
-                    title={formCreds[0]}
-                    style={gridStyle}
-                    onClick={() => {
-                      setCurrentForm({
-                        name: formCreds[0],
-                        formUrl: constructFormUrl(formCreds[0]),
-                        responseUrl: constructResponseUrl(formCreds[1]),
-                      });
-                      setIsModalOpen(true);
-                    }}
-                    hoverable={true}
-                    type="inner"
-                  >
-                    Click to view urls
-                  </Card>
-                  )
+                  return (
+                    <Card
+                      title={formCreds[0].slice(0, 6)}
+                      style={gridStyle}
+                      onClick={() => {
+                        setCurrentForm({
+                          name: formCreds[0].slice(0, 6),
+                          formUrl: constructFormUrl(formCreds[0]),
+                          responseUrl: constructResponseUrl(formCreds[1]),
+                        });
+                        setIsModalOpen(true);
+                      }}
+                      hoverable={true}
+                      type="inner"
+                    >
+                      Click to view urls
+                    </Card>
+                  );
                 })}
             </Card>
           </div>

packages/formstr-app/src/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@700;800&family=Inter:wght@400;500;700&display=swap");
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

packages/formstr-app/src/index.js

@@ -2,39 +2,47 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 import { HashRouter, Routes, Route } from "react-router-dom";
 import NewForm from "./components/NewForm";
 import FillForm from "./components/FillForm";
 import ViewResponses from "./components/ViewResponses";
 import MyForms from "./components/MyForms";
 import { GlobalForms } from "./components/GlobalForms";
 import { DraftsController } from "./components/MyForms/DraftsController";
+import { ConfigProvider } from "antd";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
   <React.StrictMode>
-    <HashRouter>
-      <Routes>
-        <Route path="/" element={<App />}>
-          <Route path="global" element={<GlobalForms />} />
-          <Route path="myForms" element={<MyForms />} />
-          <Route path="forms/new" element={<NewForm />} />
-          <Route path="forms/fill" element={<FillForm />} />
-          <Route path="forms/:npub" element={<FillForm />} />
-          <Route path="forms/:nsec/responses" element={<ViewResponses />} />
-          <Route path="drafts/:encodedForm" element={<DraftsController />} />
-          <Route path="forms/responses" element={<ViewResponses />} />
-          <Route path="*" element={<NewForm />} />
-          <Route index element={<MyForms />} />
-        </Route>
-      </Routes>
-    </HashRouter>
+    <ConfigProvider
+      theme={{
+        token: {
+          fontFamily: "Anek Devanagari, ui-serif, Inter, ui-sans-serif",
+        },
+        components: {
+          Menu: {
+            colorItemTextSelected: "#FF2A00",
+          },
+        },
+      }}
+    >
+      <HashRouter>
+        <Routes>
+          <Route path="/" element={<App />}>
+            <Route path="global" element={<GlobalForms />} />
+            <Route path="myForms" element={<MyForms />} />
+            <Route path="forms/new" element={<NewForm />} />
+            <Route path="forms/fill" element={<FillForm />} />
+            <Route path="forms/:npub" element={<FillForm />} />
+            <Route path="forms/:nsec/responses" element={<ViewResponses />} />
+            <Route path="drafts/:encodedForm" element={<DraftsController />} />
+            <Route path="forms/responses" element={<ViewResponses />} />
+            <Route path="*" element={<NewForm />} />
+            <Route index element={<MyForms />} />
+          </Route>
+        </Routes>
+      </HashRouter>
+    </ConfigProvider>
   </React.StrictMode>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();